/* Estils compartits per la PWA i el portal (components de Cdb.Ui).

   PUNT D'ENTRADA DELS TOKENS VISUALS. Els colors de marca (primari, navegació) venen del branding i els aplica TemaMarca a les variables
   --mud-palette-*; aquí hi ha la resta de tokens semàntics (superfícies, text, vores, focus, estats, espai, radi, elevació), que reutilitzen
   MudBlazor i els components propis. No s'hi posa cap color a les pàgines: es fa servir sempre un token.
   Contrastos (WCAG 2.2 AA, verificats a ContrastTokensTests): text/fons >= 4,5:1; vores de camp i focus >= 3:1. */
:root {
    /* Superfícies i text */
    --cdb-fons: #F4F6FA;
    --cdb-superficie: #FFFFFF;
    --cdb-superficie-suau: #E9EDF3;
    --cdb-text: #1B2433;
    --cdb-text-suau: #4A5568;
    --cdb-vora: #DCE2EA;
    --cdb-vora-control: #7A8699;
    /* Accent daurat: només per destacar categories o resultats; mai com a únic portador d'informació */
    --cdb-accent-daurat: #E9B44C;
    --cdb-text-sobre-daurat: #1B2433;
    /* Focus de teclat: doble anell, visible sobre superfícies clares i fosques */
    --cdb-focus: #0B5CAD;
    --cdb-focus-fosc: #FFFFFF;
    /* Estats: sempre amb text o icona al costat */
    --cdb-exit: #1B7A3E;
    --cdb-avis: #8A5A00;
    --cdb-error: #B3261E;
    --cdb-info: #0B5CAD;
    /* Espai (escala de 4/8 px), radi i elevació */
    --cdb-e1: .25rem; --cdb-e2: .5rem; --cdb-e3: .75rem; --cdb-e4: 1rem; --cdb-e6: 1.5rem; --cdb-e8: 2rem;
    --cdb-radi: 12px;
    --cdb-radi-petit: 8px;
    --cdb-elevacio: 0 1px 2px rgba(27, 36, 51, .08), 0 2px 8px rgba(27, 36, 51, .06);
    --cdb-objectiu-minim: 44px;
}

/* Punt de partida comú: cap pàgina no ha de tenir scroll horitzontal (390 px) i el text mai és més petit que el mínim. */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--cdb-fons); color: var(--cdb-text); overflow-x: hidden; }
.mud-main-content, main { min-width: 0; }
img, svg, video { max-width: 100%; }
:focus-visible { outline: 3px solid var(--cdb-focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cdb-focus-fosc); }
.mud-appbar :focus-visible, .mud-drawer-header :focus-visible { outline-color: var(--cdb-focus-fosc); box-shadow: none; }

/* Superfícies: vora fina i cantonada suau; l'ombra només per a allò que se superposa (menús, diàlegs). */
.mud-paper, .mud-card { border-radius: var(--cdb-radi); }
.mud-paper-outlined { border-color: var(--cdb-vora); }
.mud-card { box-shadow: none; border: 1px solid var(--cdb-vora); }
.mud-dialog { border-radius: var(--cdb-radi); box-shadow: var(--cdb-elevacio); }
.mud-popover { box-shadow: var(--cdb-elevacio); }

/* Jerarquia tipogràfica: títol de pàgina, subtítol amb context i metadades secundàries. */
.cdb-titol-pagina { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 0 0 var(--cdb-e1); }
.cdb-subtitol { color: var(--cdb-text-suau); font-size: 1rem; margin: 0 0 var(--cdb-e4); max-width: 70ch; }
.cdb-meta { color: var(--cdb-text-suau); font-size: .875rem; }
@media (min-width: 960px) { .cdb-titol-pagina { font-size: 1.75rem; } }

/* Botons i controls tàctils: àrea mínima de 44 px a les tasques freqüents. */
.mud-button-root { border-radius: var(--cdb-radi-petit); }
.mud-icon-button { min-width: var(--cdb-objectiu-minim); min-height: var(--cdb-objectiu-minim); }
.mud-nav-link { min-height: var(--cdb-objectiu-minim); }
.mud-link { display: inline-block; padding-block: .25rem; }
.mud-chip, .mud-chip .mud-chip-content { font-size: .875rem; }

/* Estats com a etiqueta: text + vora, mai només color. */
.cdb-estat { display: inline-flex; align-items: center; gap: var(--cdb-e1); padding: 2px var(--cdb-e2); border-radius: 999px; font-size: .875rem; font-weight: 600; border: 1px solid currentColor; }
.cdb-estat-exit { color: var(--cdb-exit); } .cdb-estat-avis { color: var(--cdb-avis); } .cdb-estat-error { color: var(--cdb-error); } .cdb-estat-info { color: var(--cdb-info); }

/* Taules a mòbil: el scroll horitzontal només dins d'un contenidor explícit, mai a la pàgina sencera. */
.cdb-taula-scroll { overflow-x: auto; max-width: 100%; }
@media (max-width: 599.98px) {
    .mud-table-container { overflow-x: auto; }
    .mud-dialog { margin: var(--cdb-e2); max-width: calc(100vw - 1rem); }
    .mud-container { padding-left: var(--cdb-e3); padding-right: var(--cdb-e3); }
}

/* Text només per a lectors de pantalla. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Accions de navegació de la capçalera: àrea activa d'almenys 44 × 44 px (WCAG 2.5.8), amb focus visible. No s'engrandeix cap altra icona. */
.accio-navegacio { min-width: 44px; min-height: 44px; border-radius: .5rem; position: relative; }
.accio-navegacio:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; box-shadow: none; }
/* L'estat actiu no depèn del color: fons més marcat i subratllat gruixut (a més d'aria-current="page"). */
.accio-navegacio-activa { background: rgba(255, 255, 255, .18); box-shadow: inset 0 -4px 0 currentColor; }

.capcalera-accions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .25rem; }
.activador-compte-boto { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; min-width: 44px; padding: 0 .25rem; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: .5rem; }
.activador-compte-boto:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; box-shadow: none; }

/* Si no hi caben, les accions passen a una segona fila: mai es retalla cap control ni hi ha scroll horitzontal. */
.barra-superior .mud-toolbar { flex-wrap: wrap; row-gap: .25rem; height: auto; padding-top: .25rem; padding-bottom: .25rem; }
@media (max-width: 599.98px) {
    .barra-superior .capcalera-accions { flex: 1 1 100%; justify-content: flex-start; }
    .barra-superior .mud-toolbar .mud-spacer { display: none; }
}

/* Partits del dia (portada pública). */
.partits-dia-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.partits-dia-nav { flex-wrap: nowrap; }
.partits-dia-nav p { min-width: 0; margin: 0; font-weight: 700; }
.partit-dia { border-left: 4px solid var(--mud-palette-primary); border-radius: var(--cdb-radi); }
.partit-dia-hora { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 4.5rem; }

/* Línia del temps de les fases d'una edició: horitzontal a escriptori, vertical en pantalles estretes. L'estat es llegeix en text, no només pel color. */
.fases { list-style: none; margin: 0; padding: 0; display: flex; gap: .75rem; }
.fases li { flex: 1 1 0; min-width: 0; }
.fase-pas { width: 100%; height: 100%; text-align: left; display: flex; flex-direction: column; gap: .25rem; padding: .75rem; background: var(--cdb-superficie); color: inherit; font: inherit;
    border: 2px solid var(--cdb-vora-control); border-radius: var(--cdb-radi); cursor: pointer; }
.fase-pas:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.fase-pas[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--mud-palette-primary); }
.fase-feta { border-style: solid; }
.fase-actual { border-width: 4px; border-color: var(--mud-palette-primary); font-weight: 600; }
.fase-futura { border-style: dashed; }
.fase-numero { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid currentColor; font-weight: 700; flex: none; }
.fase-estat { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 959.98px) {
    .fases { flex-direction: column; }
    .fase-pas { flex-direction: row; align-items: center; flex-wrap: wrap; }
}