/* ============================================================
   Actuaria · Estilos de interfaz — Neomorfismo, Glassmorfismo,
   Bento Boxes.  Brandbook §34–36.

   NEOMORFISMO es el estilo base de los productos Actuaria:
   tarjetas, botones, campos y tabs. Regla de marca: se construye
   sobre la superficie clara #E8ECF4 — las cajas NUNCA usan
   blanco puro, y no llevan borde.
   ============================================================ */
:root {
  /* ── Neomorfismo ─────────────────────────────────────── */
  --neu-surface:    #E8ECF4; /* misma color caja y fondo */
  --neu-shadow-dark:  rgba(163,177,198,0.60); /* azul-grisácea · abajo-derecha */
  --neu-shadow-light: rgba(255,255,255,0.90); /* casi blanca · arriba-izquierda */
  /* Relieve (extruido): dos sombras a 6px, difuminado 16 */
  --neu-raised:  6px 6px 16px var(--neu-shadow-dark), -6px -6px 16px var(--neu-shadow-light);
  --neu-raised-sm: 3px 3px 8px var(--neu-shadow-dark), -3px -3px 8px var(--neu-shadow-light);
  /* Hundido (inset): las mismas sombras hacia adentro */
  --neu-inset:  inset 6px 6px 16px var(--neu-shadow-dark), inset -6px -6px 16px var(--neu-shadow-light);
  --neu-inset-sm: inset 3px 3px 8px var(--neu-shadow-dark), inset -3px -3px 8px var(--neu-shadow-light);
  --neu-radius:  20px; /* esquinas 16–24px, sin bordes @kind radius */
  --neu-radius-sm: 14px; /* @kind radius */

  /* ── Glassmorfismo ───────────────────────────────────── */
  /* Requiere un fondo con color o foto detrás: navy o degradado de marca. */
  --glass-fill:   rgba(255,255,255,0.15); /* panel casi transparente */
  --glass-border: rgba(255,255,255,0.28); /* borde claro fino */
  --glass-blur:   blur(16px); /* @kind other */
  --glass-radius: 20px; /* @kind radius */

  /* ── Bento boxes ─────────────────────────────────────── */
  --bento-gap:    20px; /* separación uniforme 16–24px */
  --bento-radius: 20px; /* @kind radius */
}

/* Utilidades — el estilo base de producto */
.neu-surface { background: var(--neu-surface); }
.neu-card    { background: var(--neu-surface); border: none; border-radius: var(--neu-radius); box-shadow: var(--neu-raised); }
.neu-inset   { background: var(--neu-surface); border: none; border-radius: var(--neu-radius-sm); box-shadow: var(--neu-inset); }
.neu-btn     { background: var(--neu-surface); border: none; border-radius: var(--neu-radius-sm); box-shadow: var(--neu-raised-sm); cursor: pointer; transition: box-shadow var(--dur-fast) var(--ease-out); }
.neu-btn:active { box-shadow: var(--neu-inset-sm); }

.glass-panel {
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.bento-grid { display: grid; gap: var(--bento-gap); }