/* ===========================================================================
   Temps d'espera al servei d'Urgencies - Hospital Sant Celoni Baix Montseny
   Full d'estils de la pantalla de la sala d'espera (Fase 2, 2026-08-18).

   Estructura visual, seguint la maqueta: pagina amb fons d'ones i, a sobre,
   panells blancs arrodonits per seccio (capcalera / nivells / peu) i el bloc
   blau dels temps al mig.

   Tot escala amb la mida de la finestra: la mida base es calcula amb clamp()
   a :root i la resta de mides van en rem. Sense dependencies externes.
   =========================================================================== */

:root {
    /* Mida base: 12px en un mobil, fins a 22px en un monitor de 1920 */
    font-size: clamp(12px, 0.85vw + 6px, 22px);

    /* Colors corporatius */
    --blau:          #0e7b8c;
    --blau-clar:     #e8f3f6;

    /* Degradat de les xifres grans: fosc a dalt a l'esquerra, mes clar a baix
       a la dreta, tal com surt al disseny. */
    --blau-degradat: linear-gradient(135deg, #0a6875 0%, #0e7b8c 45%, #1a9db0 100%);

    /* Colors dels nivells de triatge. Son els colors exactes del fons dels
       fitxers que va enviar el dissenyador, no una aproximacio. */
    --n1: #e52421;
    --n2: #f46f02;
    --n3: #fdc508;
    --n4: #029650;
    --n5: #005aaf;

    --text:          #24333b;
    --text-suau:     #5c7079;
    --fons:          #f4f9fb;
    --panell:        #ffffff;
    --vora:          #e4edf1;

    --radi:          0.75rem;
    --radi-gran:     0.85rem;
    --ombra:         0 1px 6px rgba(20, 60, 75, 0.06);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: "Segoe UI", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;

    /* Fons d'ones. Es un SVG local: no depen d'Internet i no pixela. */
    background: var(--fons) url("?r=%2Fimg%2Ffons.svg") center center / cover no-repeat fixed;
}

.icona { width: 1em; height: 1em; display: block; }

/* Icones que venen d'un PNG en comptes de vectorial. Es pinten com a mascara i
   el color surt de background-color, aixi hereten el color del CSS igual que
   les vectorials i no cal un fitxer per cada color de nivell. */
.icona--imatge {
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* --- Estructura general --------------------------------------------------- */

.pantalla {
    min-height: 100vh;
    max-width: 86rem;
    margin: 0 auto;
    padding: 0.9rem 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* En un monitor gran sobra alcada: es reparteix entre els blocs. */
    justify-content: space-between;
}

/* Panell blanc arrodonit, la base visual de cada seccio */
.capcalera,
.nivells,
.targeta {
    background: var(--panell);
    border: 1px solid var(--vora);
    border-radius: var(--radi-gran);
    box-shadow: var(--ombra);
}

/* --- Capcalera ------------------------------------------------------------ */

.capcalera {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 0.9rem 1.4rem;
}

.capcalera .logo {
    height: 5.9rem;
    width: auto;
    display: block;
    /* El logotip es un JPG amb fons blanc. Amb multiply el blanc desapareix
       sobre qualsevol fons clar, sense haver de retocar la imatge. */
    mix-blend-mode: multiply;
}

.capcalera .separador {
    width: 2px;
    height: 4.8rem;
    background: var(--vora);
    border-radius: 2px;
}

.titol {
    margin: 0 0 0.45rem;
    font-size: 2.3rem;
    line-height: 1.05;
    font-weight: 700;
    color: var(--blau);
    letter-spacing: -0.015em;
}

.subtitol {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.45;
    color: var(--text);
}

.actualitzacio {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--panell);
    border: 1px solid var(--vora);
    border-radius: var(--radi);
    box-shadow: var(--ombra);
    padding: 0.7rem 1.2rem;
    white-space: nowrap;
}

.actualitzacio .icona { font-size: 2.6rem; color: var(--blau); flex: none; }
.actualitzacio span   { display: block; font-size: 1rem; color: var(--text); }
.actualitzacio strong { display: block; font-size: 1.35rem; color: var(--blau); font-weight: 700; }

/* --- Avis de dades no disponibles ----------------------------------------- */

.avis-dades {
    margin: 0;
    background: #fff4d6;
    border: 1px solid #e3ab1f;
    border-left: 0.5rem solid #e3ab1f;
    border-radius: var(--radi);
    color: #7a5900;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.7rem 1.1rem;
    text-align: center;
}

/* --- Nivells de triatge --------------------------------------------------- */

.nivells { padding: 0.7rem; }

/* Els nivells van agrupats: (1 i 2) | (3) | (4 i 5). Entre grups hi ha d'haver
   mes aire que entre les targetes d'un mateix grup.

   Es fa amb dues columnes buides de separacio en comptes d'amb marges: si
   s'afegissin marges a les targetes 3 i 4, aquestes quedarien mes estretes que
   la resta. Aixi les cinc segueixen fent exactament 1fr.

   Separacio efectiva entre grups = 0.75rem + 0.55rem + 0.75rem = 2.05rem,
   contra els 0.75rem que hi ha dins d'un grup. */
.nivells-fila,
.llegendes {
    display: grid;
    grid-template-columns: 1fr 1fr 0.55rem 1fr 0.55rem 1fr 1fr;
    gap: 0.75rem;
}

.nivells-fila .nivell:nth-child(1) { grid-column: 1; }
.nivells-fila .nivell:nth-child(2) { grid-column: 2; }
.nivells-fila .nivell:nth-child(3) { grid-column: 4; }
.nivells-fila .nivell:nth-child(4) { grid-column: 6; }
.nivells-fila .nivell:nth-child(5) { grid-column: 7; }

.llegendes { margin-top: 0.5rem; }

.nivell {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 0.6rem;
    padding: 0.85rem 0.95rem;
    border-radius: var(--radi);
    color: #fff;
}

/* Les icones de Material tenen marge intern dins del seu llenç, aixi que cal
   pujar-les una mica per veure-les de la mida de la maqueta. */
.nivell .icona     { font-size: 4.4rem; flex: none; }
.nivell-etiqueta   { text-align: center; line-height: 1; }
.nivell-etiqueta b { display: block; font-size: 1.4rem; font-weight: 700; }
.nivell-etiqueta i { display: block; font-size: 3.5rem; font-style: normal; font-weight: 700; }

/* --fons-icona: color amb que una part de la icona ha de tapar-ne una altra.
   Al nivell 2, el cercle petit ha d'ocultar el traç del rellotge on es creuen. */
.nivell--1 { background: var(--n1); --fons-icona: var(--n1); }
.nivell--2 { background: var(--n2); --fons-icona: var(--n2); }
.nivell--3 { background: var(--n3); color: #fff; --fons-icona: var(--n3); }
.nivell--4 { background: var(--n4); --fons-icona: var(--n4); }
.nivell--5 { background: var(--n5); --fons-icona: var(--n5); }

/* El requadre de la llegenda es el contenidor sencer: la barra de color va
   DINS, a la part superior, i el text a sota. Columna per poder estirar el
   requadre i que els tres quedin igual d'alts. */
.llegenda {
    display: flex;
    flex-direction: column;
    background: var(--panell);
    border: 1px solid var(--vora);
    border-radius: var(--radi);
    overflow: hidden;
}

.llegenda--a { grid-column: 1 / 3; }
.llegenda--b { grid-column: 4; }
.llegenda--c { grid-column: 6 / 8; }

.llegenda .barra {
    display: block;
    height: 0.32rem;
    flex: none;
}

/* Barres de dos colors amb tall net al mig, no degradat */
.llegenda--a .barra { background: linear-gradient(90deg, var(--n1) 0 50%, var(--n2) 50% 100%); }
.llegenda--b .barra { background: var(--n3); }
.llegenda--c .barra { background: linear-gradient(90deg, var(--n4) 0 50%, var(--n5) 50% 100%); }

.llegenda p {
    margin: 0;
    flex: 1;
    /* La mida ve limitada per la llegenda del nivell 3: ha de cabre en dues
       linies dins d'una sola columna, com al disseny. */
    padding: 0.75rem 0.7rem;
    text-align: center;
    font-size: 1.12rem;
    line-height: 1.32;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Bloc destacat dels temps d'espera ------------------------------------ */

.temps {
    background: var(--blau);
    border-radius: var(--radi-gran);
    padding: 0.6rem;
}

.temps-titol {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 700;
    padding: 0.2rem 0.7rem 0.7rem;
}

.temps-titol .icona { font-size: 2.1rem; flex: none; }

.temps-cos {
    background: var(--panell);
    border-radius: var(--radi);
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    padding: 0.85rem 1rem;
}

.temps-separador { background: var(--vora); align-self: stretch; }

.servei {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    padding: 0 1rem;
}

.servei-icona {
    flex: none;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--blau);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.servei-icona .icona {
    font-size: 2.7rem;
    /* Color de fons per a les icones que necessiten tapar-se a si mateixes
       (les tiretes creuades de traumatologia). */
    --fons-icona: var(--blau);
}

.servei-nom {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--text);
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}

.servei-valor {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    color: var(--blau);
    line-height: 0.92;
}

.servei-xifra  { font-size: 4.9rem; font-weight: 700; letter-spacing: -0.035em; }
.servei-unitat { font-size: 1.55rem; font-weight: 600; color: var(--text); }

/* Quan no hi ha dades el text es llarg: que no desbordi */
.servei-valor.sense-dades .servei-xifra { font-size: 2.2rem; }

.servei-peu {
    display: block;
    font-size: 1.05rem;
    color: var(--text-suau);
    margin-top: 0.4rem;
}

/* --- Peu: comptadors ------------------------------------------------------ */

.peu {
    display: grid;
    grid-template-columns: 1fr 1.15fr 3.1fr;
    gap: 0.75rem;
}

.targeta {
    padding: 1.1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.targeta-icona {
    flex: none;
    width: 4.3rem;
    height: 4.3rem;
    border-radius: 50%;
    background: var(--panell);
    border: 3px solid #cfe3ea;
    color: var(--blau);
    display: flex;
    align-items: center;
    justify-content: center;
}

.targeta-icona .icona { font-size: 2.3rem; }

.targeta-text { font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.targeta-text .xifra {
    display: block;
    font-size: 2.95rem;
    font-weight: 700;
    color: var(--blau);
    line-height: 1.05;
    margin-top: 0.1rem;
}

.targeta--nivells { gap: 1.2rem; }
.targeta--nivells .targeta-text { flex: none; max-width: 12.5rem; }

.nivells-mini {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    flex: 1;
}

.mini {
    border-radius: 0.55rem;
    color: #fff;
    text-align: center;
    padding: 0.55rem 0.2rem 0.65rem;
    line-height: 1.1;
}

.mini b { display: block; font-size: 1rem; font-weight: 600; white-space: nowrap; }
.mini i { display: block; font-size: 3rem; font-style: normal; font-weight: 700; }

.mini--1 { background: var(--n1); }
.mini--2 { background: var(--n2); }
.mini--3 { background: var(--n3); }
.mini--4 { background: var(--n4); }
.mini--5 { background: var(--n5); }

/* --- Pantalles petites (tauletes i mobils) -------------------------------- */

@media (max-width: 900px) {
    .pantalla { padding: 0.7rem; gap: 0.7rem; }

    .capcalera {
        grid-template-columns: auto 1fr;
        row-gap: 0.8rem;
        padding: 0.9rem 1rem;
    }
    .capcalera .separador { display: none; }
    .capcalera .logo { height: 3.6rem; }
    .actualitzacio { grid-column: 1 / -1; justify-content: center; }

    .titol { font-size: 1.7rem; }
    .subtitol { font-size: 1rem; }

    .nivells-fila { grid-template-columns: repeat(2, 1fr); }
    .nivells-fila .nivell:nth-child(1),
    .nivells-fila .nivell:nth-child(2),
    .nivells-fila .nivell:nth-child(3),
    .nivells-fila .nivell:nth-child(4) { grid-column: auto; }
    .nivells-fila .nivell:last-child { grid-column: 1 / -1; }

    .llegendes { grid-template-columns: 1fr; }
    .llegenda--a, .llegenda--b, .llegenda--c { grid-column: auto; }

    .temps-cos { grid-template-columns: 1fr; }
    .temps-separador { height: 1px; width: auto; margin: 0.9rem 0; }
    .servei { justify-content: flex-start; }
    .servei-xifra { font-size: 3.4rem; }

    .peu { grid-template-columns: 1fr; }
    .targeta--nivells { flex-direction: column; align-items: stretch; }
    .targeta--nivells .targeta-text { max-width: none; }
    .nivells-mini { width: 100%; }
}

/* --- Degradat de les xifres grans ----------------------------------------- */
/* El disseny fa les xifres grans amb un degradat de teal, no amb un color pla.
   Va dins d'un @supports a proposit: si el navegador no admet background-clip
   sobre text, es queda el color pla de sempre en comptes de text invisible. */

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .servei-xifra,
    .targeta-text .xifra {
        background: var(--blau-degradat);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}