/* Panel de Entrenamiento — paleta "cancha": gris acero frío, acento llama
   (naranja-rojo de esfuerzo, no el vermellón-sobre-negro genérico: el fondo
   sigue siendo claro). Bebas Neue en mayúsculas condensadas para títulos —
   letrero de gimnasio — Work Sans en el cuerpo, y Space Mono en las cifras
   de series/repeticiones/descanso, como el marcador de un cronómetro. */
:root {
  --fondo: #eef0f2;
  --superficie: #ffffff;
  --superficie-2: #e2e6e9;
  --texto: #1a1e22;
  --texto-suave: #5c646d;
  --borde: #d2d8dc;
  --acento: #c1481f;
  --acento-suave: #f2ddd2;
  /* El mismo llama, oscurecido hasta leerse sobre el durazno (5.78:1).
     Es para TEXTO; la forma (la raya) sigue en --acento. */
  --acento-legible: #96330f;
  --sobre-acento: #ffffff;
  --pos: #2f7a52;
  --neg: #a83f3f;
  --sombra: 0 1px 2px rgba(15, 20, 25, 0.05), 0 4px 14px rgba(15, 20, 25, 0.06);
  --f-cuerpo: "Work Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-titulo: "Bebas Neue", "Arial Narrow", sans-serif;
  --f-cifra: "Space Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #12171c;
    --superficie: #1b2229;
    --superficie-2: #161c22;
    --texto: #eef0f2;
    --texto-suave: #8f9aa5;
    --borde: #2a333b;
    --acento: #e2703f;
    --acento-suave: #3d2a1e;
    --acento-legible: #ea7d4d;   /* el vivo daba 4.28:1 sobre el durazno oscuro */
    --sobre-acento: #12171c;
    --pos: #4bb37a;
    --neg: #dd7a72;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.25);
  }
}
:root[data-theme="dark"] {
  --fondo: #12171c;
  --superficie: #1b2229;
  --superficie-2: #161c22;
  --texto: #eef0f2;
  --texto-suave: #8f9aa5;
  --borde: #2a333b;
  --acento: #e2703f;
  --acento-suave: #3d2a1e;
  --acento-legible: #ea7d4d;
  --sobre-acento: #12171c;
  --pos: #4bb37a;
  --neg: #dd7a72;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* >>> 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). */
/* El "usted está aquí" del menú iba en el naranja llama sobre el durazno claro:
   3.81:1, por debajo del 4.5 que hace falta para leerse. Se usa el llama oscuro
   (5.78:1) sólo para el texto — la raya de la izquierda sigue en el acento vivo,
   que ahí es una forma y no una letra. */
.sidebar-nav a.activo, .sidebar-nav a[aria-current="page"] {
  background: none; color: var(--acento-legible); 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 ENTRENAMIENTO ================================ */
/* Bebas Neue es una condensada en mayúsculas: los títulos van más grandes y sin negrita. */
h1, h2, h3 { text-transform: uppercase; letter-spacing: 0.02em; font-weight: 400; }
h1 { font-size: 2rem; }
.tarjeta h2 { font-size: 1.3rem; font-weight: 400; }
.tarjeta-login h1 { font-size: 1.6rem; font-weight: 400; }
.mini-titulo { font-family: var(--f-titulo); font-size: 1rem; font-weight: 400; letter-spacing: 0.06em; }
th { font-family: var(--f-titulo); font-weight: 400; font-size: 0.85rem; letter-spacing: 0.04em; }
td.c { font-family: var(--f-cifra); font-variant-numeric: tabular-nums; }
.cifra { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.01em; }
.sidebar-cabecera strong { font-weight: 400; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.03em; }
.sidebar-nota { font-family: var(--f-cifra); font-size: 0.72rem; margin-bottom: 5px; letter-spacing: 0.01em; }
/* Activo en la barra: fondo suave con el acento.
   El texto va en --acento-legible y no en --acento: el llama vivo sobre el
   durazno daba 3.81:1 y no se leia. Esta regla PISA a la de mas arriba, asi que
   es la que manda -- cambiar solo aquella no habria hecho nada. */
.sidebar-nav a.activo, .sidebar-nav a[aria-current="page"] {
  background: var(--acento-suave); color: var(--acento-legible); font-weight: 600; box-shadow: none;
}

/* --- Plan de la semana: ejercicio en solo lectura, con "Editar" que despliega --- */
.ejercicio { padding: 11px 0; border-top: 1px solid var(--borde); }
.ejercicio:first-of-type { border-top: none; padding-top: 4px; }
.ejercicio > strong { font-size: 0.98rem; }
.ejercicio .mini { margin: 3px 0 0; }
details.editar { margin-top: 7px; }
details.editar > summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; width: max-content;
  font-size: 0.78rem; color: var(--texto-suave); font-family: var(--f-cuerpo);
  padding: 3px 9px; border: 1px solid var(--borde); border-radius: 7px;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
details.editar > summary::-webkit-details-marker { display: none; }
details.editar > summary:hover { color: var(--texto); background: var(--superficie-2); }
details.editar[open] > summary { color: var(--acento); border-color: var(--acento); }
details.editar .form-columna { margin-top: 9px; }
details.editar .form-linea { margin-top: 0; }

/* --- "Hoy": un ejercicio con sus enlaces y su registro de peso --- */
.ejercicio-hoy { padding: 12px 0; border-top: 1px solid var(--borde); }
.ejercicio-hoy:first-of-type { border-top: none; }
.ejercicio-hoy.es-extra { opacity: 0.9; }
.eh-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.eh-cab strong { font-size: 1rem; }
.ej-media { margin: 5px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.85rem; }
.ej-media a {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-cuerpo); text-decoration: none; color: var(--acento); font-weight: 600;
  border: 1px solid var(--borde); border-radius: 6px; padding: 3px 9px;
}
.ej-media a .ic { width: 14px; height: 14px; opacity: 1; }
.ej-media a:hover { border-color: var(--acento); background: var(--acento-suave); }
.form-linea.eh-log { margin-top: 8px; }

/* --- Análisis: lista de datos del perfil --- */
.datos-lista { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 12px; }
.datos-lista li { font-size: 0.95rem; line-height: 1.45; }
.datos-lista b {
  display: block; font-family: var(--f-titulo); font-size: 0.85rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-suave); margin-bottom: 3px;
}

/* Medidas: las cifras no se parten en dos líneas ("112 kg" en una sola). */
.tabla-medidas td.n, .tabla-medidas th.n, .tabla-medidas td.c { white-space: nowrap; }

/* --- "Mis paneles": el selector, plegado y discreto --- */
details.mis-paneles { margin: 0 0 4px; }
details.mis-paneles > summary {
  display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  padding: 7px 10px; border-radius: var(--radio-s); font-size: 0.82rem;
  color: var(--texto-suave);
}
details.mis-paneles > summary::-webkit-details-marker { display: none; }
details.mis-paneles > summary:hover { color: var(--acento); background: var(--acento-suave); }
details.mis-paneles > summary .ic { width: 15px; height: 15px; }
details.mis-paneles[open] > summary { color: var(--acento); }
details.mis-paneles .sidebar-paneles { margin-top: 4px; }


/* ---------------------------------------------------------------------------
   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;
  }
}

/* ---- "+ 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; }

/* >>> 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: #f97316;
  --fondo: #f6f7f9; --superficie: #ffffff; --superficie-2: #eef1f5; --borde: #e3e6ea;
  --texto: #1a1d23; --texto-suave: #5f6673;
  --acento: #c2410c; --acento-texto: #c2410c; --sobre-acento: #ffffff;
  --acento-suave: color-mix(in srgb, #f97316 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: #f97316; --acento-texto: #f97316; --sobre-acento: #0b0d12;
    --acento-suave: color-mix(in srgb, #f97316 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: #f97316; --acento-texto: #f97316; --sobre-acento: #0b0d12;
  --acento-suave: color-mix(in srgb, #f97316 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; }