/* ============================================================================
   Octopus Lux — Sistema de diseño (fuente única de la paleta)
   Derivado de public/index.html / public/reporte.html (ia.octopuslux.com).
   Cárgalo ANTES del <style> de cada página para unificar la identidad visual.
   ========================================================================== */
:root {
    /* ── Azul de marca (oficial landing octopuslux.com) ─────── */
    --brand-600: #2563EB;
    --brand-700: #1D4ED8;
    --brand-indigo: #4F46E5;
    --brand-12: rgba(37, 99, 235, 0.12);
    --brand-10: rgba(37, 99, 235, 0.10);
    --brand-08: rgba(37, 99, 235, 0.08);
    --brand-14: rgba(37, 99, 235, 0.14);

    /* ── Cian / Teal (acentos oficiales landing) ────────────── */
    --accent-cyan: #06B6D4;
    --accent-teal: #14B8A6;
    --accent-cyan-soft: rgba(6, 182, 212, 0.12);
    --accent-teal-soft: rgba(20, 184, 166, 0.12);

    /* ── Fondos ── (grises fríos azulados, sin beige cálido) ── */
    --bg-app: #FFFFFF;
    --bg-warm: #F7F9FC;
    --bg-input: #FFFFFF;
    --bg-action-btn: #F5F7FB;
    --bg-chip: #F1F4FB;

    /* ── Bordes ── (un único sistema azulado y suave) ───────── */
    --border-subtle: var(--brand-10);
    --border-input: var(--brand-12);
    --border-chip: var(--brand-14);
    --border-soft: var(--brand-12);

    /* ── Texto ──────────────────────────────────────────────── */
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-muted: #7A8FA3;
    --text-placeholder: #A8BBC9;
    --text-brand: #1D4ED8;

    /* ── Acentos ────────────────────────────────────────────── */
    --accent-blue: #2563EB;
    --accent-blue-soft: #4F46E5;
    --accent-send: #2563EB;
    --accent-send-hover: #4F46E5;
    --accent-green: #35D499;
    --accent-gold: #F0C060;   /* solo rating de estrellas / detalle VIP, no superficies */

    /* ── Estados ────────────────────────────────────────────── */
    --danger-bg: #FDECEE;
    --danger-border: #F3B6BD;
    --danger-text: #B42334;
    --success-bg: #E7F8F0;
    --success-border: #B6E8D2;
    --success-text: #1A9E6E;
    --info-bg: #EAF1FB;
    --info-text: #2563EB;

    /* ── Sombras ── (oficiales, familia azul, dos niveles) ──── */
    --shadow-modal: 0 18px 48px rgba(37, 99, 235, 0.18);
    --shadow-card: 0 8px 24px var(--brand-10);
    --shadow-lg: 0 18px 48px var(--brand-14);
    --shadow-input: 0 8px 24px var(--brand-10);

    /* ── Tipografía ─────────────────────────────────────────── */
    --font-ui: 'Plus Jakarta Sans', 'Nunito', sans-serif;
    --font-brand: 'MuseoModerno', 'Fredoka One', cursive;

    /* ── Radios ─────────────────────────────────────────────── */
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --radius-pill: 999px;

    /* ── Espaciado ──────────────────────────────────────────── */
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }