/* Sistema de diseño Verdtical — tokens compartidos por todos los productos. Versión 2 (2026-09-30).
   v1: paleta, Calibri, forma y espaciado, extraídos de verdtical.info y de la plantilla maestra de correo.
   v2: estados IoT, superficies, escala tipográfica, capas, movimiento y apariencia oscura.
   Todos los nombres de la v1 se conservan. No se añaden colores ni fuentes fuera de este archivo. */

:root {
  --vt-version: 2;

  /* ------------------------------------------------------------ Marca (no cambia con el tema) */
  --vt-teal: #00bfa5;          /* acción principal, enlaces, acentos */
  --vt-teal-oscuro: #069880;   /* hover, texto teal sobre fondos claros */
  --vt-teal-claro: #5fe3cd;    /* acentos y texto teal sobre charcoal */
  --vt-charcoal: #36454f;      /* cabeceras, texto principal, fondos oscuros */
  --vt-charcoal-oscuro: #2b3942;
  --vt-blanco: #ffffff;
  --vt-negro: #000000;

  /* ------------------------------------------------------------ Neutros (apariencia clara) */
  --vt-fondo: #f0f2f1;         /* fondo de página */
  --vt-superficie: #ffffff;    /* tarjetas, paneles, tablas */
  --vt-superficie-2: #f6f8f7;  /* cabeceras de tabla, filas alternas, campos */
  --vt-superficie-elevada: #ffffff; /* menús, modales, avisos flotantes */
  --vt-borde: #d8dedd;
  --vt-borde-fuerte: #b9c4c6;
  --vt-texto: #36454f;
  --vt-texto-suave: #5d7078;
  --vt-texto-apagado: #7a9099;
  --vt-gris-medio: #9fb0b7;
  --vt-texto-invertido: #ffffff;   /* texto sobre teal, charcoal o estados */
  --vt-accion: var(--vt-teal-oscuro);  /* enlaces y texto de acción con contraste AA sobre superficie */
  --vt-accion-hover: var(--vt-teal);

  /* Mapa (Leaflet): fondo bajo las teselas y trazos de la interfaz sobre el mapa */
  --vt-mapa-fondo: #dfe6e4;
  --vt-mapa-control: #ffffff;

  /* ------------------------------------------------------------ Estados de formulario y avisos */
  --vt-aviso-fondo: #fff3bf;
  --vt-aviso-texto: #5c4632;
  --vt-ok: #069880;
  --vt-error: #b23a48;         /* solo validación de formularios */
  --vt-foco: #00bfa5;          /* anillo de foco visible (teclado) */

  /* ------------------------------------------------------------ Estados IoT (instalaciones, líneas, sensores)
     Distintos del teal de acción para que un marcador «en línea» no parezca un botón. */
  --vt-estado-online: #2e9e5b;
  --vt-estado-sin-datos: #7a9099;
  --vt-estado-alerta: #d99a1b;
  --vt-estado-critico: #c8323f;
  --vt-estado-mantenimiento: #4a7fd1;
  /* Fondos suaves para chips y filas: se derivan del color, así funcionan en las dos apariencias */
  --vt-estado-mezcla: 16%;
  --vt-estado-online-fondo: color-mix(in srgb, var(--vt-estado-online) var(--vt-estado-mezcla), transparent);
  --vt-estado-sin-datos-fondo: color-mix(in srgb, var(--vt-estado-sin-datos) var(--vt-estado-mezcla), transparent);
  --vt-estado-alerta-fondo: color-mix(in srgb, var(--vt-estado-alerta) var(--vt-estado-mezcla), transparent);
  --vt-estado-critico-fondo: color-mix(in srgb, var(--vt-estado-critico) var(--vt-estado-mezcla), transparent);
  --vt-estado-mantenimiento-fondo: color-mix(in srgb, var(--vt-estado-mantenimiento) var(--vt-estado-mezcla), transparent);

  /* Series de gráficas (Recharts, Tremor): orden fijo para que «línea 1» sea siempre del mismo color */
  --vt-serie-1: #00bfa5;
  --vt-serie-2: #4a7fd1;
  --vt-serie-3: #d99a1b;
  --vt-serie-4: #8a63c9;
  --vt-serie-5: #7a9099;

  /* ------------------------------------------------------------ Tipografía */
  --vt-fuente: Calibri, 'Segoe UI', sans-serif;
  --vt-fuente-mono: Consolas, monospace;
  --vt-texto-base: 16px;
  --vt-interlineado: 1.5;
  --vt-t-xs: 0.75rem;    /* 12 px: etiquetas, pies */
  --vt-t-sm: 0.875rem;   /* 14 px: tablas, ayudas */
  --vt-t-md: 1rem;       /* 16 px: cuerpo */
  --vt-t-lg: 1.125rem;   /* 18 px: títulos de tarjeta */
  --vt-t-xl: 1.375rem;   /* 22 px: título de sección */
  --vt-t-2xl: 1.75rem;   /* 28 px: título de página */
  --vt-t-3xl: 2.25rem;   /* 36 px: cifra clave */
  --vt-interlineado-titulo: 1.2;

  /* ------------------------------------------------------------ Forma */
  --vt-radio: 6px;
  --vt-radio-grande: 10px;
  --vt-radio-pildora: 42px;
  --vt-sombra: 0 24px 48px rgba(43, 57, 66, 0.22), 0 2px 6px rgba(43, 57, 66, 0.14);
  --vt-sombra-suave: 0 1px 2px rgba(43, 57, 66, 0.08), 0 4px 12px rgba(43, 57, 66, 0.08);
  --vt-borde-acento: inset 3px 0 0 var(--vt-teal);
  --vt-anillo-foco: 0 0 0 3px color-mix(in srgb, var(--vt-foco) 40%, transparent);

  /* ------------------------------------------------------------ Espaciado (escala de 4) */
  --vt-e1: 4px;
  --vt-e2: 8px;
  --vt-e3: 12px;
  --vt-e4: 16px;
  --vt-e6: 24px;
  --vt-e8: 32px;
  --vt-e12: 48px;

  /* ------------------------------------------------------------ Estructura común del ecosistema */
  --vt-cabecera-alto: 56px;      /* misma altura en todas las aplicaciones: cambiar de una a otra no «salta» */
  --vt-panel-lateral-ancho: 360px;
  --vt-contenido-ancho: 1200px;

  /* ------------------------------------------------------------ Capas (z-index) */
  --vt-z-base: 0;
  --vt-z-mapa: 100;
  --vt-z-panel: 200;
  --vt-z-cabecera: 300;
  --vt-z-modal: 400;
  --vt-z-aviso: 500;

  /* ------------------------------------------------------------ Movimiento
     Corto y con propósito: explica de dónde viene y a dónde va lo que cambia. */
  --vt-dur-rapida: 150ms;   /* hover, foco, chips */
  --vt-dur-media: 220ms;    /* paneles, pestañas, transiciones de vista */
  --vt-dur-lenta: 320ms;    /* modales, entrada de página */
  --vt-curva: cubic-bezier(0.2, 0, 0, 1);            /* estándar: sale rápido, frena suave */
  --vt-curva-entrada: cubic-bezier(0, 0, 0.2, 1);
  --vt-curva-salida: cubic-bezier(0.4, 0, 1, 1);
  --vt-desplazamiento: 8px;                           /* cuánto se desplaza lo que aparece */
}

/* ---------------------------------------------------------------- Apariencia oscura
   Se activa por preferencia del sistema o forzando `data-tema="oscuro"` en <html>.
   `data-tema="claro"` fuerza la clara aunque el sistema esté en oscuro. Central arranca en oscura. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --vt-fondo: #1b252b;
    --vt-superficie: #243038;
    --vt-superficie-2: #2b3942;
    --vt-superficie-elevada: #2f3d47;
    --vt-borde: #3a4a54;
    --vt-borde-fuerte: #4d606b;
    --vt-texto: #e6ecec;
    --vt-texto-suave: #b3c2c6;
    --vt-texto-apagado: #8ea2a9;
    --vt-gris-medio: #6f8690;
    --vt-texto-invertido: #1b252b;
    --vt-accion: var(--vt-teal-claro);
    --vt-accion-hover: var(--vt-teal);
    --vt-mapa-fondo: #141c21;
    --vt-mapa-control: #2f3d47;
    --vt-aviso-fondo: #4a3d1f;
    --vt-aviso-texto: #ffe9a8;
    --vt-estado-mezcla: 26%;
    --vt-sombra: 0 24px 48px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
    --vt-sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --vt-fondo: #1b252b;
  --vt-superficie: #243038;
  --vt-superficie-2: #2b3942;
  --vt-superficie-elevada: #2f3d47;
  --vt-borde: #3a4a54;
  --vt-borde-fuerte: #4d606b;
  --vt-texto: #e6ecec;
  --vt-texto-suave: #b3c2c6;
  --vt-texto-apagado: #8ea2a9;
  --vt-gris-medio: #6f8690;
  --vt-texto-invertido: #1b252b;
  --vt-accion: var(--vt-teal-claro);
  --vt-accion-hover: var(--vt-teal);
  --vt-mapa-fondo: #141c21;
  --vt-mapa-control: #2f3d47;
  --vt-aviso-fondo: #4a3d1f;
  --vt-aviso-texto: #ffe9a8;
  --vt-estado-mezcla: 26%;
  --vt-sombra: 0 24px 48px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  --vt-sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

/* Quien pide menos movimiento, no lo recibe: las duraciones pasan a cero y nada se desplaza. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vt-dur-rapida: 0ms;
    --vt-dur-media: 0ms;
    --vt-dur-lenta: 0ms;
    --vt-desplazamiento: 0px;
  }
}

/* ---------------------------------------------------------------- Base mínima
   Cada producto añade sus componentes en su propio CSS (o carga componentes.css) usando solo variables. */
html { color-scheme: light; }
body {
  margin: 0;
  font-family: var(--vt-fuente);
  font-size: var(--vt-texto-base);
  line-height: var(--vt-interlineado);
  color: var(--vt-texto);
  background: var(--vt-fondo);
}
a { color: var(--vt-accion); }
a:hover { color: var(--vt-accion-hover); }
code, pre { font-family: var(--vt-fuente-mono); }
:focus-visible { outline: none; box-shadow: var(--vt-anillo-foco); }