/* ============================================================
   CPRESS ERP — main.css
   Pantallas: Terminales y Monitores en Tiempo Real
   Tipografía: IBM Plex Sans + IBM Plex Mono
   Temas: Día / Noche
   Primario: Azul #192D69  |  Secundario: #27F5C2  |  Acento: #31c78d
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── TOKENS GLOBALES ─────────────────────────────────────── */
:root {
    /* Primario: Azul CPRESS BASE */
    --blue-950: #0A1429;
    --blue-900: #111D35;
    --blue-800: #192D69;
    --blue-700: #1E3478;
    --blue-600: #243B87;
    --blue-500: #192D69;
    /* ★ */
    --blue-400: #2A3D82;
    --blue-300: #4A5E9E;
    --blue-200: #7A8FBF;
    --blue-100: #B5C4DB;
    --blue-50: #E3E9F3;

    /* Acento: Sky Blue */
    --accent-950: #063d3a;
    --accent-900: #0a524c;
    --accent-800: #0d664b;
    --accent-700: #087c5f;
    --accent-600: #31c78d;
    --accent-500: #31c78d;
    /* ★ */
    --accent-400: #16d199;
    --accent-300: #6BC1F0;
    --accent-200: #A5D3F5;
    --accent-100: #D4E9FB;
    --accent-50: #EDF7FC;

    /* Secundario: Mint Verde #27F5C2 */
    --secondary-950: #042D22;
    --secondary-900: #064336;
    --secondary-800: #085C4B;
    --secondary-700: #0B7560;
    --secondary-600: #0E8F75;
    --secondary-500: #27F5C2;
    /* ★ */
    --secondary-400: #4DF7CD;
    --secondary-300: #7EFADD;
    --secondary-200: #AEFCE8;
    --secondary-100: #D5FEE8;
    --secondary-50: #EBFFF4;

    /* Eliminado: Verde CPRESS */
    /* --green-*: ahora usa --accent-* */

    /* Neutrales */
    --gray-950: #0A0C0F;
    --gray-900: #111318;
    --gray-800: #1C2128;
    --gray-700: #272D36;
    --gray-600: #363D48;
    --gray-500: #4E5665;
    --gray-400: #6B7585;
    --gray-300: #96A0AE;
    --gray-200: #C2C9D3;
    --gray-100: #E2E6EA;
    --gray-50: #F4F6F8;
    --white: #FFFFFF;

    /* Semánticos */
    --success: #F55E27;
    --success-bg: #FDEAEA;
    --warning: #F5A623;
    --warning-bg: #FFF4DC;
    --danger: #E03E3E;
    --danger-bg: #FDEAEA;
    --primary: #192D69;
    --primary-light: #2A3D82;
    --secondary: #27F5C2;
    --secondary-light: #4DF7CD;

    /* Tipografía */
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-md: 17px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 30px;
    --text-3xl: 38px;
    --text-4xl: 48px;
    --text-5xl: 64px;

    /* Espaciado */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 20px;
    --s6: 24px;
    --s8: 32px;
    --s10: 40px;

    /* Radios */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-full: 9999px;

    /* Sombras */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .12);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .20);
    --shadow-blue: 0 4px 16px rgba(25, 45, 105, .30);
    --shadow-secondary: 0 4px 16px rgba(39, 245, 194, .30);

    /* Transiciones */
    --tf: .15s ease;
    --tb: .25s ease;
    --ts: .40s ease;
}

/* ── CLASES BASE ─────────────────────────────────────────── */
body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--gray-900);
    background: var(--gray-50);
}

.dark body {
    color: var(--white);
    background: var(--gray-950);
}

/* ── COMPONENTES: TOOLBAR ─────────────────────────────────── */
.toolbar-cp {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    padding: var(--s4);
    background: var(--white);
    border-radius: var(--r-md);
    border: 1px solid var(--gray-100);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--s6);
}

.dark .toolbar-cp {
    background: var(--gray-900);
    border-color: var(--gray-800);
}

.toolbar-cp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: wrap;
}

.toolbar-cp-group {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

/* ── ELEMENTOS: BUSCADOR ─────────────────────────────────── */
.search-cp-wrapper {
    position: relative;
    width: 100%;
    max-width: 320px;
}

.search-cp-input {
    width: 100%;
    height: 36px;
    padding: 0 var(--s3) 0 var(--s8);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--gray-900);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-md);
    transition: var(--tf);
}

.dark .search-cp-input {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--white);
}

.search-cp-input:focus {
    outline: none;
    border-color: var(--secondary-500);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--secondary-50);
}

.dark .search-cp-input:focus {
    background: var(--gray-950);
}

.search-cp-icon {
    position: absolute;
    left: var(--s3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
}

/* ── ELEMENTOS: BOTONES ──────────────────────────────────── */
.btn-cp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    height: 36px;
    padding: 0 var(--s4);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: var(--tf);
    border: 1px solid transparent;
    white-space: nowrap;
}

.btn-cp-icon-only {
    width: 36px;
    padding: 0;
}

.btn-cp-primary {
    background: var(--primary);
    color: var(--white);
}

.btn-cp-primary:hover {
    background: var(--primary-light);
}

.btn-cp-accent {
    background: var(--secondary-500);
    color: var(--blue-950);
}

.btn-cp-accent:hover {
    background: var(--secondary-400);
}

.btn-cp-secondary {
    background: var(--white);
    color: var(--gray-700);
    border-color: var(--gray-200);
}

.dark .btn-cp-secondary {
    background: var(--gray-800);
    color: var(--gray-200);
    border-color: var(--gray-700);
}

.btn-cp-secondary:hover {
    background: var(--gray-50);
}

.dark .btn-cp-secondary:hover {
    background: var(--gray-700);
}

.btn-cp-ghost {
    background: transparent;
    color: var(--gray-500);
}

.btn-cp-ghost:hover {
    background: var(--gray-50);
    color: var(--gray-900);
}

.dark .btn-cp-ghost:hover {
    background: var(--gray-800);
    color: var(--white);
}

/* ── PAGINACION ──────────────────────────────────────────── */
.pagination-cp-info {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.records-cp-selector {
    height: 32px;
    padding: 0 var(--s2);
    font-size: var(--text-xs);
    border-radius: var(--r-sm);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
}

.dark .records-cp-selector {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-300);
}

/* ── UTILS ───────────────────────────────────────────────── */
.refresh-spin-cp {
    animation: spin-cp 1s linear infinite;
}

@keyframes spin-cp {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   CPRESS LANDING — Navbar Styles
   Efecto doble: sólido al inicio → transparente sobre hero
   Color primario: #192D69  |  Secundario: #27F5C2  |  Acento: #31c78d
   ============================================================ */

/* ── Estado base: fondo sólido primario ─────────────────────── */
.cp-navbar--solid {
    background-color: #192D69;
    box-shadow: 0 2px 20px rgba(25, 45, 105, 0.35);
    backdrop-filter: none;
}

/* ── Estado transparente (sobre el hero) ────────────────────── */
.cp-navbar--transparent {
    background-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

/* ── Estado al hacer scroll (fondo semitransparente con blur) ── */
.cp-navbar--scrolled {
    background-color: rgba(25, 45, 105, 0.92);
    box-shadow: 0 4px 24px rgba(25, 45, 105, 0.40);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ── Links de navegación ─────────────────────────────────────── */
.cp-nav-link {
    position: relative;
    letter-spacing: 0.01em;
}

.cp-nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0);
    transition: background 0.2s ease;
}

.cp-nav-link:hover::before,
.cp-nav-link:focus-visible::before {
    background: rgba(255, 255, 255, 0.08);
}

.cp-nav-link:hover .cp-nav-underline {
    width: 80% !important;
}

.cp-nav-link--active .cp-nav-underline {
    width: 80% !important;
}

.cp-nav-link:focus-visible {
    outline: 2px solid var(--secondary-500);
    outline-offset: 2px;
}

/* ── Animación hamburger → X ─────────────────────────────────── */
.cp-menu-open .cp-ham-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.cp-menu-open .cp-ham-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.cp-menu-open .cp-ham-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Menú mobile abierto ─────────────────────────────────────── */
.cp-mobile-menu--open {
    max-height: 420px !important;
}

/* ── Dropdown idioma ─────────────────────────────────────────── */
.cp-lang-dropdown--open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
}

/* ── CTA button pulse sutil ──────────────────────────────────── */
@keyframes cp-cta-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(39, 245, 194, 0.30); }
    50%       { box-shadow: 0 4px 22px rgba(39, 245, 194, 0.55); }
}

#cp-cta-btn {
    animation: cp-cta-pulse 3s ease-in-out infinite;
}

#cp-cta-btn:hover {
    animation: none;
}

/* ── Reducir movimiento ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #cp-cta-btn { animation: none; }
    .cp-navbar--solid,
    .cp-navbar--transparent,
    .cp-navbar--scrolled {
        transition: none;
    }
}

/* ── Responsive: ocultar label en pantallas muy pequeñas ─────── */
@media (max-width: 400px) {
    .cp-cta-label { display: none; }
}