/**
 * MusikTaldeak PWA — Harmonic Kinetic M3 Design System
 * Sistema de diseño basado en Material Design 3
 * Fuentes: Plus Jakarta Sans (titulares), Inter (cuerpo), JetBrains Mono (tempo/técnico)
 */

/* =====================================================================
   1. IMPORTACIÓN DE FUENTES GOOGLE
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@600&family=Plus+Jakarta+Sans:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* =====================================================================
   2. TOKENS DE COLOR — HARMONIC KINETIC M3 (Modo Claro)
   ===================================================================== */
:root {
    /* Superficie */
    --color-surface:                  #faf8ff;
    --color-surface-dim:              #d9d9e3;
    --color-surface-bright:           #faf8ff;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low:    #f3f3fd;
    --color-surface-container:        #ededf7;
    --color-surface-container-high:   #e7e7f1;
    --color-surface-container-highest:#e2e2ec;
    --color-surface-variant:          #e2e2ec;
    --color-surface-tint:             #4555b7;
    --color-background:               #faf8ff;

    /* Sobre superficie */
    --color-on-surface:               #191b22;
    --color-on-surface-variant:       #454652;
    --color-on-background:            #191b22;
    --color-inverse-surface:          #2e3038;
    --color-inverse-on-surface:       #f0f0fa;

    /* Contorno */
    --color-outline:                  #767684;
    --color-outline-variant:          #c6c5d4;

    /* Primario — Indigo armónico */
    --color-primary:                  #1e3093;
    --color-on-primary:               #ffffff;
    --color-primary-container:        #3949ab;
    --color-on-primary-container:     #bbc3ff;
    --color-primary-fixed:            #dee0ff;
    --color-primary-fixed-dim:        #bbc3ff;
    --color-on-primary-fixed:         #000e5e;
    --color-on-primary-fixed-variant: #2c3c9e;
    --color-inverse-primary:          #bbc3ff;

    /* Secundario — Coral urgencia/acción */
    --color-secondary:                #b02e00;
    --color-on-secondary:             #ffffff;
    --color-secondary-container:      #fe5825;
    --color-on-secondary-container:   #541100;
    --color-secondary-fixed:          #ffdbd1;
    --color-secondary-fixed-dim:      #ffb5a0;
    --color-on-secondary-fixed:       #3b0900;
    --color-on-secondary-fixed-variant:#872100;

    /* Terciario — Verde confirmación/quórum */
    --color-tertiary:                 #00460e;
    --color-on-tertiary:              #ffffff;
    --color-tertiary-container:       #076018;
    --color-on-tertiary-container:    #87d982;
    --color-tertiary-fixed:           #a3f69c;
    --color-tertiary-fixed-dim:       #88d982;
    --color-on-tertiary-fixed:        #002204;
    --color-on-tertiary-fixed-variant:#005312;

    /* Error */
    --color-error:                    #ba1a1a;
    --color-on-error:                 #ffffff;
    --color-error-container:          #ffdad6;
    --color-on-error-container:       #93000a;

    /* =====================================================================
       3. TIPOGRAFÍA
       ===================================================================== */
    --font-jakarta:  'Plus Jakarta Sans', system-ui, sans-serif;
    --font-inter:    'Inter', system-ui, sans-serif;
    --font-mono:     'JetBrains Mono', 'Courier New', monospace;

    /* Tamaños y alturas de línea */
    --text-display-lg-size:   57px;
    --text-display-lg-lh:     64px;
    --text-display-lg-ls:     -0.25px;

    --text-headline-lg-size:  32px;
    --text-headline-lg-lh:    40px;

    --text-headline-lg-m-size:26px;
    --text-headline-lg-m-lh:  32px;

    --text-headline-md-size:  24px;
    --text-headline-md-lh:    32px;

    --text-headline-sm-size:  20px;
    --text-headline-sm-lh:    28px;

    --text-title-lg-size:     18px;
    --text-title-lg-lh:       24px;

    --text-title-md-size:     16px;
    --text-title-md-lh:       24px;

    --text-body-lg-size:      16px;
    --text-body-lg-lh:        24px;

    --text-body-md-size:      14px;
    --text-body-md-lh:        20px;

    --text-body-sm-size:      12px;
    --text-body-sm-lh:        16px;

    --text-label-lg-size:     14px;
    --text-label-lg-lh:       20px;

    --text-label-md-size:     12px;
    --text-label-md-lh:       16px;

    --text-label-tempo-size:  13px;
    --text-label-tempo-lh:    16px;
    --text-label-tempo-ls:    0.5px;

    /* =====================================================================
       4. ESPACIADO
       ===================================================================== */
    --space-xs:      0.25rem;  /* 4px  */
    --space-sm:      0.5rem;   /* 8px  */
    --space-md:      1rem;     /* 16px */
    --space-lg:      1.5rem;   /* 24px */
    --space-xl:      2rem;     /* 32px */

    --margin-mobile: 1rem;
    --margin-tablet: 2rem;
    --margin-desktop:3rem;

    --gutter:        1rem;
    --gutter-tablet: 1.5rem;
    --gutter-desktop:2rem;

    /* =====================================================================
       5. RADIO DE BORDES
       ===================================================================== */
    --radius-sm:     0.25rem;  /* 4px  */
    --radius-md:     0.5rem;   /* 8px  */
    --radius-lg:     0.75rem;  /* 12px — TailwindCSS xl */
    --radius-xl:     1rem;     /* 16px */
    --radius-2xl:    1.5rem;   /* 24px */
    --radius-full:   9999px;

    /* =====================================================================
       6. ELEVACIÓN (sombras tintadas con primario indigo)
       ===================================================================== */
    --shadow-lvl1:   0 1px 4px rgba(57,73,171,.06), 0 0 1px rgba(57,73,171,.08);
    --shadow-lvl2:   0 4px 12px rgba(57,73,171,.08), 0 1px 4px rgba(57,73,171,.06);
    --shadow-lvl3:   0 8px 24px rgba(26,28,35,.12),  0 2px 8px  rgba(57,73,171,.08);
    --shadow-lvl4:   0 16px 40px rgba(26,28,35,.16), 0 4px 12px rgba(57,73,171,.10);

    /* =====================================================================
       7. TRANSICIONES
       ===================================================================== */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   350ms ease;

    /* =====================================================================
       8. BARRA INFERIOR (safe-area para notch móvil)
       ===================================================================== */
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-top:    env(safe-area-inset-top, 0px);

    /* Altura de la topbar y navbar */
    --topbar-height:    64px;
    --navbar-height:    64px;
}

/* =====================================================================
   MODO OSCURO — variables alternativas
   ===================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-surface:                  #121318;
        --color-surface-dim:              #121318;
        --color-surface-bright:           #38393f;
        --color-surface-container-lowest: #0d0e14;
        --color-surface-container-low:    #1a1c23;
        --color-surface-container:        #1e2027;
        --color-surface-container-high:   #28292f;
        --color-surface-container-highest:#33343a;
        --color-background:               #121318;

        --color-on-surface:               #e3e2ec;
        --color-on-surface-variant:       #c6c5d4;
        --color-on-background:            #e3e2ec;
        --color-inverse-surface:          #e3e2ec;
        --color-inverse-on-surface:       #2e3038;

        --color-outline:                  #90909e;
        --color-outline-variant:          #454652;

        --color-primary:                  #bbc3ff;
        --color-on-primary:               #001070;
        --color-primary-container:        #0022a6;
        --color-on-primary-container:     #dee0ff;
        --color-primary-fixed:            #dee0ff;
        --color-primary-fixed-dim:        #bbc3ff;

        --color-secondary:                #ffb5a0;
        --color-on-secondary:             #5f1700;
        --color-secondary-container:      #872100;
        --color-on-secondary-container:   #ffdbd1;

        --color-tertiary:                 #88d982;
        --color-on-tertiary:              #003909;
        --color-tertiary-container:       #005312;
        --color-on-tertiary-container:    #a3f69c;

        --color-error:                    #ffb4ab;
        --color-on-error:                 #690005;
        --color-error-container:          #93000a;
        --color-on-error-container:       #ffdad6;
    }
}

/* =====================================================================
   9. RESET & BASE
   ===================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

html, body {
    width: 100%;
    min-height: 100vh;
    overscroll-behavior: none;
}

body {
    font-family: var(--font-inter);
    font-size: var(--text-body-md-size);
    line-height: var(--text-body-md-lh);
    font-weight: 400;
    color: var(--color-on-surface);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ocultar scrollbar manteniendo funcionalidad */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button { cursor: pointer; border: none; background: none; font-family: inherit; }

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* Selección de texto */
::selection {
    background-color: var(--color-primary-fixed);
    color: var(--color-on-primary-fixed);
}

/* =====================================================================
   10. CLASES DE TIPOGRAFÍA
   ===================================================================== */
.text-display-lg {
    font-family: var(--font-jakarta);
    font-size: var(--text-display-lg-size);
    line-height: var(--text-display-lg-lh);
    letter-spacing: var(--text-display-lg-ls);
    font-weight: 700;
}

.text-headline-lg {
    font-family: var(--font-jakarta);
    font-size: var(--text-headline-lg-size);
    line-height: var(--text-headline-lg-lh);
    font-weight: 700;
}

.text-headline-lg-mobile {
    font-family: var(--font-jakarta);
    font-size: var(--text-headline-lg-m-size);
    line-height: var(--text-headline-lg-m-lh);
    font-weight: 700;
}

.text-headline-md {
    font-family: var(--font-jakarta);
    font-size: var(--text-headline-md-size);
    line-height: var(--text-headline-md-lh);
    font-weight: 600;
}

.text-headline-sm {
    font-family: var(--font-jakarta);
    font-size: var(--text-headline-sm-size);
    line-height: var(--text-headline-sm-lh);
    font-weight: 600;
}

.text-title-lg {
    font-family: var(--font-jakarta);
    font-size: var(--text-title-lg-size);
    line-height: var(--text-title-lg-lh);
    font-weight: 600;
}

.text-title-md {
    font-family: var(--font-jakarta);
    font-size: var(--text-title-md-size);
    line-height: var(--text-title-md-lh);
    font-weight: 600;
}

.text-body-lg {
    font-family: var(--font-inter);
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-lh);
    font-weight: 400;
}

.text-body-md {
    font-family: var(--font-inter);
    font-size: var(--text-body-md-size);
    line-height: var(--text-body-md-lh);
    font-weight: 400;
}

.text-body-sm {
    font-family: var(--font-inter);
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-sm-lh);
    font-weight: 400;
}

.text-label-lg {
    font-family: var(--font-inter);
    font-size: var(--text-label-lg-size);
    line-height: var(--text-label-lg-lh);
    font-weight: 500;
}

.text-label-md {
    font-family: var(--font-inter);
    font-size: var(--text-label-md-size);
    line-height: var(--text-label-md-lh);
    font-weight: 500;
}

.text-label-tempo {
    font-family: var(--font-mono);
    font-size: var(--text-label-tempo-size);
    line-height: var(--text-label-tempo-lh);
    letter-spacing: var(--text-label-tempo-ls);
    font-weight: 600;
}

/* =====================================================================
   11. LAYOUT PRINCIPAL PWA — SHELL DE 3 CAPAS
   ===================================================================== */
.pwa-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-surface);
}

/* Barra superior fija */
.pwa-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: calc(var(--topbar-height) + var(--safe-area-top));
    padding-top: var(--safe-area-top);
    background: rgba(250,248,255, 0.92);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 1px 8px rgba(25,27,34,.04);
    border-bottom: 1px solid rgba(198,197,212,.3);
}

.pwa-topbar__inner {
    height: var(--topbar-height);
    padding: 0 var(--margin-mobile);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.pwa-topbar__brand {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pwa-topbar__brand-label {
    font-family: var(--font-inter);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-primary);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.pwa-topbar__band-selector {
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    padding: var(--space-xs) var(--space-xs);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    min-width: 0;
}

.pwa-topbar__band-selector:hover,
.pwa-topbar__band-selector:active {
    background: var(--color-surface-container-high);
}

.pwa-topbar__band-name {
    font-family: var(--font-jakarta);
    font-size: var(--text-title-md-size);
    font-weight: 600;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.pwa-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

/* Contenido principal */
.pwa-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--topbar-height) + var(--safe-area-top));
    padding-bottom: calc(var(--navbar-height) + var(--safe-area-bottom) + var(--space-sm));
    background: var(--color-surface);
}

/* Barra de navegación inferior fija */
.pwa-navbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: calc(var(--navbar-height) + var(--safe-area-bottom));
    padding-bottom: var(--safe-area-bottom);
    background: rgba(250,248,255, 0.92);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 -4px 16px rgba(25,27,34,.05);
    border-top: 1px solid rgba(198,197,212,.3);
}

.pwa-navbar__inner {
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 var(--space-xs);
}

.pwa-navbar__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 100%;
    color: var(--color-on-surface-variant);
    transition: color var(--transition-fast);
    cursor: pointer;
    position: relative;
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
}

.pwa-navbar__tab:hover {
    color: var(--color-on-surface);
}

.pwa-navbar__tab-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 28px;
    border-radius: var(--radius-full);
    transition: background var(--transition-normal), color var(--transition-normal);
}

.pwa-navbar__tab-label {
    font-family: var(--font-inter);
    font-size: var(--text-label-md-size);
    font-weight: 500;
    margin-top: 2px;
    transition: font-weight var(--transition-fast), color var(--transition-fast);
}

.pwa-navbar__tab--active {
    color: var(--color-primary);
}

.pwa-navbar__tab--active .pwa-navbar__tab-pill {
    background: var(--color-primary-fixed);
    color: var(--color-on-primary-fixed);
}

.pwa-navbar__tab--active .pwa-navbar__tab-label {
    font-weight: 600;
    color: var(--color-primary);
}

/* =====================================================================
   12. COMPONENTES — BOTONES
   ===================================================================== */

/* Botón primario */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    height: 48px;
    padding: 0 24px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-inter);
    font-size: var(--text-label-lg-size);
    font-weight: 600;
    line-height: var(--text-label-lg-lh);
    box-shadow: var(--shadow-lvl2);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

.btn-primary:hover {
    background: #1a2980;
    box-shadow: var(--shadow-lvl3);
}

.btn-primary:active {
    transform: scale(0.97);
    box-shadow: var(--shadow-lvl1);
}

/* Botón secundario / urgente */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    height: 48px;
    padding: 0 24px;
    border-radius: var(--radius-full);
    background: var(--color-secondary-container);
    color: var(--color-on-primary);
    font-family: var(--font-inter);
    font-size: var(--text-label-lg-size);
    font-weight: 600;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
    border: none;
    box-shadow: var(--shadow-lvl2);
}

.btn-secondary:active { transform: scale(0.97); }

/* Botón de tono */
.btn-tonal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    height: 40px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-full);
    background: var(--color-surface-container);
    color: var(--color-on-surface);
    font-family: var(--font-inter);
    font-size: var(--text-label-lg-size);
    font-weight: 500;
    transition: background var(--transition-fast), transform var(--transition-fast);
    cursor: pointer;
    border: none;
}

.btn-tonal:hover { background: var(--color-surface-container-high); }
.btn-tonal:active { transform: scale(0.97); }

/* Botón circular de icono */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: none;
    color: var(--color-on-surface-variant);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.btn-icon:hover {
    background: var(--color-surface-container);
    color: var(--color-on-surface);
}

.btn-icon:active { transform: scale(0.92); }

/* FAB — Floating Action Button del director */
.fab-director {
    position: fixed;
    bottom: calc(var(--navbar-height) + var(--safe-area-bottom) + var(--space-md));
    right: var(--margin-mobile);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    height: 56px;
    padding: 0 var(--space-md) 0 var(--space-sm);
    border-radius: var(--radius-xl);
    background: var(--color-secondary-container);
    color: var(--color-on-secondary);
    font-family: var(--font-jakarta);
    font-size: var(--text-title-md-size);
    font-weight: 700;
    box-shadow: var(--shadow-lvl3);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
    border: none;
}

.fab-director:hover { box-shadow: var(--shadow-lvl4); }
.fab-director:active { transform: scale(0.95); }

/* =====================================================================
   13. COMPONENTES — TARJETAS
   ===================================================================== */
.card {
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-xl);
    padding: var(--space-md);
    box-shadow: var(--shadow-lvl1);
    transition: box-shadow var(--transition-normal);
}

.card:hover { box-shadow: var(--shadow-lvl2); }

/* Tarjeta de deialdia (convocatoria) con borde lateral de estado */
.deialdia-card {
    background: var(--color-surface-container-low);
    border-radius: var(--radius-xl);
    padding: var(--space-md);
    box-shadow: var(--shadow-lvl1);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-normal);
}

.deialdia-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--color-outline-variant);
}

.deialdia-card--baieztatuta::before { background: var(--color-tertiary); }
.deialdia-card--zain::before        { background: var(--color-secondary-container); }
.deialdia-card--urgentea::before    { background: var(--color-secondary); }
.deialdia-card--sekzioa::before     { background: var(--color-primary-container); }

/* =====================================================================
   14. COMPONENTES — CHIPS DE FILTRO
   ===================================================================== */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    height: 36px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-full);
    background: var(--color-surface-container-low);
    color: var(--color-on-surface);
    font-family: var(--font-inter);
    font-size: var(--text-label-lg-size);
    font-weight: 500;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.filter-chip:hover { background: var(--color-surface-container); }
.filter-chip:active { transform: scale(0.95); }

.filter-chip--active {
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-lvl1);
}

.filter-chip--active:hover { background: #1a2980; }

/* =====================================================================
   15. COMPONENTES — CHIPS DE ASISTENCIA (3 estados)
   ===================================================================== */
.asistentzia-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    height: 40px;
    padding: 0 var(--space-sm) 0 var(--space-xs);
    border-radius: var(--radius-full);
    font-family: var(--font-inter);
    font-size: var(--text-label-lg-size);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.asistentzia-chip:active { transform: scale(0.95); }

.asistentzia-chip--etorriko {
    background: var(--color-tertiary);
    color: var(--color-on-tertiary);
    box-shadow: var(--shadow-lvl1);
}

.asistentzia-chip--zalantzan {
    background: #FFA000;
    color: #fff;
}

.asistentzia-chip--ezin {
    background: var(--color-secondary-container);
    color: var(--color-on-primary);
}

/* =====================================================================
   16. COMPONENTES — MEDIDOR DE BALANCE ACÚSTICO
   ===================================================================== */
.balanze-barra {
    width: 100%;
}

.balanze-barra__track {
    height: 8px;
    background: var(--color-surface-container);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.balanze-barra__fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
    background: var(--color-primary);
}

.balanze-barra__fill--ok      { background: var(--color-tertiary); }
.balanze-barra__fill--ertaina { background: var(--color-primary-container); }
.balanze-barra__fill--alerta  { background: var(--color-secondary-container); }
.balanze-barra__fill--kritikoa{ background: var(--color-secondary); }

/* Indicador de pulso (live) */
.pulso-bizia {
    position: relative;
    display: inline-flex;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.pulso-bizia__anillo {
    animation: ping 1.2s cubic-bezier(0,0,.2,1) infinite;
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    background: var(--color-tertiary-container);
    opacity: 0.75;
}

.pulso-bizia__nukleoa {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-tertiary);
}

@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

/* =====================================================================
   17. COMPONENTES — BOTTOM SHEET MODAL
   ===================================================================== */
.bottom-sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(46,48,56, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.bottom-sheet-scrim.aktibo {
    opacity: 1;
    pointer-events: auto;
}

.bottom-sheet-panel {
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    box-shadow: var(--shadow-lvl4);
    max-height: 85vh;
    overflow-y: auto;
    padding-bottom: calc(var(--space-lg) + var(--safe-area-bottom));
    transform: translateY(100%);
    transition: transform var(--transition-slow);
}

.bottom-sheet-scrim.aktibo .bottom-sheet-panel {
    transform: translateY(0);
}

.bottom-sheet-grabber {
    width: 100%;
    padding: var(--space-sm) 0 var(--space-xs);
    display: flex;
    justify-content: center;
}

.bottom-sheet-grabber__barra {
    width: 40px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-outline-variant);
}

.bottom-sheet-content {
    padding: var(--space-xs) var(--margin-mobile) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* =====================================================================
   18. COMPONENTES — TOAST / SNACKBAR
   ===================================================================== */
.toast {
    position: fixed;
    top: calc(var(--topbar-height) + var(--safe-area-top) + var(--space-sm));
    left: var(--margin-mobile);
    right: var(--margin-mobile);
    z-index: 300;
    background: var(--color-inverse-surface);
    color: var(--color-inverse-on-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-md);
    box-shadow: var(--shadow-lvl4);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    transform: translateY(calc(-100% - var(--space-xl)));
    opacity: 0;
    transition: transform var(--transition-slow), opacity var(--transition-slow);
    pointer-events: none;
}

.toast.bistaratua {
    transform: translateY(0);
    opacity: 1;
}

/* =====================================================================
   19. COMPONENTES — BADGE / PILLA DE NOTIFICACIÓN
   ===================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    font-family: var(--font-inter);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* =====================================================================
   20. COMPONENTES — AVATAR / IRUDI
   ===================================================================== */
.avatar {
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.avatar--sm  { width: 32px; height: 32px; }
.avatar--md  { width: 40px; height: 40px; }
.avatar--lg  { width: 56px; height: 56px; }
.avatar--xl  { width: 72px; height: 72px; }

/* Indicador de estado sobre el avatar */
.avatar-wrapper {
    position: relative;
    display: inline-flex;
}

.avatar-estado {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-surface);
}

.avatar-estado--presente { background: var(--color-tertiary); }
.avatar-estado--arreta   { background: var(--color-secondary); }
.avatar-estado--baja     { background: var(--color-outline); }

/* =====================================================================
   21. COMPONENTES — CAMPO DE BÚSQUEDA
   ===================================================================== */
.bilaketa-input {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-md) 0 44px;
    border-radius: var(--radius-full);
    background: var(--color-surface-container-high);
    border: none;
    font-family: var(--font-inter);
    font-size: var(--text-body-md-size);
    color: var(--color-on-surface);
    outline: none;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.bilaketa-input::placeholder { color: var(--color-outline); }
.bilaketa-input:focus {
    background: var(--color-surface-container-lowest);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.bilaketa-wrapper {
    position: relative;
    width: 100%;
}

.bilaketa-wrapper .bilaketa-icono {
    position: absolute;
    left: var(--space-sm);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-on-surface-variant);
    pointer-events: none;
}

/* =====================================================================
   22. COMPONENTES — ACORDEÓN DE SECCIONES
   ===================================================================== */
.sekzio-akordoia {
    background: var(--color-surface-container-low);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lvl1);
}

.sekzio-akordoia__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
    text-align: left;
}

.sekzio-akordoia__toggle:active {
    background: var(--color-surface-container);
}

.sekzio-akordoia__flecha {
    font-size: 22px;
    color: var(--color-on-surface-variant);
    transition: transform var(--transition-normal);
    flex-shrink: 0;
}

.sekzio-akordoia.irekita .sekzio-akordoia__flecha {
    transform: rotate(180deg);
}

.sekzio-akordoia__edukia {
    display: none;
    padding: var(--space-xs) var(--space-md) var(--space-md);
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.sekzio-akordoia.irekita .sekzio-akordoia__edukia {
    display: flex;
}

/* =====================================================================
   23. UTILIDADES
   ===================================================================== */
.px-margin      { padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); }
.mx-margin      { margin-left: var(--margin-mobile); margin-right: var(--margin-mobile); }
.gap-xs         { gap: var(--space-xs); }
.gap-sm         { gap: var(--space-sm); }
.gap-md         { gap: var(--space-md); }
.gap-lg         { gap: var(--space-lg); }
.gap-xl         { gap: var(--space-xl); }

.flex           { display: flex; }
.flex-col       { display: flex; flex-direction: column; }
.items-center   { align-items: center; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.flex-1         { flex: 1 1 0%; }
.shrink-0       { flex-shrink: 0; }
.min-w-0        { min-width: 0; }
.w-full         { width: 100%; }

.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rounded-full   { border-radius: var(--radius-full); }
.rounded-xl     { border-radius: var(--radius-xl); }
.rounded-2xl    { border-radius: var(--radius-2xl); }

/* Colores de texto */
.text-primary           { color: var(--color-primary); }
.text-secondary         { color: var(--color-secondary); }
.text-tertiary          { color: var(--color-tertiary); }
.text-on-surface        { color: var(--color-on-surface); }
.text-on-surface-variant{ color: var(--color-on-surface-variant); }
.text-outline           { color: var(--color-outline); }

/* Colores de fondo */
.bg-surface             { background: var(--color-surface); }
.bg-surface-container   { background: var(--color-surface-container); }
.bg-surface-container-low { background: var(--color-surface-container-low); }
.bg-surface-container-lowest { background: var(--color-surface-container-lowest); }
.bg-surface-container-high { background: var(--color-surface-container-high); }
.bg-primary             { background: var(--color-primary); }
.bg-primary-container   { background: var(--color-primary-container); }
.bg-primary-fixed       { background: var(--color-primary-fixed); }
.bg-secondary           { background: var(--color-secondary); }
.bg-secondary-container { background: var(--color-secondary-container); }
.bg-secondary-fixed     { background: var(--color-secondary-fixed); }
.bg-tertiary            { background: var(--color-tertiary); }
.bg-tertiary-fixed      { background: var(--color-tertiary-fixed); }

/* Material Symbols overrides */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    flex-shrink: 0;
}

.material-symbols-outlined.lleno {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* =====================================================================
   24. ANIMACIONES ADICIONALES
   ===================================================================== */
@keyframes slideInFromBottom {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pulseAlert {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
}

.animate-bounce-alert {
    animation: pulseAlert 1.5s ease-in-out infinite;
}

/* =====================================================================
   25. RESPONSIVE TABLETS Y DESKTOP (Stitch Harmonic Kinetic M3)
   ===================================================================== */
.desktop-sidebar {
    display: none;
}
.desktop-header {
    display: none;
}
.desktop-only {
    display: none !important;
}
.mobile-only {
    display: block;
}

/* Grids adaptables para móvil y escritorio */
.grid-kpi {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.grid-desktop-7-5 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.grid-desktop-5-7 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.card-desktop {
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    border: 1px solid var(--color-surface-container-high);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.card-desktop:hover {
    box-shadow: var(--shadow-lvl2);
}

.card-desktop-low {
    background: var(--color-surface-container-low);
    border-radius: var(--radius-2xl);
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-surface-container-high);
}

@media (min-width: 600px) {
    .px-margin { padding-left: var(--margin-tablet); padding-right: var(--margin-tablet); }
    .mx-margin { margin-left: var(--margin-tablet); margin-right: var(--margin-tablet); }
    .pwa-topbar__inner { padding: 0 var(--margin-tablet); }

    .grid-kpi {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .desktop-only {
        display: flex !important;
    }
    .mobile-only {
        display: none !important;
    }

    .px-margin { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
    .mx-margin { margin-left: var(--margin-desktop); margin-right: var(--margin-desktop); }

    /* Ocultar barra superior y navbar móvil */
    .pwa-topbar {
        display: none !important;
    }
    .pwa-navbar {
        display: none !important;
    }

    /* Mostrar barra lateral de escritorio fija */
    .desktop-sidebar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 288px;
        background: var(--color-surface-container-low);
        z-index: 50;
        padding: 1.5rem 1rem;
        box-shadow: 0 1px 8px rgba(0,0,0,0.04);
        border-right: 1px solid var(--color-surface-container-high);
        overflow-y: auto;
    }

    /* Cabecera superior fija de escritorio */
    .desktop-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 288px;
        right: 0;
        height: 80px;
        background: rgba(250, 248, 255, 0.88);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        z-index: 40;
        padding: 0 2rem;
        box-shadow: 0 1px 8px rgba(0,0,0,0.04);
        border-bottom: 1px solid var(--color-surface-container-high);
    }
    .dark .desktop-header {
        background: rgba(18, 19, 24, 0.88);
    }

    /* Contenedor principal para escritorio */
    .pwa-main {
        margin-left: 288px !important;
        padding-top: 80px !important;
        padding-bottom: 3rem !important;
        max-width: 100% !important;
        min-height: 100vh;
        background: var(--color-background);
    }

    .desktop-content-wrap {
        max-width: 1360px;
        margin: 0 auto;
        padding: 2rem 2.5rem;
    }

    .grid-kpi {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }

    .grid-desktop-7-5 {
        display: grid;
        grid-template-columns: 7fr 5fr;
        gap: 2rem;
        align-items: start;
    }

    .grid-desktop-5-7 {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: 2rem;
        align-items: start;
    }
}

/* Enlaces de navegación desktop */
.desktop-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-xl);
    text-decoration: none;
    font-family: var(--font-jakarta);
    font-size: var(--text-title-md-size);
    font-weight: 500;
    color: var(--color-on-surface-variant);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.desktop-nav-link:hover {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface);
}
.desktop-nav-link.aktiboa {
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 600;
}
.desktop-nav-link.aktiboa .material-symbols-outlined {
    color: var(--color-on-primary);
}

.desktop-band-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-xl);
    background: var(--color-surface-container);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}
.desktop-band-selector:hover {
    background: var(--color-surface-container-high);
}

.desktop-search-input {
    width: 100%;
    max-width: 480px;
    height: 44px;
    padding: 0 1rem 0 2.75rem;
    border-radius: var(--radius-full);
    background: var(--color-surface-container);
    border: 1px solid transparent;
    font-family: var(--font-inter);
    font-size: var(--text-body-md-size);
    color: var(--color-on-surface);
    outline: none;
    transition: all var(--transition-fast);
}
.desktop-search-input:focus {
    background: var(--color-surface-container-lowest);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(30, 48, 147, 0.15);
}

/* Atril Digital Desktop Dual Stand */
.score-dual-stand {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-lvl2);
}
@media (min-width: 1024px) {
    .score-dual-stand {
        flex-direction: row;
        padding: 2rem;
        gap: 2rem;
    }
}
.score-page-view {
    flex: 1;
    min-height: 520px;
    background: #ffffff;
    border: 1px solid var(--color-surface-container-high);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.03);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
}
.dark .score-page-view {
    background: #181920;
    border-color: #2a2c38;
}

/* =====================================================================
   26. PANTALLA DE CARGA (SPLASH / AUTH)
   ===================================================================== */
.auth-shell {
    min-height: 100vh;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--margin-mobile);
}

.auth-logo-circle {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-2xl);
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lvl3);
    margin-bottom: var(--space-lg);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lvl2);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
}

.form-field__label {
    font-family: var(--font-inter);
    font-size: var(--text-label-lg-size);
    font-weight: 500;
    color: var(--color-on-surface-variant);
}

.form-field__input {
    width: 100%;
    height: 52px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-xl);
    background: var(--color-surface-container);
    border: 1.5px solid var(--color-outline-variant);
    font-family: var(--font-inter);
    font-size: var(--text-body-lg-size);
    color: var(--color-on-surface);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.form-field__input:focus {
    border-color: var(--color-primary);
    background: var(--color-surface-container-lowest);
    box-shadow: 0 0 0 3px rgba(57,73,171,.15);
}

.form-field__input--error {
    border-color: var(--color-error);
}

.form-field__error {
    font-family: var(--font-inter);
    font-size: var(--text-body-sm-size);
    color: var(--color-error);
}

/* =====================================================================
   27. PWA OFFLINE BANNER
   ===================================================================== */
.offline-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    padding: var(--space-xs) var(--margin-mobile);
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-family: var(--font-inter);
    font-size: var(--text-body-sm-size);
    font-weight: 500;
    box-shadow: var(--shadow-lvl2);
}

.offline-banner.bistaratua {
    display: flex;
}

/* =====================================================================
   28. TARJETA HERO DE DEIALDIA PRÓXIMA
   ===================================================================== */
.hero-deialdia {
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-2xl);
    padding: var(--space-md);
    box-shadow: var(--shadow-lvl2);
    position: relative;
    overflow: hidden;
}

.hero-deialdia__decoracion {
    position: absolute;
    right: -24px;
    top: -24px;
    width: 128px;
    height: 128px;
    border-radius: var(--radius-full);
    background: rgba(222,224,255,.25);
    filter: blur(32px);
    pointer-events: none;
}

/* =====================================================================
   29. MINI REPRODUCTOR AUDIO (atril)
   ===================================================================== */
.audio-mini-player {
    position: fixed;
    bottom: calc(var(--navbar-height) + var(--safe-area-bottom) + var(--space-xs));
    left: var(--space-sm);
    right: var(--space-sm);
    z-index: 80;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    box-shadow: var(--shadow-lvl3);
}

.audio-mini-player__titulo {
    font-family: var(--font-jakarta);
    font-size: var(--text-title-md-size);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}