/* ============================================================
   NSI — Sistema de marca (design tokens)  ·  v1
   Paleta derivada del logo "NEW SOFT IDEAS" + acentos de
   producto (WMS / TMS) alineados a las presentaciones.
   Se carga DESPUÉS de styles.css para fijar la identidad.
   ============================================================ */
:root {
    /* --- Marca — alineada al sistema "Optimo Business Central" del WMS --- */
    --nsi-navy: #003b5c;      /* logo NSI (footer / identidad) */
    --nsi-blue: #0078D4;      /* BC accent (Fluent / Microsoft 365) — primario */
    --nsi-blue-2: #2B88D8;    /* azul claro */
    --nsi-blue-d: #106EBE;    /* BC hover */
    --nsi-blue-soft: #EFF6FC; /* BC accent soft */

    /* --- Acentos de producto (mismos de las presentaciones) --- */
    --nsi-wms: #0E9488;       /* Óptimo WMS (teal) */
    --nsi-wms-d: #0b6e6e;
    --nsi-wms-soft: #e6f7f6;
    --nsi-tms: #F57C00;       /* Óptimo TMS (naranja) */
    --nsi-tms-d: #e65100;
    --nsi-tms-soft: #fff6ec;

    /* --- Neutrales (BC) --- */
    --nsi-ink: #201F1E;
    --nsi-slate: #323130;
    --nsi-muted: #605E5C;
    --nsi-line: #EDEBE9;

    /* --- Sistema --- */
    --nsi-radius: 14px;
    --nsi-shadow: 0 6px 24px rgba(16, 30, 45, .08);
    --nsi-shadow-lg: 0 14px 36px rgba(16, 30, 45, .14);
    --nsi-transition: .2s ease;
}

/* Alinear el primario de Bootstrap al BC accent del WMS (#0078D4) */
:root {
    --bs-primary: #0078D4 !important;
    --bs-primary-rgb: 0, 120, 212 !important;
    --bs-primary-bg-subtle: #EFF6FC !important;
    --bs-primary-border-subtle: #DEECF9 !important;
    --bs-primary-text-emphasis: #005A9E !important;
    --bs-link-color: #0078D4 !important;
    --bs-link-color-rgb: 0, 120, 212 !important;
    --bs-link-hover-color: #106EBE !important;
}

/* ---------- Tipografía con jerarquía consistente ---------- */
h1, h2, h3, .fw-bolder { letter-spacing: -.01em; }
h1, h2 { font-weight: 800; }
h1 { line-height: 1.08; }
.lead, .fs-5 { color: var(--nsi-slate); }

/* ---------- Utilidades de marca ---------- */
.text-nsi-navy { color: var(--nsi-navy) !important; }
.bg-nsi-navy   { background-color: var(--nsi-navy) !important; }
.text-nsi-blue { color: var(--nsi-blue) !important; }
.bg-nsi-blue-soft { background-color: var(--nsi-blue-soft) !important; }

.text-nsi-wms  { color: var(--nsi-wms) !important; }
.text-nsi-tms  { color: var(--nsi-tms) !important; }
.bg-nsi-wms-soft { background-color: var(--nsi-wms-soft) !important; }
.bg-nsi-tms-soft { background-color: var(--nsi-tms-soft) !important; }

.border-top-wms { border-top: 4px solid var(--nsi-wms) !important; }
.border-top-tms { border-top: 4px solid var(--nsi-tms) !important; }

.btn-nsi-wms { background-color: var(--nsi-wms); color: #fff; }
.btn-nsi-wms:hover, .btn-nsi-wms:focus { background-color: var(--nsi-wms-d); color: #fff; }
.btn-nsi-tms { background-color: var(--nsi-tms); color: #fff; }
.btn-nsi-tms:hover, .btn-nsi-tms:focus { background-color: var(--nsi-tms-d); color: #fff; }

/* Degradado de marca (hero y secciones destacadas) */
.bg-nsi-gradient { background: linear-gradient(135deg, #001a33 0%, #005A9E 55%, var(--nsi-blue) 160%); }

/* ---------- Tarjetas: elevación coherente en todo el sitio ---------- */
.plan-cards { transition: transform var(--nsi-transition), box-shadow var(--nsi-transition); }
.plan-cards:hover { transform: translateY(-4px); box-shadow: var(--nsi-shadow-lg); }

/* ---------- Tarjetas de servicio (sección "Nuestro compromiso") ---------- */
.service-card { color: var(--nsi-ink); background: #fff; transition: transform var(--nsi-transition), box-shadow var(--nsi-transition), border-color var(--nsi-transition); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--nsi-shadow-lg); border-color: var(--nsi-blue) !important; color: var(--nsi-ink); }

/* ---------- Micro-interacciones (V6) ---------- */
.btn, .nav-link, .service-card, .plan-cards { transition: color var(--nsi-transition), background-color var(--nsi-transition), border-color var(--nsi-transition), box-shadow var(--nsi-transition), transform var(--nsi-transition); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
:focus-visible { outline: 3px solid rgba(27, 132, 255, .45); outline-offset: 2px; }

/* ---------- Coherencia móvil (V8) ---------- */
@media (max-width: 768px) {
    /* el hero crece según contenido (no se corta) y el titular cabe */
    .hero-section { min-height: auto; }
    .hero-section .display-3 { font-size: 2.3rem; line-height: 1.12; }
    .hero-section img { max-height: 300px; }
    /* enlaces del footer con área tappable */
    footer a:not(.btn) { display: inline-block; padding-block: 3px; }
}
@media (max-width: 575.98px) {
    /* CTAs del hero a ancho completo para mejor toque */
    .hero-section .btn-lg { width: 100%; }
}

/* ---------- Tipografía de marca + aire (referencia Aseinfo) ---------- */
body {
    font-family: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif !important;
    line-height: 1.6;
}
h1, h2, h3, h4, h5, h6, .fw-bolder, .fw-bold {
    font-family: "Montserrat", "Segoe UI", system-ui, sans-serif !important;
    letter-spacing: -.01em;
}
/* Tarjetas con un poco más de aire interior */
.plan-cards, .service-card { padding: 1.75rem !important; }

/* ---------- Toast ligero (reemplaza DevExpress.ui.notify) ---------- */
#nsi-toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1090; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.nsi-toast { min-width: 260px; max-width: 90vw; padding: 12px 18px; border-radius: 6px; color: #fff; font-weight: 600; box-shadow: var(--nsi-shadow-lg); opacity: 0; transform: translateY(-12px); transition: opacity .25s ease, transform .25s ease; text-align: center; }
.nsi-toast.show { opacity: 1; transform: translateY(0); }
.nsi-toast-success { background: #107C10; }
.nsi-toast-error { background: #D13438; }
.nsi-toast-info { background: var(--nsi-blue); }

/* ---------- Accesibilidad: respetar prefers-reduced-motion (WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .fade-in { opacity: 1 !important; transform: none !important; }
    .nsi-whatsapp-btn { animation: none !important; }
}