/* ==========================================================
   NOVA - Sistema visual compartido (página principal y panel)
   Los colores de marca llegan desde el panel de administración.
   ========================================================== */
@font-face { font-family: "Bricolage Grotesque"; src: url("/static/fuentes/bricolage-grotesque.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/static/fuentes/figtree.woff2") format("woff2-variations"); font-weight: 300 900; font-display: swap; }
:root {
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texto: "Figtree", "Segoe UI", system-ui, sans-serif;
  --primario: #3157f5;
  --secundario: #12c6b4;
  --sobre-primario: #ffffff;
  /* Tema claro: "mañana" */
  --fondo: #f3f6fb;
  --superficie: #ffffff;
  --superficie-2: #e9eef6;
  --tinta: #14213d;
  --tinta-suave: #5b6b86;
  --linea: #dbe2ed;
  --sombra: 0 10px 30px -12px rgba(20, 33, 61, 0.18);
  --sombra-alta: 0 30px 80px -20px rgba(20, 33, 61, 0.35);
  --peligro: #d93a3a;
  --exito: #138a5e;
  color-scheme: light;
}
:root[data-tema="oscuro"] {
  /* Tema oscuro: "noche" */
  --fondo: #0e1530;
  --superficie: #151e3f;
  --superficie-2: #1d2852;
  --tinta: #eaf0ff;
  --tinta-suave: #9aa8cc;
  --linea: #27335f;
  --sombra: 0 12px 34px -14px rgba(0, 0, 0, 0.6);
  --sombra-alta: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  --peligro: #ff6b6b;
  --exito: #3ddc97;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(900px 600px at 30% 35%, color-mix(in srgb, var(--primario) 9%, transparent), transparent 70%),
    radial-gradient(700px 500px at 75% 70%, color-mix(in srgb, var(--secundario) 9%, transparent), transparent 70%),
    var(--fondo);
  background-attachment: fixed;
  color: var(--tinta);
  font: 16px/1.5 var(--texto);
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s, color .4s;
}
a { color: var(--primario); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primario) 55%, transparent); outline-offset: 2px; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 14px; font-weight: 500; }
.campo select, .campo input, .campo textarea {
  font: 15px var(--texto); color: var(--tinta); background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 12px; padding: 10px 12px; outline: none; width: 100%;
}
.campo select:focus, .campo input:focus, .campo textarea:focus { border-color: var(--primario); }
.aviso {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--tinta); color: var(--fondo); padding: 12px 18px; border-radius: 14px; font-size: 15px;
  max-width: calc(100% - 32px); transition: opacity .25s, transform .25s; z-index: 50; box-shadow: var(--sombra-alta);
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso.error { background: var(--peligro); color: #fff; }