/* Panel de la Academia — la paleta de CERTIFICATION CREW, no una inventada.
   Sale de su propio sitio (certificationcrew.com), muestreando su imagen social
   pixel a pixel el 09/10/2026: fondo #f5f8fa (78% de la imagen), azul marino
   #14213d (17%) y crema #f3dfa2 (2%). En claro manda el marino; en oscuro el
   acento pasa al crema, que es lo que resalta.
   Fredoka en títulos y cifras, Nunito en el cuerpo: las del sitio.
   Antes esto usaba el azul de Azure (#0078d4/#00bcf2) y Space Grotesk, de
   cuando la academia todavía no tenía nombre ni marca propia.
   Estética: "panel tranquilo" de la familia de los paneles de Roger (casi
   monocromo, un solo acento). */
:root {
  /* Paleta de Certification Crew, sacada de su propio sitio (09/10/2026):
     fondo #f5f8fa, azul marino #14213d y crema #f3dfa2. El crema sobre el
     marino es la firma de la marca (sus pildoras de codigos de examen) y
     tiene 12:1 de contraste, asi que vale para texto pequeno. */
  --fondo: #f5f8fa;
  --superficie: #ffffff;
  --superficie-2: #e9eef6;
  --texto: #14213d;
  --texto-suave: #3d4d80;
  --borde: #d3dcea;
  --acento: #14213d;
  --acento-suave: #e6ebf4;
  --sobre-acento: #f3dfa2;
  --pos: #137a4b;
  --neg: #b4332f;
  --aviso: #8a5a00;
  --sombra: 0 1px 2px rgba(5, 7, 15, 0.05), 0 4px 14px rgba(5, 7, 15, 0.07);
  --f-cuerpo: "Nunito", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-titulo: "Fredoka", ui-sans-serif, system-ui, sans-serif;
  --f-cifra: "Fredoka", ui-sans-serif, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0b1120;
    --superficie: #131c33;
    --superficie-2: #1b2743;
    --texto: #eef2f9;
    --texto-suave: #9fb0cc;
    --borde: #26334f;
    --acento: #f3dfa2;
    --acento-suave: #2c2a20;
    --sobre-acento: #14213d;
    --pos: #3fcf8e;
    --neg: #f08a84;
    --aviso: #f2b84b;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  --fondo: #0b1120;
  --superficie: #131c33;
  --superficie-2: #1b2743;
  --texto: #eef2f9;
  --texto-suave: #9fb0cc;
  --borde: #26334f;
  --acento: #f3dfa2;
  --acento-suave: #2c2a20;
  --sobre-acento: #14213d;
  --pos: #3fcf8e;
  --neg: #f08a84;
  --aviso: #f2b84b;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.4);
}
/* >>> BASE COMÚN ==============================================================
   Esta parte es IDÉNTICA en los tres paneles (Finanzas, Vida, Entrenador).
   Regla: se cambia en uno y se copia tal cual a los otros dos, de marcador a
   marcador. Lo propio de cada panel va fuera de estos marcadores.
   Espera que el panel defina arriba, en :root y en sus bloques oscuros:
     --fondo --superficie --superficie-2 --texto --texto-suave --borde
     --acento --acento-suave --sobre-acento --pos --neg --sombra
     --f-cuerpo --f-titulo --f-cifra
   ============================================================================ */
:root {
  --radio-s: 8px; --radio-m: 10px; --radio-l: 14px;
  --esp-1: 6px; --esp-2: 10px; --esp-3: 16px; --esp-4: 24px;
  --z-fab: 40; --z-fondo: 45; --z-menu: 50;
  --dur: 0.14s;
  accent-color: var(--acento);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--f-cuerpo); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--acento); }
h1, h2, h3 { font-family: var(--f-titulo); text-wrap: balance; }
h1 { font-size: 1.6rem; margin: 4px 0; font-weight: 700; }
/* Texto solo para lectores de pantalla (etiquetas que no hace falta ver). */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* --- Login --- */
.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.tarjeta-login {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l);
  box-shadow: var(--sombra);
  padding: 32px; width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 14px;
}
.tarjeta-login h1 { font-size: 1.3rem; margin: 0 0 6px; font-weight: 600; }
.tarjeta-login label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--texto-suave); }
.tarjeta-login input {
  padding: 10px; border-radius: var(--radio-s); border: 1.5px solid var(--borde);
  background: var(--fondo); color: var(--texto); font-size: 1rem; font-family: var(--f-cuerpo);
}
.tarjeta-login button {
  padding: 10px; border-radius: var(--radio-s); border: none; background: var(--acento);
  color: var(--sobre-acento); font-size: 1rem; cursor: pointer; font-weight: 600; font-family: var(--f-cuerpo);
}

/* --- Layout general --- */
.panel { max-width: 920px; margin: 0 auto; padding: 20px 20px 60px; display: flex; flex-direction: column; gap: var(--esp-3); }
.nav-derecha { display: flex; align-items: center; gap: var(--esp-2); }
.icono {
  border: 1px solid var(--borde); background: var(--superficie); border-radius: var(--radio-s);
  font-size: 1rem; padding: 6px 10px; cursor: pointer; line-height: 1; color: var(--texto);
  display: inline-flex; align-items: center; justify-content: center;
}
.icono:hover { background: var(--superficie-2); }
.icono .ic { width: 16px; height: 16px; opacity: 1; display: block; }
.enlace {
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-suave);
  border-radius: var(--radio-s); padding: 7px 14px; font-size: 0.85rem; font-weight: 500; cursor: pointer;
  transition: background var(--dur), color var(--dur); font-family: var(--f-cuerpo); text-decoration: none;
}
.enlace:hover { background: var(--superficie-2); color: var(--texto); }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l);
  padding: 20px; box-shadow: var(--sombra);
}
.tarjeta.apagada { opacity: 0.5; }
.tarjeta h2 { margin: 0 0 10px; font-size: 1.1rem; font-weight: 600; }
.mini-titulo {
  font-family: var(--f-cuerpo); font-size: 0.8rem; font-weight: 600; color: var(--texto-suave);
  margin: 16px 0 8px; text-transform: uppercase; letter-spacing: 0.05em;
}
.mini-titulo:first-child { margin-top: 0; }

.dato { font-size: 0.95rem; margin: 6px 0; }
.dato.pos { color: var(--pos); }
.dato.neg { color: var(--neg); }
.cifra {
  font-family: var(--f-cifra); font-size: 2rem; font-weight: 600; margin: 6px 0;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.cifra.pos { color: var(--pos); }
.cifra.neg { color: var(--neg); }
.mini { font-size: 0.8rem; color: var(--texto-suave); }
td.pos, .pos { color: var(--pos); }
td.neg, .neg { color: var(--neg); }
/* Estado vacío: una sola forma de decir "aquí no hay nada todavía". */
.vacio {
  margin: 8px 0 0; padding: 14px; text-align: center; font-size: 0.88rem; color: var(--texto-suave);
  border: 1px dashed var(--borde); border-radius: var(--radio-m);
}
.vacio a { color: var(--acento); }

/* --- Avisos (flash) --- */
.avisos { max-width: 920px; margin: 12px auto 0; padding: 0 20px; display: flex; flex-direction: column; gap: 8px; }
.aviso {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 10px 14px; border-radius: var(--radio-m); font-size: 0.9rem;
  background: var(--acento-suave); color: var(--texto);
  border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
}
.aviso.ok {
  background: color-mix(in srgb, var(--pos) 12%, var(--superficie)); color: var(--pos);
  border-color: color-mix(in srgb, var(--pos) 32%, transparent);
}
.aviso.error {
  background: color-mix(in srgb, var(--neg) 12%, var(--superficie)); color: var(--neg);
  border-color: color-mix(in srgb, var(--neg) 32%, transparent);
}
.avisos.flotantes {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60;
  width: min(560px, calc(100% - 32px)); margin: 0; padding: 0;
}
.avisos.flotantes .aviso { box-shadow: 0 6px 24px rgba(0, 0, 0, .3); backdrop-filter: blur(8px); }
.aviso-texto { flex: 1; min-width: 0; }
.aviso-cerrar {
  flex: none; border: none; background: transparent; color: inherit; cursor: pointer;
  padding: 0 2px; font-size: 1.15rem; line-height: 1; opacity: 0.7;
}
.aviso-cerrar:hover { opacity: 1; }

/* --- Tablas --- */
.tabla-scroll { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); }
th { color: var(--texto-suave); font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
tbody tr:last-child td { border-bottom: none; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.n { font-family: var(--f-cifra); }
td.c, th.c { text-align: center; }
tr.ahorro td, tr.destacada td { background: var(--acento-suave); }
tr.vencida td { background: color-mix(in srgb, var(--neg) 10%, transparent); }
tbody tr { transition: background 0.12s; }
td .btn-x { vertical-align: middle; }
td form { display: inline; margin: 0; }

/* --- Formularios --- */
/* Fila con texto arriba y su formulario abajo — no hay ancho en el que se rompa. */
.fila-editable { display: flex; flex-direction: column; gap: 14px; padding: 14px 0; border-top: 1px solid var(--borde); }
.tarjeta .fila-editable:first-of-type { border-top: none; padding-top: 0; }
.fila-editable .form-linea, .fila-editable .form-columna { margin-top: 0; }
/* Dos formularios seguidos en la misma fila: una rayita entre ellos. */
.fila-editable form + form { padding-top: 14px; border-top: 1px dashed var(--borde); }

.form-linea { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: flex-end; }
.form-columna { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin-top: 10px; }
.form-columna.ancha { max-width: 560px; }
.form-linea input, .form-linea select, .form-linea textarea,
.form-columna input, .form-columna select, .form-columna textarea,
.nueva-opciones input, .nueva-opciones select {
  padding: 9px 12px; border-radius: var(--radio-s); border: 1.5px solid var(--borde);
  background: var(--superficie); color: var(--texto); font-size: 0.94rem; font-family: var(--f-cuerpo);
  min-width: 0; transition: border-color var(--dur), box-shadow var(--dur);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--texto-suave) 78%, transparent); }
.form-linea input:focus, .form-linea select:focus, .form-linea textarea:focus,
.form-columna input:focus, .form-columna select:focus, .form-columna textarea:focus,
.nueva-opciones input:focus, .nueva-opciones select:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}
.form-linea input, .form-linea select { max-width: 170px; }
.form-linea input.corto, .form-linea select.corto { max-width: 84px; }
.form-linea input.medio, .form-linea select.medio { max-width: 130px; }
.form-linea input.ancho, .form-linea select.ancho { max-width: none; flex: 1 1 220px; }
.form-columna input, .form-columna select, .form-columna textarea { width: 100%; }
.form-columna label, .nueva-opciones label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-suave);
}
.form-linea label {
  display: inline-flex; flex-direction: column; gap: 4px;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-suave);
}
/* Etiqueta de casilla ("se paga con tarjeta"): en fila, con el texto normal. */
label.check-linea {
  flex-direction: row; align-items: center; gap: 9px;
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.92rem; color: var(--texto);
}
label.check-linea input { width: 18px; height: 18px; flex: none; margin: 0; }
.form-linea button, .form-columna button, .boton {
  padding: 9px 18px; border-radius: var(--radio-s); border: 1.5px solid var(--acento); background: var(--acento);
  color: var(--sobre-acento); font-size: 0.88rem; cursor: pointer; font-weight: 600; font-family: var(--f-cuerpo);
  white-space: nowrap; transition: filter var(--dur), background var(--dur), color var(--dur);
}
.form-linea button:hover, .form-columna button:hover, .boton:hover { filter: brightness(1.08); }
.form-columna button { align-self: flex-start; }
.form-linea button.secundario, .form-columna button.secundario, .boton.secundario {
  background: var(--superficie); border-color: var(--borde); color: var(--texto-suave);
}
.form-linea button.secundario:hover, .form-columna button.secundario:hover, .boton.secundario:hover {
  background: var(--superficie-2); color: var(--texto); filter: none;
}
.form-linea button.peligro, .form-columna button.peligro { background: var(--neg); border-color: var(--neg); color: #fff; }
.form-linea button.exito, .form-columna button.exito { background: var(--pos); border-color: var(--pos); color: #fff; }
/* Ajustes rápidos (+ Sumar, − Restar): con contorno, no rellenos, para que no
   sea un tren de botones de color por toda la página. */
.form-linea button.secundario.peligro, .form-columna button.secundario.peligro {
  background: transparent; border-color: color-mix(in srgb, var(--neg) 45%, transparent); color: var(--neg);
}
.form-linea button.secundario.exito, .form-columna button.secundario.exito {
  background: transparent; border-color: color-mix(in srgb, var(--pos) 45%, transparent); color: var(--pos);
}
/* Mientras se envía: se ve, y no se puede enviar dos veces. */
form[data-guardando] button { opacity: 0.65; pointer-events: none; }
.nueva-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 14px; }
.nueva-opciones .ancho { grid-column: 1 / -1; }

/* "+ Agregar" junto al título de una sección, que despliega el formulario. */
.cab-seccion { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cab-seccion h1, .cab-seccion h2 { margin: 0; flex: 1; min-width: 0; }
.cab-seccion > .mini, .cab-seccion > .dato { flex-basis: 100%; margin: 0; }
.agregar-flotante { flex: none; }
.agregar-flotante > summary {
  list-style: none; cursor: pointer; padding: 8px 16px; border-radius: var(--radio-s);
  background: var(--acento); color: var(--sobre-acento); font-weight: 600; font-size: 0.85rem;
  white-space: nowrap; user-select: none; transition: filter var(--dur);
}
.agregar-flotante > summary::-webkit-details-marker { display: none; }
.agregar-flotante > summary:hover { filter: brightness(1.08); }
.agregar-flotante[open] > summary { background: transparent; border: 1px solid var(--borde); color: var(--texto-suave); }
.agregar-panel {
  margin-top: 12px; padding: 16px; background: var(--superficie-2);
  border: 1px solid var(--borde); border-radius: var(--radio-m);
}
.agregar-panel .form-columna, .agregar-panel .form-linea { margin-top: 0; }

/* Píldoras: un grupo de opciones donde una está activa (Lista/Mes, Redondo/Barras…). */
.pildoras { display: inline-flex; gap: 4px; background: var(--superficie-2); border-radius: 9px; padding: 3px; }
.pildoras form { display: contents; }
.pildoras a, .pildoras button {
  padding: 6px 14px; border-radius: 7px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  color: var(--texto-suave); text-decoration: none; border: none; background: transparent;
  font-family: var(--f-cuerpo); transition: background var(--dur), color var(--dur);
}
.pildoras a:hover, .pildoras button:hover { color: var(--texto); }
.pildoras a.activo, .pildoras button.activo, .pildoras button.on { background: var(--superficie); color: var(--acento); box-shadow: var(--sombra); }

/* Botón chico de borrar (la ×): siempre con aria-label y con "¿seguro?". */
.btn-x {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border-radius: var(--radio-s); border: 1px solid color-mix(in srgb, var(--neg) 40%, transparent);
  background: transparent; color: var(--neg); cursor: pointer; transition: background var(--dur);
}
.btn-x .ic { width: 15px; height: 15px; opacity: 1; }
.btn-x:hover { background: color-mix(in srgb, var(--neg) 12%, transparent); }

/* Chips y contadores */
.chip {
  display: inline-block; font-size: 0.72rem; padding: 2px 8px; border-radius: 999px;
  background: var(--acento-suave); color: var(--acento); font-weight: 600; line-height: 1.5; vertical-align: middle;
}
.chip.alta, .chip.no { background: color-mix(in srgb, var(--neg) 15%, transparent); color: var(--neg); }
.chip.media { background: color-mix(in srgb, #d9a441 20%, transparent); color: #8a611e; }
.chip.baja, .chip.ok { background: color-mix(in srgb, var(--pos) 15%, transparent); color: var(--pos); }
.chip.tag { background: transparent; border: 1px solid var(--borde); color: var(--texto-suave); }
.n-badge { color: var(--texto-suave); font-size: 0.76rem; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.tarjeta h2 .n-badge, h1 .n-badge {
  font-family: var(--f-cuerpo); font-weight: 600; font-size: 0.72rem;
  color: var(--texto-suave); background: var(--superficie-2);
  padding: 1px 8px; border-radius: 999px; vertical-align: middle; margin-left: 4px;
}
.n-badge.completa { color: var(--pos); font-weight: 700; }

/* Barra de progreso: el ancho va en --p (style="--p: 40%"), la regla aquí. */
.barra { height: 8px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; margin: 10px 0; border: 1px solid var(--borde); }
.barra i { display: block; height: 100%; background: var(--acento); width: var(--p, 0%); }
.barra.fina { height: 6px; margin: 2px 0; }

/* --- Barra lateral (app-shell) --- */
.app-shell { display: flex; min-height: 100vh; align-items: flex-start; }
.sidebar {
  width: 240px; flex-shrink: 0; background: var(--superficie); border-right: 1px solid var(--borde);
  min-height: 100vh; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0;
}
.sidebar-cabecera { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 12px; }
.sidebar-cabecera strong { font-family: var(--f-titulo); font-weight: 600; font-size: 1.02rem; white-space: nowrap; }
.sidebar-nota { font-size: 0.78rem; color: var(--texto-suave); margin: 0 9px 2px; }
.sidebar-cifra {
  font-family: var(--f-cifra); font-size: 1.3rem; font-weight: 600; margin: 0 9px 14px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.sidebar-cifra.pos { color: var(--pos); }
.sidebar-cifra.neg { color: var(--neg); }
.sidebar .barra { margin: 0 9px 10px; }
.sidebar-titulo {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-suave);
  margin: 14px 9px 4px;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar-listas { max-height: 50vh; overflow-y: auto; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--texto);
  padding: 7px 9px; border-radius: var(--radio-s); font-size: 0.88rem; transition: background var(--dur), color var(--dur);
}
.sidebar-nav a > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-nav a:hover { background: var(--superficie-2); }
/* Activo: una rayita a la izquierda y el texto en su color. Cada panel puede
   cambiarlo abajo (Vida y Entrenador usan un fondo suave). */
.sidebar-nav a.activo, .sidebar-nav a[aria-current="page"] {
  background: none; color: var(--acento); font-weight: 600; box-shadow: inset 3px 0 0 var(--acento);
}
.ic { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; }
.sidebar-nav a.activo .ic, .sidebar-nav a[aria-current="page"] .ic { opacity: 1; }
.sidebar-salir { margin-top: auto; padding-top: 12px; }
.contenido-principal { flex: 1; min-width: 0; }
.contenido-principal .panel { max-width: 900px; }
/* El botón de tema enseña el icono del tema al que se cambiaría. */
.icono-tema .ic-sol { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icono-tema .ic-sol { display: block; }
  :root:not([data-theme="light"]) .icono-tema .ic-luna { display: none; }
}
:root[data-theme="dark"] .icono-tema .ic-sol { display: block; }
:root[data-theme="dark"] .icono-tema .ic-luna { display: none; }

/* --- Menú en el móvil: un cajón que entra desde el lado --- */
/* !important a propósito en las DOS reglas (la que oculta y la que muestra):
   son clases de visibilidad pura y compiten con .icono, que trae su propio
   display. Con una sola, el botón de abrir el menú desaparece en el celular. */
.boton-menu-movil, .solo-movil, .fondo-menu { display: none !important; }

@media (max-width: 760px) {
  .app-shell { display: block; }
  .contenido-principal { padding-top: 54px; }
  body.menu-abierto { overflow: hidden; }

  .boton-menu-movil {
    display: flex !important; align-items: center; justify-content: center;
    position: fixed; top: 10px; left: 10px; z-index: var(--z-fab);
    width: 44px; height: 44px; border-radius: var(--radio-m);
    border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
    box-shadow: var(--sombra);
  }
  .boton-menu-movil .ic { width: 19px; height: 19px; opacity: 1; }

  .fondo-menu {
    display: block !important; position: fixed; inset: 0; background: rgba(12, 12, 12, 0.45);
    z-index: var(--z-fondo); opacity: 0; pointer-events: none; transition: opacity 0.18s;
  }
  .fondo-menu.visible { opacity: 1; pointer-events: auto; }

  .sidebar {
    position: fixed; top: 0; left: 0; height: 100%; z-index: var(--z-menu);
    width: 78vw; max-width: 300px; min-height: 100%;
    flex-direction: column; flex-wrap: nowrap; overflow-y: auto; overflow-x: hidden;
    padding: 16px 12px; border-right: 1px solid var(--borde); border-bottom: none;
    transform: translateX(-100%); transition: transform 0.2s ease-out;
    box-shadow: var(--sombra);
  }
  .sidebar.abierta { transform: translateX(0); }
  .sidebar-listas, .sidebar-titulo { display: block; }
  .sidebar-nav a { flex: 0 0 auto; }
  .sidebar-nota, .sidebar-cifra, .sidebar .barra { width: auto; margin-left: 9px; margin-right: 9px; }
  .solo-movil { display: inline-flex !important; }
  .sidebar-cabecera { padding-top: 2px; }
  .cab-seccion { align-items: center; }
  /* Una fila con UN campo y botones: el campo se lleva la línea entera. */
  .form-linea input:only-of-type { max-width: none; flex: 1 1 100%; }
  .form-linea button { padding: 8px 13px; }
}

/* --- Capa de pulido: lo que pinta el navegador, tematizado --- */
::selection { background: color-mix(in srgb, var(--acento) 24%, transparent); }
* { caret-color: var(--acento); scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 999px; border: 3px solid var(--fondo); }
::-webkit-scrollbar-thumb:hover { background: var(--texto-suave); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 5px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento);
}
.tarjeta-login input:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.sidebar-nav a:focus-visible { outline-offset: -2px; }
.panel a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--dur); }
.panel a:hover { text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* --- Unificado: selector de paneles, Centro y chat de Jarvis (15/09/2026) --- */
[hidden] { display: none !important; }
.panel.panel-ancho, .contenido-principal .panel.panel-ancho { max-width: 1120px; }

/* Selector de paneles, arriba de la barra lateral: se salta de uno a otro. */
.sidebar-paneles {
  /* Dos filas de dos: con los cuatro en una sola fila, "Finanzas" se cortaba. */
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; margin: 0 4px 12px;
  background: var(--superficie-2); border-radius: var(--radio-m); padding: 3px;
}
.sidebar-paneles a {
  text-align: center; font-size: 0.76rem; font-weight: 600; padding: 6px 2px; border-radius: 7px;
  color: var(--texto-suave); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-paneles a:hover { color: var(--texto); }
.sidebar-paneles a.actual { background: var(--superficie); color: var(--acento); box-shadow: var(--sombra); }
/* El cuarto botón lleva a la página de Jarvis (Centro + chat completo), que vive
   fuera del panel: se abre en otra pestaña y se distingue del resto. */
.sidebar-paneles a.a-jarvis { color: var(--acento); }
.sidebar-paneles a.a-jarvis:hover { background: var(--acento-suave); }
.sidebar-paneles a { font-size: 0.76rem; padding: 6px 4px; }

/* Centro de operaciones */
.centro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--esp-3); align-items: start; }
.centro-panel .cab-seccion { align-items: center; margin-bottom: 6px; }
.centro-panel .cab-seccion .enlace { padding: 5px 11px; font-size: 0.8rem; }
.centro-panel.actual { border-color: color-mix(in srgb, var(--acento) 45%, var(--borde)); }
.centro-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; margin: 6px 0 4px; }
.centro-cifras > div { padding: 8px 0; border-top: 1px solid var(--borde); min-width: 0; }
.centro-cifras dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-suave); }
.centro-cifras dd { margin: 2px 0 0; font-family: var(--f-cifra); font-variant-numeric: tabular-nums; font-size: 1.02rem; font-weight: 600; overflow-wrap: anywhere; }
.centro-cifras dd.pos { color: var(--pos); }
.centro-cifras dd.neg { color: var(--neg); }
.centro-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.centro-lista li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-top: 1px solid var(--borde); font-size: 0.9rem; }
.centro-lista li:first-child { border-top: none; }
.centro-lista li > span:first-of-type { flex: 1; min-width: 0; }
.centro-lista li > .mini { flex: none; text-align: right; }
.centro-alertas { border-color: color-mix(in srgb, var(--neg) 40%, var(--borde)); }
.centro-lista .punto-estado { align-self: center; }
/* Con sesión iniciada flota el botón de Jarvis: aire abajo para que no tape nada. */
.contenido-principal .panel { padding-bottom: 96px; }
.centro-sitios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 18px; }
.centro-sitios li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.9rem; min-width: 0; }
.centro-sitios li a { color: var(--texto); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.centro-sitios li a:hover { color: var(--acento); }
.centro-sitios li .mini { margin-left: auto; flex: none; }
.punto-estado { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; background: var(--texto-suave); }
.punto-estado.ok { background: var(--pos); }
.punto-estado.mal { background: var(--neg); }
.punto-estado.atencion { background: #d9a441; }

/* Chat de Jarvis: botón flotante + cajón */
.jv-boton {
  position: fixed; right: 18px; bottom: 18px; z-index: var(--z-fab);
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px 11px 13px;
  border-radius: 999px; border: none; cursor: pointer; font: 600 0.9rem var(--f-cuerpo);
  background: var(--acento); color: var(--sobre-acento); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
  transition: transform var(--dur), filter var(--dur);
}
.jv-boton .ic { width: 18px; height: 18px; opacity: 1; }
.jv-boton:hover { filter: brightness(1.08); transform: translateY(-1px); }
body.jv-abierto .jv-boton { display: none; }
.jv-cajon {
  position: fixed; right: 18px; bottom: 18px; z-index: var(--z-menu);
  width: min(430px, calc(100vw - 36px)); height: min(640px, calc(100vh - 36px));
  display: flex; flex-direction: column; background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); overflow: hidden;
}
.jv-cab { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--borde); }
.jv-cab strong { font-family: var(--f-titulo); font-size: 1.05rem; }
.jv-estado { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jv-cab .icono { width: 32px; height: 32px; padding: 0; }
.jv-atajos { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid var(--borde); scrollbar-width: none; flex: none; }
.jv-atajos::-webkit-scrollbar { display: none; }
.jv-atajos button {
  flex: none; font: 500 0.78rem var(--f-cuerpo); padding: 5px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
}
.jv-atajos button:hover { border-color: var(--acento); color: var(--acento); }
.jv-charla { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--fondo); }
.jv-vacio { margin: auto; text-align: center; color: var(--texto-suave); font-size: 0.88rem; max-width: 30ch; }
.jv-msg { max-width: 92%; padding: 9px 12px; border-radius: 14px; font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
.jv-msg.yo { align-self: flex-end; background: var(--acento); color: var(--sobre-acento); border-bottom-right-radius: 4px; white-space: pre-wrap; }
.jv-msg.el { align-self: flex-start; background: var(--superficie); border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
.jv-msg.el.mal { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, var(--borde)); }
.jv-msg p { margin: 0 0 0.5em; }
.jv-msg p:last-child { margin-bottom: 0; }
.jv-msg h4 { margin: 0.3em 0 0.25em; font-size: 0.95rem; }
.jv-msg ul, .jv-msg ol { margin: 0 0 0.5em; padding-left: 1.2em; }
.jv-msg code { font: 0.8rem ui-monospace, Consolas, monospace; background: var(--superficie-2); padding: 1px 4px; border-radius: 4px; }
.jv-msg pre { background: var(--superficie-2); padding: 8px 10px; border-radius: 8px; overflow-x: auto; margin: 0.3em 0 0.5em; }
.jv-msg pre code { background: none; padding: 0; }
.jv-tabla { overflow-x: auto; margin: 0.3em 0 0.5em; }
.jv-msg table { font-size: 0.8rem; min-width: 100%; }
.jv-msg th, .jv-msg td { padding: 4px 7px; border: 1px solid var(--borde); }
.jv-pensando { align-self: flex-start; color: var(--texto-suave); font-size: 0.84rem; display: flex; align-items: center; gap: 6px; }
.jv-pensando i { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-suave); display: inline-block; animation: jv-late 1.2s infinite; }
.jv-pensando i:nth-child(2) { animation-delay: 0.2s; }
.jv-pensando i:nth-child(3) { animation-delay: 0.4s; }
.jv-pensando b { font-weight: 500; color: var(--texto); font-variant-numeric: tabular-nums; }
@keyframes jv-late { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
.jv-pie { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--borde); margin: 0; flex: none; }
.jv-pie textarea {
  flex: 1; resize: none; min-height: 40px; max-height: 120px; padding: 9px 12px; border-radius: 18px;
  border: 1.5px solid var(--borde); background: var(--superficie); color: var(--texto); font: 16px/1.35 var(--f-cuerpo);
}
.jv-pie textarea:focus { outline: none; border-color: var(--acento); }
.jv-enviar, .jv-cancelar {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.jv-enviar { background: var(--acento); color: var(--sobre-acento); }
.jv-cancelar { background: var(--superficie); color: var(--neg); border: 1.5px solid var(--neg); }
.jv-enviar .ic, .jv-cancelar .ic { width: 17px; height: 17px; opacity: 1; }
@media (max-width: 760px) {
  .jv-boton { right: 14px; bottom: 14px; }
  .jv-cajon { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: none; }
  body.jv-abierto { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .jv-pensando i { animation: none; opacity: 0.7; } }
/* <<< BASE COMÚN ============================================================ */

/* ===== PROPIO DEL PANEL DE LA ACADEMIA =================================== */
h1 { font-weight: 600; letter-spacing: -0.015em; }
.sidebar-nav a.activo, .sidebar-nav a[aria-current="page"] {
  background: var(--acento-suave); color: var(--acento); font-weight: 600; box-shadow: none;
}
.sidebar-marca { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sidebar-marca .logo {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--acento);
}
a.boton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.boton[disabled], button[disabled] { opacity: 0.55; cursor: not-allowed; filter: none !important; }
.form-linea > label { flex: 1 1 150px; min-width: 0; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .dos-columnas { grid-template-columns: 1fr; } }

/* Cifras de arriba del resumen */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cifras .tarjeta { padding: 14px 16px; }
.cifras .cifra { font-size: 1.6rem; margin: 2px 0; }
.cifras .etq { font-size: 0.78rem; color: var(--texto-suave); margin: 0; }

/* Lo que pide atención hoy */
.lista-hoy { list-style: none; margin: 0; padding: 0; }
.lista-hoy li { border-top: 1px solid var(--borde); }
.lista-hoy li:first-child { border-top: none; }
.lista-hoy a, .lista-hoy .sin-enlace {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 10px; margin: 0 -10px;
  text-decoration: none; color: var(--texto); border-radius: var(--radio-s);
}
.lista-hoy a:hover { background: var(--acento-suave); }
.lista-hoy .que { font-weight: 600; }
.lista-hoy li.urgente .que { color: var(--neg); }

/* El estado, cambiable de un clic desde la lista */
.estado-form { margin: 0; }
.sel-estado {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 0.76rem; font-weight: 600;
  padding: 4px 24px 4px 10px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  background-color: var(--superficie-2); color: var(--texto-suave);
  background-repeat: no-repeat; background-position: right 8px center; background-size: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sel-estado option { background: var(--superficie); color: var(--texto); }
.sel-estado.e-pendiente, .sel-estado.e-haciendo, .sel-estado.e-nuevo, .sel-estado.e-contactado,
.sel-estado.e-agendado, .sel-estado.e-idea, .sel-estado.e-propuesta, .sel-estado.e-abierta {
  background-color: var(--acento-suave); color: var(--acento);
}
.sel-estado.e-hecha, .sel-estado.e-pagado, .sel-estado.e-inscrito, .sel-estado.e-publicado,
.sel-estado.e-hecho, .sel-estado.e-decidido, .sel-estado.e-en-curso {
  background-color: color-mix(in srgb, var(--pos) 15%, var(--superficie)); color: var(--pos);
}
.sel-estado.e-bloqueada, .sel-estado.e-descartado, .sel-estado.e-abandono, .sel-estado.e-cancelada {
  background-color: color-mix(in srgb, var(--neg) 14%, var(--superficie)); color: var(--neg);
}
tr.atrasada td:first-child { box-shadow: inset 3px 0 0 var(--neg); }
tr.hecha td { color: var(--texto-suave); }
tr.hecha td .titulo-fila { text-decoration: line-through; }
td.acciones { white-space: nowrap; text-align: right; }
td.acciones form { display: inline-block; margin-left: 6px; }
.titulo-fila { font-weight: 600; color: var(--texto); text-decoration: none; }
a.titulo-fila:hover { color: var(--acento); }
.fuente { font-size: 0.74rem; color: var(--texto-suave); display: block; margin-top: 2px; overflow-wrap: anywhere; }
.chip.ejemplo { background: color-mix(in srgb, var(--aviso) 18%, transparent); color: var(--aviso); }
.chip.propuesta { background: color-mix(in srgb, var(--aviso) 18%, transparent); color: var(--aviso); }
.chip.media { color: var(--aviso); }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.filtro {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  padding: 7px 12px; border-radius: 999px; font-size: 0.86rem; font-weight: 600;
  color: var(--texto-suave); background: var(--superficie); border: 1px solid var(--borde);
}
.filtro span { font-size: 0.78rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--superficie-2); }
.filtro:hover { color: var(--acento); border-color: var(--acento); }
.filtro.puesto { color: var(--sobre-acento); background: var(--acento); border-color: var(--acento); }
.filtro.puesto span { background: rgba(255, 255, 255, 0.25); color: inherit; }

/* Avisos dentro de una tarjeta: qué falta para que esto funcione */
.falta {
  border: 1px solid color-mix(in srgb, var(--aviso) 40%, var(--borde));
  background: color-mix(in srgb, var(--aviso) 8%, var(--superficie));
  border-radius: var(--radio-m); padding: 12px 14px; font-size: 0.9rem;
}
.falta strong { color: var(--aviso); }
.falta ul, .tarjeta ul.puntos { margin: 6px 0 0; padding-left: 1.2em; }
.ok-caja {
  border: 1px solid color-mix(in srgb, var(--pos) 40%, var(--borde));
  background: color-mix(in srgb, var(--pos) 8%, var(--superficie));
  border-radius: var(--radio-m); padding: 12px 14px; font-size: 0.9rem;
}

/* Redes: una tarjeta por red */
.redes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.clave-guardada { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }
.lista-datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 8px 0 0; font-size: 0.9rem; }
.lista-datos dt { color: var(--texto-suave); }
.lista-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .lista-datos { grid-template-columns: 1fr; gap: 2px; } .lista-datos dd { margin-bottom: 6px; } }

/* Enlaces agrupados */
.enlaces-grupo { list-style: none; margin: 0; padding: 0; }
.enlaces-grupo li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--borde); }
.enlaces-grupo li:first-child { border-top: none; }
.enlaces-grupo .cuerpo { flex: 1; min-width: 0; }
.enlaces-grupo a.titulo-fila { overflow-wrap: anywhere; }
.url-chica { font-size: 0.78rem; color: var(--texto-suave); overflow-wrap: anywhere; }

.barra-total { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* ---------------------------------------------------------------------------
   Nada que se toque por debajo de 44px, en el telefono
   ---------------------------------------------------------------------------
   Va al FINAL del archivo a proposito: puesto a mitad, reglas de mas abajo con
   la misma especificidad lo pisaban -- y el fallo no se veia, porque el CSS
   cargaba sin quejarse (el enlace a Jarvis siguio midiendo 40px tres intentos).

   Solo en el telefono: en la computadora estos controles se usan con raton y
   agrandarlos alli seria rediseñar, no mejorar.

   Donde el control tiene que verse pequeño (la casilla de marcar hecha, el
   titulo de una tarea dentro de su fila), lo que se agranda es la ZONA que
   responde al dedo, no el dibujo. */
@media (max-width: 860px) {
  .boton-menu-movil { width: 44px; height: 44px; }
  .icono { min-width: 44px; min-height: 44px; }
  .sidebar-nav a { min-height: 44px; }
  .sidebar-paneles a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .enlace, .btn-x { min-height: 44px; }
  .form-linea button, .form-columna button, .boton, .tarjeta-login button { min-height: 44px; }
  .form-linea input, .form-linea select, .form-linea textarea,
  .form-columna input, .form-columna select, .form-columna textarea,
  .nueva-opciones input, .nueva-opciones select { min-height: 44px; }

  /* La casilla se ve de 21px, como debe: lo que crece es su zona de toque. */
  .chk { position: relative; }
  .chk::after { content: ""; position: absolute; inset: -12px; }

  /* Igual con el titulo de cada tarea: medía 19px de alto. El margen negativo
     devuelve el espacio, asi que la lista no se estira. */
  .fila-tarea .que a, .fila-prio .que a { display: inline-block; padding-block: 12px; margin-block: -12px; }

  /* El boton flotante de Jarvis media 40px de alto. Es el que siempre esta a
     mano en el telefono, asi que es de los que mas se tocan. */
  .jv-boton { min-height: 44px; }

  /* Enlaces sueltos dentro del contenido: el de un estado vacio y el nombre de
     cada ficha en una tabla. Mismo truco que el titulo de tarea -- crece la zona
     de toque, no la linea. */
  .vacio a, .tabla a, .tabla-scroll a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}


/* ---- Que la barra del iPhone no tape nada (25/09/2026) ----
   Al agregar los paneles a la pantalla de inicio se abren SIN la barra de
   Safari, y con `black-translucent` el contenido pasa por DEBAJO de la barra de
   estado del telefono. El boton del menu quedaba bajo la hora y no se podia
   tocar (Roger: "no puedo abrir el menu, esta muy arriba y no funciona").
   `env(safe-area-inset-*)` vale 0 en un navegador normal, asi que esto no
   cambia nada fuera del telefono. Va al FINAL del archivo a proposito: una
   regla de mas abajo con la misma especificidad gana. */
@media (max-width: 860px) {
  .boton-menu-movil {
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    left: calc(10px + env(safe-area-inset-left, 0px)) !important;
  }
  .contenido-principal {
    padding-top: calc(54px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .sidebar { padding-top: env(safe-area-inset-top, 0px); }
  /* El boton de Jarvis flota abajo: sobre la raya de gestos no se toca bien. */
  .a-jarvis-flotante, .jv-boton, .boton-jarvis {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* El chat de Jarvis se abre a pantalla completa en el telefono, asi que su
     cabecera — con el boton de CERRAR — quedaba debajo de la hora y no habia
     como salir (Roger, 25/09: "no puedo salir ni usarlo bien"). Y el campo de
     escribir, sobre la raya de gestos. */
  .jv-cajon {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ---- Que nada quede tapado por lo que flota (Roger, 26/09) ---------------
   El boton de menu flota fijo arriba a la izquierda, asi que al bajar la
   pagina el contenido le pasaba por DEBAJO y quedaba medio tapado: el titulo
   "Ultimos 29" se leia "ltimos 29". Y la burbuja de Jarvis, abajo a la
   derecha, tapaba la ultima fila de cada tabla.

   Arreglo: una franja opaca de lado a lado detras del boton — el contenido
   desaparece detras de ella como en cualquier app, en vez de asomar a medias —
   y sitio de sobra al final de la pagina para que la burbuja no tape nada.
   Va al final del archivo: una regla de aqui gana a las de mas arriba. */
@media (max-width: 860px) {
  .boton-menu-movil::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: -1;
    height: calc(54px + env(safe-area-inset-top, 0px));
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
  }
  .contenido-principal {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* La foto de cada canal, al lado de su nombre. Los avatares los hace la
   fábrica en el ordenador de Roger y se suben por /api/canal-foto: el panel
   corre en el servidor y no ve ese disco. Mientras no haya foto se enseña la
   inicial, que es mejor que un hueco. */
.canal-con-foto { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.canal-foto {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  object-fit: cover; background: var(--superficie-2);
  border: 1px solid var(--borde);
}
.canal-sin-foto {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--suave); font-size: 15px;
}

/* Lo ya publicado dentro del calendario. Antes el calendario solo miraba la
   tabla `plan` —que Roger no usa— y salía vacío aunque hubiera 318
   publicaciones hechas: parecía roto sin estarlo. */
.chip-salio {
  /* Una linea por publicacion: los titulos de la fabrica son largos y con
     `flex-wrap` cada chip se comia tres renglones del dia. */
  display: flex; align-items: baseline; gap: 6px;
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  padding: 4px 10px; border-radius: 8px; text-decoration: none;
  background: color-mix(in srgb, var(--ok, #2f7d4f) 14%, transparent);
  color: var(--texto); border: 1px solid color-mix(in srgb, var(--ok, #2f7d4f) 35%, transparent);
}
.chip-salio:hover { background: color-mix(in srgb, var(--ok, #2f7d4f) 24%, transparent); }
.dias li.pasado .dia-cab b { color: var(--suave); }
.chip-mas { padding: 4px 10px; border-radius: 8px; background: var(--superficie-2);
  color: var(--suave); font-size: 12.5px; }

/* ---- Los cajones gigantes del formulario rapido (Roger, 26/09) ----------
   En el telefono el formulario se pone en columna, pero los campos seguian
   con `flex: 1 1 220px`. En columna ese 220px deja de ser ANCHO y pasa a ser
   ALTO, y encima flex-grow los estiraba: dos cajones vacios ocupando la
   pantalla entera antes de llegar al calendario. Se les quita el reparto. */
@media (max-width: 560px) {
  .form-rapido input, .form-rapido select, .form-rapido textarea {
    flex: 0 0 auto; min-height: 44px;
  }
  .form-rapido button { min-height: 44px; }
}

.chip-salio > span.mini { flex: none; }
.dia-cosas { display: grid; gap: 4px; min-width: 0; }

/* ---- "+ Agregar" abierto aplastaba el título (Roger, 26/09) -------------
   Una lista vacía abre el formulario sola, pero el formulario seguía en la
   misma fila que el título y lo estrujaba: "Pedidos" se leía "Pedid". Abierto
   ocupa la fila entera y baja debajo del título. */
.agregar-flotante[open] { flex-basis: 100%; }
.agregar-flotante[open] > summary { display: inline-block; }
.cab-seccion h1, .cab-seccion h2 { overflow-wrap: anywhere; }

/* Ayuda debajo de un campo: texto normal, no la etiqueta en mayúsculas. */
label .ayuda { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.76rem; color: var(--texto-suave); }
.nueva-opciones textarea {
  padding: 9px 12px; border-radius: var(--radio-s); border: 1.5px solid var(--borde);
  background: var(--superficie); color: var(--texto); font-size: 0.94rem; font-family: var(--f-cuerpo); width: 100%;
}
.nueva-opciones input, .nueva-opciones select { width: 100%; }
a.tarjeta-enlace { text-decoration: none; color: inherit; transition: border-color var(--dur); }
a.tarjeta-enlace:hover { border-color: var(--acento); }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { display: flex; flex-direction: column; gap: 1px; padding: 9px 0; border-top: 1px solid var(--borde); }
.lista-simple li:first-child { border-top: none; }
.panel code { font-size: 0.85em; background: var(--superficie-2); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.chip { white-space: nowrap; }

/* >>> REDISEÑO CASA (01/10/2026) =================================================
   El mismo diseño que la casa de Jarvis en todos los paneles: fondos, tarjetas,
   letra del sistema, cabecera con degradado del color del panel, cifras en
   recuadros y la barra lateral con el punto de color. Va al final a propósito;
   para quitarlo se borra de marcador a marcador. */
:root {
  --marca: #3b82f6;
  --fondo: #f6f7f9; --superficie: #ffffff; --superficie-2: #eef1f5; --borde: #e3e6ea;
  --texto: #1a1d23; --texto-suave: #5f6673;
  --acento: #1d4ed8; --acento-texto: #1d4ed8; --sobre-acento: #ffffff;
  --acento-suave: color-mix(in srgb, #3b82f6 14%, #ffffff);
  --pos: #15803d; --neg: #b91c1c;
  --sombra: 0 1px 2px rgba(15, 17, 21, .05), 0 6px 18px rgba(15, 17, 21, .06);
  --f-cuerpo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --f-titulo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --f-cifra: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0f1115; --superficie: #171a21; --superficie-2: #1f242e; --borde: #252a34;
    --texto: #e8eaed; --texto-suave: #9aa3b2;
    --acento: #3b82f6; --acento-texto: #3b82f6; --sobre-acento: #0b0d12;
    --acento-suave: color-mix(in srgb, #3b82f6 16%, #171a21);
    --pos: #4ade80; --neg: #f87171;
    --sombra: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  --fondo: #0f1115; --superficie: #171a21; --superficie-2: #1f242e; --borde: #252a34;
  --texto: #e8eaed; --texto-suave: #9aa3b2;
  --acento: #3b82f6; --acento-texto: #3b82f6; --sobre-acento: #0b0d12;
  --acento-suave: color-mix(in srgb, #3b82f6 16%, #171a21);
  --pos: #4ade80; --neg: #f87171;
  --sombra: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .35);
}
body { font-family: var(--f-cuerpo); letter-spacing: -0.003em; }
h1, h2, h3 { letter-spacing: -0.015em; }

/* Cabecera de cada página: el degradado del color del panel, como en la casa. */
.panel > .cab-seccion:first-child, .panel > .rm-cab:first-child {
  position: relative; overflow: hidden; border-radius: 18px; padding: 18px 20px;
  border: 1px solid var(--borde);
  background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--marca) 22%, transparent) 0%, transparent 58%),
              radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--marca) 9%, transparent) 0%, transparent 60%),
              var(--superficie);
}
.panel > .cab-seccion:first-child h1 { font-size: clamp(1.45rem, 3.6vw, 1.9rem); font-weight: 700; }

/* Tarjetas: radio grande, sombra suave y un poco de vida al pasar. */
.tarjeta { border-radius: 16px; border: 1px solid var(--borde); box-shadow: var(--sombra);
           transition: box-shadow .2s ease, transform .15s ease; }
.tarjeta:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 12px 30px rgba(0, 0, 0, .12); }
.tarjeta > h2:first-child, .tarjeta > .cab-seccion:first-child h2 { display: flex; align-items: center; gap: 9px; }
.tarjeta > h2:first-child::before, .tarjeta > .cab-seccion:first-child h2::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent); }

/* Cifras en recuadros, como las de la casa. */
.centro-cifras { gap: 8px !important; }
.centro-cifras > div { background: color-mix(in srgb, var(--fondo) 55%, var(--superficie)); border: 1px solid var(--borde);
                       border-radius: 12px; padding: 10px 12px !important; border-top: 1px solid var(--borde) !important; min-width: 0; }
.centro-cifras dd { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.centro-cifras dt { font-size: .72rem; }

/* Barra lateral: la marca con el punto de color y la sección activa teñida. */
.sidebar-cabecera strong { display: inline-flex; align-items: center; gap: 9px; }
.sidebar-cabecera strong::before { content: ""; width: 20px; height: 20px; border-radius: 7px; flex: none;
  background: conic-gradient(from 210deg, var(--marca), color-mix(in srgb, var(--marca) 45%, #60a5fa), var(--marca));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 20%, transparent); }
.sidebar-marca .logo { display: none; }  /* la Academia traía su propio cuadrito: uno solo */
.sidebar-nav a { border-radius: 10px; transition: background .15s ease, color .15s ease; }
.sidebar-nav a.activo, .sidebar-nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--marca) 15%, transparent) !important; color: var(--texto) !important;
  box-shadow: inset 3px 0 0 var(--marca); }
.sidebar-nav a.activo .ic, .sidebar-nav a[aria-current="page"] .ic { color: var(--acento-texto); }

/* Mis paneles: cada uno con su color, el mismo de los botones de la casa. */
.sidebar-paneles a { display: flex; align-items: center; gap: 8px; }
.sidebar-paneles a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--pc, #9aa3b2); }
.sidebar-paneles a[href*="finanzas"] { --pc: #22c55e; } .sidebar-paneles a[href*="vida"] { --pc: #a78bfa; }
.sidebar-paneles a[href*="entrenador"] { --pc: #f97316; } .sidebar-paneles a[href*="viajes"] { --pc: #38bdf8; }
.sidebar-paneles a[href*="negocio"] { --pc: #facc15; } .sidebar-paneles a[href*="contenido"] { --pc: #f472b6; }
.sidebar-paneles a[href*="monitoreo"] { --pc: #2dd4bf; } .sidebar-paneles a[href*="herramientas"] { --pc: #a3e635; }
.sidebar-paneles a[href*="recursos"] { --pc: #d946ef; } .sidebar-paneles a[href*="academia"] { --pc: #3b82f6; }
.sidebar-paneles a[href*="fidelidad"] { --pc: #f43f5e; } .sidebar-paneles a[href*="admin.roxsolutionscr"] { --pc: #818cf8; }
.sidebar-paneles a[href*="jarvis"] { --pc: #60a5fa; }
.sidebar-paneles a[href*="127.0.0.1:8761"] { --pc: #22c55e; } .sidebar-paneles a[href*="127.0.0.1:8762"] { --pc: #a78bfa; }
.sidebar-paneles a[href*="127.0.0.1:8763"] { --pc: #f97316; } .sidebar-paneles a[href*="127.0.0.1:8764"] { --pc: #38bdf8; }
.sidebar-paneles a[href*="127.0.0.1:8766"] { --pc: #facc15; } .sidebar-paneles a[href*="127.0.0.1:8767"] { --pc: #f472b6; }
.sidebar-paneles a[href*="127.0.0.1:8768"] { --pc: #2dd4bf; }

/* Chips y etiquetas: pastillas redondas. */
.chip { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) { .tarjeta, .sidebar-nav a { transition: none; } }
/* <<< REDISEÑO CASA */

/* ==========================================================================
   LOGIN · 07/10/2026 · el mismo bloque en los 10 paneles (pedido de Roger:
   "que los logins se vean profesionales en todos"). Solo tokens: cada panel
   pinta con su color. Si se toca aquí, se toca en los diez.
   Fidelidad no tiene --acento ni --radio-*: por eso los var() llevan respaldo.
   ========================================================================== */
.login { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px;
  min-height: 100dvh; padding: clamp(24px, 10vh, 96px) 16px 40px; }
.tarjeta-login {
  width: 100%; max-width: 360px; padding: 28px 24px 24px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-l, 16px); box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 16px;
}
.tarjeta-login [hidden], .bloque.entrar [hidden] { display: none !important; }
.tarjeta-login h1 { margin: 0 0 4px; font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; text-transform: none; }

/* La acción principal: una sola, grande y del color del panel. */
.tarjeta-login #boton-passkey-entrar, .tarjeta-login #pedir-codigo, .tarjeta-login #entrar-codigo {
  width: 100%; min-height: 48px; padding: 12px 16px; border: none;
  border-radius: var(--radio-m, 12px); background: var(--acento, var(--marca));
  color: var(--sobre-acento, var(--sobre-marca)); font: 600 1rem var(--f-cuerpo, inherit);
  cursor: pointer; transition: filter .15s, transform .1s;
}
.tarjeta-login #boton-passkey-entrar:hover, .tarjeta-login #pedir-codigo:hover, .tarjeta-login #entrar-codigo:hover { filter: brightness(.94); }
.tarjeta-login #boton-passkey-entrar:active, .tarjeta-login #pedir-codigo:active, .tarjeta-login #entrar-codigo:active { transform: scale(.985); }
.tarjeta-login button[disabled] { opacity: .55; cursor: wait; }

/* "No puedo entrar con Face ID": un enlace discreto, no un segundo botón. */
.otra-via, .tarjeta-login > p:has(> .como-enlace) { margin: -4px 0 0; text-align: center; }
.como-enlace, .tarjeta-login .como-enlace {
  display: inline-block; width: auto; min-height: 44px; padding: 10px 6px;
  background: none; border: none; box-shadow: none;
  color: var(--texto-suave); font: 500 .92rem var(--f-cuerpo, inherit);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.como-enlace:hover, .tarjeta-login .como-enlace:hover { color: var(--texto); background: none; }

/* Los avisos: una caja con su color de sentido, no una línea suelta. */
#passkey-aviso, #codigo-aviso {
  margin: 0; padding: 10px 12px; border-radius: var(--radio-s, 8px);
  border: 1px solid var(--borde); background: var(--superficie-2);
  font-size: .9rem; line-height: 1.4; color: var(--texto);
}
#passkey-aviso.error, #codigo-aviso.error {
  border-color: color-mix(in srgb, var(--neg) 45%, var(--borde));
  background: color-mix(in srgb, var(--neg) 9%, var(--superficie)); color: var(--neg);
}
#passkey-aviso.ok, #codigo-aviso.ok {
  border-color: color-mix(in srgb, var(--pos) 45%, var(--borde));
  background: color-mix(in srgb, var(--pos) 9%, var(--superficie)); color: var(--pos);
}

/* El código por correo: su propio bloque, separado por un filete. */
#caja-codigo { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--borde); }
#caja-numero { display: flex; flex-direction: column; gap: 12px; }
/* El aviso ("ya va en camino" / el error) va junto al botón que lo provocó, no al final. */
#caja-codigo > label { order: 1; } #pedir-codigo { order: 2; } #codigo-aviso { order: 3; } #caja-numero { order: 4; }
.tarjeta-login label, .bloque.entrar label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 500; color: var(--texto-suave); }
.tarjeta-login input, .bloque.entrar input {
  width: 100%; min-height: 44px; padding: 10px 12px; box-sizing: border-box;
  border: 1.5px solid var(--borde); border-radius: var(--radio-s, 8px);
  background: var(--fondo); color: var(--texto); font: 400 1rem var(--f-cuerpo, inherit);
}
.tarjeta-login input:focus, .bloque.entrar input:focus { outline: none; border-color: var(--acento, var(--marca)); box-shadow: 0 0 0 3px var(--acento-suave, var(--marca-suave)); }
#numero-codigo { text-align: center; font-size: 1.35rem; letter-spacing: .35em; font-variant-numeric: tabular-nums; }

/* La contraseña de rescate: plegada, discreta, y su botón sin competir con el principal. */
.rescate { margin: 0; padding-top: 12px; border-top: 1px solid var(--borde); }
.rescate > summary { cursor: pointer; font-size: .9rem; color: var(--texto-suave); padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.rescate > summary::-webkit-details-marker { display: none; }
.rescate > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.rescate[open] > summary::before { transform: rotate(45deg); }
.rescate > summary:hover { color: var(--texto); }
.rescate form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.rescate form button[type="submit"] {
  width: 100%; min-height: 44px; padding: 10px 16px; cursor: pointer;
  border-radius: var(--radio-m, 12px); border: 1.5px solid var(--borde);
  background: var(--superficie); color: var(--texto); font: 600 .95rem var(--f-cuerpo, inherit);
}
.rescate form button[type="submit"]:hover { background: var(--superficie-2); }

/* Fidelidad: el bloque de Roger arriba, con el mismo aire que los demás. */
.bloque.entrar { display: flex; flex-direction: column; gap: 14px; }
.bloque.entrar > p { margin: 0; text-align: center; }
.bloque.entrar #caja-codigo { padding-top: 14px; }
/* El margen de 12vh era para separar del borde de arriba; pegado también al formulario del negocio abría un hueco. */
form.formulario.entrar { margin-top: 0; }
main.columna > .nota { margin: 12px 0 0; }

/* 07/10: el enlace Face ID al lado de Salir, en el pie del menú. */
.sidebar-salir { display: flex; gap: 8px; align-items: center; }

/* >>> ENTRADA DE CERTIFICATION CREW ==========================================
   La pantalla de entrar es lo unico que ve alguien que todavia no esta dentro,
   asi que lleva la marca y no el aspecto generico de los demas paneles. */
.cc-entrada { text-align: center; }
.cc-marca {
  width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--acento); color: var(--sobre-acento);
  font: 600 32px/78px var(--f-titulo); letter-spacing: -2px;
}
.cc-entrada h1 { font-size: 1.6rem; margin: 0 0 2px; }
.cc-sub { color: var(--texto-suave); margin: 0 0 22px; font-size: 0.95rem; }
.cc-explica {
  background: var(--acento-suave); border-radius: 12px; padding: 14px 16px;
  margin: 0 0 20px; font-size: 0.92rem; line-height: 1.5; text-align: left;
}
.cc-principal { width: 100%; justify-content: center; font-size: 1rem; padding: 13px 18px; }
.cc-campo { display: block; text-align: left; margin: 18px 0 12px; font-size: 0.9rem; }
.cc-campo input {
  width: 100%; margin-top: 7px; text-align: center;
  font: 600 1.7rem/1 var(--f-cifra); letter-spacing: 10px; padding: 12px;
}
.cc-entrada .rescate { margin-top: 26px; text-align: left; }
.cc-entrada .rescate summary { color: var(--texto-suave); font-size: 0.85rem; }