/* Panel de Monitoreo — frambuesa y grafito (25/09/2026; antes verde azulado,
   que era EXACTAMENTE el #0f766e de Viajes y en el iPhone no se distinguían).
   Un frambuesa sobrio como único acento, tinta grafito sobre papel casi blanco;
   en oscuro, fondo casi negro con el rosa subido. Manrope para títulos y cifras,
   IBM Plex Sans en el cuerpo: es un panel de estados y números, y tiene que
   leerse rápido. */
:root {
  --fondo: #f6f4f5;
  --superficie: #ffffff;
  --superficie-2: #ebe7ea;
  --texto: #1c1418;
  --texto-suave: #6b5f66;
  --borde: #e0d9dd;
  --acento: #be185d;
  --acento-suave: #fce7f1;
  --sobre-acento: #ffffff;
  --pos: #2f7a52;
  --pos-texto: #24613f;
  --neg: #b03b3b;
  --sombra: 0 1px 2px rgba(10, 40, 35, 0.05), 0 4px 14px rgba(10, 40, 35, 0.07);
  --f-cuerpo: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-titulo: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --f-cifra: "Manrope", ui-sans-serif, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0d080b;
    --superficie: #181116;
    --superficie-2: #120c10;
    --texto: #f4eef1;
    --texto-suave: #a8979f;
    --borde: #2e2229;
    --acento: #f472b6;
    --acento-suave: #3a1426;
    --sobre-acento: #12060c;
    --pos: #4bb37a;
    --pos-texto: #4bb37a;
    --neg: #e0817a;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --fondo: #0d080b;
  --superficie: #181116;
  --superficie-2: #120c10;
  --texto: #f4eef1;
  --texto-suave: #a8979f;
  --borde: #2e2229;
  --acento: #f472b6;
  --acento-suave: #3a1426;
  --sobre-acento: #12060c;
  --pos: #4bb37a;
  --pos-texto: #4bb37a;
  --neg: #e0817a;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
}
/* >>> 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);
}
.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: #6b4a10; }
.chip.baja, .chip.ok { background: color-mix(in srgb, var(--pos) 15%, transparent); color: var(--pos-texto); }
.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 NEGOCIO ====================================== */
h1 { font-weight: 600; letter-spacing: -0.01em; }
.tarjeta-login h1 { font-size: 1.35rem; }
.sidebar-cabecera strong { font-size: 1.05rem; }
.sidebar-nav a.activo, .sidebar-nav a[aria-current="page"] {
  background: var(--acento-suave); color: var(--acento); font-weight: 600; box-shadow: none;
}
a.boton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.form-linea > label { flex: 1 1 150px; min-width: 0; }
.check-linea { flex-direction: row !important; align-items: center; gap: 8px; }

/* Dos columnas que se apilan en el celular */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .dos-columnas { grid-template-columns: 1fr; } }

/* Lo que hay que mover 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 {
  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); }
.lista-hoy li.urgente .que::before { content: "● "; font-size: 0.7em; vertical-align: 2px; }

/* Embudo de propuestas */
.embudo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.embudo li { display: grid; grid-template-columns: 110px 1fr 28px; align-items: center; gap: 10px; }
.e-nombre { font-size: 0.9rem; color: var(--texto-suave); }
.e-barra { background: var(--superficie-2); border-radius: 999px; height: 10px; overflow: hidden; }
.e-barra i { display: block; height: 100%; width: var(--p, 0%); background: var(--acento); border-radius: 999px; }
.e-n { text-align: right; font-family: var(--f-cifra); font-variant-numeric: tabular-nums; font-weight: 600; }

/* Listas simples (servicios, ideas) */
.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; }

/* 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:hover { border-color: var(--borde); }
.sel-estado option { background: var(--superficie); color: var(--texto); font-weight: 500; }
.sel-estado.e-enviada, .sel-estado.e-pendiente, .sel-estado.e-abierta, .sel-estado.e-viva {
  background-color: var(--acento-suave); color: var(--acento);
}
.sel-estado.e-ganada, .sel-estado.e-cobrado, .sel-estado.e-hecha, .sel-estado.e-activo {
  background-color: color-mix(in srgb, var(--pos) 15%, var(--superficie)); color: var(--pos);
}
.sel-estado.e-perdida, .sel-estado.e-incobrable, .sel-estado.e-perdido, .sel-estado.e-muerta {
  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); }
td.acciones { white-space: nowrap; }
td.acciones form { display: inline-block; margin-left: 6px; }
input.corto { max-width: 90px; }

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

/* --- La ficha de un cliente ---
   Los botones de contacto van arriba y grandes: la ficha se abre justo antes de
   escribirle, y tener que buscar el número en otra pantalla rompe el gesto. */
.acciones-cliente { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
tr.mes-actual td { background: var(--acento-suave); }

/* --- Los mensajes listos para copiar ---
   Se leen antes de mandarlos, asi que se respetan los saltos de linea tal cual
   se escribieron: un mensaje de WhatsApp con los parrafos pegados no se manda. */
.mensaje {
  font: inherit; font-size: 0.98rem; line-height: 1.55; white-space: pre-wrap;
  overflow-wrap: anywhere; margin: 0 0 8px; padding: 16px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio-s);
}
.boton-copiar {
  font: inherit; font-size: 0.92rem; font-weight: 600; padding: 9px 16px; min-height: 40px;
  background: var(--acento); color: var(--sobre-acento); border: none;
  border-radius: var(--radio-s); cursor: pointer; flex: none;
}
.boton-copiar:hover { filter: brightness(1.06); }
.boton-copiar:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }

/* --- Apuntar rapido desde una pantalla que no es la lista ---
   En el telefono el campo y el boton se apilan: en fila el campo queda
   estrujado y no se lee ni lo que se esta escribiendo. */
.form-rapido { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.form-rapido input, .form-rapido select {
  flex: 1 1 200px; min-width: 0; font: inherit; font-size: 0.95rem;
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio-s);
  background: var(--fondo); color: var(--texto);
}
.form-rapido input:focus, .form-rapido select:focus { outline: none; border-color: var(--acento); }
.form-rapido button {
  flex: 0 0 auto; font: inherit; font-size: 0.95rem; font-weight: 600;
  padding: 10px 18px; min-height: 42px; border: none; border-radius: var(--radio-s);
  background: var(--acento); color: var(--sobre-acento); cursor: pointer;
}
.form-rapido button:hover { filter: brightness(1.06); }
@media (max-width: 560px) {
  .form-rapido { flex-direction: column; }
  .form-rapido input, .form-rapido select, .form-rapido button { width: 100%; }
}

/* --- Los consejos de la pantalla de anuncios ---
   Se leen UNA vez, antes de gastar el primer colon. Por eso van en texto
   corrido y no en tarjetas: no son cosas que se toquen, son cosas que se leen. */
.consejos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.consejos li { padding-left: 18px; position: relative; line-height: 1.55; }
.consejos li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--acento);
}
.d-bloque { display: block; }


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


/* ---- Propio del Panel de Monitoreo ---------------------------------------- */
/* Una tabla dentro de una columna no debe ensanchar la página en el celular:
   la columna cede (min-width: 0) y la tabla se desplaza dentro de .tabla-scroll. */
.dos-columnas > *, .grid-clientes > * { min-width: 0; }
.grid-clientes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.tarjeta-cliente.mal { box-shadow: var(--sombra), inset 4px 0 0 var(--neg); }
.tarjeta-cliente h2 a { color: inherit; text-decoration: none; }
.tarjeta-cliente h2 a:hover { color: var(--acento); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.chip.mal { background: color-mix(in srgb, var(--neg) 15%, transparent); color: var(--neg); }
.chip.atencion { background: color-mix(in srgb, #d9a441 22%, transparent); color: #6b4a10; }
:root[data-theme="dark"] .chip.atencion, :root[data-theme="dark"] .chip.media { color: #e8c170; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip.atencion, :root:not([data-theme="light"]) .chip.media { color: #e8c170; } }
.enlaces-cliente { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.85rem; margin: 8px 0 0; flex-basis: 100%; }
.centro-cifras.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .centro-cifras.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.controles { display: flex; flex-direction: column; gap: 14px; }
.controles form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 0; }
.controles label { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; color: var(--texto-suave); flex: 1 1 180px; }
.controles input { padding: 7px 9px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 0.9rem; width: 100%; }
.controles input.corto { max-width: 90px; }
.controles input:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.controles .mini.ancho { flex-basis: 100%; }
.controles .boton { white-space: nowrap; }
.lista-atencion { list-style: none; margin: 0; padding: 0; }
.lista-atencion li { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--borde); }
.lista-atencion li:first-child { border-top: none; }
.acciones-linea { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.acciones-linea form { display: inline; margin: 0; }
.btn-mini { font: inherit; font-size: 0.78rem; font-weight: 500; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto); cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.3; }
.btn-mini:hover { border-color: var(--acento); color: var(--acento); }
.btn-mini.primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.btn-mini.primario:hover { color: var(--sobre-acento); filter: brightness(1.08); }
.respuesta { display: flex; gap: 6px; margin-top: 6px; }
.respuesta input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 0.88rem; }
.respuesta input:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.bitacora { list-style: none; margin: 12px 0 0; padding: 0; }
.bitacora li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--borde); font-size: 0.9rem; }
.bitacora li:first-child { border-top: none; }
.bitacora li.accion .texto::before { content: "⚙ "; color: var(--acento); }
.bitacora li.alerta .texto::before { content: "● "; color: var(--neg); font-size: 0.7em; vertical-align: 2px; }
.cambia-estado { margin: 0; }
.centro-cifras dd { font-size: 1.12rem; }


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