/* Portal sobre el Design System de Pyenzo — Leonardo Rojas, 2026-10-04.
   El aspecto y los comportamientos vienen de pyenzo-ds.css (generado desde el DS del sitio con `npm run ds:export`):
   botones .btn-*, campos .field-input, pastillas .chip-action, pestañas .list-tab, opciones .menu-option, vidrio .glass,
   cambio de tema .theme-toggle. Este archivo solo hace dos cosas, SIN colores, sombras ni fuentes escritos a mano:
     1 · los nombres de color propios del portal (los usan styles.css, metas.css y el chat) apuntan a los tokens del DS;
     2 · acomoda las piezas que solo existen en el portal, siempre con var(--…) del DS.
   Para cambiar un color, una fuente o un comportamiento: se cambia en el DS del sitio y se vuelve a exportar. */

/* ── 1 · nombres del portal → tokens del DS (claro y oscuro los resuelve el DS) ── */
:root {
  --lienzo: hsl(var(--background));
  --superficie: hsl(var(--card));
  --tinta: hsl(var(--foreground));
  --bruma: hsl(var(--muted-foreground));
  --borde: hsl(var(--glass-border));
  --marca: hsl(var(--primary));
  --profundo: hsl(var(--foreground));
  --marca-suave: hsl(var(--option-highlight));
  --marca-fantasma: hsl(var(--muted-foreground) / 0.5);
  --enzo: hsl(var(--coral));
  --enzo-suave: hsl(var(--option-highlight));
  --sube: hsl(var(--success));
  --baja: hsl(var(--danger));
  --logro: hsl(var(--success));
  --falta: hsl(var(--danger));
  --logro-suave: hsl(var(--success) / 0.12);
  --barra: hsl(var(--primary) / 0.18);
  --barra-real: hsl(var(--primary) / 0.6);
  --vidrio: hsl(var(--glass));
  --vidrio-borde: hsl(var(--glass-border));
  --btn-ink: hsl(var(--primary-foreground));
  --sombra: var(--shadow-glass);
  --glow: var(--shadow-glow);
  /* nombres que styles.css y empezar.css usaban con un color de respaldo escrito a mano: ahora salen del DS */
  --borde-fuerte: hsl(var(--input));
  --alerta: hsl(var(--danger));
  --ok: hsl(var(--success-ink));
  --ok-suave: hsl(var(--success) / 0.12);
}
body { font-family: var(--font-body); }
/* styles.css tenía su propia .btn-ghost (borde y relleno, también al pasar el cursor): ahora solo aplica a lo que no es .btn del DS */
.btn.btn-ghost.btn-size-icon { padding: 0; min-height: 0; }
/* Las reglas propias con `border: 0` (tabbar, enviar, botones de metas) le quitaban el estilo de borde a los componentes del DS */
.btn, .list-tab, .chip-action, .field-input { border-style: solid; }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 0; }

/* Logo oficial del DS (pyenzo-logo.svg, copiado por ds:export) con el color del logo del sitio:
   pizarra en claro y blanco en oscuro (= --foreground), nunca azul claro */
.wordmark, .login-logo {
  background: hsl(var(--foreground));
  -webkit-mask: url(pyenzo-logo.svg) center / contain no-repeat; mask: url(pyenzo-logo.svg) center / contain no-repeat;
}
/* Fondo como el del sitio: blanco hueso (dark teal en oscuro) con la textura .grain del DS en el <body> */
.login, .skeleton { background: transparent; }

/* Movimiento del sitio: cada pantalla y cada mensaje entran con fade-in-up (keyframes del DS) */
.tab-panel:not([hidden]), .login-card, .msg { animation: fade-in-up 0.6s ease-out both; }
@media (prefers-reduced-motion: reduce) { .tab-panel:not([hidden]), .login-card, .msg { animation: none; } }

/* ── Entrada ── */
.login { background: hsl(var(--background)); }
/* Tarjeta = .glass del DS (en el markup); aquí solo forma y sombra */
.login-card {
  border-radius: 1rem;
  box-shadow: var(--shadow-glass);
  color: hsl(var(--foreground));
}
.login-logo { display: block; margin: 0 auto; width: 160px; height: 64px; }
.login-title { margin: 24px 0 0; font-size: 32px; color: hsl(var(--foreground)); }
.login-lede { margin: 10px 0 30px; font-size: 17px; color: hsl(var(--muted-foreground)); }
.login-btn { width: 100%; }
.login-status, .login-legal { color: hsl(var(--muted-foreground)); }
.login-legal { font-size: 12px; }
.login-legal a { color: hsl(var(--primary)); }

/* ── Barra superior: vidrio del DS (.glass); flotante en escritorio como el encabezado del sitio ── */
.topbar { border-width: 0 0 1px; }
@media (max-width: 899px) {
  /* sin backdrop-filter: crearía un bloque contenedor y la tabbar fija subiría bajo el encabezado */
  .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: hsl(var(--background)); }
}
@media (min-width: 900px) {
  .topbar { margin: 12px 16px 0; top: 12px; border-width: 1px; border-radius: 1rem; box-shadow: var(--shadow-glass); }
}
.wordmark.small { width: 150px; height: 60px; }
.user-chip {
  font-family: var(--font-mono); color: hsl(var(--foreground));
  background: hsl(var(--glass)); border: 1px solid hsl(var(--glass-border));
}

/* Pestañas = menú del sitio (.nav-link del DS): crecen al pasar como el logo; la activa se queda grande con un punto coral debajo.
   Sin fondos ni coral (los de styles.css se neutralizan). Escritorio: solo palabras, centradas como en el sitio.
   Móvil: barra inferior con ícono y palabra. */
.tabbar-btn, .tabbar-btn.active, .tabbar-btn:hover { color: hsl(var(--foreground)); background: transparent; border: 0; box-shadow: none; }
@media (min-width: 900px) {
  .tabbar-btn { padding: 8px 16px; min-height: 40px; }
  .tabbar-btn .tab-ico { display: none; }
}
@media (min-width: 1100px) {
  .tabbar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
@media (max-width: 899px) {
  .tabbar { background: hsl(var(--glass)); border-top: 1px solid hsl(var(--glass-border)); }
  .tabbar-btn { padding: 6px 0 8px; text-align: center; font-size: 12.5px; }
}

/* Selector de sede (.btn-outline) y su menú (.menu-option) */
.picker-btn { justify-content: flex-start; }
.picker-caret { color: hsl(var(--coral)); }
.picker-menu { background: hsl(var(--card)); border: 1px solid hsl(var(--glass-border)); border-radius: 1rem; box-shadow: var(--shadow-glass); }
.picker-item.active { background: hsl(var(--option-highlight)); color: hsl(var(--foreground)); }

/* ── Enzo ── */
.chat-head { border-bottom-color: hsl(var(--glass-border)); }
.msg-entendido, .sk-note, .enzo-sello { font-family: var(--font-mono); }
.chat-sub { margin: 0 0 4px; }
.chat-title, .m-enc h1 { margin: 0; line-height: 1.1; }
.enzo-sello { color: hsl(var(--eyebrow)); text-transform: uppercase; letter-spacing: 0.18em; }
/* Avatar: Enzo en trazos (enzo.svg, asset del DS) sobre coral; la «e» queda para lectores de pantalla */
.enzo-avatar { background: hsl(var(--coral)); box-shadow: var(--shadow-glow); font-size: 0; }
.enzo-avatar::before {
  content: ""; width: 28px; height: 34px; background: hsl(var(--coral-foreground));
  -webkit-mask: url(enzo.svg) center / contain no-repeat; mask: url(enzo.svg) center / contain no-repeat;
}
.msg.enzo { background: hsl(var(--card)); border-color: hsl(var(--glass-border)); box-shadow: var(--shadow-glass); color: hsl(var(--foreground)); }
.msg.user { background: var(--gradient-brand); color: hsl(var(--primary-foreground)); }
.msg.user a { color: hsl(var(--primary-foreground)); }
.typing i { background: hsl(var(--coral)); }
.chat-inputrow { background: linear-gradient(to top, hsl(var(--background)) 70%, hsl(var(--background) / 0)); }
.chat-inputrow textarea { border-radius: 1.5rem; }
/* El campo del chat y el de metas usan .field-input; sus reglas de foco anteriores se igualan al indicador del DS */
.chat-inputrow textarea:focus, input.m-meta:focus, .msg-acciones.comentando input:focus {
  border-color: hsl(var(--ring)); box-shadow: 0 0 0 1px hsl(var(--ring));
}
.send-btn { border-radius: 9999px; }
.send-btn:disabled { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); box-shadow: none; }
.ideas-btn svg { color: hsl(var(--coral)); }
.ideas-btn[aria-expanded="true"] { background: hsl(var(--option-highlight)); border-color: hsl(var(--coral)); color: hsl(var(--foreground)); }
.msg-acciones .btn { min-height: 36px; height: auto; padding: 6px 12px; }

/* Panel de ideas: vidrio del DS; títulos de grupo con el eyebrow del sitio */
.enzo-ayuda { background: hsl(var(--glass)); border-color: hsl(var(--glass-border)); border-radius: 1rem; }
.ayuda-titulo { font-family: var(--font-heading); color: hsl(var(--foreground)); }
.ayuda-grupo h3 { font-family: var(--font-mono); color: hsl(var(--eyebrow)); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; }
.ayuda-tip, .demo-banner { background: hsl(var(--accent) / 0.1); border: 1px solid hsl(var(--accent) / 0.4); color: hsl(var(--foreground)); border-radius: 0.75rem; }
.ayuda-caso { border-color: hsl(var(--glass-border)); border-radius: 0.75rem; }
.ayuda-cerrar { font-size: 16px; }

/* ── Tablero, estados y metas ── */
.sk-bar, .sk-card, .state-card { background: hsl(var(--card)); border-color: hsl(var(--glass-border)); box-shadow: var(--shadow-glass); border-radius: 1rem; }
.state-card h2, .m-estado h2 { font-family: var(--font-heading); }
.metas .num, .m-cifra .v, .m-proy, input.m-meta, .m-anual input { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.msg-grafica text { font-family: var(--font-body); }
.m-anio { background: hsl(var(--glass)); border-color: hsl(var(--glass-border)); }
.m-anio button { width: 32px; height: 32px; }
.m-guardar { background: hsl(var(--glass)); border-top-color: hsl(var(--glass-border)); }
.m-btn { border-radius: 9999px; }
.m-anual { border-color: hsl(var(--glass-border)); background: hsl(var(--glass)); }
.m-anual input.field-input { border: 0; background: transparent; box-shadow: none; padding: 4px 0; }

/* Enlaces con forma de botón (Quiero Pyenzo…, Contar mi caso): styles.css pinta todo <a> con --marca y les quitaba el
   texto del botón; aquí recuperan el color de su variante del DS, como en el sitio */
a.btn { text-decoration: none; }
a.btn-cta, a.btn-cta:visited, a.btn-cta:hover { color: hsl(var(--primary-foreground)); }
a.btn-outline, a.btn-outline:visited, a.btn-outline:hover { color: hsl(var(--foreground)); }
.demo-banner .demo-banner-cta { width: auto; }

/* ── Ciudad de /demo: el dropdown con buscador del sitio (SearchableSelect) ──
   Disparador = .field-input (borde 3:1, foco coral); lista = superficie popover del DS; opción activa = .menu-option (tinte coral);
   check = coral. Solo var(--…) del DS. */
.combo { position: relative; }
.combo-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; color: hsl(var(--foreground)); cursor: pointer; }   /* el resto lo pone .field-input */
.combo-btn:focus-visible { outline: none; }
.combo-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-txt.vacio { color: hsl(var(--muted-foreground)); }
.combo-chev { flex: none; opacity: 0.5; }
.combo-pop { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); overflow: hidden; background-color: hsl(var(--popover)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--glass-border)); border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-glass); }
.combo-pop[hidden] { display: none; }
.f .combo-buscar { width: 100%; border: 0; border-bottom: 1px solid hsl(var(--glass-border)); border-radius: 0; background: transparent; padding: 12px 14px; font: inherit; font-size: 14px; color: hsl(var(--foreground)); outline: none; }
.f .combo-buscar:focus { outline: none; border-color: hsl(var(--ring)); }
.combo-buscar::placeholder { color: hsl(var(--muted-foreground)); }
.combo-lista { list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; }
.combo-op { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: calc(var(--radius) - 6px); font-size: 14px; cursor: pointer; }
.combo-op .option-check { flex: none; color: hsl(var(--coral)); opacity: 0; }
.combo-op[aria-selected="true"] .option-check { opacity: 1; }
.combo-vacio { padding: 14px; text-align: center; font-size: 14px; color: hsl(var(--muted-foreground)); }

/* ── /demo: asterisco de obligatorio y toggle «Ya hablamos y tengo mi código» ──
   Asterisco = coral del DS (--accent), como FieldError/FormField del sitio. Toggle: encendido = azul de marca (--primary), apagado = --input,
   perilla = --background; foco = anillo coral (--ring, el de todo el DS). Con el toggle encendido se ocultan los datos (.solo-datos) y queda código + correo. */
.req { color: hsl(var(--accent)); font-weight: 700; }
.obligatorio { margin: 0 0 12px; }
.tengo-codigo { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 18px; padding: 14px 16px; background-color: var(--superficie); border: 1px solid hsl(var(--glass-border)); border-radius: calc(var(--radius) - 2px); transition: border-color 0.2s ease, background-color 0.2s ease; }
.con-codigo .tengo-codigo { border-color: hsl(var(--primary)); background-color: hsl(var(--primary) / 0.08); }
.tengo-codigo-txt { display: flex; flex-direction: column; gap: 2px; }
.tengo-codigo-tit { font-size: 15px; font-weight: 600; color: hsl(var(--foreground)); }
.sw { flex: none; position: relative; width: 44px; height: 24px; padding: 0; border: 2px solid hsl(var(--input)); border-radius: 999px; background-color: hsl(var(--muted)); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.sw[aria-checked="true"] { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.sw:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.sw-thumb { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background-color: hsl(var(--input)); color: hsl(var(--primary)); transform: translateX(0); transition: transform 0.2s ease, background-color 0.2s ease; }
.sw[aria-checked="true"] .sw-thumb { background-color: hsl(var(--background)); box-shadow: 0 1px 3px hsl(var(--foreground) / 0.3); transform: translateX(20px); }
.sw-check { opacity: 0; transition: opacity 0.2s ease; }
.sw[aria-checked="true"] .sw-check { opacity: 1; }
.solo-datos[hidden], .tengo-codigo[hidden], #fCodigo[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .sw, .sw-thumb, .sw-check, .tengo-codigo { transition: none; } }

/* ── /demo: el formulario con el mismo lenguaje que los formularios del sitio (FormField, Input, Checkbox, ConsentFields, FieldError) ──
   Etiqueta = text-xs semibold mayúsculas con tracking; ayuda = text-xs muted; campo = .field-input h-10; logo = h-11 del encabezado;
   casilla = Checkbox del sitio (borde input, marcada = primary); consentimientos = ConsentFields (text-xs muted, sin filetes). */
.alta .f > label { font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--foreground)); }
.alta .f { gap: 0.375rem; }
.alta .f .hint, .alta .hint { font-size: 0.75rem; line-height: 1.25; color: hsl(var(--muted-foreground) / 0.8); }
.alta .f .hint.mal { display: flex; align-items: center; gap: 0.25rem; color: hsl(var(--destructive)); font-weight: 500; }
.alta .f .hint.bien { color: hsl(var(--success-ink)); font-weight: 500; }
.f .field-input { height: 2.5rem; font-family: inherit; color: hsl(var(--foreground)); }
.alta-top .wordmark { width: 99px; height: 44px; }
.alta-top .theme-toggle { margin-left: auto; margin-right: 6px; }

#consWeb, #consOps { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }
.check { gap: 0.625rem; padding: 0; border-top: 0; font-size: 0.75rem; line-height: 1.625; color: hsl(var(--muted-foreground)); cursor: pointer; }
.check a { color: inherit; text-decoration: underline; transition: color 0.2s ease; }
.check a:hover { color: hsl(var(--foreground)); }
.check input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 1rem; height: 1rem; margin-top: 0.125rem; border: 1px solid hsl(var(--input)); border-radius: 0.125rem; background-color: hsl(var(--background) / 0.9); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.check input[type="checkbox"]:hover { border-color: hsl(var(--foreground) / 0.60); }
.check input[type="checkbox"]:checked { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.check input[type="checkbox"]:checked::before { content: ""; position: absolute; inset: 0; background-color: hsl(var(--primary-foreground)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 100% no-repeat; }
.check input[type="checkbox"]:focus-visible { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 1px hsl(var(--ring)); }

/* Avisos = <StatusBanner> del sitio; el de error lleva el ícono coral (nunca solo color) */
.status-banner { margin-top: 1rem; }
.status-banner[hidden] { display: none; }
.status-banner.surface-danger::before { content: ""; flex: none; width: 1rem; height: 1rem; margin-top: 0.125rem; background-color: hsl(var(--danger)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; }