/* estilos.css — el sistema de diseño de la app: los TOKENS (colores, letra, espacios, radios, sombras) y los componentes
   de todas las pantallas. Tipo Apple y con la marca de Orangutan (Leo, 2-nov-2026: «un super diseño tipo apple, nuestro
   branding, moderno, tech, hermoso»): la letra del sistema, superficies limpias, separadores de un pixel, sombras suaves y
   difusas, y el coral solo donde importa. Todas las pantallas lo cargan primero; después, /api/marca.css pone el color de
   la marca (lo genera el servidor, con el contraste revisado) y el panel pone encima /panel/panel.css y /panel/diseno.css.

   Reglas de la casa (romperlas es un defecto):
   · Ningún color, tamaño ni espacio suelto: todo sale de un token de :root.
   · La CSP es style-src 'self': nada de style="…" ni elemento.style. Lo que cambia, cambia con clases.
   · Letras del sistema (San Francisco en Apple, Segoe en Windows, Roboto en Android): nada se carga de fuera.
   · Celular primero: todo se diseña a 360 px y crece. Nada se sale de lado.
   · Sin cara de IA: nada de degradados de colores, emojis como íconos ni tarjetas todas iguales.
   · El contraste se MIDE (./kit.cmd pantallas y herramientas/medir_diseno.mjs): cada tono de letra de aquí dice contra
     qué fondo pasa. */

/* ─── 1. Los tokens ──────────────────────────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;     /* los controles del navegador (fechas, listas, barras) también cambian de modo */

  /* La marca (la reemplaza /api/marca.css con el color que escoja el dueño, ya con el contraste revisado PARA LETRA). */
  --acento: #2f5d50;            /* rellena: botón principal. Blanco encima: 7.2 a 1 */
  --acento-hondo: #264c41;      /* al pasar encima o tocar */
  --acento-tinta: #2f5d50;      /* texto de color sobre el fondo */
  --acento-tinte: #eaefed;      /* fondo de lo elegido */
  --acento-anillo: rgba(47, 93, 80, 0.35);
  --sobre-acento: #ffffff;

  /* El coral de Orangutan tal cual (config/app.js → marca.color) y su coral oscuro (--coral-d del manual de marca). Son
     para lo que NO es letra: el botón redondo de agregar, el anillo del foco, lo escogido, la vista activa. La letra de
     color usa las variantes de /api/marca.css, que sí pasan 4.5 a 1. El «+» blanco va sobre el oscuro: 3.6 a 1. */
  --coral: #ff6b3d;
  --coral-fuerte: #e8551f;
  --coral-anillo: rgba(255, 107, 61, 0.55);
  --coral-suave: rgba(255, 107, 61, 0.12);

  /* Neutros tipo Apple (la letra de cada uno, medida contra el fondo que se dice) */
  --tinta: #1d1d1f;             /* texto: 16.8 a 1 sobre --papel */
  --tinta-2: #424245;           /* secundario: 10 a 1 */
  --tenue: #636366;             /* lo de menos peso: 5.3 sobre --relleno, 5.2 sobre el tinte de la marca, 5.5 sobre --fondo */
  --fondo: #f5f5f7;             /* el fondo de la página: el gris de Apple */
  --papel: #ffffff;             /* tarjetas, ventanas y campos */
  --relleno: #f0f0f2;           /* botón gris, filas alternas */
  --linea: #e5e5ea;             /* separadores de un pixel */
  --linea-fuerte: #d2d2d7;      /* el borde de los campos */
  --velo: rgba(0, 0, 0, 0.32);  /* detrás de una ventana */
  --fondo-qr: #ffffff;          /* un QR se lee sobre blanco, también en modo oscuro */

  /* Estados: tinta sobre su tinte (4.5 a 1 o más) */
  --verde: #1d6b3a;   --verde-tinte: #e5f2e9;
  --rojo: #ad2a22;    --rojo-tinte: #fbeae8;
  --ambar: #8a5200;   --ambar-tinte: #fbf0dc;
  --azul: #1f5b9e;    --azul-tinte: #e7eff9;

  /* La letra: San Francisco en la Mac y el iPhone (Text para leer, Display en lo grande: el sistema escoge solo). */
  --letra: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --letra-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --t-chica: 0.875rem;          /* 14 px: nada más chico que esto */
  --t-normal: 1.0625rem;        /* 17 px: el cuerpo, como en iOS */
  --t-media: 1.25rem;
  --t-grande: 1.75rem;          /* 28 px */
  --t-enorme: 2.125rem;         /* 34 px: el «Large Title» de iOS */
  --interlinea: 1.47;
  --apretado: -0.022em;         /* lo grande, con poco espacio entre letras */

  /* Espacios (de 4 en 4) y formas */
  --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem;
  --radio: 10px;
  --radio-grande: 14px;
  --radio-caja: 20px;           /* la tarjeta de entrar */
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.05);
  --sombra-alta: 0 2px 6px rgba(0, 0, 0, 0.04), 0 18px 48px rgba(0, 0, 0, 0.1);
  --sombra-flotante: 0 10px 30px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
  --curva: cubic-bezier(0.32, 0.72, 0, 1);   /* la de las hojas de iOS */
  --rapido: 0.16s;
  --medio: 0.24s;
  --alto-control: 3rem;         /* 48 px: se toca con el dedo */
  --ancho-lectura: 40rem;
  --ancho-panel: 64rem;
  --menu-ancho: 15rem;
  /* La flechita de las listas (select): el gris de --tenue, dibujado aquí para que cambie con el modo oscuro. */
  --flechita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9.5l5 5 5-5'/%3E%3C/svg%3E");
}

/* El oscuro de la Mac: grafito, nunca negro puro. Las superficies con letra coral encima no pasan de #2a2a2c: ahí la letra
   coral del modo oscuro que da /api/marca.css (#ca7d65 para el coral de Orangutan) se lee a 4.5 a 1 o más. */
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #f5f5f7; --tinta-2: #d1d1d6; --tenue: #a1a1a6;
    --fondo: #1c1c1e; --papel: #262628; --relleno: #333336; --linea: #38383a; --linea-fuerte: #4a4a4e;
    --velo: rgba(0, 0, 0, 0.5);
    --coral-anillo: rgba(255, 138, 102, 0.62);
    --coral-suave: rgba(255, 107, 61, 0.18);
    --verde: #7fd29b; --verde-tinte: #183424; --rojo: #f19a91; --rojo-tinte: #3a1d1a;
    --ambar: #e9b766; --ambar-tinte: #352a14; --azul: #9cc3f2; --azul-tinte: #182a40;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.25);
    --sombra-alta: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 48px rgba(0, 0, 0, 0.45);
    --sombra-flotante: 0 10px 30px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
    --flechita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9.5l5 5 5-5'/%3E%3C/svg%3E");
  }
}

/* ─── 2. La base ─────────────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }                 /* hidden SIEMPRE esconde (D36) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--letra); font-size: var(--t-normal);
  line-height: var(--interlinea); overflow-x: clip; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--e3); letter-spacing: -0.012em; }
h1 { font-size: var(--t-grande); font-weight: 700; letter-spacing: var(--apretado); }
h2 { font-size: var(--t-media); font-weight: 650; }
h3 { font-size: var(--t-normal); font-weight: 650; }
p { margin: 0 0 var(--e3); }
a { color: var(--acento-tinta); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
img, svg { max-width: 100%; }
/* El enfoque del teclado: un anillo coral suave, siempre visible (con el ratón no sale: :focus-visible). */
:focus-visible { outline: 3px solid var(--coral-anillo); outline-offset: 2px; }
a:focus-visible { border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { transition: none !important; animation: none !important; }
}
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: var(--e3); top: var(--e3); background: var(--papel); padding: var(--e2) var(--e3); z-index: 10; border-radius: var(--radio); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tenue { color: var(--tenue); }
.chico { font-size: var(--t-chica); }
.mono { font-family: var(--letra-mono); letter-spacing: 0.02em; }

/* ─── 3. Botones y campos ────────────────────────────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: var(--alto-control);
  padding: 0 var(--e5); border: 1px solid transparent; border-radius: var(--radio-grande); font: inherit; font-weight: 600;
  letter-spacing: -0.01em; cursor: pointer; text-decoration: none;
  transition: background-color var(--rapido), border-color var(--rapido), transform var(--rapido) var(--curva);
}
.boton:active:not(:disabled) { transform: scale(0.98); }
.boton-primario { background: var(--acento); color: var(--sobre-acento); }
.boton-primario:hover { background: var(--acento-hondo); }
.boton-secundario { background: var(--relleno); color: var(--tinta); border-color: var(--linea); }
.boton-secundario:hover { background: var(--linea); }
.boton-peligro { background: var(--papel); color: var(--rojo); border-color: var(--rojo); }
.boton-texto { background: none; border: none; color: var(--acento-tinta); padding: 0 var(--e2); min-height: 2.5rem; }
.boton-texto:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.boton-ancho { width: 100%; }
.boton:disabled { opacity: 0.55; cursor: progress; }
.botones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e4); }

.campo { display: flex; flex-direction: column; gap: var(--e1); margin-bottom: var(--e4); }
.campo-etiqueta { font-weight: 600; font-size: var(--t-chica); color: var(--tinta-2); }
.campo-ayuda { font-size: var(--t-chica); color: var(--tenue); margin: 0; }
.control {
  width: 100%; min-height: var(--alto-control); padding: var(--e2) var(--e3); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio); background: var(--papel); color: var(--tinta); font: inherit;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
/* El foco de un campo: borde coral y su halo (con contorno transparente para el modo de alto contraste de Windows). */
.control:focus { border-color: var(--coral); outline: 2px solid transparent; outline-offset: 0; box-shadow: 0 0 0 3px var(--coral-anillo); }
.control::placeholder { color: var(--tenue); }
select.control {
  -webkit-appearance: none; appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: var(--flechita); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem;
}
textarea.control { min-height: 7rem; resize: vertical; }
.control-color { width: 4rem; padding: var(--e1); }
.campo-con-boton { display: flex; gap: var(--e2); }
.campo-con-boton .control { flex: 1; min-width: 0; }

/* ─── 4. Mensajes ────────────────────────────────────────────────────────────────────────────────────────────── */
.mensaje { padding: var(--e3) var(--e4); border-radius: var(--radio-grande); border: 1px solid transparent; margin: 0 0 var(--e4); }
.mensaje-error { background: var(--rojo-tinte); color: var(--rojo); }
.mensaje-bien { background: var(--verde-tinte); color: var(--verde); }
.mensaje-aviso { background: var(--ambar-tinte); color: var(--ambar); }
.mensaje-info { background: var(--azul-tinte); color: var(--azul); }
.mensaje strong { display: block; }
/* El aviso que se va solo: la cápsula oscura de iOS (en modo oscuro, al revés). */
.flotante {
  position: fixed; left: 50%; bottom: max(var(--e5), env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100% - 2rem);
  background: var(--tinta); color: var(--fondo); padding: var(--e3) var(--e5); border-radius: var(--radio-grande); z-index: 50;
  box-shadow: var(--sombra-flotante); font-size: var(--t-chica); font-weight: 500; animation: flotante-entra var(--medio) var(--curva);
}
@keyframes flotante-entra { from { opacity: 0; translate: 0 0.75rem; } }

/* ─── 5. Las pantallas sin sesión (entrar, restablecer, primer acceso) ───────────────────────────────────────── */
/* Como los de Apple: el logo centrado arriba, el nombre en gris y una tarjeta limpia sobre el gris de la página. */
.publica {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  padding: max(var(--e5), env(safe-area-inset-top)) max(var(--e4), env(safe-area-inset-right)) max(var(--e5), env(safe-area-inset-bottom)) max(var(--e4), env(safe-area-inset-left));
}
.publica-cabeza { display: flex; flex-direction: column; align-items: center; gap: var(--e2); margin: var(--e6) 0 var(--e5); text-align: center; }
.publica-logo { display: block; }
.publica-logo img { display: block; height: 2.25rem; width: auto; }
.publica-marca { display: flex; align-items: center; gap: var(--e3); font-weight: 500; font-size: var(--t-normal); color: var(--tenue); text-decoration: none; }
.publica-marca img { height: 2.5rem; width: auto; }
.caja {
  width: 100%; max-width: 25rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-caja);
  padding: var(--e6) var(--e5) var(--e5); box-shadow: var(--sombra-alta);
}
.caja h1 { text-align: center; margin-bottom: var(--e5); }
.caja + .caja { margin-top: var(--e4); }
.caja-pie { margin-top: var(--e4); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); }
.publica-pie { margin-top: auto; padding-top: var(--e6); font-size: var(--t-chica); color: var(--tenue); text-align: center; }
.publica-pie a { color: var(--tenue); }
.secreto {
  display: block; font-family: var(--letra-mono); font-size: var(--t-media); background: var(--relleno); border-radius: var(--radio);
  padding: var(--e3) var(--e4); margin: var(--e2) 0 var(--e3); user-select: all; overflow-wrap: anywhere;
}
.qr-imagen { display: block; width: 13.75rem; height: 13.75rem; max-width: 100%; margin: var(--e2) 0 var(--e3); border-radius: var(--radio); background: var(--fondo-qr); }
.mensaje-listo { white-space: pre-wrap; background: var(--relleno); border-radius: var(--radio); padding: var(--e4); font-size: var(--t-chica); margin: 0 0 var(--e3); }
.lectura { max-width: var(--ancho-lectura); }
.caja.lectura h1 { text-align: left; }
.logo-vista { display: block; max-height: 4rem; width: auto; margin-bottom: var(--e3); }

/* ─── 6. El panel ────────────────────────────────────────────────────────────────────────────────────────────── */
.panel { min-height: 100vh; min-height: 100dvh; }
.barra {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e4);
  background: var(--papel); border-bottom: 1px solid var(--linea);
}
.barra-marca { display: flex; align-items: center; gap: var(--e2); font-weight: 700; color: var(--tinta); text-decoration: none; margin-right: auto; min-width: 0; }
.barra-marca img { height: 2rem; width: auto; }
.barra-marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boton-menu { min-height: 2.75rem; padding: 0 var(--e3); }
.menu { background: var(--papel); border-bottom: 1px solid var(--linea); padding: var(--e2); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a {
  display: flex; align-items: center; gap: var(--e3); min-height: var(--alto-control); padding: 0 var(--e3); border-radius: var(--radio);
  color: var(--tinta); text-decoration: none; font-weight: 500;
}
.menu a:hover { background: var(--relleno); }
.menu a[aria-current='page'] { background: var(--acento-tinte); color: var(--acento-tinta); font-weight: 650; }
.menu-cifra { margin-left: auto; min-width: 1.5rem; padding: 0 var(--e2); border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font-size: var(--t-chica); text-align: center; }
.icono { width: 1.375rem; height: 1.375rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contenido { padding: var(--e5) var(--e4) var(--e7); max-width: var(--ancho-panel); }
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e5); }
.encabezado h1 { margin: 0; font-size: var(--t-enorme); }
.aviso-version { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); background: var(--azul-tinte); color: var(--azul); padding: var(--e2) var(--e4); }

@media (min-width: 56rem) {
  .panel { display: grid; grid-template-columns: var(--menu-ancho) 1fr; grid-template-rows: auto 1fr; }
  .barra, .aviso-version { grid-column: 1 / -1; }
  .boton-menu { display: none; }
  .menu, .menu[hidden] { display: block !important; border-bottom: none; border-right: 1px solid var(--linea); padding: var(--e4) var(--e3); }
  .contenido { padding: var(--e6) var(--e6) var(--e7); }
}

/* ─── 7. Tarjetas, listas y tablas ───────────────────────────────────────────────────────────────────────────── */
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: var(--e5); margin-bottom: var(--e4); box-shadow: var(--sombra); }
.tarjeta-destacada { border-color: var(--ambar); background: var(--ambar-tinte); }
.tarjeta h2 { margin-bottom: var(--e2); }
.rejilla { display: grid; gap: var(--e4); }
@media (min-width: 40rem) { .rejilla-2 { grid-template-columns: 1fr 1fr; } }
.pasos { list-style: none; margin: 0; padding: 0; }
.paso { display: flex; gap: var(--e3); padding: var(--e3) 0; border-top: 1px solid var(--linea); }
.paso:first-child { border-top: none; }
.paso-marca { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--linea-fuerte); display: grid; place-items: center; font-size: var(--t-chica); font-weight: 700; }
.paso-listo .paso-marca { background: var(--verde); border-color: var(--verde); color: var(--papel); }
.paso-texto { flex: 1; min-width: 0; }
.paso-texto p { margin: 0; }
/* Las listas, como las de Ajustes del iPhone: una caja blanca y redonda, con separadores que no llegan a la orilla. */
.lista { list-style: none; margin: 0; padding: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-grande); overflow: hidden; box-shadow: var(--sombra); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); padding: var(--e3) var(--e4); border-top: 1px solid var(--linea); }
.fila:first-child { border-top: none; }
.fila-principal { flex: 1 1 14rem; min-width: 0; }
.fila-principal p { margin: 0; }
.fila-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.fila-nueva { background: var(--acento-tinte); }
.insignia { display: inline-block; padding: 0 var(--e2); border-radius: 999px; font-size: var(--t-chica); font-weight: 600; background: var(--relleno); color: var(--tinta-2); }
.insignia-verde { background: var(--verde-tinte); color: var(--verde); }
.insignia-ambar { background: var(--ambar-tinte); color: var(--ambar); }
.insignia-rojo { background: var(--rojo-tinte); color: var(--rojo); }
.tabla-envoltura { overflow-x: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-grande); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-chica); }
.tabla th, .tabla td { text-align: left; padding: var(--e2) var(--e3); border-top: 1px solid var(--linea); vertical-align: top; }
.tabla th { border-top: none; color: var(--tinta-2); font-weight: 600; }
.filtros { display: grid; gap: var(--e3); margin-bottom: var(--e4); }
@media (min-width: 40rem) { .filtros { grid-template-columns: repeat(4, 1fr); align-items: end; } }

/* ─── 8. Estados: cargando, vacío, error y sin señal ─────────────────────────────────────────────────────────── */
.estado { padding: var(--e6) var(--e4); text-align: center; color: var(--tinta-2); }
.estado p { margin: 0 auto var(--e3); max-width: 28rem; }
.cargando::before {
  content: ''; display: block; width: 1.75rem; height: 1.75rem; margin: 0 auto var(--e3); border-radius: 50%;
  border: 3px solid var(--linea); border-top-color: var(--coral); animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }