/* ============================================================
   AlphaInsit — capa de marca de la CALCULADORA DE ESTADOS TERMODINÁMICOS
   Se carga DESPUÉS de css/styles.css y solo redefine variables y cabecera.

   Manual de marca:
     Índigo  #1D1E94  primario
     Cian    #0E9BB5  SOLO interactivo (botones, foco, hover, progreso)
     Rojo    #D93A2B  SOLO peligro
     Tinta   #1B1D3A  ·  Niebla #F4F5FA
     Montserrat titulares · Inter texto · JetBrains Mono fórmulas

   Excepción deliberada: dentro de los diagramas de física manda la convención
   física — azul = líquido/frío, rojo = vapor/caliente — y nunca al revés. Esos
   colores se definen en js/app.js (getThemeStyles), no aquí.

   Esta hoja era hasta ahora una copia del bloque <style> incrustado en
   index.html, porque el servidor solo entregaba tres archivos y este no
   llegaba al navegador. Ya sirve el árbol completo de frontend/, así que el
   HTML la enlaza y el bloque incrustado desaparece: una sola fuente de verdad.
   ============================================================ */

/* ---- OSCURO (por defecto) · tinta, acento cian ---- */
:root,
body.dark-theme{
  --bg-main:#111325;
  --bg-panel:#1B1D3A;
  --bg-input:#262a4d;
  --border-color:#2E3257;
  --text-primary:#F4F5FA;
  --text-secondary:#A9ACCB;
  --text-muted:#6E7196;
  --accent-start:#25C1DE;
  --accent-end:#25C1DE;
  --accent-glow:rgba(37,193,222,.28);
  --card-bg:#1B1D3A;
  --card-border:#2E3257;
  --btn-primary-bg:#0E9BB5;
  --btn-primary-text:#ffffff;
  --btn-secondary-bg:#262a4d;
  --btn-secondary-text:#F4F5FA;
  --danger:#D93A2B;
  --success:#2E8B57;
  --warning:#E9A13B;
  --font-heading:'Montserrat',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ---- CLARO (body.light-theme) · niebla, acento índigo ---- */
body.light-theme{
  --bg-main:#F4F5FA;
  --bg-panel:#ffffff;
  --bg-input:#fbfbfe;
  --border-color:#e6e7f0;
  --text-primary:#1B1D3A;
  --text-secondary:#545454;
  --text-muted:#8a8ba0;
  --accent-start:#1D1E94;
  --accent-end:#1D1E94;
  --accent-glow:rgba(29,30,148,.18);
  --card-bg:#ffffff;
  --card-border:#e6e7f0;
  --btn-primary-bg:#1D1E94;
  --btn-primary-text:#ffffff;
  --btn-secondary-bg:#eef0f7;
  --btn-secondary-text:#1B1D3A;
}

h1,h2,h3{font-family:var(--font-heading);}

/* Valores numéricos y fórmulas en monoespaciada de marca */
.card-value,
.val-col,
.mixture-table td{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* ---- Cabecera: logo (izq) · cintillo (centro) · controles (der) ---- */
header.main-header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
}
.header-logo{justify-self:start;display:flex;align-items:center;}
.header-logo .brand-logo{height:44px;width:auto;color:#ffffff;}
body.light-theme .header-logo .brand-logo{color:#1D1E94;}
.header-controls{justify-self:end;display:flex;align-items:center;gap:10px;}

/* ---- Enlaces de salida, al lado del botón de tema y con su mismo aspecto ---- */
.ai-salida{display:flex;align-items:center;gap:8px;}
.ai-salida a{
  display:inline-flex;align-items:center;height:40px;padding:0 15px;
  border:1px solid var(--border-color);border-radius:999px;
  background-color:transparent;color:var(--text-primary);
  text-decoration:none;font-size:13px;font-weight:500;
  letter-spacing:.2px;white-space:nowrap;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease;
}
.ai-salida a:hover,
.ai-salida a:focus-visible{color:#0E9BB5;border-color:#0E9BB5;}

/* ---- 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:var(--font-heading);
  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;
}

/* ---- Móvil: el cintillo baja a una fila propia y nada desborda ---- */
@media (max-width:768px){
  header.main-header{
    grid-template-columns:1fr auto !important;
    height:auto !important; min-height:0 !important;
    align-items:center; row-gap:6px; overflow:visible;
  }
  .header-logo .brand-logo{height:38px;}
  .header-controls{gap:6px;}
  .ai-salida{gap:6px;}
  .ai-salida a{height:34px;padding:0 11px;font-size:12px;}
  .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;}

  html, body{overflow-x:hidden !important; max-width:100vw !important; margin:0 !important;}
  :root{--sidebar-width:100%;}
  .main-layout{flex-direction:column !important; width:100% !important; max-width:100% !important; box-sizing:border-box;}
  .control-panel, .workspace, .charts-container, .chart-panel, .panel, .results-panel{
    width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box;
  }
  .chart-wrapper, canvas{max-width:100% !important;}
  .table-responsive{max-width:100%; overflow-x:auto;}
}

/* ---- Pantallas muy estrechas: los enlaces de salida se compactan ---- */
@media (max-width:420px){
  .ai-salida a{height:32px;padding:0 9px;font-size:11px;letter-spacing:0;}
}