/* Panel de la Academia — azul Azure sobre papel frío; en oscuro, el marino de
   Certia y de la web de la academia con el cian de acento. Es la misma paleta
   que ya usan Certia y la web Azure Cloud Academy (#0078d4, #05070f, #00bcf2),
   para que las tres cosas se reconozcan como del mismo negocio.
   Space Grotesk en títulos y cifras, Inter en el cuerpo: las dos que usa la web
   de la academia. Estética: "panel tranquilo" de la familia de los paneles de
   Roger (casi monocromo, un solo acento). */
:root {
  --fondo: #f3f6fa;
  --superficie: #ffffff;
  --superficie-2: #e8eef6;
  --texto: #0b1424;
  --texto-suave: #4f5f76;
  --borde: #d5dfeb;
  --acento: #0067b8;
  --acento-suave: #e2effb;
  --sobre-acento: #ffffff;
  --pos: #137a4b;
  --neg: #b4332f;
  --aviso: #8a5a00;
  --sombra: 0 1px 2px rgba(5, 7, 15, 0.05), 0 4px 14px rgba(5, 7, 15, 0.07);
  --f-cuerpo: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-titulo: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-cifra: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #05070f;
    --superficie: #0c1322;
    --superficie-2: #121c30;
    --texto: #e8eef8;
    --texto-suave: #98a8c0;
    --borde: #1f2c44;
    --acento: #00bcf2;
    --acento-suave: #0a2a3d;
    --sobre-acento: #05070f;
    --pos: #3fcf8e;
    --neg: #f08a84;
    --aviso: #f2b84b;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  --fondo: #05070f;
  --superficie: #0c1322;
  --superficie-2: #121c30;
  --texto: #e8eef8;
  --texto-suave: #98a8c0;
  --borde: #1f2c44;
  --acento: #00bcf2;
  --acento-suave: #0a2a3d;
  --sobre-acento: #05070f;
  --pos: #3fcf8e;
  --neg: #f08a84;
  --aviso: #f2b84b;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.4);
}
/* >>> BASE COMÚN ==============================================================
   Esta parte es IDÉNTICA en los tres paneles (Finanzas, Vida, Entrenador).
   Regla: se cambia en uno y se copia tal cual a los otros dos, de marcador a
   marcador. Lo propio de cada panel va fuera de estos marcadores.
   Espera que el panel defina arriba, en :root y en sus bloques oscuros:
     --fondo --superficie --superficie-2 --texto --texto-suave --borde
     --acento --acento-suave --sobre-acento --pos --neg --sombra
     --f-cuerpo --f-titulo --f-cifra
   ============================================================================ */
:root {
  --radio-s: 8px; --radio-m: 10px; --radio-l: 14px;
  --esp-1: 6px; --esp-2: 10px; --esp-3: 16px; --esp-4: 24px;
  --z-fab: 40; --z-fondo: 45; --z-menu: 50;
  --dur: 0.14s;
  accent-color: var(--acento);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--f-cuerpo); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--acento); }
h1, h2, h3 { font-family: var(--f-titulo); text-wrap: balance; }
h1 { font-size: 1.6rem; margin: 4px 0; font-weight: 700; }
/* Texto solo para lectores de pantalla (etiquetas que no hace falta ver). */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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