/* =========================================================
   CAPA DE MARCA — única fuente de colores, tipografías y
   patrones de la demo. Cambiar de marca = cambiar este
   archivo; los componentes solo usan los roles de abajo.

   Paleta de PersonaVirtual.cl: la del logo (teal → cian) y el
   tema de la aplicación (apps/web/src/styles/theme.css).
   Contrastes de texto pensados para WCAG AA (≥ 4,5:1).
   ========================================================= */
/* Cormorant Garamond: nombre del reverso de la plantilla 011 (vCard de la demo). */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500..800&family=Inter:wght@300..800&family=Cormorant+Garamond:wght@500;600&display=swap");

/* Logos: solo el blanco y el negro (nunca la versión a color). Negro sobre
   fondos claros, blanco sobre fondos oscuros. */

:root {
  /* ---- Paleta de marca (logo y tema de la app) ---- */
  --marca-teal: #147d6c;
  --marca-teal-fuerte: #0f6154;
  --marca-teal-claro: #1aa899;
  --marca-cian: #1effff;
  --marca-tinta: #2f3542;

  /* ---- Roles semánticos (lo que usan los componentes) ---- */
  --color-fondo: #f3f5f9;
  --color-fondo-velo: rgba(243, 245, 249, 0.9);
  --color-superficie: #ffffff;
  --color-superficie-alt: #f7f9fc;
  --color-tinta: #1d2430;
  --color-texto: var(--marca-tinta);
  --color-tenue: #5c6575;
  --color-linea: #dde2ec;

  /* Acento: el teal del logo, legible sobre blanco y sobre el fondo. */
  --color-acento: var(--marca-teal);
  --color-acento-hover: var(--marca-teal-fuerte);
  --color-acento-vivo: var(--marca-teal-claro);
  --color-acento-suave: #dcf2ee;
  --color-acento-velo: rgba(20, 125, 108, 0.14);

  /* Superficies oscuras: noche azul petróleo. */
  --color-oscuro: #0e1a21;
  --color-oscuro-superficie: #15252e;
  --color-oscuro-elevado: #1d3440;
  --color-oscuro-linea: #2a4552;
  --color-oscuro-texto: #c6d3da;
  --color-oscuro-tenue: #9db0b9;

  --color-blanco: #ffffff;
  --color-exito: #2f9e72;
  --color-exito-suave: #e3f5ec;
  --color-exito-texto: #1f6f4f;
  --color-error: #c0392b;
  --color-error-suave: #fdecea;
  --color-velo-dialogo: rgba(10, 20, 26, 0.5);

  /* ---- Materiales ---- */
  /* Tarjeta NFC de la portada: negra mate, como la del catálogo
     (assets/img/catalogo/tarjetas-nfc.png), con un brillo suave y un borde de luz. */
  --material-tarjeta:
    radial-gradient(90% 120% at -10% -20%, rgba(255, 255, 255, 0.14) 0%, transparent 50%),
    radial-gradient(120% 90% at 110% 115%, rgba(255, 255, 255, 0.06) 0%, transparent 55%),
    linear-gradient(135deg, #24262c 0%, #111216 55%, #08090b 100%);
  --borde-tarjeta: 1px solid rgba(255, 255, 255, 0.18);
  --color-tarjeta-texto: var(--color-blanco);
  /* Trama de puntos al pie de la portada, como los chips NFC de la planilla. */
  --patron-franja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='1.6' fill='%23147d6c'/%3E%3C/svg%3E");
  /* Vidrio (glassmorphism, clase .vidrio): superficie translúcida que
     desenfoca lo que tiene detrás; el tinte es la luz del teal. */
  --vidrio-fondo: rgba(255, 255, 255, 0.08);
  --vidrio-borde: rgba(255, 255, 255, 0.22);
  --vidrio-brillo: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --vidrio-desenfoque: blur(18px) saturate(160%);
  --vidrio-tinte-acento: rgba(20, 125, 108, 0.55);
  /* Fotografía de referencia de la marca (Santiago de noche). */
  --imagen-marca: url("../assets/img/santiago-noche.jpg");

  /* ---- Tipografía ---- */
  --fuente-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Geométrica y tecnológica, en línea con «VIRTUAL» del logotipo. */
  --fuente-titulos: "Sora", "Inter", system-ui, sans-serif;
}