/* ============================================================
AlphaInsit — capa de marca para el CONVERSOR
Se carga DESPUÉS de css/styles.css. No toca la lógica.
Integración en index.html (), tras el styles.css existente:
El modo oscuro ya funciona con (sin cambios).
============================================================ */
/* ---- Tokens: modo claro ----
Un solo acento funcional en claro = índigo (legible sobre fondo claro).
El cian se reserva a estados de foco. Identidad índigo en logo + cintillo. */
:root,
[data-theme="light"]{
--brand-primary:#1D1E94;
--brand-primary-rgb:29,30,148;
--brand-accent:#1D1E94; /* índigo: acento funcional en claro */
--brand-accent-hover:#16176e;
--brand-secondary:#545454;
--bg-app:#F4F5FA;
--bg-card:#ffffff;
--bg-input:#fbfbfe;
--bg-interactive:#E3E4F4;
--text-primary:#1B1D3A;
--text-secondary:#545454;
--text-muted:#8a8ba0;
--text-light:#ffffff;
--border-color:#e6e7f0;
--border-focus:#0E9BB5;
--success:#2E8B57;
--warning:#E9A13B;
--font-sans:'Inter',system-ui,sans-serif;
--font-mono:'JetBrains Mono',monospace;
}
/* ---- Tokens: modo oscuro "Tinta ink" (estándar aprobado) ----
Un solo acento funcional en oscuro = cian. El índigo se reserva a
la identidad (logo + cintillo). Por eso --brand-primary = cian aquí:
así la unidad, números, toggles y botones quedan coherentes. */
[data-theme="dark"]{
--brand-primary:#25C1DE;
--brand-primary-rgb:37,193,222;
--brand-accent:#25C1DE;
--brand-accent-hover:#4fd0e8;
--brand-secondary:#A9ACCB;
--bg-app:#111325;
--bg-card:#1B1D3A;
--bg-input:#262a4d;
--bg-interactive:#23264f;
--text-primary:#F4F5FA;
--text-secondary:#A9ACCB;
--text-muted:#6E7196;
--text-light:#ffffff;
--border-color:#2E3257;
--border-focus:#25C1DE;
}
/* ---- Titulares en Montserrat ---- */
h1,h2,h3,.app-title{font-family:'Montserrat',sans-serif;}
/* ---- Logo más protagonista (lockup Academy) ---- */
header .logo-svg{height:46px;width:auto;}
/* ---- Cabecera: logo (izq) · cintillo (centro) · acciones (der) ---- */
header{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:16px;
}
header .logo-container{justify-self:start;}
header .header-actions{justify-self:end;}
/* ---- Cintillo con el nombre de la app ---- */
.ai-cintillo{
justify-self:center;
background:#1D1E94; /* índigo de marca fijo, en ambos temas */
color:#fff;
font-family:'Montserrat',sans-serif;
font-weight:600;
font-size:13px;
letter-spacing:1.1px;
text-transform:uppercase;
padding:9px 26px;
border-radius:9px;
position:relative;
white-space:nowrap;
}
.ai-cintillo::before{
content:"";
position:absolute;left:14px;right:14px;bottom:5px;height:2px;
background:#0E9BB5;opacity:.75;border-radius:2px; /* cian fijo, visible en ambos temas */
}
/* Responsive: en móvil el cintillo va a una fila propia (ancho completo, envuelve)
y la cabecera crece en alto para no encimarse sobre el contenido. */
@media (max-width:768px){
header{
grid-template-columns:1fr auto !important;
height:auto !important; min-height:0 !important;
align-items:center; row-gap:6px; overflow:visible;
}
header .logo-svg{height:38px;}
.ai-cintillo{
grid-column:1 / -1; order:3; justify-self:stretch;
text-align:center; white-space:normal; line-height:1.25;
font-size:12px; letter-spacing:.6px; padding:8px 14px; margin:2px 0 0;
}
.ai-cintillo::before{display:none;}
}
/* ---- Texto que venía fijo en blanco (banner "Acceso a Plantillas"):
hacerlo adaptativo para que sea legible en claro y en oscuro ---- */
.lead-fence-title,
.lead-fence-text,
.lead-fence-banner{color:var(--text-primary);}