/* Esta app es siempre clara. Si no se dice, un movil en modo oscuro pinta
   sus desplegables oscuros sobre la pagina blanca y no se leen. */
:root{ color-scheme: light; }

  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Sora:wght@600;700;800&display=swap');
  /* ══ GestionDo · Ayudante — sistema visual 2026 ══ */
  :root{
    --bg:#0d111c; --bg2:#111725; --card:#161c2b; --card2:#1c2437;
    --line:rgba(255,255,255,0.08); --line2:rgba(255,255,255,0.15);
    --text:#eef2f8; --muted:#95a0b5; --muted2:#727e94;
    --acc:#2f6fed; --acc2:#2559c4; --acc-ink:#ffffff; --acc-txt:#7ba6f7; --acc-soft:rgba(47,111,237,0.14);
    --green:#22c55e; --green2:#15803d; --green-soft:rgba(34,197,94,0.13);
    --red:#f0574f; --red2:#d92d20; --red-soft:rgba(217,45,32,0.14);
    --blue:#5b90f5; --blue-soft:rgba(91,144,245,0.14);
    --navy:#1e2a4a; --navy2:#0d111c; --border:rgba(255,255,255,0.08); --gold:#d97706; --muted-c:#95a0b5;
    --r:13px; --r-sm:10px; --r-xs:7px; --r-pill:999px;
    --sh1:0 1px 2px rgba(0,0,0,0.32);
    --sh2:0 8px 24px rgba(0,0,0,0.34);
    --sh3:0 20px 52px rgba(0,0,0,0.46);
    --hd:58px;
  }
  html[data-tema="claro"]{
    --bg:#f2f5fb; --bg2:#ffffff; --card:#ffffff; --card2:#f6f8fd;
    --line:rgba(15,23,42,0.10); --line2:rgba(15,23,42,0.20);
    --text:#101a2e; --muted:#5c6884; --muted2:#7c88a4;
    --acc-txt:#96690a; --acc-soft:rgba(240,180,41,0.18);
    --green-soft:rgba(22,163,74,0.12); --red-soft:rgba(220,38,38,0.10); --blue-soft:rgba(99,102,241,0.11);
    --navy:#eef1f8; --navy2:#ffffff; --border:rgba(15,23,42,0.10);
    --sh1:0 1px 2px rgba(15,23,42,0.06);
    --sh2:0 8px 24px rgba(15,23,42,0.09);
    --sh3:0 20px 52px rgba(15,23,42,0.16);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;font-family:'Outfit','Segoe UI',system-ui,Arial,sans-serif;color:var(--text);
    background:var(--bg);
    background-image:radial-gradient(1000px 520px at 92% -140px,var(--acc-soft),transparent 62%),
                     radial-gradient(820px 480px at -12% 34%,var(--blue-soft),transparent 58%);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;letter-spacing:-0.005em;
    padding-bottom:env(safe-area-inset-bottom);
  }
  @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes gdPop{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:none}}
  @keyframes gdSheet{from{transform:translateY(100%)}to{transform:none}}
  ::-webkit-scrollbar{width:9px;}
  ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:2px solid transparent;background-clip:padding-box;}
  ::-webkit-scrollbar-track{background:transparent;}
  .hidden{display:none!important;}

  /* ── Cabecera ── */
  header{
    height:var(--hd);display:flex;align-items:center;gap:8px;
    padding:0 12px 0 14px;position:sticky;top:0;z-index:40;
    background:var(--bg2);border-bottom:1px solid var(--line);
    box-shadow:0 1px 0 var(--line),0 6px 22px rgba(0,0,0,0.16);
    backdrop-filter:saturate(1.4) blur(8px);
  }
  header .hd-txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.15;}
  header .hd-club{font-family:'Sora','Outfit',sans-serif;font-weight:800;font-size:0.92rem;color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  header .hd-rol{font-size:0.62rem;font-weight:800;letter-spacing:1.1px;color:var(--acc-txt);text-transform:uppercase;}
  header .hd-ico{
    flex-shrink:0;width:36px;height:36px;border-radius:var(--r-pill);border:1px solid var(--line);
    background:var(--card2);color:var(--muted);font-size:1.02rem;font-weight:800;cursor:pointer;
    font-family:inherit;display:flex;align-items:center;justify-content:center;padding:0;
    transition:background .18s,color .18s,border-color .18s;
  }
  header .hd-ico:hover{background:var(--acc-soft);color:var(--acc-txt);border-color:var(--line2);}
  header .logo{font-family:'Sora','Outfit',sans-serif;font-weight:900;letter-spacing:0.2px;font-size:1.05rem;}
  header .logo b,.logo b{color:var(--acc-txt);}
  header .sp{flex:1;}

  /* ── Contenedor ── */
  .wrap{max-width:660px;margin:0 auto;padding:14px 14px 34px;}
  .center{min-height:82vh;display:flex;flex-direction:column;justify-content:center;}

  /* ── Tarjetas ── */
  .card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r);
    padding:16px;margin-bottom:13px;box-shadow:var(--sh1);
  }
  .card.tight{padding:12px;}
  [id^="view-"]:not(.hidden)>.card,[id^="screen-"]:not(.hidden)>.card{animation:fadeUp .38s cubic-bezier(.22,.9,.35,1) both;}
  [id^="view-"]:not(.hidden)>.card:nth-child(2){animation-delay:.05s;}
  [id^="view-"]:not(.hidden)>.card:nth-child(n+3){animation-delay:.1s;}

  /* ── Tipografía ── */
  .title{font-family:'Sora','Outfit',sans-serif;font-weight:800;font-size:1.06rem;line-height:1.25;margin-bottom:3px;letter-spacing:-0.01em;}
  .sub{color:var(--muted);font-size:0.83rem;line-height:1.45;margin-bottom:13px;}
  .eyebrow{font-size:0.63rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted2);margin-bottom:5px;}
  .err{color:var(--red);font-size:0.82rem;min-height:18px;margin:6px 0;text-align:center;font-weight:600;}
  .count{font-size:0.8rem;color:var(--muted);text-align:center;margin-top:10px;font-weight:600;}
  .link{color:var(--acc-txt);cursor:pointer;font-weight:700;font-size:0.86rem;text-decoration:none;border-bottom:1px solid currentColor;}

  /* ── Botones ── */
  .btn{
    border:1px solid transparent;border-radius:var(--r-sm);padding:11px 15px;font-weight:700;font-size:0.9rem;
    cursor:pointer;font-family:inherit;color:var(--text);background:var(--card2);
    transition:transform .16s cubic-bezier(.34,1.3,.64,1),filter .16s,background .16s,border-color .16s;
  }
  .btn:hover{filter:brightness(1.07);}
  .btn-gold{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--acc-ink);font-weight:800;
    box-shadow:0 6px 18px rgba(240,180,41,0.26);}
  .btn-ghost{background:transparent;border:1px solid var(--line2);color:var(--muted);}
  .btn-ghost:hover{background:var(--card2);color:var(--text);}
  button:active,.btn:active{transform:scale(0.97);}
  .btn-save{
    width:100%;margin-top:13px;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;
    border:none;border-radius:var(--r-sm);padding:14px;font-weight:800;font-size:0.98rem;cursor:pointer;
    font-family:inherit;box-shadow:0 8px 22px rgba(22,163,74,0.3);transition:transform .16s,filter .16s;
  }
  .btn-save:hover{filter:brightness(1.06);}

  /* ── Formularios ── */
  input,select,textarea{
    width:100%;background:var(--card2);border:1px solid var(--line);color:var(--text);
    border-radius:var(--r-sm);padding:12px 13px;font-size:0.95rem;font-family:inherit;margin-bottom:10px;
    transition:border-color .18s,box-shadow .18s;
  }
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft);}
  input::placeholder,textarea::placeholder{color:var(--muted2);}
  select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px;}
  label{font-size:0.72rem;color:var(--muted);font-weight:800;display:block;margin-bottom:5px;letter-spacing:0.3px;}
  .toolbar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
  .toolbar input,.toolbar select{margin-bottom:0;}

  /* ── Pestañas (control segmentado) ── */
  .tabs2{
    /* Cinco pestañas desde que hay Examen: si se dejan en 4 columnas, la
       quinta se cae a una segunda fila y queda descolgada. */
    display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-bottom:14px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px;
    box-shadow:var(--sh1);position:sticky;top:calc(var(--hd) + 6px);z-index:30;
  }
  .t2{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    padding:8px 2px 7px;border-radius:var(--r-xs);border:none;background:transparent;color:var(--muted);
    font-weight:800;cursor:pointer;font-family:inherit;min-width:0;
    transition:background .18s,color .18s;
  }
  .t2 .t2i{font-size:1.12rem;line-height:1;}
  .t2 .t2l{font-size:0.64rem;letter-spacing:0.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  .t2.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--acc-ink);box-shadow:0 4px 12px rgba(240,180,41,0.28);}
  .t2:not(.on):hover{background:var(--card2);color:var(--text);}

  /* ── Filas de socio ── */
  .row{display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px solid var(--line);min-width:0;}
  .row:last-child{border-bottom:none;}
  .av{width:38px;height:38px;border-radius:var(--r-pill);object-fit:cover;background:var(--card2);
    border:1px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:0.9rem;color:var(--muted);}
  .nm{flex:1;min-width:0;}
  .nm b{display:block;font-size:0.9rem;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .nm span{display:block;font-size:0.71rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* par de botones asistencia: compacto, no roba ancho al nombre */
  .abpair{display:flex;gap:5px;flex-shrink:0;}
  .ab{
    width:38px;height:38px;padding:0;flex-shrink:0;border:1px solid var(--line2);background:var(--card2);color:var(--muted);
    border-radius:var(--r-xs);font-weight:900;font-size:1rem;cursor:pointer;font-family:inherit;line-height:1;
    display:flex;align-items:center;justify-content:center;transition:background .16s,color .16s,border-color .16s;
  }
  .ab.wide{width:auto;padding:0 13px;font-size:0.8rem;font-weight:800;}
  .ab.si.on{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 3px 10px rgba(34,197,94,0.3);}
  .ab.no.on{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 3px 10px rgba(240,82,82,0.28);}
  .ab:not(.on):hover{background:var(--card);color:var(--text);}
  .grp{margin:14px 0 4px;padding:6px 11px;background:var(--acc-soft);color:var(--acc-txt);
    border-radius:var(--r-pill);font-weight:800;font-size:0.72rem;letter-spacing:0.4px;display:inline-block;}

  /* ── Resumen del día ── */
  .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .kpi{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 6px;text-align:center;}
  .kpi b{display:block;font-family:'Sora','Outfit',sans-serif;font-size:1.5rem;font-weight:800;line-height:1.05;}
  .kpi span{display:block;font-size:0.63rem;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;color:var(--muted);margin-top:2px;}
  .kpi.ok b{color:var(--green);} .kpi.no b{color:var(--red);} .kpi.pend b{color:var(--muted);}
  .aus{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line2);font-size:0.8rem;line-height:1.5;color:var(--muted);}
  .aus b{color:var(--text);font-weight:700;}
  .aus-chip{display:inline-flex;align-items:center;gap:5px;background:var(--red-soft);color:var(--red);
    border-radius:var(--r-pill);padding:3px 10px;font-size:0.73rem;font-weight:800;margin:3px 4px 0 0;}

  /* ── Segmentado Hoy / Todos ── */
  .seg{display:inline-flex;background:var(--card2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;gap:3px;}
  .seg button{border:none;background:transparent;color:var(--muted);font-family:inherit;font-weight:800;
    font-size:0.78rem;padding:7px 15px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;transition:background .16s,color .16s;}
  .seg button.on{background:var(--acc);color:var(--acc-ink);box-shadow:0 3px 10px rgba(240,180,41,0.26);}

  /* ── Socios: acordeón ── */
  .se-card{border-bottom:1px solid var(--line);}
  .se-head{display:flex;align-items:center;gap:11px;padding:11px 2px;cursor:pointer;min-width:0;}
  .se-head .nm b{font-size:0.9rem;}
  .se-caret{flex-shrink:0;color:var(--muted);font-size:0.8rem;transition:transform .22s;}
  .se-card.open .se-caret{transform:rotate(90deg);}
  .se-body{display:none;padding:2px 2px 14px;animation:fadeUp .26s ease both;}
  .se-card.open .se-body{display:block;}
  .diaswrap{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
  .dchip{border:1px solid var(--line2);background:var(--card2);color:var(--muted);border-radius:var(--r-xs);
    padding:9px 0;font-weight:800;cursor:pointer;font-family:inherit;font-size:0.75rem;transition:background .16s,color .16s,border-color .16s;}
  .dchip.on{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 3px 10px rgba(107,116,248,0.3);}
  .dsum{display:inline-flex;gap:3px;flex-wrap:wrap;}
  .dsum i{font-style:normal;font-size:0.66rem;font-weight:800;background:var(--blue-soft);color:var(--blue);
    border-radius:5px;padding:1px 5px;}

  /* ── Combate ── */
  .cb-timer{font-size:3.5rem;font-weight:800;letter-spacing:2px;font-family:'Sora',monospace;text-align:center;line-height:1;
    font-variant-numeric:tabular-nums;transition:color .4s,text-shadow .4s;}
  .cb-timer.work{color:var(--red);text-shadow:0 0 30px rgba(240,82,82,0.55);}
  .cb-timer.rest{color:#4aa8ff;text-shadow:0 0 30px rgba(74,168,255,0.55);}
  .cb-timer.fin{color:var(--green);text-shadow:0 0 30px rgba(34,197,94,0.5);}
  .cb-name{width:100%;background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.24);color:#fff;
    border-radius:var(--r-xs);padding:6px 8px;font-weight:800;font-size:0.84rem;text-align:center;
    letter-spacing:0.8px;margin-bottom:3px;font-family:inherit;}
  .cb-name:focus{box-shadow:none;border-color:rgba(255,255,255,0.6);}
  .cb-badges{min-height:1.15rem;font-size:0.95rem;letter-spacing:2px;}
  .cb-side{flex:1;border-radius:var(--r);padding:14px;text-align:center;color:#fff;box-shadow:var(--sh2);}
  .cb-red{background:linear-gradient(150deg,#c0342f,#dc2626);}
  .cb-blue{background:linear-gradient(150deg,#1d4fd8,#2563eb);}
  .cb-label{font-weight:800;letter-spacing:1px;font-size:0.95rem;}
  .cb-score{font-family:'Sora',sans-serif;font-size:3.4rem;font-weight:800;line-height:1;margin:5px 0 9px;font-variant-numeric:tabular-nums;}
  .cb-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .cb-btns button{padding:12px 0;border:none;border-radius:var(--r-xs);background:rgba(255,255,255,0.2);
    color:#fff;font-weight:800;font-size:1rem;cursor:pointer;font-family:inherit;transition:background .16s;}
  .cb-btns button:hover{background:rgba(255,255,255,0.3);}
  .cb-gj{margin-top:11px;font-size:0.82rem;font-weight:700;}
  .cb-gj button{background:rgba(0,0,0,0.26);color:#fff;border:none;border-radius:7px;padding:6px 10px;
    font-weight:800;cursor:pointer;font-family:inherit;margin-left:7px;}
  body.cb-descanso .cb-btns button,body.cb-descanso .cb-gj button{opacity:0.35;pointer-events:none;filter:grayscale(0.5);}

  /* ── Avisos y hojas ── */
  .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(22px + env(safe-area-inset-bottom));
    background:var(--text);color:var(--bg);padding:11px 18px;border-radius:var(--r-pill);font-weight:700;
    font-size:0.85rem;z-index:99;box-shadow:var(--sh3);max-width:88vw;text-align:center;animation:gdPop .22s ease both;}
  .sheet-bg{position:fixed;inset:0;z-index:99996;background:rgba(4,7,16,0.62);display:flex;align-items:flex-end;
    justify-content:center;backdrop-filter:blur(3px);}
  .sheet{background:var(--card);border:1px solid var(--line);border-bottom:none;color:var(--text);width:100%;
    max-width:520px;border-radius:22px 22px 0 0;padding:8px 10px calc(14px + env(safe-area-inset-bottom));
    box-shadow:var(--sh3);animation:gdSheet .26s cubic-bezier(.22,.9,.35,1) both;max-height:88vh;overflow:auto;}
  .sheet-grab{width:42px;height:4px;border-radius:99px;background:var(--line2);margin:6px auto 10px;}
  .sheet-item{display:flex;align-items:center;gap:13px;width:100%;padding:14px 12px;border:none;background:transparent;
    color:var(--text);font-family:inherit;font-weight:700;font-size:0.95rem;cursor:pointer;border-radius:var(--r-sm);text-align:left;}
  .sheet-item:hover{background:var(--card2);}
  .sheet-item .si{font-size:1.2rem;width:24px;text-align:center;flex-shrink:0;}
  .sheet-item .sv{margin-left:auto;font-size:0.78rem;color:var(--muted);font-weight:700;}
  .sheet-item.danger{color:var(--red);}
  .sheet-sep{height:1px;background:var(--line);margin:5px 12px;}

  /* ── Estado de conexión / cola pendiente ── */
  #ayu-cola{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom));
    z-index:9500;display:none;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line2);
    color:var(--text);padding:9px 15px;border-radius:var(--r-pill);box-shadow:var(--sh3);font-size:0.8rem;font-weight:700;}
  #ayu-cola.show{display:inline-flex;}
  #ayu-cola .pt{width:8px;height:8px;border-radius:50%;background:var(--acc);flex-shrink:0;}
  #ayu-cola.ok .pt{background:var(--green);}
  .vacio{text-align:center;padding:22px 14px;color:var(--muted);font-size:0.85rem;line-height:1.5;}
  .vacio .vi{font-size:1.9rem;display:block;margin-bottom:6px;opacity:0.85;}