:root{
    --bg:#E6EEE7;
    --surface:#FFFFFF;
    --surface-2:#FBFDFB;
    --border:#C7D6CB;
    --text:#1C2621;
    --muted:#5C6D63;
    --muted-2:#8A9A90;
    --sidebar-1:#153A2B;
    --sidebar-2:#0E2A1E;
    --sidebar-text:#EAF2ED;
    --sidebar-muted:#9FB8AA;
    --accent:#C9A227;
    --accent-dark:#9C7C1C;
    --accent-tint:#F4EBD2;
    --good:#2F6B4A;
    /* Antes #EAF3ED — casi el mismo verde grisáceo que --bg (#E6EEE7):
       cualquier botón o tarjeta con este tinte (ej. "Cancelar"/"Volver",
       la tarjeta de ingesta "tono-b") quedaba casi invisible apoyado
       directo sobre el fondo de la página, en vez de leerse como verde.
       Con más saturación se nota como relleno verde en cualquier lado
       donde se lo use, no solo arriba de una tarjeta blanca. */
    --good-tint:#CFEBD9;
    --warn:#8A7500;
    --warn-tint:#FBF6E3;
    --bad:#B0472E;
    --bad-tint:#FBEAE6;
    --info:#3E7D96;
    --info-tint:#EAF3F7;
    --rose:#B5527A;
    --rose-tint:#FBEAF1;
    /* Quinto estado, más severo que --bad: el límite negro de las curvas
       OMS (fuera de ±3 DE) — un caso que no entra en la escala
       buena/alerta/mala habitual, así que no comparte color con --bad. */
    --critical:#1A1A1A;
    --critical-tint:#E7E7E7;
    --shadow: 0 1px 2px rgba(20,34,26,0.06), 0 6px 20px rgba(20,34,26,0.07);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0F1E17;
      --surface:#183226;
      --surface-2:#1C3C2D;
      --border:#30533F;
      --text:#EAF2ED;
      --muted:#A9C2B3;
      --muted-2:#7E9A8A;
      --sidebar-1:#0E2A1E;
      --sidebar-2:#0A2118;
      --sidebar-text:#EAF2ED;
      --sidebar-muted:#8FAC9C;
      --accent:#D9B94A;
      --accent-dark:#C9A227;
      --accent-tint:#2A2818;
      --good:#6FCB9B;
      --good-tint:#173829;
      --warn:#E3C558;
      --warn-tint:#3A3315;
      --bad:#E28572;
      --bad-tint:#3B2019;
      --info:#7FC1DA;
      --info-tint:#173038;
      --rose:#E8A4C3;
      --rose-tint:#3A2430;
      --critical:#F2F2F2;
      --critical-tint:#3A3A3A;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.35);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0F1E17;
    --surface:#183226;
    --surface-2:#1C3C2D;
    --border:#30533F;
    --text:#EAF2ED;
    --muted:#A9C2B3;
    --muted-2:#7E9A8A;
    --sidebar-1:#0E2A1E;
    --sidebar-2:#0A2118;
    --sidebar-text:#EAF2ED;
    --sidebar-muted:#8FAC9C;
    --accent:#D9B94A;
    --accent-dark:#C9A227;
    --accent-tint:#2A2818;
    --good:#6FCB9B;
    --good-tint:#173829;
    --warn:#E3C558;
    --warn-tint:#3A3315;
    --bad:#E28572;
    --bad-tint:#3B2019;
    --info:#7FC1DA;
    --info-tint:#173038;
    --rose:#E8A4C3;
    --rose-tint:#3A2430;
    --critical:#F2F2F2;
    --critical-tint:#3A3A3A;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.35);
    color-scheme: dark;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family: Calibri, 'Segoe UI', Tahoma, sans-serif;
    min-height:100vh;
  }
  h1,h2,h3,.brand{ font-family: Cambria, Georgia, 'Times New Roman', serif; text-wrap:balance; }
  a{ color:var(--accent-dark); }
  button{ font-family:inherit; }
  input, select, textarea{ font-family:inherit; font-size:13.5px; }
  ::selection{ background: var(--accent-tint); }

  /* ---------- layout shells ---------- */
  #app{ min-height:100vh; }
  .hidden{ display:none !important; }

  /* ---------- login ---------- */
  .login-wrap{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background: radial-gradient(circle at 20% 15%, rgba(201,162,39,0.10), transparent 45%), var(--sidebar-2);
    padding:32px 16px;
  }
  .login-card{
    width:100%; max-width:460px; background:var(--surface); border-radius:18px;
    box-shadow: var(--shadow); overflow:hidden; border:1px solid var(--border);
  }
  .login-head{
    background: linear-gradient(160deg, var(--sidebar-1), var(--sidebar-2));
    padding:28px 30px 24px; color:var(--sidebar-text);
  }
  .login-head .eyebrow{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); font-weight:700; }
  .login-head h1{ margin:8px 0 4px; font-size:24px; color:#fff; }
  .login-head p{ margin:0; font-size:12.5px; color:var(--sidebar-muted); }
  .login-body{ padding:26px 30px 30px; }
  .field{ margin-bottom:16px; }
  .field label{ display:block; font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em; }
  .field select, .field input{
    width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:9px;
    background:var(--surface); color:var(--text);
  }
  .role-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:8px; margin-bottom:16px; }
  .role-opt{
    border:1.5px solid var(--border); border-radius:10px; padding:10px 8px; text-align:center;
    cursor:pointer; font-size:11.5px; font-weight:700; color:var(--muted); background:var(--surface-2);
    transition:border-color .15s, color .15s, background .15s;
  }
  .role-opt.active{ border-color:var(--accent-dark); color:var(--sidebar-1); background:var(--accent-tint); }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:none; border-radius:9px; padding:10px 18px; font-size:13.5px; font-weight:700;
    cursor:pointer; transition:filter .15s, transform .05s;
  }
  .btn:active{ transform:translateY(1px); }
  .btn-primary{ background:var(--sidebar-1); color:#fff; }
  .btn-primary:hover{ filter:brightness(1.12); }
  .btn-gold{ background:var(--accent); color:#2A2205; }
  .btn-gold:hover{ filter:brightness(1.06); }
  .btn-ghost{ background:transparent; color:var(--muted); border:1px solid var(--border); }
  .btn-ghost:hover{ background:var(--surface-2); }
  .btn-sm{ padding:6px 12px; font-size:12px; }
  .btn-block{ width:100%; }
  /* Acción principal de una fila de tabla (ej. "Ver informe" en Reportes):
     antes era un .btn-ghost más, igual de gris que el resto de la fila y
     fácil de pasar por alto entre tanta tabla. Con el dorado de acento en
     tono suave queda claro, al primer vistazo, cuál es el botón que importa
     en cada fila. */
  .btn-accent-soft{ background:var(--accent-tint); color:var(--accent-dark); border:1px solid var(--accent); font-weight:700; }
  .btn-accent-soft:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
  /* Acción positiva de una fila (ej. "Confirmar" un turno pedido) — mismo
     criterio que .btn-accent-soft, en verde, para distinguirla de
     "Cancelar"/"Quitar" (esas sí son .btn-danger, son remover algo). */
  .btn-good-soft{ background:var(--good-tint); color:var(--good); border:1px solid var(--good); font-weight:700; }
  .btn-good-soft:hover{ background:var(--good); color:#fff; border-color:var(--good); }
  /* Un <summary> que además tiene que verse como botón (ej. "Agregar
     alimento nuevo a la base"): saca la flechita nativa del navegador para
     que no compita visualmente con el "+" del texto y con el resto de los
     botones de la pantalla. */
  summary.summary-btn{ display:inline-block; list-style:none; }
  summary.summary-btn::-webkit-details-marker{ display:none; }
  summary.summary-btn::marker{ content:""; }

  /* ---------- secciones plegables con insignia +/- (summary-toggle) ---------- */
  /* Un <summary> nativo no se nota como clickeable — se le saca la marca
     por defecto del navegador y se le agrega una insignia circular propia a
     la derecha (+ cerrado, − abierto, con un aro más claro cuando está
     abierto), más un fondo suave al pasar el mouse, para que quede claro
     que ahí hay algo para desplegar (ej. cada ingesta del día, el
     Historial, "Ver micronutrientes"). Antes era una flechita de texto
     (▾) que giraba 180°: se cambió por pedido directo, quedaba "perdida" —
     muy poco visible al lado del resto del contenido de la fila. */
  summary.summary-toggle{
    cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
    gap:8px; padding:6px 10px; border-radius:8px; transition:background .15s ease;
  }
  summary.summary-toggle::-webkit-details-marker{ display:none; }
  summary.summary-toggle::marker{ content:""; }
  /* Ojo: antes esto era var(--surface-2) — pero varias de estas tarjetas
     (ej. cada ingesta del día) ya tienen ese mismo color de fondo puesto
     directo en el <details>, así que pasar el mouse no cambiaba nada a la
     vista. Con accent-tint (el mismo resaltado dorado/oliva que se usa para
     marcar selección en otras partes de la app) el cambio se nota siempre,
     sin importar el fondo de la tarjeta que lo contiene. */
  summary.summary-toggle:hover{ background:var(--accent-tint); }
  summary.summary-toggle:focus-visible{ outline:2px solid var(--accent-dark); outline-offset:2px; }
  summary.summary-toggle .chevron{
    flex:0 0 auto; width:22px; height:22px; border-radius:50%;
    background:var(--accent-dark); color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:15px; font-weight:700; line-height:1;
    box-shadow:0 1px 3px rgba(20,34,26,0.25);
    transition:background .15s ease, transform .15s ease;
  }
  summary.summary-toggle .chevron::before{ content:"+"; }
  summary.summary-toggle:hover .chevron{ background:var(--accent); }
  details[open] > summary.summary-toggle .chevron{ background:var(--accent); transform:rotate(180deg); }
  details[open] > summary.summary-toggle .chevron::before{ content:"\2212"; }
  .btn-danger{ background:var(--bad-tint); color:var(--bad); border:1px solid var(--bad); }

  /* ---------- posiciones editables por disciplina (punto 16) ----------
     Lista chica de posiciones (agregar/renombrar/borrar) que se muestra
     al lado del desplegable "Posición" para toda disciplina que no tenga
     lista fija (hoy, todas menos Fútbol). */
  .posiciones-manage{ margin-top:8px; }
  .posiciones-manage .posicion-agregar{
    font-size:12px; font-weight:600; color:var(--accent-dark); cursor:pointer; text-decoration:none;
    display:inline-block;
  }
  .posiciones-manage .posicion-agregar:hover{ text-decoration:underline; }
  .posiciones-manage .posiciones-lista{ margin-top:6px; display:flex; flex-direction:column; gap:3px; }
  .posiciones-manage .posicion-row{
    display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); padding:2px 0;
  }
  .posiciones-manage .posicion-row .posicion-nombre{ flex:1; color:var(--text); }
  .posiciones-manage .posicion-row a{
    font-size:11px; font-weight:600; cursor:pointer; text-decoration:none; color:var(--muted);
  }
  .posiciones-manage .posicion-row a:hover{ color:var(--accent-dark); text-decoration:underline; }
  .posiciones-manage .posicion-row a.posicion-borrar:hover{ color:var(--bad); }
  .login-foot{ margin-top:14px; font-size:11.5px; color:var(--muted-2); line-height:1.5; }

  /* ---------- app shell ---------- */
  .shell{ display:flex; min-height:100vh; }
  .sidebar{
    width:230px; flex:0 0 230px; background:linear-gradient(180deg, var(--sidebar-1), var(--sidebar-2));
    color:var(--sidebar-text); display:flex; flex-direction:column; padding:20px 14px;
  }
  .sidebar .brand{ font-size:16px; font-weight:700; color:#fff; padding:0 8px 4px; }
  .sidebar .brand small{ display:block; font-family:Calibri,sans-serif; font-weight:400; font-size:10.5px; color:var(--sidebar-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
  .sidebar .divider{ height:1px; background:rgba(255,255,255,0.1); margin:14px 4px; }
  .nav-item{
    display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px;
    font-weight:600; color:var(--sidebar-muted); cursor:pointer; margin-bottom:2px;
  }
  .nav-item:hover{ background:rgba(255,255,255,0.06); color:#fff; }
  .nav-item.active{ background:rgba(201,162,39,0.16); color:#fff; }
  .nav-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:0 0 auto; opacity:0; }
  .nav-item.active .dot{ opacity:1; }
  .sidebar-foot{ margin-top:auto; padding:10px 8px 0; }
  .who{ font-size:11.5px; color:var(--sidebar-muted); line-height:1.4; margin-bottom:8px; }
  .who b{ color:#fff; }

  .content{ flex:1; min-width:0; padding:26px 34px 60px; overflow-x:auto; }
  .content-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
  .content-head h1{ font-size:22px; margin:0 0 4px; color:var(--text); }
  .content-head p{ margin:0; font-size:12.5px; color:var(--muted); max-width:640px; }

  .card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow); margin-bottom:18px; }
  .card h2{ font-size:15px; margin:0 0 4px; color:var(--text); }
  .card .sub{ font-size:12px; color:var(--muted); margin:0 0 14px; }
  .grid{ display:grid; gap:14px; }
  .grid-2{ grid-template-columns:1fr 1fr; }
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }
  @media (max-width:900px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr 1fr; } }

  .stat{
    background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px 16px;
  }
  .stat .label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--muted); margin-bottom:6px; }
  .stat .value{ font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); }
  .stat .value small{ font-size:12px; font-weight:600; color:var(--muted); }
  .stat .note{ font-size:11px; color:var(--muted-2); margin-top:4px; }
  .dia-semana:hover{ border-color:var(--accent-dark); }
  .dia-semana.activo{ background:var(--accent-tint); border-color:var(--accent-dark) !important; }

  /* ---------- tarjetitas de resumen con color real (stat-color) ----------
     Variante de .stat para la métrica puntual que conviene que salte a la
     vista entre varias tarjetas grises (ej. "bajo rango" o "cumplimiento"
     en Reportes): mismo tamaño y tipografía que .stat, con un borde de
     color a la izquierda y el valor en ese mismo color. Las tarjetas que
     son un simple conteo (jugadores, evaluados) se quedan en .stat gris —
     el color se reserva para lo que vale la pena resaltar. */
  .stat-color{ position:relative; border-radius:12px; padding:14px 16px 14px 20px; border:1px solid transparent; }
  .stat-color::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:4px; border-radius:3px; }
  .stat-color .label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--muted); margin-bottom:6px; }
  .stat-color .value{ font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
  .stat-color .value small{ font-size:12px; font-weight:600; color:var(--muted); }
  .stat-color .note{ font-size:11px; color:var(--muted-2); margin-top:4px; }
  .stat-color.c-rose{ background:var(--rose-tint); } .stat-color.c-rose::before{ background:var(--rose); } .stat-color.c-rose .value{ color:var(--rose); }
  .stat-color.c-good{ background:var(--good-tint); } .stat-color.c-good::before{ background:var(--good); } .stat-color.c-good .value{ color:var(--good); }
  .stat-color.c-warn{ background:var(--warn-tint); } .stat-color.c-warn::before{ background:var(--warn); } .stat-color.c-warn .value{ color:var(--warn); }
  .stat-color.c-bad{ background:var(--bad-tint); } .stat-color.c-bad::before{ background:var(--bad); } .stat-color.c-bad .value{ color:var(--bad); }
  .stat-color.c-critical{ background:var(--critical-tint); } .stat-color.c-critical::before{ background:var(--critical); } .stat-color.c-critical .value{ color:var(--critical); }

  .pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px; white-space:nowrap; }
  .pill-good{ background:var(--good-tint); color:var(--good); }
  .pill-warn{ background:var(--warn-tint); color:var(--warn); }
  .pill-bad{ background:var(--bad-tint); color:var(--bad); }
  .pill-info{ background:var(--info-tint); color:var(--info); }
  .pill-muted{ background:var(--surface-2); color:var(--muted); border:1px solid var(--border); }
  /* Quinto color de pill, además de good/warn/bad/info — para clasificar
     algo que no es un estado (no es "bien"/"mal"/"atención"), sino una
     categoría más entre varias (ej. el tipo de publicación en Información
     general). Mismo rosa que ya se usa en las métricas que conviene que
     salten a la vista en Reportes. */
  .pill-rose{ background:var(--rose-tint); color:var(--rose); }
  .pill-critical{ background:var(--critical-tint); color:var(--critical); }

  /* Encabezado de un grupo de campos dentro de un formulario largo (ej.
     "Diámetros óseos", "Perímetros", "Pliegues cutáneos" al cargar una
     evaluación antropométrica): antes era un <p class="sub"> gris más,
     indistinguible del resto del texto de ayuda — con esta etiqueta con
     fondo se nota de un vistazo dónde empieza cada grupo de la planilla. */
  .form-section-title{
    display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
    font-weight:700; color:var(--accent-dark); background:var(--accent-tint);
    padding:4px 10px; border-radius:6px; margin:18px 0 10px;
  }

  table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  thead th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; padding:0 10px 8px; border-bottom:1px solid var(--border); }
  tbody td{ padding:10px; border-bottom:1px solid var(--border); vertical-align:middle; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover{ background:var(--surface-2); }
  .table-wrap{ overflow-x:auto; }

  /* Encabezado de tabla con un poco de color (ej. Plantel en Reportes), en
     vez del gris plano de .thead de siempre — mismo criterio que
     .stat-color: un toque de identidad en vez de blanco-sobre-gris. */
  .table-color thead th{ background:var(--accent-tint); color:var(--accent-dark); font-weight:700; padding:10px; border-bottom:2px solid var(--accent); }
  .table-color thead tr th:first-child{ border-top-left-radius:8px; }
  .table-color thead tr th:last-child{ border-top-right-radius:8px; }

  /* ---------- tarjetas de ingesta intercaladas (ingesta-card) ----------
     Cada comida del día (Desayuno, Almuerzo, Merienda, Cena...) se repetía
     con el mismo fondo gris de siempre — intercalando dorado/verde (misma
     paleta que ya usa el resto de la app, nada ajeno) se distingue una
     comida de la siguiente de un vistazo, sin tener que desplegarlas. */
  .ingesta-card{ position:relative; border-radius:14px; padding:14px 18px 14px 22px; margin-bottom:10px; border:1px solid var(--border); }
  .ingesta-card::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px; border-radius:3px; }
  .ingesta-card.tono-a{ background:var(--accent-tint); }
  .ingesta-card.tono-a::before{ background:var(--accent); }
  .ingesta-card.tono-b{ background:var(--good-tint); }
  .ingesta-card.tono-b::before{ background:var(--good); }

  .tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; flex-wrap:wrap; }
  .tab{ padding:9px 14px; font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
  .tab:hover{ color:var(--text); }
  .tab.active{ color:var(--sidebar-1); border-bottom-color:var(--accent-dark); }
  button.tab{ background:none; font:inherit; border:none; border-bottom:2px solid transparent; }
  :root[data-theme="dark"] .tab.active, @media (prefers-color-scheme:dark){ }

  .form-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px 14px; }
  @media (max-width:1000px){ .form-grid{ grid-template-columns:repeat(2,1fr); } }
  .form-grid-6{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px 14px; }
  @media (max-width:1300px){ .form-grid-6{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:640px){ .form-grid-6{ grid-template-columns:repeat(2,1fr); } }
  /* Título de cada campo de formulario (ej. "Categoría", "Fecha", "Hora y
     lugar"): antes gris apagado como cualquier texto secundario. Primero
     se probó el mismo dorado que los encabezados de grupo
     (form-section-title) y de tabla, pero quedaban demasiado parecidos:
     no se distinguía "este es el título de TODO un grupo de campos" de
     "este es el nombre de UN campo puntual". Por eso el campo individual
     va en verde (var(--good), el mismo tono que ya identifica "bien/activo"
     en el resto de la app) y el grupo se queda con el dorado — dos colores
     distintos, cada uno en su nivel de jerarquía. */
  .form-field label{ display:block; font-size:11px; color:var(--good); margin-bottom:5px; font-weight:700; }
  .form-field input, .form-field select, .form-field textarea{ width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-family:inherit; }
  .form-field textarea{ resize:vertical; }
  .form-actions{ display:flex; gap:10px; margin-top:16px; }

  .buscador-alimento-campo{ position:relative; }
  .buscadorAlimentoResultados{
    position:absolute; top:100%; left:0; right:0; margin-top:4px; z-index:20;
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
    max-height:220px; overflow-y:auto; box-shadow:var(--shadow);
  }
  .buscadorAlimentoOpcion{ padding:8px 10px; cursor:pointer; display:flex; flex-direction:column; gap:2px; border-bottom:1px solid var(--border); }
  .buscadorAlimentoOpcion:last-child{ border-bottom:none; }
  .buscadorAlimentoOpcion:hover{ background:var(--surface-2); }
  .buscadorAlimentoOpcion strong{ font-size:13px; }
  .buscadorAlimentoOpcion .note{ font-size:11px; color:var(--muted-2); }
  .buscadorAlimentoVacio{ padding:10px; font-size:12.5px; color:var(--muted); }

  .roster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
  .roster-card{ border:1px solid var(--border); border-radius:12px; padding:14px; background:var(--surface); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
  .roster-card:hover{ border-color:var(--accent-dark); box-shadow:var(--shadow); }
  .roster-card .name{ font-weight:700; font-size:14px; margin-bottom:2px; }
  .roster-card .meta{ font-size:11.5px; color:var(--muted); margin-bottom:10px; }
  .roster-card .pills{ display:flex; gap:6px; flex-wrap:wrap; }

  .disc-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
  .disc-tab{ padding:8px 16px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:13px; font-weight:600; text-decoration:none; display:inline-block; }
  .disc-tab:hover{ border-color:var(--accent-dark); }
  .disc-tab.active{ background:var(--sidebar-1); border-color:var(--sidebar-1); color:var(--sidebar-text); }

  .bienvenida{ background:linear-gradient(120deg,var(--sidebar-1) 0%,var(--sidebar-2) 100%); border-radius:14px; padding:26px 30px; color:var(--sidebar-text); position:relative; overflow:hidden; margin-bottom:22px; }
  .bienvenida::after{ content:""; position:absolute; right:-40px; top:-60px; width:220px; height:220px; border-radius:50%; background:rgba(201,162,39,0.14); }
  .bienvenida .eyebrow{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:700; margin-bottom:6px; }
  .bienvenida h1{ font-size:24px; margin:0 0 6px; color:#fff; }
  .bienvenida p{ margin:0; font-size:13px; color:var(--sidebar-muted); }

  .seccion-titulo{ font-size:13px; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.04em; margin:0 0 12px; }

  .picker-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  @media (max-width:1100px){ .picker-grid{ grid-template-columns:repeat(2,1fr); } }
  .picker-card{
    display:block; position:relative; background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:16px 18px 16px 22px; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s;
  }
  .picker-card:hover{ border-color:var(--accent-dark); box-shadow:var(--shadow); }
  .picker-card::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:3px; background:var(--accent); }
  .picker-card .nombre{ font-size:14px; font-weight:700; color:var(--text); margin:0 0 4px; padding-right:18px; }
  .picker-card .sub{ font-size:11px; color:var(--muted); }
  .picker-card .flecha{ position:absolute; right:14px; top:16px; color:var(--accent-dark); font-size:15px; font-weight:700; }

  .destacado{ border:1.5px solid var(--accent-dark); border-radius:9px; padding:12px 14px; background:var(--accent-tint); }
  .destacado label{ color:var(--accent-dark); }

  .banner{ padding:10px 14px; border-radius:10px; font-size:12.5px; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
  .banner-info{ background:var(--info-tint); color:var(--info); }
  .banner-warn{ background:var(--warn-tint); color:var(--warn); }
  .banner-bad{ background:var(--bad-tint); color:var(--bad); }

  .empty{ text-align:center; padding:36px 20px; color:var(--muted-2); font-size:13px; }
  .backlink{ font-size:12px; font-weight:700; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:5px; margin-bottom:14px; }
  .backlink:hover{ color:var(--text); }
  .muted-small{ font-size:11px; color:var(--muted-2); }
  .kv{ display:flex; justify-content:space-between; font-size:12.5px; padding:6px 0; border-bottom:1px dashed var(--border); }
  .kv:last-child{ border-bottom:none; }
  .kv b{ font-variant-numeric:tabular-nums; }

  .scale-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .scale-row .qlabel{ width:210px; font-size:12.5px; color:var(--text); flex:0 0 auto; }
  .scale-opts{ display:flex; gap:6px; }
  .scale-btn{
    width:34px; height:34px; border-radius:8px; border:1px solid var(--border); background:var(--surface);
    color:var(--muted); font-weight:700; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .scale-btn.active{ background:var(--sidebar-1); border-color:var(--sidebar-1); color:#fff; }

  .toast{
    position:fixed; bottom:20px; right:20px; background:var(--sidebar-1); color:#fff; padding:11px 18px;
    border-radius:10px; font-size:12.5px; font-weight:600; box-shadow:var(--shadow); z-index:50;
    display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; pointer-events:none;
  }
  .toast.show{ opacity:1; transform:translateY(0); }
  .toast.err{ background:var(--bad); }

  .day-chip{ padding:7px 12px; border:1px solid var(--border); border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; background:var(--surface); }
  .day-chip.active{ background:var(--sidebar-1); color:#fff; border-color:var(--sidebar-1); }
  .day-chip.disabled{ opacity:.4; cursor:not-allowed; }
  .slot-chip{ padding:7px 10px; border:1px solid var(--border); border-radius:8px; font-size:11.5px; font-weight:600; cursor:pointer; background:var(--surface); }
  .slot-chip.active{ background:var(--accent); border-color:var(--accent); color:#2A2205; }
  .slot-chip.taken{ opacity:.35; cursor:not-allowed; text-decoration:line-through; }
  .chip-row{ display:flex; flex-wrap:wrap; gap:8px; }

  @media print{
    body *{ visibility:hidden; }
    .imprimible, .imprimible *{ visibility:visible; }
    .imprimible{ position:absolute; left:0; top:0; width:100%; }
    .no-print{ display:none !important; }
    .card{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
  }