@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&family=Sora:wght@400;600;700;800&display=swap');

        :root {
            /* ═══════════════════════════════════════════════════════════════
               LA PALETA  ·  fase 0 del rediseño

               Aquí abajo está, por primera vez, todo el color de la app.
               Antes cada tono estaba escrito a mano dentro de cada elemento,
               en 1283 sitios repartidos por el fichero. Ahora todos esos
               sitios apuntan aquí.

               Los valores son EXACTAMENTE los que había: la app se ve igual
               que antes. Esto no cambia el aspecto, solo lo pone donde se
               puede cambiar. Para repintar la app se tocan estas líneas y
               nada más.

               El nombre dice la familia y lo claro que es el tono:
               --p-az48 es un azul con un 48% de luz.

               NO se han tocado, a propósito:
                 · el motor de temas de color, que hace cuentas con el
                   hexadecimal y no entendería var()
                 · los carteles, diplomas y carnets que se imprimen en otra
                   ventana, donde estas variables no existen
                 · lo que se le pasa a una librería o a un canvas
                 · las entidades HTML de los emojis (📲 parece un
                   color y no lo es)
               ═══════════════════════════════════════════════════════════════ */
            /* Grises · 20 */
            --p-gr100:#ffffff; --p-gr98:#fafafa; --p-gr96:#f4f4f4; --p-gr93:#eeeeee;
            --p-gr87:#dddddd; --p-gr82:#d0d0d0; --p-gr80:#cccccc; --p-gr67:#aaaaaa;
            --p-gr63:#99aaaa; --p-gr60:#999999; --p-gr53:#888888; --p-gr47:#777777;
            --p-gr46:#6b7280; --p-gr43:#666677; --p-gr40:#666666; --p-gr33:#555555;
            --p-gr27:#444444; --p-gr20:#333333; --p-gr07:#111111; --p-gr00:#000000;
            /* Azules · 91 */
            --p-az98:#f8fafc; --p-az98a:#f5f3ff; --p-az97a:#f7f8fa; --p-az97b:#f6f7fb;
            --p-az97:#eef2ff; --p-az96b:#f4f5f7; --p-az96a:#f2f4f8; --p-az96:#f1f5f9;
            --p-az96c:#f2f4f7; --p-az95:#eef2f8; --p-az95a:#eef0f4; --p-az94:#e0e7ff;
            --p-az93:#e8eaf0; --p-az91b:#e2e8f0; --p-az91a:#e5e7eb; --p-az91:#e3e6ec;
            --p-az89:#c7d2fe; --p-az87:#bfdbfe; --p-az85:#c4b5fd; --p-az84a:#c9cee4;
            --p-az84:#cbd5e1; --p-az84b:#c8d3e2; --p-az82:#c9cfdb; --p-az82a:#a8c4fa;
            --p-az78:#93c5fd; --p-az76:#8ab4f8; --p-az73:#7ba6f7; --p-az70:#a3adc2;
            --p-az68a:#635bff; --p-az68:#60a5fa; --p-az67:#6366f1; --p-az66a:#93a0c0;
            --p-az66b:#9aa0b8; --p-az66:#5b90f5; --p-az65:#94a3b8; --p-az65a:#95a0b5;
            --p-az63:#44aaff; --p-az60:#3b82f6; --p-az59a:#8892a6; --p-az59:#4f46e5;
            --p-az57:#3a76e8; --p-az56:#2f6fed; --p-az53:#2563eb; --p-az52a:#4b45c6;
            --p-az52:#0d6efd; --p-az51:#1a56e8; --p-az48a:#1f6fd6; --p-az48:#1d5fd8;
            --p-az48b:#1d4ed8; --p-az48c:#1a56db; --p-az47:#64748b; --p-az45:#1f86c4;
            --p-az44:#2980b9; --p-az41:#5c6577; --p-az41a:#3730a3; --p-az40:#1e40af;
            --p-az39:#0284c7; --p-az35:#475569; --p-az33:#1e3a8a; --p-az33a:#2c3e7a;
            --p-az32a:#1a4c8a; --p-az32:#0369a1; --p-az30:#2f3f6b; --p-az27a:#1e3a6e;
            --p-az27b:#374151; --p-az27:#334155; --p-az24:#0d2b6b; --p-az23:#2a2a4a;
            --p-az21:#232946; --p-az20:#1e2a4a; --p-az18:#1e2340; --p-az17:#1e293b;
            --p-az15:#00004a; --p-az14a:#1a1f2e; --p-az14:#1a1a2e; --p-az14b:#141c33;
            --p-az13a:#1a1d29; --p-az13:#161c2b; --p-az12:#121629; --p-az11:#0f172a;
            --p-az11a:#0d1b2a; --p-az11b:#111725; --p-az10a:#14161f; --p-az10:#13131f;
            --p-az08b:#0b1020; --p-az08a:#0f0f1a; --p-az08:#0d111c; --p-az08c:#0d0d1a;
            --p-az07:#0a0a1a; --p-az07a:#0b0f18; --p-az04:#05070f;
            /* Verdes · 30 */
            --p-vd97:#f0fdf4; --p-vd93:#dcfce7; --p-vd90:#d1fae5; --p-vd80:#a7f3d0;
            --p-vd73:#86efac; --p-vd67:#6ee7b7; --p-vd59:#58d68d; --p-vd58:#4ade80;
            --p-vd52:#34d399; --p-vd49:#25d366; --p-vd45:#22c55e; --p-vd40:#2e9e3f;
            --p-vd39:#10b981; --p-vd36:#16a34a; --p-vd32:#1e8449; --p-vd30:#059669;
            --p-vd29:#15803d; --p-vd28:#0b8258; --p-vd26:#0b7a52; --p-vd24:#047857;
            --p-vd24a:#166534; --p-vd23:#0b6b3c; --p-vd22:#046b4a; --p-vd20b:#14532d;
            --p-vd20a:#0a5c41; --p-vd20:#065f46; --p-vd19:#035c3f; --p-vd16:#064e3b;
            --p-vd14:#0e3a28; --p-vd11:#0b2b18;
            /* Rojos · 26 */
            --p-rj94:#fee2e2; --p-rj82:#fca5a5; --p-rj74:#f1948a; --p-rj71:#f87171;
            --p-rj63:#ff4444; --p-rj57:#e74c3c; --p-rj54:#d4503f; --p-rj51:#dc2626;
            --p-rj50a:#e11d48; --p-rj50:#d62828; --p-rj49:#d92d20; --p-rj46:#c0392b;
            --p-rj45a:#b83530; --p-rj45:#c02626; --p-rj42:#b91c1c; --p-rj40:#b01e1e;
            --p-rj40a:#b42318; --p-rj35:#991b1b; --p-rj34:#8f1d1d; --p-rj33:#941616;
            --p-rj31:#7f1d1d; --p-rj28:#7c2d12; --p-rj24:#7b0000; --p-rj15a:#3a1414;
            --p-rj15:#4a0000; --p-rj07:#1a0a0a;
            /* Naranjas · 28 */
            --p-nj97:#fff9f0; --p-nj96:#fff7ed; --p-nj95:#fff6e5; --p-nj94:#fff3e0;
            --p-nj83:#fed7aa; --p-nj77:#ffe08a; --p-nj76:#f3d492; --p-nj72:#fdba74;
            --p-nj63:#f0b552; --p-nj56:#fbbf24; --p-nj55:#f5a623; --p-nj53:#f97316;
            --p-nj52:#e67e22; --p-nj50:#f59e0b; --p-nj50a:#ff7a00; --p-nj48:#ea580c;
            --p-nj44:#d97706; --p-nj42:#b8901f; --p-nj40a:#ca8a04; --p-nj40:#c2410c;
            --p-nj37:#b45309; --p-nj35:#ae5f05; --p-nj33:#9f6707; --p-nj31:#92400e;
            --p-nj30:#9a5b00; --p-nj29:#854d0e; --p-nj25:#7c4f05; --p-nj22:#6b4404;
            /* Amarillos · 12 */
            --p-am98:#fffdf7; --p-am89:#fef3c7; --p-am88:#fef9c3; --p-am77:#fef08a;
            --p-am65:#fcd34d; --p-am64:#fde047; --p-am53:#facc15; --p-am50:#ffd700;
            --p-am47a:#f2c200; --p-am47:#c9a227; --p-am05a:#12100a; --p-am05:#1a1500;
            /* Violetas · 9 */
            --p-vi85:#d8b4fe; --p-vi76:#a78bfa; --p-vi66:#8b5cf6; --p-vi65:#a855f7;
            --p-vi58:#7c3aed; --p-vi56:#9333ea; --p-vi50:#6d28d9; --p-vi35:#4c1d95;
            --p-vi25:#3b1f5e;
            /* Cianes · 8 */
            --p-cn82:#a5f3fc; --p-cn74:#7dd3fc; --p-cn48:#0ea5e9; --p-cn43:#06b6d4;
            --p-cn40:#14b8a6; --p-cn36:#0891b2; --p-cn32:#0d9488; --p-cn26:#0f766e;
            /* Rosas · 2 */
            --p-rs60:#ec4899; --p-rs51:#db2777;

            
            /* ── Los cinturones ──────────────────────────────────────────
               El color de la cinta es un dato que la app ya guarda en cada
               ficha. Aquí se convierte en color de pantalla: así se lee un
               grupo de un vistazo, sin tener que leer nombre por nombre.
               El negro lleva su franja dorada porque, sin ella, sobre fondo
               oscuro no se vería que hay una cinta. */
            --c-blanco:#e6e2d8; --c-amarillo:#f0be00; --c-naranja:#ef8a2b;
            --c-verde:#2f9e44;  --c-azul:#1c6fc4;     --c-rojo:#c92a2a;
            --c-negro:#191a1f;  --c-oro:#c9a227;      --c-nada:#b9c0cf;

            /* ── Los nombres de siempre, ahora apuntando a la paleta ── */
            --bg-app:var(--p-az97a); --bg-card:var(--p-gr100); --bg-card-2:var(--p-az96a);
            --text-main:var(--p-az14a); --text-muted:var(--p-az41);
            /* Tres nombres que se usan por toda la app (sobre todo en las
               ventanas que se abren por encima) y que nunca se habían dado de
               alta. Sin esta línea caían en su color de repuesto —blanco— y
               en modo oscuro salían ventanas blancas con letra blanca.
               Al ser alias de los de arriba, cambian solos de día y de noche. */
            --bg-secondary:var(--bg-card); --bg-primary:var(--bg-app); --text-primary:var(--text-main);
            --t1:var(--p-az14b); --t2:var(--p-az20); --t3:var(--p-az56); --theme-rgb:30,42,74;
            --primary:var(--p-az48); --primary-light:var(--p-az57); --primary-glow:rgba(29,95,216,0.14);
            --accent:var(--p-az20); --accent-light:var(--p-az30); --accent-glow:rgba(30,42,74,0.10);
            --energy:var(--p-nj44); --energy-light:rgba(217,119,6,0.13);
            --border:var(--p-az91); --border-strong:var(--p-az82);
            --success:var(--p-vd29); --danger:var(--p-rj49); --warning:var(--p-nj44); --whatsapp:var(--p-vd49);
            --radius-xs:5px; --radius-sm:9px; --radius-md:12px; --radius-lg:16px;
            --radius-xl:20px; --radius-full:9999px;
            --shadow-sm:0 1px 2px rgba(16,24,40,0.06);
            --shadow-md:0 4px 12px rgba(16,24,40,0.08),0 1px 3px rgba(16,24,40,0.05);
            --shadow-lg:0 14px 34px rgba(16,24,40,0.12),0 3px 8px rgba(16,24,40,0.05);
            --shadow-red:0 1px 2px rgba(16,24,40,0.06);
            --shadow-blue:0 1px 2px rgba(16,24,40,0.06);
        }
        *{box-sizing:border-box;margin:0;padding:0;font-family:'Outfit','Inter',-apple-system,sans-serif;-webkit-tap-highlight-color:transparent;}
        /* OJO: 'overflow-x:hidden' en <html> convierte el documento en un
           contenedor de scroll y con eso rompe position:sticky de TODO lo que
           haya dentro —incluida la propia cabecera de la app, que llevaba
           puesto 'sticky' y no se pegaba—. Se deja solo en <body>, que corta
           el desbordamiento lateral igual, y ademas se pone overflow-y:visible
           para que el documento siga siendo quien hace scroll. */
        html{max-width:100vw;overflow-x:clip;}
        body{overflow-x:clip;max-width:100vw;}
        body{background:var(--bg-app);background-image:radial-gradient(1100px 500px at 85% -80px,rgba(225,29,72,0.06),transparent 60%),radial-gradient(900px 460px at -10% 30%,rgba(53,70,168,0.07),transparent 55%);background-attachment:fixed;color:var(--text-main);min-height:100vh;padding-bottom:80px;transition:background-color 0.4s,color 0.4s;}
        body.dark-mode{background-image:none;}
        /* Logo del club como fondo de toda la app (marca de agua, opcional en Ajustes) */
        body.logo-fondo::before{content:'';position:fixed;inset:0;z-index:-1;background-image:var(--logo-fondo-url);background-repeat:no-repeat;background-position:center;background-size:contain;opacity:0.18;pointer-events:none;}
        body.dark-mode.logo-fondo::before{opacity:0.15;filter:brightness(1.5);}
        /* Con el logo de fondo: paneles y menús translúcidos para que se vea a través */
        body.logo-fondo .card,
        body.logo-fondo .member-card,
        body.logo-fondo .dash-stat,
        body.logo-fondo .fin-box{background:rgba(255,255,255,0.78);}
        body.logo-fondo .nav-tabs{background:rgba(255,255,255,0.82);backdrop-filter:blur(6px);}
        body.logo-fondo .sidebar{background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);}
        body.logo-fondo input,body.logo-fondo select,body.logo-fondo textarea{background:rgba(255,255,255,0.72);}
        body.dark-mode.logo-fondo .card,
        body.dark-mode.logo-fondo .member-card,
        body.dark-mode.logo-fondo .dash-stat,
        body.dark-mode.logo-fondo .fin-box{background:rgba(26,26,46,0.78);}
        body.dark-mode.logo-fondo .nav-tabs{background:rgba(19,19,31,0.82);backdrop-filter:blur(6px);}
        body.dark-mode.logo-fondo .sidebar{background:rgba(19,19,31,0.9);backdrop-filter:blur(8px);}
        body.dark-mode.logo-fondo input,body.dark-mode.logo-fondo select,body.dark-mode.logo-fondo textarea{background:rgba(15,15,26,0.72);}
        body.logo-fondo .card.timer-futuristic,body.dark-mode.logo-fondo .card.timer-futuristic{background:linear-gradient(160deg,var(--p-az07) 0%,var(--p-az11a) 40%,var(--p-rj07) 100%)!important;border-color:var(--p-az23)!important;}
        @media print{ body.print-qr *{visibility:hidden!important;} body.print-qr #qr-puerta-overlay, body.print-qr #qr-puerta-overlay *{visibility:visible!important;} body.print-qr #qr-puerta-overlay{position:absolute!important;top:0!important;left:0!important;right:0!important;background:var(--p-gr100)!important;} body.print-qr #qr-puerta-overlay button{display:none!important;} }
        @keyframes gradFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
        ::-webkit-scrollbar{width:10px;height:10px;}
        ::-webkit-scrollbar-thumb{background:linear-gradient(var(--accent-light),var(--primary-light));border-radius:99px;border:2px solid var(--bg-app);}
        ::-webkit-scrollbar-track{background:transparent;}

        header{background:linear-gradient(120deg,var(--t1) 0%,var(--p-vi25) 35%,var(--t2) 70%,var(--t3) 100%);background-size:220% 220%;animation:gradFlow 14s ease infinite;color:white;padding:14px 16px;position:sticky;top:0;z-index:2000;box-shadow:0 4px 24px rgba(225,29,72,0.3);border-bottom:3px solid var(--energy);display:flex;justify-content:space-between;align-items:center;}
        header h1{font-family:'Sora',sans-serif;font-size:1rem;font-weight:900;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 20px rgba(243,156,18,0.5);margin:0;}
        header .subtitle{font-size:0.62rem;opacity:0.75;margin-top:2px;letter-spacing:1px;font-weight:500;}

        .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(26,26,46,0.65);z-index:2999;backdrop-filter:blur(6px);}
        .sidebar{position:fixed;top:0;left:-300px;width:300px;height:100vh;background:var(--bg-card);z-index:3000;transition:left 0.35s cubic-bezier(0.4,0,0.2,1);box-shadow:8px 0 40px rgba(26,26,46,0.2);overflow-y:auto;display:flex;flex-direction:column;}
        .sidebar.open{left:0;}
        .sidebar-header{padding:24px 20px;background:linear-gradient(135deg,var(--t1),var(--t2));color:white;display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--energy);}
        .sidebar-header h3{font-family:'Sora',sans-serif;font-size:0.9rem;font-weight:900;text-transform:uppercase;letter-spacing:1.5px;margin:0;}
        .sidebar-menu{padding:8px 0;flex:1;}
        .sidebar-item{padding:15px 24px;display:flex;align-items:center;gap:14px;color:var(--text-main);font-weight:600;font-size:0.9rem;border-bottom:1px solid var(--border);cursor:pointer;transition:all 0.2s;border-left:4px solid transparent;}
        .sidebar-item:hover{background:var(--primary-glow);color:var(--primary);border-left-color:var(--primary);}
        .sidebar-item .icon{font-size:1.2rem;width:24px;text-align:center;}

        .nav-tabs{display:flex;background:var(--bg-card);border-top:2px solid var(--border);position:fixed;bottom:0;left:0;right:0;z-index:1000;box-shadow:0 -4px 24px rgba(26,26,46,0.08);padding-bottom:env(safe-area-inset-bottom);overflow-x:auto;scrollbar-width:none;}
        .nav-tabs::-webkit-scrollbar{display:none;}
        .tab-btn{flex:1;min-width:52px;text-align:center;padding:9px 2px;background:none;border:none;font-size:0.52rem;font-weight:700;color:var(--text-muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all 0.25s;text-transform:uppercase;letter-spacing:0.3px;position:relative;border-top:3px solid transparent;}
        .tab-btn .icon{font-size:1.2rem;transition:transform 0.25s;}
        .tab-btn.active{color:var(--primary);border-top-color:var(--primary);background:linear-gradient(180deg,var(--primary-glow),transparent);}
        .tab-btn.active .icon{transform:scale(1.2) translateY(-1px);animation:tabPop .35s cubic-bezier(.34,1.56,.64,1);}
        @keyframes tabPop{0%{transform:scale(.8)}60%{transform:scale(1.35) translateY(-3px)}100%{transform:scale(1.2) translateY(-1px)}}
        .tab-btn:hover{color:var(--primary-light);background:var(--primary-glow);}

        .container{width:100%;max-width:100%;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box;}
        .tab-content{display:none;width:100%;}
        .tab-content.active{display:flex;flex-direction:column;gap:14px;animation:fadeUp 0.3s ease backwards;}
  @keyframes fxSlideR{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
  @keyframes fxSlideL{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
  @keyframes fxFade{from{opacity:0}to{opacity:1}}
  @keyframes fxZoom{from{opacity:0;transform:scale(0.93)}to{opacity:1;transform:none}}
  @keyframes fxFlip{from{opacity:0;transform:perspective(900px) rotateY(14deg)}to{opacity:1;transform:none}}
        @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
        @media(prefers-reduced-motion:reduce){.tab-content.active,.modal-content{animation:none;}}

        .card{background:var(--bg-card);border-radius:var(--radius-md);padding:20px;box-shadow:var(--shadow-sm);border:1.5px solid var(--border);transition:box-shadow 0.3s,transform 0.3s,border-color 0.3s;width:100%;box-sizing:border-box;}
        .card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
        .tab-content.active>.card{animation:fadeUp .45s cubic-bezier(.22,.9,.35,1) backwards;}
        .tab-content.active>.card:nth-child(2){animation-delay:.06s}
        .tab-content.active>.card:nth-child(3){animation-delay:.12s}
        .tab-content.active>.card:nth-child(4){animation-delay:.18s}
        .tab-content.active>.card:nth-child(5){animation-delay:.24s}
        .tab-content.active>.card:nth-child(n+6){animation-delay:.3s}
        .card-title{font-size:0.9rem;font-weight:800;color:var(--accent);margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:0.8px;padding-bottom:10px;border-bottom:2px solid var(--border);border-image:linear-gradient(90deg,var(--primary),var(--energy) 40%,var(--border) 80%) 1;}

        .form-group{margin-bottom:14px;width:100%;box-sizing:border-box;}
        label{display:block;font-size:0.72rem;font-weight:700;color:var(--text-muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.5px;}
        input,select,textarea{width:100%;box-sizing:border-box;padding:12px 16px;border:2px solid var(--border);border-radius:var(--radius-sm);font-size:0.95rem;color:var(--text-main);background:var(--bg-app);transition:all 0.2s;font-weight:500;font-family:inherit;}
        input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow);background:white;}
        input[type="checkbox"]{width:auto;transform:scale(1.3);margin-right:5px;accent-color:var(--primary);}
        input[type="file"]{padding:10px;background:transparent;font-size:0.85rem;border:2px dashed var(--border);border-radius:var(--radius-sm);}
        .grid-responsive{display:grid;grid-template-columns:1fr;gap:12px;width:100%;box-sizing:border-box;}

        button.btn{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:white;padding:13px 20px;border:none;border-radius:var(--radius-full);font-weight:700;font-size:0.88rem;cursor:pointer;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-transform:uppercase;letter-spacing:0.8px;box-shadow:var(--shadow-red);transition:all 0.25s cubic-bezier(.34,1.2,.64,1);box-sizing:border-box;font-family:inherit;position:relative;overflow:hidden;}
        button.btn::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.35),transparent);transform:skewX(-20deg);transition:left .5s ease;pointer-events:none;}
        button.btn:hover::after{left:135%;}
        button.btn:hover{transform:translateY(-2px);filter:brightness(1.08);}
        button.btn:active{transform:scale(0.96);}
        button.btn-success{background:linear-gradient(135deg,var(--success),var(--p-vd32));box-shadow:0 4px 14px rgba(39,174,96,0.3);}
        button.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-light));box-shadow:var(--shadow-blue);}
        button.btn-muted{background:var(--text-muted);box-shadow:none;}
        button.btn-danger{background:linear-gradient(135deg,var(--danger),var(--p-rj46));box-shadow:var(--shadow-red);padding:12px 16px;font-size:0.85rem;width:100%;border-radius:var(--radius-full);}
        button.btn-energy{background:linear-gradient(135deg,var(--energy),var(--p-nj52));box-shadow:0 4px 14px rgba(243,156,18,0.3);color:white;}

        .dash-hero{background:linear-gradient(120deg,var(--t1) 0%,var(--p-vi25) 30%,var(--t2) 65%,var(--t3) 100%);background-size:200% 200%;animation:gradFlow 12s ease infinite;border-radius:var(--radius-xl);padding:24px 20px;color:white;border:none;position:relative;overflow:hidden;box-shadow:var(--shadow-red);}
        .dash-hero::before{content:'🥋';position:absolute;right:-10px;bottom:-20px;font-size:6rem;opacity:0.1;transform:rotate(-15deg);}
        .dash-hero::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.16),transparent);transform:skewX(-18deg);animation:heroSheen 6s ease-in-out infinite;pointer-events:none;}
        @keyframes heroSheen{0%,55%{left:-60%}85%,100%{left:135%}}
        .dash-hero h2{font-family:'Sora',sans-serif;font-size:1.2rem;font-weight:900;margin:0 0 4px;text-shadow:0 0 20px rgba(245,166,35,0.5);}
        .dash-hero p{font-size:0.82rem;opacity:0.85;margin:0;}
        .dash-stat{background:var(--bg-card);border-radius:var(--radius-md);padding:18px 16px;border:2px solid var(--border);box-shadow:var(--shadow-sm);cursor:pointer;transition:all 0.25s;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;}
        .dash-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--energy),var(--accent-light));opacity:.9;}
        .dash-stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent-light);}
        .dash-stat-label{font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-muted);}
        .dash-stat-value{font-size:2.4rem;font-weight:900;line-height:1;font-family:'Sora',sans-serif;}
        .dash-stat-hint{font-size:0.68rem;color:var(--text-muted);}
        /* ── Inicio: chips de la cabecera ── */
        .dash-hero-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;position:relative;z-index:2;}
        .dash-counters{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
        .dash-counters .dash-stat{padding:14px 13px;}
        .dash-counters .dash-stat-value{font-size:2rem;}
        .dash-counters .dash-stat-label{font-size:0.63rem;letter-spacing:0.6px;}
        .dash-counters .dash-stat-hint{font-size:0.64rem;line-height:1.25;}
        .dash-chip{background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.28);color:var(--p-gr100);border-radius:999px;padding:4px 11px;font-size:0.7rem;font-weight:700;letter-spacing:0.2px;backdrop-filter:blur(4px);}
        /* ── Inicio: tarjeta de avisos con pastillas ── */
        .av-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:14px 16px;width:100%;box-sizing:border-box;}
        .av-head{display:flex;align-items:center;gap:9px;margin-bottom:11px;}
        .av-head-t{font-size:0.95rem;font-weight:900;color:var(--text-main);}
        .av-head-n{background:var(--danger);color:var(--p-gr100);border-radius:999px;min-width:21px;height:21px;padding:0 6px;display:none;align-items:center;justify-content:center;font-size:0.72rem;font-weight:900;}
        .av-head-hint{margin-left:auto;font-size:0.66rem;color:var(--text-muted);font-weight:600;}
        .av-pills{display:flex;flex-wrap:wrap;gap:7px;}
        .av-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 13px 7px 10px;font-family:inherit;font-size:0.78rem;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;background:var(--tone-bg);border:1.5px solid var(--tone-bd);color:var(--tone-fg);line-height:1;}
        .av-pill:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.13);}
        .av-pill.on{background:var(--tone);border-color:var(--tone);color:var(--p-gr100);box-shadow:0 4px 14px var(--tone-sh);}
        .av-pill .av-n{font-size:0.95rem;font-weight:900;font-family:'Sora',sans-serif;}
        .av-pill[data-tone="rojo"],.av-det[data-tone="rojo"]{--tone:var(--p-rj51);--tone-bg:rgba(220,38,38,0.10);--tone-bd:rgba(220,38,38,0.35);--tone-fg:var(--p-rj42);--tone-sh:rgba(220,38,38,0.35);}
        .av-pill[data-tone="granate"],.av-det[data-tone="granate"]{--tone:var(--p-rj31);--tone-bg:rgba(127,29,29,0.12);--tone-bd:rgba(127,29,29,0.38);--tone-fg:var(--p-rj31);--tone-sh:rgba(127,29,29,0.35);}
        .av-pill[data-tone="naranja"],.av-det[data-tone="naranja"]{--tone:var(--p-nj48);--tone-bg:rgba(234,88,12,0.10);--tone-bd:rgba(234,88,12,0.33);--tone-fg:var(--p-nj40);--tone-sh:rgba(234,88,12,0.35);}
        .av-pill[data-tone="ambar"],.av-det[data-tone="ambar"]{--tone:var(--p-nj44);--tone-bg:rgba(217,119,6,0.11);--tone-bd:rgba(217,119,6,0.33);--tone-fg:var(--p-nj37);--tone-sh:rgba(217,119,6,0.35);}
        .av-pill[data-tone="violeta"],.av-det[data-tone="violeta"]{--tone:var(--p-vi58);--tone-bg:rgba(124,58,237,0.10);--tone-bd:rgba(124,58,237,0.32);--tone-fg:var(--p-vi50);--tone-sh:rgba(124,58,237,0.35);}
        .av-pill[data-tone="verde"],.av-det[data-tone="verde"]{--tone:var(--p-vd36);--tone-bg:rgba(22,163,74,0.10);--tone-bd:rgba(22,163,74,0.32);--tone-fg:var(--p-vd29);--tone-sh:rgba(22,163,74,0.35);}
        body.dark-mode .av-pill[data-tone="rojo"],body.dark-mode .av-det[data-tone="rojo"]{--tone-fg:var(--p-rj82);--tone-bg:rgba(220,38,38,0.18);}
        body.dark-mode .av-pill[data-tone="granate"],body.dark-mode .av-det[data-tone="granate"]{--tone:var(--p-rj42);--tone-fg:var(--p-rj82);--tone-bg:rgba(185,28,28,0.20);}
        body.dark-mode .av-pill[data-tone="naranja"],body.dark-mode .av-det[data-tone="naranja"]{--tone-fg:var(--p-nj72);--tone-bg:rgba(234,88,12,0.18);}
        body.dark-mode .av-pill[data-tone="ambar"],body.dark-mode .av-det[data-tone="ambar"]{--tone-fg:var(--p-am65);--tone-bg:rgba(217,119,6,0.18);}
        body.dark-mode .av-pill[data-tone="violeta"],body.dark-mode .av-det[data-tone="violeta"]{--tone-fg:var(--p-az85);--tone-bg:rgba(124,58,237,0.20);}
        body.dark-mode .av-pill[data-tone="verde"],body.dark-mode .av-det[data-tone="verde"]{--tone-fg:var(--p-vd73);--tone-bg:rgba(22,163,74,0.18);}
        .av-det{margin-top:12px;border-top:1px dashed var(--border-strong,var(--border));padding-top:11px;animation:avIn .22s ease;}
        @keyframes avIn{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}
        .av-det-t{font-size:0.82rem;font-weight:900;color:var(--tone-fg);margin-bottom:8px;display:flex;align-items:center;gap:7px;}
        .av-cerrar{margin-left:auto;flex:none;background:transparent;border:1.5px solid var(--tone-bd);color:var(--tone-fg);border-radius:999px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:0.72rem;font-weight:900;line-height:1;cursor:pointer;transition:background .15s,transform .15s;}
        .av-cerrar:hover{background:var(--tone-bg);transform:scale(1.08);}
        .av-row{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:7px 2px;border-bottom:1px solid var(--border);font-size:0.82rem;color:var(--text-main);}
        .av-row:last-of-type{border-bottom:none;}
        .av-row .av-sub{color:var(--text-muted);font-size:0.75rem;font-weight:600;}
        .av-mas{font-size:0.74rem;color:var(--text-muted);padding:7px 2px 0;font-weight:600;}
        .av-go{margin-top:10px;width:100%;padding:9px;border-radius:10px;border:none;background:var(--tone);color:var(--p-gr100);font-family:inherit;font-size:0.8rem;font-weight:800;cursor:pointer;transition:filter .15s;}
        .av-go:hover{filter:brightness(1.1);}
        .av-x{background:var(--bg-card);border:1.5px solid var(--tone-bd,var(--border));color:var(--text-muted);border-radius:7px;padding:3px 9px;font-size:0.7rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;}
        .av-ok{text-align:center;padding:16px 6px;}
        .av-ok-ico{font-size:2rem;margin-bottom:6px;}
        .av-ok-t{font-weight:800;color:var(--success);font-size:0.9rem;}
        .av-ok-s{font-size:0.76rem;color:var(--text-muted);margin-top:3px;}
        /* ── Inicio: nube compacta ── */
        .cloud-more{margin-top:4px;}
        .cloud-more>summary{cursor:pointer;list-style:none;outline:none;font-size:0.72rem;font-weight:800;color:var(--text-muted);padding:5px 0;display:flex;align-items:center;gap:6px;}
        .cloud-more>summary::-webkit-details-marker{display:none;}
        .cloud-more[open]>summary .summary-chevron{transform:rotate(180deg);}
        .cloud-more-btns{display:flex;flex-wrap:wrap;gap:7px;padding-top:7px;border-top:1px dashed var(--border);}
        .cloud-more-btns button{padding:9px 12px;width:auto;font-size:0.74rem;border-radius:var(--radius-full);flex:1;min-width:120px;box-shadow:none;}
        .cloud-more>summary>span:first-child{flex:1;}

        .cloud-sync-card{background:linear-gradient(135deg,var(--p-nj97),var(--p-nj94));border:2px solid rgba(243,156,18,0.3);padding:14px 18px;border-radius:var(--radius-md);display:flex;flex-direction:column;gap:10px;transition:all 0.3s;width:100%;box-sizing:border-box;}
        .cloud-sync-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
        .cloud-sync-title h4{color:var(--energy);margin:0;font-size:0.95rem;font-weight:800;}
        .cloud-sync-title p{margin:0;font-size:0.72rem;color:var(--text-muted);font-weight:600;}
        .cloud-sync-buttons{display:flex;gap:8px;flex-wrap:wrap;width:100%;}
        .cloud-sync-buttons button{padding:10px 14px;width:auto;font-size:0.82rem;border-radius:var(--radius-full);flex:1;min-width:75px;}

        .fin-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
        .fin-box{padding:16px;border-radius:var(--radius-md);text-align:center;border:2px solid var(--border);box-shadow:var(--shadow-sm);transition:all 0.2s;}
        .fin-box:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
        .fin-box.income{background:rgba(39,174,96,0.06);border-color:rgba(39,174,96,0.25);}
        .fin-box.expense{background:rgba(231,76,60,0.06);border-color:rgba(231,76,60,0.25);}
        .fin-box.profit{background:rgba(44,62,122,0.06);border-color:rgba(44,62,122,0.25);grid-column:span 2;}
        .fin-label{font-size:0.68rem;font-weight:800;text-transform:uppercase;color:var(--text-muted);letter-spacing:0.8px;}
        .fin-value{font-size:1.6rem;font-weight:900;color:var(--text-main);margin-top:5px;font-family:'Sora',sans-serif;}
        .expense-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px;}
        .expense-row:last-child{border-bottom:none;}
        .gf-pin{background:transparent;border:1px solid var(--border);border-radius:8px;width:34px;height:32px;min-width:34px;padding:0;font-size:0.95rem;line-height:1;cursor:pointer;opacity:0.35;filter:grayscale(1);transition:all .15s;}
        .gf-pin.on{opacity:1;filter:none;border-color:var(--primary);background:rgba(59,130,246,0.12);}
        .gf-del{background:transparent;border:none;color:var(--danger);font-size:0.9rem;cursor:pointer;padding:0 4px;line-height:1;}
        .gf-tag{font-size:0.6rem;font-weight:800;text-transform:uppercase;color:var(--primary);background:rgba(59,130,246,0.12);border-radius:6px;padding:2px 6px;white-space:nowrap;}
        .gf-add{width:100%;margin-top:12px;background:transparent;border:2px dashed var(--border);color:var(--text-main);border-radius:10px;padding:10px;font-weight:700;font-size:0.85rem;cursor:pointer;}
        .gf-add:hover{border-color:var(--primary);color:var(--primary);}
        .expense-name{font-weight:600;font-size:0.9rem;color:var(--text-main);flex:1;min-width:100px;}
        .expense-input,.income-input{width:110px;text-align:right;padding:8px 10px;font-weight:700;flex-shrink:0;border-radius:var(--radius-sm);}
        .expense-input{color:var(--danger);}
        .income-input{color:var(--success);border-color:var(--p-vd80);}

        .member-list{display:flex;flex-direction:column;gap:10px;}
        .member-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-md);padding:14px;display:flex;align-items:flex-start;gap:12px;cursor:pointer;box-shadow:var(--shadow-sm);transition:all 0.25s;}
        /* SOLO SE PINTA LO QUE SE VE.
           En la pantalla caben cinco o seis fichas; si el club tiene ciento
           sesenta socios, el navegador estaba midiendo y pintando ciento
           cincuenta y cuatro fichas que no ve nadie. Esto le dice que se
           ocupe de cada ficha cuando le toque asomarse. La altura de abajo es
           un cálculo aproximado para que la barra de desplazamiento no pegue
           saltos mientras bajas. Los navegadores que no lo entiendan lo pasan
           por alto y todo sigue como antes. */
        /* Las alturas están MEDIDAS, no puestas a ojo. Y medidas dos veces:
           primero con un puñado de fichas, y luego comprobando el alto TOTAL
           de una lista de 120 socios con el ahorro puesto y sin él, que es lo
           que de verdad importa. Con la primera estimación la lista salía un
           13,6% más larga de la cuenta y la barra de desplazamiento mentía;
           con estos números el error es del 1,2% en tablet y del 0,2% en el
           móvil, o sea dos píxeles por ficha. Además, en cuanto una ficha se
           ha pintado una vez, el navegador se queda con su medida buena: eso
           es lo que significa el «auto» de delante. */
        .member-card{content-visibility:auto;contain-intrinsic-size:auto 137px;}
        .asist-item{content-visibility:auto;contain-intrinsic-size:auto 96px;}
        @media (max-width:640px){
          .member-card{contain-intrinsic-size:auto 225px;}
        }
        .member-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md);}
        .member-card:hover .member-avatar{box-shadow:0 0 0 3px var(--primary-glow),0 0 16px rgba(225,29,72,0.3);transition:box-shadow .25s;}
        .member-avatar{width:52px;height:52px;background:var(--border);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--text-muted);flex-shrink:0;overflow:hidden;border:3px solid var(--primary-glow);}
        .member-avatar img{width:100%;height:100%;object-fit:cover;}
        .member-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
        .member-name{font-weight:800;font-size:1rem;color:var(--accent);word-break:break-word;}
        .member-contact{font-size:0.78rem;font-weight:500;color:var(--text-muted);line-height:1.4;}
        .member-belt{font-size:0.82rem;font-weight:700;color:var(--text-main);}

        .alert-badge{font-size:0.68rem;padding:3px 10px;border-radius:var(--radius-full);font-weight:700;display:inline-block;margin-top:4px;}
        .alert-warning{background:var(--p-am89);color:var(--p-nj31);border:1px solid var(--p-am65);}
        .alert-danger{background:var(--p-rj94);color:var(--p-rj35);border:1px solid var(--p-rj82);}
        .alert-ok{background:var(--p-vd90);color:var(--p-vd20);border:1px solid var(--p-vd52);}
        .badges-container{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;}
        .empty-state{text-align:center;padding:30px 20px;color:var(--text-muted);font-style:italic;font-size:0.85rem;}

        details>summary{list-style:none;outline:none;}
        details>summary::-webkit-details-marker{display:none;}
        .summary-chevron{transition:transform 0.3s;color:var(--energy);font-size:0.85rem;}
        details[open] .summary-chevron{transform:rotate(180deg);}

        .alarm-container{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
        .btn-alarm{min-width:0;padding:10px 8px;font-size:0.78rem;font-weight:700;border:none;border-radius:var(--radius-full);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:all 0.2s;text-align:center;line-height:1.15;}
        .btn-alarm.btn-clear-filter{grid-column:1 / -1;}
        .btn-alarm.cuotas{background:var(--p-rj94);color:var(--p-rj35);border:2px solid var(--p-rj82);}
        .btn-alarm.licencias{background:var(--p-am89);color:var(--p-nj31);border:2px solid var(--p-am65);}
        .btn-alarm.eventos{background:var(--p-az94);color:var(--p-az40);border:2px solid var(--p-az87);}
        .btn-alarm.active{box-shadow:inset 0 0 0 2px var(--text-main);transform:scale(0.97);}
        .btn-clear-filter{background:var(--bg-app);color:var(--text-muted);border:2px solid var(--border);flex:0 0 auto;padding:9px 14px;border-radius:var(--radius-full);}

        .asist-item{background:var(--bg-card);padding:13px;border:2px solid var(--border);border-radius:var(--radius-md);margin-bottom:8px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);transition:all 0.2s;}
        .asist-item:hover{border-color:var(--primary);}
        .asist-name{font-weight:800;color:var(--text-main);font-size:0.95rem;}
        .asist-belt{font-size:0.75rem;color:var(--text-muted);}
        .asist-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end;}
        .btn-asist{padding:9px 12px;font-size:0.82rem;border-radius:var(--radius-full);border:none;font-weight:700;cursor:pointer;flex:1;transition:all 0.15s;}
        .btn-asist.yes{background:var(--p-vd90);color:var(--p-vd20);border:2px solid var(--p-vd52);}
        .btn-asist.no{background:var(--p-rj94);color:var(--p-rj35);border:2px solid var(--p-rj82);}
        .btn-asist:active{transform:scale(0.96);}

        .chart-bar-row{display:flex;align-items:center;margin-bottom:10px;gap:10px;}
        .chart-label{width:38px;font-size:0.72rem;font-weight:800;color:var(--text-muted);text-transform:uppercase;text-align:right;}
        .chart-area{flex:1;display:flex;align-items:center;position:relative;height:22px;background:rgba(0,0,0,0.03);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);}
        .chart-area::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--border-strong);z-index:10;}
        .chart-half{flex:1;height:100%;display:flex;}
        .chart-half.left{justify-content:flex-end;}
        .chart-half.right{justify-content:flex-start;}
        .chart-bar{height:100%;transition:width 0.6s cubic-bezier(0.4,0,0.2,1);border-radius:4px;}
        .chart-bar.bajas{background:linear-gradient(270deg,var(--danger),var(--p-rj74));}
        .chart-bar.altas{background:linear-gradient(90deg,var(--success),var(--p-vd59));}

        /* COMBATE FUTURISTA */
        @keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,0)}70%{box-shadow:0 0 0 12px rgba(231,76,60,0.4)}}
        @keyframes pulse-blue{0%,100%{box-shadow:0 0 0 0 rgba(52,152,219,0)}70%{box-shadow:0 0 0 12px rgba(52,152,219,0.4)}}
        @keyframes scanline{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}

        .timer-futuristic{background:linear-gradient(160deg,var(--p-az07) 0%,var(--p-az11a) 40%,var(--p-rj07) 100%);border:2px solid var(--p-az23);border-radius:var(--radius-xl);color:white;padding:22px;position:relative;overflow:hidden;box-shadow:0 0 60px rgba(192,57,43,0.15),inset 0 0 60px rgba(0,0,0,0.4);}
        .timer-futuristic::before{content:'';position:absolute;top:50%;left:-100%;width:40%;height:1px;background:linear-gradient(90deg,transparent,rgba(231,76,60,0.6),transparent);animation:scanline 4s linear infinite;}
        .timer-display-box{background:rgba(0,0,0,0.5);border-radius:var(--radius-md);border:1px solid rgba(255,255,255,0.08);padding:20px;margin-bottom:18px;display:flex;flex-direction:column;align-items:center;}
        .timer-time{font-size:5rem;font-weight:900;font-family:'Sora',sans-serif;letter-spacing:6px;line-height:1;transition:color 0.4s,text-shadow 0.4s;}
        .timer-work-mode{color:var(--p-rj63);text-shadow:0 0 30px rgba(255,68,68,0.8),0 0 60px rgba(255,68,68,0.4);}
        .timer-rest-mode{color:var(--p-az63);text-shadow:0 0 30px rgba(68,170,255,0.8),0 0 60px rgba(68,170,255,0.4);}
        .timer-inputs-container{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
        .timer-input-group{background:rgba(255,255,255,0.04);padding:10px 12px;border-radius:var(--radius-sm);flex:1;min-width:80px;border:1px solid rgba(255,255,255,0.08);}
        .timer-input-group label{color:var(--p-gr53);font-size:0.62rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;text-align:center;display:block;margin-bottom:5px;}
        .timer-input-group input{background:transparent;border:none;color:white;font-size:1.4rem;font-weight:900;text-align:center;width:100%;box-shadow:none;padding:0;font-family:'Sora',sans-serif;}
        .timer-input-group input:focus{border-bottom:2px solid var(--p-rj63);border-radius:0;}

        .scoreboard-panel{flex:1;border-radius:var(--radius-lg);padding:18px;color:white;text-align:center;min-width:140px;position:relative;overflow:hidden;}
        .scoreboard-panel.rojo{background:linear-gradient(160deg,var(--p-rj15),var(--p-rj46),var(--p-rj57));border:2px solid rgba(255,100,100,0.3);box-shadow:0 0 40px rgba(231,76,60,0.3),inset 0 0 30px rgba(0,0,0,0.3);}
        .scoreboard-panel.azul{background:linear-gradient(160deg,var(--p-az15),var(--p-az32a),var(--p-az44));border:2px solid rgba(100,150,255,0.3);box-shadow:0 0 40px rgba(41,128,185,0.3),inset 0 0 30px rgba(0,0,0,0.3);}
        .score-number{font-size:5rem;font-weight:900;line-height:1;margin:10px 0;font-family:'Sora',sans-serif;letter-spacing:4px;}
        .scoreboard-panel.rojo .score-number{text-shadow:0 0 20px rgba(255,100,100,0.8);}
        .scoreboard-panel.azul .score-number{text-shadow:0 0 20px rgba(100,170,255,0.8);}
        .score-btn{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:white;padding:10px;font-size:1rem;font-weight:900;border-radius:var(--radius-sm);cursor:pointer;transition:all 0.15s;flex:1;/* backdrop-filter quitado: causa bugs hit-testing en iOS Safari */font-family:'Sora',sans-serif;letter-spacing:1px;touch-action:manipulation;-webkit-user-select:none;user-select:none;}
        .score-btn:hover{background:rgba(255,255,255,0.2);transform:scale(1.05);}
        .score-btn:active{background:rgba(255,255,255,0.35);transform:scale(0.94);}

        .bracket-container{display:flex;flex-direction:column;gap:10px;margin-top:15px;padding:15px;background:var(--bg-app);border-radius:var(--radius-md);border:2px solid var(--border);}
        .bracket-match{display:flex;justify-content:space-between;align-items:center;background:var(--bg-card);padding:12px 16px;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);border-left:4px solid var(--primary);font-weight:700;font-size:0.9rem;flex-wrap:wrap;gap:8px;transition:all 0.2s;}
        .bracket-match:hover{transform:translateX(4px);}
        .bracket-vs{color:var(--primary);font-size:0.8rem;margin:0 8px;font-weight:900;font-family:'Sora',sans-serif;}

        .modal{display:none;position:fixed;inset:0;background:rgba(26,26,46,0.7);z-index:2000;padding:8px;overflow-y:auto;backdrop-filter:blur(6px);}
        #modal-wa{z-index:3000;}
        .modal-content{background:var(--bg-card);border-radius:var(--radius-xl);padding:24px 20px;width:100%;max-width:600px;margin:10px auto;box-shadow:var(--shadow-lg);border:2px solid var(--border);box-sizing:border-box;animation:modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1);}
        @keyframes modalIn{from{opacity:0;transform:scale(0.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
        .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;border-bottom:2px solid var(--border);padding-bottom:14px;}
        .modal-header h3{font-size:1rem;color:var(--accent);font-weight:900;text-transform:uppercase;letter-spacing:0.8px;margin:0;font-family:'Sora',sans-serif;}
        .close-modal{font-size:1.6rem;font-weight:bold;color:var(--text-muted);cursor:pointer;background:none;border:none;padding:0 6px;transition:all 0.2s;border-radius:var(--radius-full);width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
        .close-modal:hover{background:var(--primary-glow);color:var(--danger);}
        .avatar-preview-container{display:flex;align-items:center;gap:14px;background:var(--bg-app);padding:14px;border-radius:var(--radius-md);margin-bottom:14px;border:2px solid var(--border);}
        .avatar-preview{width:65px;height:65px;border-radius:var(--radius-full);background:var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center;border:3px solid var(--primary);flex-shrink:0;}
        .avatar-preview img{width:100%;height:100%;object-fit:cover;}
        .box-cuotas{background:var(--accent-glow);padding:16px;border-radius:var(--radius-md);border:2px solid var(--accent-light);margin-bottom:14px;}

        #login-screen{position:fixed;inset:0;padding:0;background:var(--p-az07);flex-direction:column;justify-content:flex-end;overflow:hidden;width:100%;max-width:100vw;min-height:100vh;min-height:100dvh;}
        .login-card{background:rgba(255,255,255,0.97);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:28px 24px 32px;border:2px solid rgba(255,255,255,0.5);}

        /* Ficha del socio: secciones desplegables */
        .ficha-sec{border-radius:12px;margin-bottom:12px;overflow:hidden;}
        .ficha-sec>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:13px 16px;font-weight:900;font-size:0.95rem;user-select:none;}
        .ficha-sec>summary::-webkit-details-marker{display:none;}
        .ficha-sec>summary .fs-arrow{margin-left:auto;transition:transform .2s;font-size:0.72rem;opacity:0.65;}
        .ficha-sec[open]>summary .fs-arrow{transform:rotate(180deg);}
        .ficha-sec>.fs-body{padding:2px 16px 14px;}
        #recibo-impresion,#boletin-impresion,#autorizacion-impresion,#rgpd-impresion,#carnet-impresion,#ficha-impresion,#mandato-impresion,#fichas-todas-impresion{display:none;}
        #ficha-impresion .ficha-table{width:100%;border-collapse:collapse;margin:6px 0 4px 0;font-size:0.9rem;}
        #ficha-impresion .ficha-table th{background:var(--p-az96);color:var(--p-az11);border:1px solid var(--p-az84);padding:7px 9px;text-align:left;width:18%;white-space:nowrap;}
        #ficha-impresion .ficha-table td{border:1px solid var(--p-az84);padding:7px 9px;text-align:left;}
        #ficha-impresion .ficha-seccion{font-size:0.95rem;color:var(--p-az40);text-transform:uppercase;letter-spacing:1px;margin:16px 0 4px 0;border-bottom:1px solid var(--p-az84);padding-bottom:3px;}
        #boletin-impresion #print-boletin-logo.watermark-bg{display:block!important;margin:0 auto 8px auto;max-height:62px;width:auto;object-fit:contain;float:none;position:static;opacity:1;}
        #boletin-impresion .boletin-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:0.9rem;page-break-inside:avoid;}
        #boletin-impresion .boletin-table th,#boletin-impresion .boletin-table td{border:1px solid var(--p-az84);padding:6px 8px;text-align:left;color:var(--p-az11);}
        #boletin-impresion .boletin-table th{background:var(--p-az96);color:var(--p-az11);width:40%;}
        #boletin-impresion .firma-box,#ficha-impresion .firma-box{margin-top:22px;display:flex;justify-content:space-around;text-align:center;}
        #boletin-impresion .firma-col,#ficha-impresion .firma-col{display:flex;flex-direction:column;align-items:center;width:230px;}
        #boletin-impresion .firma-grafico,#ficha-impresion .firma-grafico{height:70px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:2px;}
        #boletin-impresion .firma-sello,#ficha-impresion .firma-sello{max-height:66px;max-width:140px;object-fit:contain;}
        #boletin-impresion .firma-firma,#ficha-impresion .firma-firma{max-height:70px;max-width:200px;object-fit:contain;}
        #boletin-impresion .firma-line,#ficha-impresion .firma-line{border-top:1px solid var(--p-gr00);width:200px;margin-top:0;padding-top:8px;font-weight:bold;color:var(--p-az11);}
        @media print{body>*:not(.active-print){display:none!important;}.active-print{display:block!important;position:relative;width:100%;background:white;margin:0;color:black;-webkit-print-color-adjust:exact;print-color-adjust:exact;}}

        body.dark-mode{--bg-app:var(--p-az08);--bg-card:var(--p-az13);--bg-card-2:var(--p-az11b);--text-main:var(--p-az95);--text-muted:var(--p-az65a);--bg-secondary:var(--bg-card); --bg-primary:var(--bg-app); --text-primary:var(--text-main);--border:rgba(255,255,255,0.09);--border-strong:rgba(255,255,255,0.16);--primary:var(--p-az56);--primary-light:var(--p-az66);}
        /* LA LISTA QUE SE ABRE AL ELEGIR LA HORA LA PINTA EL SISTEMA, NO LA APP.
           Sin esta linea el navegador cree que la pagina es clara y dibuja esa
           lista sobre fondo blanco, con el texto casi blanco encima: no se ve
           nada. Medido: rgb(238,242,248) sobre blanco, contraste 1,05 a 1.
           color-scheme es lo unico que hace que el sistema la pinte oscura. */
        body.dark-mode{
            --c-blanco:#d9d3c4; --c-nada:#4a5163;
            --r-ok-f:rgba(63,199,154,0.12); --r-avi-f:rgba(221,164,63,0.13);
            --r-mal-f:rgba(240,119,107,0.12); --r-accion-f:rgba(124,163,236,0.14);
        }

        /* ═══════════════════════════════════════════════════════════════
           INICIO  ·  rediseño
           La pantalla empieza por lo que vas a hacer hoy, no por un saludo.
           ═══════════════════════════════════════════════════════════════ */
        .gd-saludo{padding:18px 4px 14px;}
        .gd-saludo .fecha{display:block;font-size:0.7rem;font-weight:700;letter-spacing:0.08em;
            text-transform:uppercase;color:var(--r-apag);margin-bottom:5px;}
        .gd-saludo h2{font-size:1.5rem;font-weight:800;line-height:1.14;letter-spacing:-0.03em;
            color:var(--r-tinta);margin:0;text-wrap:balance;}
        .gd-saludo .sub{font-size:0.86rem;color:var(--r-apag);margin-top:5px;line-height:1.4;}

        /* La tarjeta del día: es la única con borde de acento en la pantalla,
           porque es la única que pide que hagas algo. */
        .gd-hoy{background:var(--r-hoja);border:1.5px solid var(--r-accion);border-radius:16px;
            padding:16px;margin-bottom:12px;box-shadow:0 4px 18px var(--r-accion-f);}
        .gd-hoy.quieta{border-color:var(--r-linea);box-shadow:none;}
        .gd-hoy .et{font-size:0.64rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
            color:var(--r-apag);margin-bottom:6px;}
        .gd-hoy h3{font-size:1.06rem;font-weight:800;letter-spacing:-0.015em;line-height:1.28;
            color:var(--r-tinta);margin:0;}
        .gd-hoy .meta{font-size:0.79rem;color:var(--r-apag);margin-top:3px;line-height:1.4;}
        .gd-hoy .acciones{display:flex;gap:8px;margin-top:13px;}
        .gd-hoy .acciones .btn{margin:0;flex:1;}

        /* Cintas: un punto de color por alumno agrupado por cinturón. */
        .gd-cintas{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px;}
        .gd-cinta{display:inline-flex;align-items:center;gap:5px;background:var(--r-hoja2);
            border-radius:20px;padding:3px 9px 3px 5px;font-size:0.72rem;font-weight:700;
            color:var(--r-tinta);font-variant-numeric:tabular-nums;}
        .gd-cinta i{width:10px;height:10px;border-radius:50%;flex-shrink:0;
            box-shadow:inset 0 0 0 1px rgba(0,0,0,0.16);}
        .gd-cinta i.negro{box-shadow:inset 0 0 0 1.5px var(--c-oro);}
        .gd-cinta i.blanco{box-shadow:inset 0 0 0 1px var(--r-linea2);}

        /* Cifras: números discretos, no titulares. */
        .gd-cifras{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
        .gd-cifra{background:var(--r-hoja);border:1px solid var(--r-linea);border-radius:14px;
            padding:12px 14px;text-align:left;cursor:pointer;font-family:inherit;width:100%;
            display:block;transition:border-color .18s;}
        .gd-cifra:hover,.gd-cifra:focus-visible{border-color:var(--r-linea2);}
        .gd-cifra b{display:block;font-size:1.55rem;font-weight:800;letter-spacing:-0.03em;
            line-height:1.08;color:var(--r-tinta);font-variant-numeric:tabular-nums;}
        .gd-cifra b.avisa{color:var(--r-avi);}
        .gd-cifra span{display:block;font-size:0.72rem;color:var(--r-apag);margin-top:2px;font-weight:600;}

        /* Ingresos del mes, con los últimos meses en barras. */
        .gd-barras{display:flex;align-items:flex-end;gap:4px;height:40px;margin-top:10px;}
        .gd-barras i{flex:1;background:var(--r-ok);opacity:0.26;border-radius:3px 3px 0 0;min-height:2px;}
        .gd-barras i.ahora{opacity:1;}
        .gd-barras-pie{display:flex;justify-content:space-between;font-size:0.62rem;
            color:var(--r-apag);margin-top:4px;font-weight:600;}


        /* ── PASAR LISTA ─────────────────────────────────────────────
           Es lo que mas veces al ano se hace en esta app y estaba detras
           de un desplegable dentro de otra pestana. Ahora tiene pantalla
           propia: nombre grande, cinta a la vista, un toque para marcar. */
        .pl-ov{position:fixed;inset:0;z-index:99940;background:var(--r-fondo);
            display:flex;flex-direction:column;}
        .pl-top{background:var(--r-hoja);border-bottom:1px solid var(--r-linea);
            padding:calc(env(safe-area-inset-top) + 11px) 13px 11px;
            display:flex;align-items:center;gap:10px;flex-shrink:0;}
        .pl-x{width:34px;height:34px;border-radius:10px;border:none;background:var(--r-hoja2);
            color:var(--r-tinta);font-size:1.15rem;line-height:1;cursor:pointer;flex-shrink:0;
            font-family:inherit;}
        .pl-top .tit{flex:1;min-width:0;}
        .pl-top .tit b{display:block;font-size:0.92rem;font-weight:800;letter-spacing:-0.01em;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--r-tinta);}
        .pl-top .tit span{display:block;font-size:0.71rem;color:var(--r-apag);}
        .pl-cuenta{padding:14px 15px 10px;flex-shrink:0;}
        .pl-cuenta b{font-size:1.7rem;font-weight:800;letter-spacing:-0.03em;color:var(--r-tinta);
            font-variant-numeric:tabular-nums;}
        .pl-cuenta b i{font-style:normal;color:var(--r-apag);}
        .pl-cuenta span{font-size:0.78rem;color:var(--r-apag);margin-left:7px;}
        .pl-lista{flex:1;overflow-y:auto;padding:0 13px 16px;-webkit-overflow-scrolling:touch;}
        .pl-grupo{font-size:0.64rem;font-weight:800;letter-spacing:0.09em;text-transform:uppercase;
            color:var(--r-apag);margin:14px 2px 6px;}
        .pl-caja{background:var(--r-hoja);border:1px solid var(--r-linea);border-radius:14px;overflow:hidden;}
        .pl-fila{display:flex;align-items:center;gap:10px;padding:0 12px 0 0;width:100%;
            border:none;border-bottom:1px solid var(--r-linea);background:none;cursor:pointer;
            font-family:inherit;text-align:left;color:var(--r-tinta);}
        .pl-fila:last-child{border-bottom:none;}
        .pl-fila:active{background:var(--r-hoja2);}
        .pl-cint{width:5px;align-self:stretch;min-height:52px;flex-shrink:0;}
        /* El negro, sin su franja dorada, no se ve sobre fondo oscuro:
           parece que ese alumno no tiene cinturon. Con ella se lee en los
           dos modos, y ademas es como es de verdad. */
        .pl-cint.negro{box-shadow:inset 0 0 0 1px var(--r-linea);
            background-image:linear-gradient(180deg,transparent 38%,var(--c-oro) 38%,var(--c-oro) 62%,transparent 62%);}
        .pl-cint.blanco{box-shadow:inset -1px 0 0 var(--r-linea2);}
        .pl-av{width:30px;height:30px;border-radius:50%;background:var(--r-hoja2);flex-shrink:0;
            display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.76rem;
            color:var(--r-apag);margin-left:3px;overflow:hidden;}
        .pl-av img{width:100%;height:100%;object-fit:cover;}
        .pl-txt{flex:1;min-width:0;padding:9px 0;}
        .pl-txt b{display:block;font-size:0.88rem;font-weight:700;letter-spacing:-0.005em;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .pl-txt span{display:block;font-size:0.71rem;color:var(--r-apag);}
        .pl-tick{width:27px;height:27px;border-radius:50%;border:2px solid var(--r-linea2);
            flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .14s;}
        .pl-fila.si .pl-tick{background:var(--r-ok);border-color:var(--r-ok);}
        .pl-fila.si .pl-tick::after{content:"";width:6px;height:11px;border:solid #fff;
            border-width:0 2.5px 2.5px 0;transform:rotate(43deg) translate(-1px,-1px);}
        .pl-fila.no .pl-tick{background:var(--r-mal-f);border-color:var(--r-mal);}
        .pl-fila.no .pl-tick::after{content:"";width:11px;height:2.5px;background:var(--r-mal);border-radius:2px;}
        .pl-fila.no .pl-txt b{opacity:0.55;}
        .pl-pie{background:var(--r-hoja);border-top:1px solid var(--r-linea);flex-shrink:0;
            padding:11px 13px calc(env(safe-area-inset-bottom) + 13px);}
        .pl-pie .btn{margin:0;width:100%;}
        .pl-vacia{text-align:center;padding:40px 20px;color:var(--r-apag);font-size:0.9rem;line-height:1.55;}

        /* ═══════════════════════════════════════════════════════════════
           LOS ROLES  ·  aquí se cambia el aspecto de la app

           Arriba está la paleta (qué colores existen). Aquí abajo está para
           qué sirve cada uno. Si algún día quieres que la app sea verde, se
           tocan estas líneas y nada más.

           OJO A DÓNDE VIVEN: van en «body» y NO en «:root», y no es un
           capricho. Un alias como --r-hoja:var(--bg-card) se resuelve en el
           elemento donde se DECLARA, no donde se usa. Declarado en :root se
           quedaba con el color del modo claro para siempre, porque el modo
           oscuro cambia --bg-card en body. Resultado: en modo noche las
           tarjetas nuevas salían blancas con letra blanca. Aquí abajo, en
           cambio, body.dark-mode manda y cambian solas.
           ═══════════════════════════════════════════════════════════════ */
        body{
            --r-fondo:var(--bg-app);
            --r-hoja:var(--bg-card);
            --r-hoja2:var(--bg-card-2);
            --r-tinta:var(--text-main);
            --r-apag:var(--text-muted);
            --r-linea:var(--border);
            --r-linea2:var(--border-strong);
            --r-accion:var(--primary);
            --r-ok:var(--success);
            --r-avi:var(--warning);
            --r-mal:var(--danger);
            --r-ok-f:rgba(21,128,61,0.10);
            --r-avi-f:rgba(217,119,6,0.11);
            --r-mal-f:rgba(217,45,32,0.09);
            --r-accion-f:rgba(29,95,216,0.10);
        }


        /* ═══════════════════════════════════════════════════════════════
           EL BUZÓN DE AVISOS
           Antes los avisos aparecían flotando por su cuenta y llegaban a
           tapar un tercio de la pantalla los cinco a la vez. Ahora se
           recogen aquí y se abren cuando tú quieras.
           ═══════════════════════════════════════════════════════════════ */
        .gd-camp{position:relative;}
        .gd-camp-n{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;
            border-radius:9px;background:var(--danger);color:var(--p-gr100);font-size:0.6rem;
            font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;
            border:2px solid var(--t2);font-variant-numeric:tabular-nums;pointer-events:none;}
        .bz-ov{position:fixed;inset:0;z-index:99910;background:rgba(8,11,18,0.45);
            display:flex;flex-direction:column;align-items:center;padding:0 10px;}
        .bz-panel{width:100%;max-width:560px;background:var(--r-fondo);border-radius:0 0 18px 18px;
            box-shadow:0 18px 44px rgba(8,11,18,0.4);display:flex;flex-direction:column;
            max-height:82vh;overflow:hidden;}
        .bz-cab{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 15px 12px;
            background:var(--r-hoja);border-bottom:1px solid var(--r-linea);flex-shrink:0;}
        .bz-cab b{flex:1;font-size:0.98rem;font-weight:800;letter-spacing:-0.01em;color:var(--r-tinta);}
        .bz-cab .x{width:32px;height:32px;border-radius:10px;border:none;background:var(--r-hoja2);
            color:var(--r-tinta);font-size:1.05rem;cursor:pointer;font-family:inherit;flex-shrink:0;}
        .bz-cuerpo{padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
            -webkit-overflow-scrolling:touch;}
        .bz-vacio{text-align:center;padding:34px 18px;color:var(--r-apag);font-size:0.9rem;line-height:1.55;}
        .bz-vacio .ic{font-size:1.7rem;margin-bottom:6px;}
        /* Un aviso recogido deja de flotar: pierde su posición fija y su sombra,
           pero sigue siendo el MISMO elemento, con sus botones funcionando. */
        .bz-cuerpo > *{position:static !important;inset:auto !important;left:auto !important;
            right:auto !important;bottom:auto !important;top:auto !important;
            margin:0 !important;max-width:none !important;z-index:auto !important;
            box-shadow:none !important;width:auto !important;}


        /* ═══════════════════════════════════════════════════════════════
           BUSCAR EN TODO
           Once pestañas es mucho sitio donde mirar. Una sola caja que
           encuentra socios, clases, eventos, facturas y acciones, y te lleva.
           ═══════════════════════════════════════════════════════════════ */
        .bs-ov{position:fixed;inset:0;z-index:99920;background:var(--r-fondo);display:flex;flex-direction:column;}
        .bs-cab{display:flex;align-items:center;gap:9px;padding:calc(env(safe-area-inset-top) + 11px) 12px 11px;
            background:var(--r-hoja);border-bottom:1px solid var(--r-linea);flex-shrink:0;}
        .bs-caja{flex:1;display:flex;align-items:center;gap:8px;background:var(--r-hoja2);
            border:1.5px solid var(--r-linea);border-radius:11px;padding:9px 12px;min-width:0;}
        .bs-caja:focus-within{border-color:var(--r-accion);}
        .bs-caja svg{width:16px;height:16px;flex-shrink:0;color:var(--r-apag);}
        .bs-caja input{flex:1;min-width:0;border:none;background:none;outline:none;font-family:inherit;
            font-size:0.95rem;color:var(--r-tinta);padding:0;}
        .bs-caja input::placeholder{color:var(--r-apag);}
        .bs-x{width:34px;height:34px;border-radius:10px;border:none;background:var(--r-hoja2);
            color:var(--r-tinta);font-size:1.05rem;cursor:pointer;font-family:inherit;flex-shrink:0;}
        .bs-cuerpo{flex:1;overflow-y:auto;padding:8px 12px 20px;-webkit-overflow-scrolling:touch;}
        .bs-grupo{font-size:0.63rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
            color:var(--r-apag);margin:15px 3px 6px;}
        .bs-caja-r{background:var(--r-hoja);border:1px solid var(--r-linea);border-radius:13px;overflow:hidden;}
        .bs-fila{display:flex;align-items:center;gap:10px;width:100%;padding:0 12px 0 0;border:none;
            border-bottom:1px solid var(--r-linea);background:none;cursor:pointer;font-family:inherit;
            text-align:left;color:var(--r-tinta);}
        .bs-fila:last-child{border-bottom:none;}
        .bs-fila:active,.bs-fila:focus-visible{background:var(--r-hoja2);}
        .bs-cint{width:5px;align-self:stretch;min-height:46px;flex-shrink:0;}
        .bs-ic{width:28px;height:28px;border-radius:9px;background:var(--r-hoja2);flex-shrink:0;
            display:flex;align-items:center;justify-content:center;font-size:0.85rem;margin-left:11px;}
        .bs-txt{flex:1;min-width:0;padding:9px 0;}
        .bs-txt b{display:block;font-size:0.86rem;font-weight:700;letter-spacing:-0.005em;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .bs-txt span{display:block;font-size:0.71rem;color:var(--r-apag);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .bs-tag{font-size:0.64rem;font-weight:800;padding:2px 7px;border-radius:20px;flex-shrink:0;}
        .bs-tag.debe{background:var(--r-avi-f);color:var(--r-avi);}
        .bs-tag.ok{background:var(--r-ok-f);color:var(--r-ok);}
        .bs-vacio{text-align:center;padding:44px 20px;color:var(--r-apag);font-size:0.9rem;line-height:1.6;}
        .bs-pistas{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;justify-content:center;}
        .bs-pista{background:var(--r-hoja);border:1px solid var(--r-linea);border-radius:20px;
            padding:5px 11px;font-size:0.75rem;font-weight:600;color:var(--r-tinta);cursor:pointer;font-family:inherit;}


        /* ── COMPROBAR LA INSTALACIÓN ────────────────────────────────
           Todo lo que hace falta saber para responder a un «no me va». */
        .dg-ov{position:fixed;inset:0;z-index:99930;background:var(--r-fondo);display:flex;flex-direction:column;}
        .dg-cab{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 14px 12px;
            background:var(--r-hoja);border-bottom:1px solid var(--r-linea);flex-shrink:0;}
        .dg-cab b{flex:1;font-size:0.98rem;font-weight:800;color:var(--r-tinta);letter-spacing:-0.01em;}
        .dg-cab .x{width:32px;height:32px;border-radius:10px;border:none;background:var(--r-hoja2);
            color:var(--r-tinta);font-size:1.05rem;cursor:pointer;font-family:inherit;flex-shrink:0;}
        .dg-cuerpo{flex:1;overflow-y:auto;padding:14px 13px 24px;-webkit-overflow-scrolling:touch;}
        .dg-resumen{border-radius:14px;padding:14px 15px;margin-bottom:14px;border:1.5px solid;}
        .dg-resumen.bien{background:var(--r-ok-f);border-color:var(--r-ok);}
        .dg-resumen.ojo{background:var(--r-avi-f);border-color:var(--r-avi);}
        .dg-resumen b{display:block;font-size:1rem;font-weight:800;letter-spacing:-0.015em;line-height:1.3;}
        .dg-resumen.bien b{color:var(--r-ok);} .dg-resumen.ojo b{color:var(--r-avi);}
        .dg-resumen span{display:block;font-size:0.82rem;color:var(--r-tinta);margin-top:3px;line-height:1.45;opacity:0.85;}
        .dg-caja{background:var(--r-hoja);border:1px solid var(--r-linea);border-radius:14px;overflow:hidden;margin-bottom:12px;}
        .dg-fila{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-bottom:1px solid var(--r-linea);}
        .dg-fila:last-child{border-bottom:none;}
        .dg-luz{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:6px;}
        .dg-luz.bien{background:var(--r-ok);} .dg-luz.ojo{background:var(--r-avi);} .dg-luz.mal{background:var(--r-mal);}
        .dg-fila .t{flex:1;min-width:0;}
        .dg-fila .t b{display:block;font-size:0.85rem;font-weight:700;color:var(--r-tinta);}
        .dg-fila .t span{display:block;font-size:0.76rem;color:var(--r-apag);line-height:1.45;margin-top:1px;overflow-wrap:break-word;}
        .dg-fila .v{font-size:0.8rem;font-weight:800;color:var(--r-tinta);flex-shrink:0;
            font-variant-numeric:tabular-nums;text-align:right;max-width:42%;overflow-wrap:break-word;}
        .dg-tit{font-size:0.63rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
            color:var(--r-apag);margin:16px 3px 7px;}
        .dg-pie{padding:2px 4px 0;font-size:0.74rem;color:var(--r-apag);line-height:1.5;}


        /* ═══════════════════════════════════════════════════════════════
           SOCIOS  ·  la lista, primero
           ═══════════════════════════════════════════════════════════════ */
        /* La cinta del cinturón en el canto de cada ficha. El color no es
           adorno: es el grado, que ya está en la ficha. Con la lista abierta
           se ve de un vistazo cómo está repartido el club. */
        .member-card{position:relative;}
        .mc-cint{position:absolute;left:0;top:0;bottom:0;width:5px;
            border-radius:9px 0 0 9px;pointer-events:none;}
        .mc-cint.negro{background-image:linear-gradient(180deg,transparent 40%,
            var(--c-oro) 40%,var(--c-oro) 60%,transparent 60%);}
        .mc-cint.blanco{box-shadow:inset -1px 0 0 var(--r-linea2);}

        /* Buscador y filtros pegados debajo de la cabecera. 78px es lo que
           mide la cabecera; si algún día cambia, este número la sigue. */
        .soc-fijo{position:sticky;top:76px;z-index:60;background:var(--r-hoja);
            margin:0 -18px;padding:2px 18px 8px;
            box-shadow:0 6px 12px -8px rgba(8,11,18,0.22);}
        .soc-fijo .form-group{margin-bottom:0;}
        .soc-fijo .alarm-container{margin-bottom:8px;}
        body.dark-mode .soc-fijo{box-shadow:0 6px 14px -8px rgba(0,0,0,0.55);}
        @media (max-width:420px){
            .soc-fijo{top:74px;}
        }


        /* Los filtros, en una sola fila que se desliza. Antes eran una rejilla
           de dos columnas que se partia en tres filas y se comia 135 px de
           pantalla antes de ver a nadie. */
        .soc-fijo .alarm-container{display:flex;grid-template-columns:none;
            gap:6px;overflow-x:auto;padding:2px 18px 2px;margin:0 -18px 8px;
            scrollbar-width:none;-webkit-overflow-scrolling:touch;}
        .soc-fijo .alarm-container::-webkit-scrollbar{display:none;}
        .soc-fijo .btn-alarm{flex:0 0 auto;white-space:nowrap;padding:8px 13px;
            font-size:0.75rem;}

        /* La cabecera del listado, en pequeno: ya estas en la pestana de
           Socios y la lista es lo primero, asi que no hace falta un titulo
           grande diciendo que esto es la lista. */
        #desplegable-socios > summary{padding:8px 0 6px !important;}
        #desplegable-socios > summary [data-i18n="memberList"]{
            font-size:0.68rem !important;font-weight:800 !important;
            letter-spacing:0.09em;color:var(--r-apag) !important;}
        #desplegable-socios > summary [data-i18n="tapToHide"],
        #desplegable-socios > summary [data-i18n="tapToShow"]{display:none;}
        #desplegable-socios > div{margin-top:0 !important;padding-top:6px !important;
            border-top:none !important;}

        /* Fichas mas juntas: con veinticinco socios, cada pixel de relleno se
           multiplica por veinticinco. No se quita informacion, se aprieta. */
        .member-card{padding:11px 12px 11px 13px;gap:10px;}
        .member-list .member-card + .member-card{margin-top:8px;}
        .member-avatar{width:44px;height:44px;font-size:1.1rem;border-width:2px;}
        .member-name{font-size:0.95rem;line-height:1.25;}
        .alert-badge{font-size:0.655rem;padding:2px 8px;margin-top:3px;line-height:1.5;}


        /* ── LISTA COMPACTA ──────────────────────────────────────────
           Una ficha de socio ocupa 298 px porque lleva TODO: contacto,
           próximo grado, seis distintivos y cuatro botones. Con veinticinco
           socios eso son siete metros de scroll.

           En vez de quitar nada, la lista tiene dos modos. En compacta se
           ve identidad y lo urgente —nombre, cinturón, y los avisos que
           piden algo—; el resto sigue exactamente donde estaba y vuelve con
           un toque. Detallada es idéntica a como era antes. */
        .member-list.lista-compacta .member-card{padding:8px 12px 8px 13px;}
        .member-list.lista-compacta .member-avatar{width:38px;height:38px;font-size:0.95rem;}
        .member-list.lista-compacta .member-contact,
        .member-list.lista-compacta .gd-acciones,
        .member-list.lista-compacta .member-info > div:not(.member-name):not(.member-belt):not(.badges-container),
        .member-list.lista-compacta .alert-badge.gd-b-mute{display:none !important;}
        .member-list.lista-compacta .badges-container:empty{display:none;}
        .member-list.lista-compacta .member-name{font-size:0.92rem;}
        .member-list.lista-compacta .member-card + .member-card{margin-top:6px;}

        /* El interruptor, junto al buscador */
        .soc-modo{display:flex;align-items:center;gap:6px;margin-top:7px;}
        .soc-modo button{flex:1;padding:6px 10px;border-radius:9px;border:1px solid var(--r-linea);
            background:var(--r-hoja2);color:var(--r-apag);font-family:inherit;font-size:0.72rem;
            font-weight:700;cursor:pointer;}
        .soc-modo button.on{background:var(--r-tinta);border-color:var(--r-tinta);color:var(--r-fondo);}
        .soc-modo .cuenta{font-size:0.72rem;font-weight:700;color:var(--r-apag);
            font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:2px;}


        .soc-modo{flex-wrap:wrap;}
        .soc-modo button{flex:0 1 auto;}
        .soc-orden{flex:1 1 110px;min-width:0;width:auto;padding:6px 8px !important;
            border-radius:9px;border:1px solid var(--r-linea);background:var(--r-hoja2);
            color:var(--r-tinta);font-family:inherit;font-size:0.72rem;font-weight:700;
            margin:0 !important;height:auto;}
        .soc-modo .cuenta{margin-left:auto;}


        /* ═══════════════════════════════════════════════════════════════
           FICHA DEL SOCIO  ·  a pantalla completa, con pestañas
           ═══════════════════════════════════════════════════════════════ */
        #modal-editar{padding:0;}
        #modal-editar > .modal-content{
            max-width:640px;margin:0 auto;min-height:100dvh;border-radius:0;border:none;
            padding:0;display:flex;flex-direction:column;background:var(--r-fondo);}
        @media (min-width:660px){
            #modal-editar{padding:14px;}
            #modal-editar > .modal-content{min-height:auto;border-radius:18px;
                border:1px solid var(--r-linea);margin:14px auto;}
        }
        #modal-editar .modal-header{
            position:sticky;top:0;z-index:5;background:var(--r-hoja);
            margin:0;padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
            border-bottom:1px solid var(--r-linea) !important;}
        #modal-editar .modal-header h3{font-size:1rem;letter-spacing:-0.01em;}
        #modal-editar > .modal-content > form{padding:14px 16px 0;flex:1;display:flex;flex-direction:column;}
        #modal-editar .ficha-sec[open]{margin-bottom:8px;}

        /* Quién es: lo primero de la ficha */
        .ficha-cab{position:relative;display:flex;align-items:center;gap:12px;
            background:var(--r-hoja);border:1px solid var(--r-linea);border-radius:14px;
            padding:13px 14px 13px 17px;margin-bottom:12px;overflow:hidden;}
        .ficha-cinta{position:absolute;left:0;top:0;bottom:0;width:6px;
            background:var(--c-nada);pointer-events:none;}
        .ficha-cab .avatar-preview{width:56px;height:56px;border-radius:50%;
            overflow:hidden;flex-shrink:0;background:var(--r-hoja2);
            display:flex;align-items:center;justify-content:center;
            box-shadow:0 2px 8px rgba(8,11,18,0.12);}
        .ficha-cab .avatar-preview img{width:100%;height:100%;object-fit:cover;}
        .ficha-quien{flex:1;min-width:0;}
        .ficha-quien b{display:block;font-size:1.02rem;font-weight:800;letter-spacing:-0.015em;
            line-height:1.25;color:var(--r-tinta);overflow-wrap:break-word;}
        .ficha-quien span{display:block;font-size:0.76rem;color:var(--r-apag);margin-top:2px;
            overflow-wrap:break-word;}
        .ficha-estado{font-size:0.66rem;font-weight:800;padding:3px 9px;border-radius:20px;
            flex-shrink:0;align-self:flex-start;white-space:nowrap;}
        .ficha-estado.ok{background:var(--r-ok-f);color:var(--r-ok);}
        .ficha-estado.debe{background:var(--r-avi-f);color:var(--r-avi);}
        .ficha-estado.mal{background:var(--r-mal-f);color:var(--r-mal);}

        /* Pestañas: abren y cierran los <details> que ya existían */
        .ficha-tabs{display:flex;gap:6px;overflow-x:auto;margin:0 -16px 12px;padding:2px 16px 6px;
            scrollbar-width:none;-webkit-overflow-scrolling:touch;
            position:sticky;top:57px;z-index:4;background:var(--r-fondo);}
        .ficha-tabs::-webkit-scrollbar{display:none;}
        .ficha-tabs button{flex:0 0 auto;white-space:nowrap;padding:7px 14px;border-radius:20px;
            border:1px solid var(--r-linea);background:var(--r-hoja);color:var(--r-apag);
            font-family:inherit;font-size:0.79rem;font-weight:700;cursor:pointer;}
        .ficha-tabs button.on{background:var(--r-tinta);border-color:var(--r-tinta);color:var(--r-fondo);}

        /* Con pestañas, la cabecera de cada sección sobra: ya la dice la pestaña.
           El <details> sigue ahí y sigue funcionando; solo se esconde su título. */
        #modal-editar .ficha-sec{border-left:none !important;background:transparent !important;
            margin-bottom:0;border-radius:0;}
        #modal-editar .ficha-sec > summary{display:none;}
        #modal-editar .ficha-sec > .fs-body{padding:0;}

        /* La barra de acciones, siempre a mano */
        .ficha-pie{position:sticky;bottom:0;z-index:5;background:var(--r-hoja);
            margin:22px -16px 0 !important;padding:11px 16px calc(env(safe-area-inset-bottom) + 12px);
            border-top:1px solid var(--r-linea);grid-template-columns:1fr 1fr;}
        .ficha-pie .btn{margin:0;}
        #edit-btn-baja{padding:0 0 18px;border-top:none !important;margin-top:12px !important;}


        /* ═══════════════════════════════════════════════════════════════
           FINANZAS  ·  el año de un vistazo
           El resumen anual estaba dentro de un desplegable cerrado: la
           pregunta que se hace un director —«¿cómo va el año?»— vivía a dos
           toques de distancia. Ahora es lo primero.
           ═══════════════════════════════════════════════════════════════ */
        .fn-panel{background:var(--r-hoja);border:1px solid var(--r-linea);
            border-radius:16px;padding:15px 15px 12px;margin-bottom:12px;}
        .fn-cab{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
        .fn-cab .et{flex:1;font-size:0.64rem;font-weight:800;letter-spacing:0.1em;
            text-transform:uppercase;color:var(--r-apag);}
        .fn-cab button{width:30px;height:30px;border-radius:9px;border:1px solid var(--r-linea);
            background:var(--r-hoja2);color:var(--r-tinta);font-family:inherit;font-size:0.9rem;
            font-weight:800;cursor:pointer;flex-shrink:0;line-height:1;}
        .fn-cab button[disabled]{opacity:0.35;cursor:default;}
        .fn-cab .anio{font-family:inherit;font-size:0.92rem;font-weight:800;
            color:var(--r-tinta);font-variant-numeric:tabular-nums;min-width:44px;text-align:center;}

        /* La cifra que manda: el resultado del año */
        .fn-hero{font-size:2.1rem;font-weight:800;letter-spacing:-0.035em;line-height:1.05;
            color:var(--r-tinta);font-variant-numeric:tabular-nums;}
        .fn-hero.neg{color:var(--r-mal);}
        .fn-hero-sub{font-size:0.76rem;color:var(--r-apag);margin-top:2px;}

        /* Ingresos, gastos y deuda: números, no barras */
        .fn-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--r-linea);
            border:1px solid var(--r-linea);border-radius:12px;overflow:hidden;margin:13px 0 4px;}
        .fn-cifras div{background:var(--r-hoja);padding:9px 10px;}
        .fn-cifras dt{font-size:0.63rem;font-weight:700;color:var(--r-apag);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .fn-cifras dd{font-size:0.98rem;font-weight:800;color:var(--r-tinta);margin-top:1px;
            font-variant-numeric:tabular-nums;letter-spacing:-0.02em;}
        .fn-cifras dd.debe{color:var(--r-avi);}

        /* La gráfica */
        .fn-graf{margin-top:12px;}
        .fn-graf svg{display:block;width:100%;height:auto;overflow:visible;}
        .fn-cero{stroke:var(--r-linea2);stroke-width:1;}
        .fn-guia{stroke:var(--r-linea);stroke-width:1;}
        .fn-mes{fill:var(--r-apag);font-size:7.5px;font-weight:700;text-anchor:middle;
            font-family:inherit;letter-spacing:-0.2px;}
        .fn-mes.hoy{fill:var(--r-tinta);}
        .fn-val{fill:var(--r-apag);font-size:8.5px;font-weight:800;text-anchor:middle;
            font-family:inherit;font-variant-numeric:tabular-nums;}
        .fn-esc{fill:var(--r-apag);font-size:8px;font-weight:600;font-family:inherit;
            font-variant-numeric:tabular-nums;}
        .fn-barra{cursor:pointer;}
        .fn-barra.pos{fill:var(--fn-pos);}
        .fn-barra.neg{fill:var(--fn-neg);}
        .fn-barra.futuro{opacity:0.30;}
        .fn-barra.sel{stroke:var(--r-tinta);stroke-width:1.5;paint-order:stroke;}
        .fn-toca{fill:transparent;cursor:pointer;}
        .fn-leyenda{display:flex;gap:14px;margin-top:9px;font-size:0.7rem;color:var(--r-apag);
            font-weight:600;align-items:center;flex-wrap:wrap;}
        .fn-leyenda i{width:9px;height:9px;border-radius:2px;display:inline-block;
            margin-right:5px;vertical-align:-1px;}
        .fn-detalle{margin-top:10px;background:var(--r-hoja2);border-radius:10px;
            padding:9px 11px;font-size:0.76rem;color:var(--r-tinta);line-height:1.5;}
        .fn-detalle b{font-variant-numeric:tabular-nums;}
        .fn-detalle .cual{font-weight:800;display:block;margin-bottom:2px;}

        /* Los dos polos del cero. Validados con el comprobador de paletas:
           en claro y en oscuro pasan banda de luz, croma, contraste y el piso
           de visión normal. La separación bajo daltonismo cae en 6–8, que solo
           es válida con una segunda pista — y aquí la hay, la más fuerte que
           existe para una polaridad: la barra sube o baja del cero, y el
           número lleva su signo delante. */
        body{--fn-pos:#15803d;--fn-neg:#c2410c;}
        body.dark-mode{--fn-pos:#259973;--fn-neg:#d4574b;}

        /* Caja de este mes */
        .fn-mes-caja{margin-top:12px;background:var(--r-hoja2);border-radius:12px;padding:12px 13px;}
        .fn-mes-caja .t{font-size:0.64rem;font-weight:800;letter-spacing:0.09em;
            text-transform:uppercase;color:var(--r-apag);margin-bottom:8px;}
        .fn-fila{display:flex;justify-content:space-between;font-size:0.81rem;margin-bottom:4px;
            color:var(--r-tinta);}
        .fn-fila b{font-variant-numeric:tabular-nums;}
        .fn-barra-prog{height:8px;border-radius:999px;background:var(--r-linea);overflow:hidden;margin:7px 0;}
        .fn-barra-prog i{display:block;height:100%;background:var(--fn-pos);border-radius:999px;}


        /* ═══════════════════════════════════════════════════════════════
           ASISTENCIA  ·  lo del día, primero
           ═══════════════════════════════════════════════════════════════ */
        .as-hoy{background:var(--r-hoja);border:1.5px solid var(--r-accion);border-radius:16px;
            padding:15px 16px;margin-bottom:12px;box-shadow:0 4px 18px var(--r-accion-f);}
        .as-hoy.quieta{border-color:var(--r-linea);box-shadow:none;}
        .as-hoy .et{font-size:0.63rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
            color:var(--r-apag);margin-bottom:5px;}
        .as-hoy h3{font-size:1.05rem;font-weight:800;letter-spacing:-0.015em;line-height:1.28;
            color:var(--r-tinta);margin:0;}
        .as-hoy .meta{font-size:0.78rem;color:var(--r-apag);margin-top:3px;line-height:1.45;}
        .as-hoy .btn{margin-top:12px;width:100%;}
        .as-marca{display:flex;align-items:baseline;gap:8px;margin-top:10px;}
        .as-marca b{font-size:1.5rem;font-weight:800;letter-spacing:-0.03em;color:var(--r-tinta);
            font-variant-numeric:tabular-nums;line-height:1;}
        .as-marca b i{font-style:normal;color:var(--r-apag);}
        .as-marca span{font-size:0.75rem;color:var(--r-apag);}

        /* El dia que se esta marcando, pegado mientras se recorre la lista.
           Solo esa linea: pegar tambien los mandos se comia 300 px de los
           844 que tiene un movil y apenas quedaban dos alumnos a la vista. */
        .as-fijo{position:sticky;top:76px;z-index:60;background:var(--r-hoja);
            margin:0 -18px 10px;padding:9px 18px;
            display:flex;align-items:center;gap:10px;
            border-bottom:1px solid var(--r-linea);
            box-shadow:0 6px 12px -8px rgba(8,11,18,0.22);}
        .as-fijo h4{flex:1;min-width:0;margin:0;padding:0;border:none;
            font-size:0.82rem;font-weight:800;letter-spacing:-0.01em;color:var(--r-tinta);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .as-fijo button{flex-shrink:0;border:none;background:var(--r-accion);
            color:var(--p-gr100);font-family:inherit;
            font-size:0.7rem;font-weight:800;border-radius:999px;padding:6px 13px;
            cursor:pointer;line-height:1.3;}
        .as-fijo button:active{transform:scale(0.96);}
        body.dark-mode .as-fijo{box-shadow:0 6px 14px -8px rgba(0,0,0,0.55);}
        @media (max-width:420px){ .as-fijo{top:74px;} }
        /* aviso de un segundo al volver a los mandos */
        .as-ojo{box-shadow:0 0 0 3px var(--r-accion-f),0 0 0 1.5px var(--r-accion) !important;
            border-radius:10px;transition:box-shadow .25s ease;}
        /* Igual que en Socios: la cabecera del listado, en pequeño */
        #desplegable-asistencia > summary{padding:8px 0 6px !important;}
        #desplegable-asistencia > summary > span:first-child{
            font-size:0.68rem !important;font-weight:800 !important;letter-spacing:0.09em;
            color:var(--r-apag) !important;}
        #desplegable-asistencia > summary [data-i18n="tapToHide"],
        #desplegable-asistencia > summary [data-i18n="tapToShow"]{display:none;}
        #desplegable-asistencia > div{margin-top:0 !important;padding-top:6px !important;
            border-top:none !important;}


        /* ═══════════════════════════════════════════════════════════════
           AGENDA  ·  lo que viene, primero
           ═══════════════════════════════════════════════════════════════ */
        .ag-panel{background:var(--r-hoja);border:1px solid var(--r-linea);border-radius:16px;
            padding:14px 15px 12px;margin-bottom:12px;}
        .ag-panel .et{font-size:0.63rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
            color:var(--r-apag);margin-bottom:9px;}
        .ag-lista{display:flex;flex-direction:column;gap:8px;}
        .ag-ev{display:flex;align-items:center;gap:11px;width:100%;border:none;background:none;
            font-family:inherit;text-align:left;color:var(--r-tinta);cursor:pointer;padding:0;}
        .ag-fecha{width:44px;flex-shrink:0;border-radius:10px;padding:5px 0;text-align:center;
            background:var(--r-hoja2);line-height:1.1;}
        .ag-fecha b{display:block;font-size:1rem;font-weight:800;letter-spacing:-0.02em;
            font-variant-numeric:tabular-nums;}
        .ag-fecha span{display:block;font-size:0.55rem;font-weight:800;letter-spacing:0.06em;
            text-transform:uppercase;color:var(--r-apag);margin-top:1px;}
        .ag-fecha.pronto{background:var(--r-avi-f);}
        .ag-fecha.pronto b,.ag-fecha.pronto span{color:var(--r-avi);}
        .ag-ev .txt{flex:1;min-width:0;}
        .ag-ev .txt b{display:block;font-size:0.88rem;font-weight:700;letter-spacing:-0.005em;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .ag-ev .txt span{display:block;font-size:0.71rem;color:var(--r-apag);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .ag-cuando{font-size:0.68rem;font-weight:800;padding:2px 8px;border-radius:20px;
            flex-shrink:0;background:var(--r-hoja2);color:var(--r-apag);white-space:nowrap;}
        .ag-cuando.pronto{background:var(--r-avi-f);color:var(--r-avi);}
        .ag-cuando.hoy{background:var(--r-accion-f);color:var(--r-accion);}
        .ag-vacio{font-size:0.85rem;color:var(--r-apag);line-height:1.55;padding:6px 0 2px;}
        .ag-nota{margin-top:11px;padding-top:11px;border-top:1px dashed var(--r-linea);
            font-size:0.8rem;color:var(--r-tinta);line-height:1.5;}
        .ag-nota .t{font-size:0.63rem;font-weight:800;letter-spacing:0.09em;text-transform:uppercase;
            color:var(--r-apag);margin-bottom:4px;}

        body.dark-mode{ color-scheme: dark; }
        body:not(.dark-mode){ color-scheme: light; }
        /* Y por si algun movil no hace caso al color-scheme, se le dice
           tambien a mano de que color va cada linea de la lista. */
        body.dark-mode select option,
        body.dark-mode datalist option{ background:var(--p-az10); color:var(--p-az96); }
        body.dark-mode input,body.dark-mode select,body.dark-mode textarea{background:var(--p-az10);color:var(--p-az96);border-color:rgba(255,255,255,0.12);}
        body.dark-mode input:focus,body.dark-mode select:focus,body.dark-mode textarea:focus{background:var(--p-az14);border-color:var(--primary);}
        body.dark-mode .card{background:var(--p-az14);border-color:rgba(255,255,255,0.08);box-shadow:0 4px 20px rgba(0,0,0,0.4);}
        body.dark-mode .cloud-sync-card{background:linear-gradient(135deg,var(--p-am05),var(--p-am05a));border-color:rgba(255,187,51,0.2);}
        body.dark-mode .member-card{background:var(--p-az14);border-color:rgba(255,255,255,0.08);}
        body.dark-mode .member-card:hover{border-color:var(--primary);}
        body.dark-mode .modal-content{background:var(--p-az14);border-color:rgba(255,255,255,0.12);}
        body.dark-mode .box-cuotas{background:var(--p-az08a);border-color:rgba(255,255,255,0.12);}
        body.dark-mode .asist-item{background:var(--p-az14);border-color:rgba(255,255,255,0.08);}
        body.dark-mode .sidebar{background:var(--p-az10);border-right:1px solid rgba(255,255,255,0.08);}
        body.dark-mode .sidebar-item{color:var(--p-az96);border-color:rgba(255,255,255,0.08);}
        body.dark-mode .sidebar-item:hover{background:rgba(255,68,68,0.1);color:var(--primary);}
        body.dark-mode .bracket-match{background:var(--p-az14);border-color:rgba(255,255,255,0.08);color:var(--p-az96);}
        body.dark-mode .dash-stat{background:var(--p-az14);border-color:rgba(255,255,255,0.08);}
        body.dark-mode .fin-box{background:var(--p-az14);border-color:rgba(255,255,255,0.08);}
        body.dark-mode .nav-tabs{background:var(--p-az10);border-top-color:rgba(255,255,255,0.08);}
        body.dark-mode .tab-btn{color:var(--p-az70);}
        body.dark-mode .tab-btn.active{color:var(--primary);border-top-color:var(--primary);}
        body.dark-mode .login-card{background:rgba(26,26,46,0.97);border-color:rgba(255,255,255,0.12);}
        body.dark-mode header{box-shadow:0 4px 24px rgba(255,68,68,0.2);}

        /* ── Selector de tema de color ── */
        #color-picker-overlay{display:none;position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,0.5);align-items:flex-end;justify-content:center;}
        #color-picker-overlay.open{display:flex;}
        #color-picker-sheet{background:var(--bg-card);border-radius:24px 24px 0 0;padding:22px 18px calc(34px + env(safe-area-inset-bottom));width:100%;max-width:520px;animation:cpSlideUp 0.25s ease both;box-shadow:0 -8px 40px rgba(0,0,0,0.3);}
        @keyframes cpSlideUp{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
        #color-picker-sheet h3{font-size:0.9rem;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-muted);margin-bottom:18px;text-align:center;}
        .cp-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
        .cp-swatch{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;padding:8px 4px;border-radius:14px;border:2px solid transparent;transition:all 0.15s;}
        .cp-swatch:hover{background:var(--bg-card-2);}
        .cp-swatch.active{border-color:var(--primary);}
        .cp-circle{width:46px;height:46px;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,0.25);}
        .cp-label{font-size:0.64rem;font-weight:700;color:var(--text-muted);text-align:center;}

        ::-webkit-scrollbar{width:5px;height:5px;}
        ::-webkit-scrollbar-track{background:transparent;}
        ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-full);}

        @media(min-width:768px){body{padding-bottom:0!important;padding-left:90px!important;}header{position:static!important;}.nav-tabs{position:fixed!important;top:0!important;bottom:0!important;left:0!important;width:90px!important;flex-direction:column!important;justify-content:flex-start!important;border-top:none!important;border-right:2px solid var(--border)!important;padding-top:20px!important;height:100vh!important;overflow-y:auto!important;}.tab-btn{flex:none!important;width:100%!important;padding:14px 4px!important;min-height:70px!important;font-size:0.52rem!important;border-top:none!important;border-left:4px solid transparent!important;}.tab-btn.active{border-left-color:var(--primary)!important;border-top:none!important;}.container{padding:24px!important;max-width:900px!important;}.grid-responsive{grid-template-columns:1fr 1fr!important;gap:16px!important;}button.btn{width:auto!important;min-width:130px!important;}.modal-content{padding:30px!important;margin:30px auto!important;}}
        @media(min-width:1024px){body{padding-left:220px!important;}.nav-tabs{width:220px!important;align-items:stretch!important;}.tab-btn{flex-direction:row!important;justify-content:flex-start!important;padding:16px 20px!important;gap:14px!important;font-size:0.85rem!important;text-align:left!important;min-height:auto!important;}.container{max-width:1100px!important;}}
        @media screen and (orientation:landscape) and (max-height:500px){body{padding-bottom:0!important;padding-left:60px!important;}header{padding:6px 12px!important;}header h1{font-size:0.8rem!important;}.subtitle{display:none!important;}.nav-tabs{position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:60px!important;flex-direction:column!important;border-top:none!important;border-right:2px solid var(--border)!important;height:100vh!important;padding-top:0!important;overflow-y:auto!important;}.tab-btn{flex:none!important;width:100%!important;min-height:52px!important;padding:8px 2px!important;font-size:0.48rem!important;border-top:none!important;border-left:3px solid transparent!important;}.tab-btn.active{border-left-color:var(--primary)!important;}.container{padding:8px 10px!important;gap:8px!important;}.card{padding:10px 12px!important;}.grid-responsive{grid-template-columns:1fr 1fr!important;gap:8px!important;}.timer-time{font-size:3.5rem!important;}.score-number{font-size:3.5rem!important;}}

        /* ── iOS / Safari fixes ─────────────────────────────────── */
        /* Safe area para notch (iPhone X+) */
        body {
            padding-top:    env(safe-area-inset-top);
            /* Reservar el alto de la barra de navegación inferior fija + el safe-area,
               para que el último botón (p. ej. "Guardar Balance") no quede tapado. */
            padding-bottom: calc(90px + env(safe-area-inset-bottom));
            padding-left:   env(safe-area-inset-left);
            padding-right:  env(safe-area-inset-right);
        }

        /* 100vh en iOS incluye la chrome del navegador — usar dvh o fallback */
        .sidebar {
            height: 100vh;
            height: 100dvh;
        }

        /* Scroll suave en iOS */
        .tab-content,
        .member-list,
        .member-list-compact,
        .asist-list {
            -webkit-overflow-scrolling: touch;
        }

        /* Botones: evitar highlight azul de iOS al tocar */
        button, a, input, select, textarea {
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
        }

        /* Inputs en iOS — evitar zoom automático al hacer focus */
        input, select, textarea {
            font-size: max(16px, 1em);
        }
        /* ────────────────────────────────────────────────────────── */

        /* ── Botones marcador: sin delay en iOS ──────────────────── */
        .scoreboard-panel button,
        .timer-futuristic button,
        [onclick*="addScore"],
        [onclick*="addFoul"],
        [onclick*="resetMarcador"],
        [onclick*="startTimer"],
        [onclick*="pauseTimer"] {
            touch-action: manipulation;
            -webkit-user-select: none;
            user-select: none;
        }
        /* En DESCANSO: bloquear SOLO los botones de puntos y faltas */
        body.fase-descanso [onclick*="addScore"],
        body.fase-descanso [onclick*="addFalta"] {
            opacity: 0.35;
            pointer-events: none;
            filter: grayscale(0.5);
        }
        /* Zona de puntuación: asegurar que los taps llegan */
        .scoreboard-panel {
            -webkit-transform: translateZ(0); /* force GPU layer iOS */
            transform: translateZ(0);
        }
.dias-sel{display:flex;gap:6px;flex-wrap:wrap;}
/* Los días de entreno del socio. Son interruptores, no botones normales:
   que uno esté apagado quiere decir «ese día no viene», y tiene que notarse.
   Por eso llevan su color escrito aquí y no heredado: si se deja al azar de
   lo que herede, el mecanismo que uniforma los botones los pinta todos
   iguales y dejas de saber qué días entrena cada uno. */
.dia-btn{flex:1;min-width:34px;padding:9px 0;border-radius:8px;
  border:2px solid var(--border-strong,var(--p-az82));
  background:var(--bg-card-2,var(--p-az96a)) !important;
  color:var(--text-muted,var(--p-az41)) !important;
  font-weight:700;cursor:pointer;font-family:inherit;font-size:0.82rem;
  opacity:0.75;transition:all 0.15s;}
.dia-btn.on{
  /* --primary-btn es el mismo color del club, pero en el punto exacto en que
     la letra blanca se lee encima. Lo calcula la app al elegir el tema. */
  background:var(--primary-btn, var(--primary,var(--p-az67))) !important;
  background-image:none !important;
  color:var(--p-gr100) !important;
  border-color:var(--primary-btn, var(--primary,var(--p-az67))) !important;
  font-weight:900;opacity:1;
  /* el realce del día marcado: así la diferencia no depende sólo del color,
     que hay gente que los distingue mal */
  box-shadow:0 0 0 2px var(--primary-glow,rgba(99,102,241,0.25));
  transform:translateY(-1px);}
body.dark-mode .dia-btn{
  background:rgba(255,255,255,0.05) !important;
  color:var(--text-muted,var(--p-az70)) !important;
  border-color:rgba(255,255,255,0.16);}
/* Y el día marcado, de noche, dicho entero. Si sólo se dice «de noche, un
   día», esa instrucción resulta ser más concreta que «un día marcado» y se
   la come: los siete salen apagados y no sabes qué días entrena nadie. */
body.dark-mode .dia-btn.on{
  background:var(--primary-btn, var(--primary,var(--p-az66))) !important;
  background-image:none !important;
  color:var(--p-gr100) !important;
  border-color:var(--primary-btn, var(--primary,var(--p-az66))) !important;
  opacity:1;}