/* --- ESTILOS GLOBALES (ANTI-DESBORDES) --- */
*, *::before, *::after { box-sizing: border-box; }
:root { --azul: #00469b; --rojo: #e30b1c; --bg: #f1f5f9; --txt: #1e293b; }
html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    min-height: 100vh; /* Cambia height por min-height */
    /* position: fixed;  <-- ELIMINA O COMENTA ESTO */
    /* overflow: hidden; <-- ELIMINA O COMENTA ESTO */
    overflow-x: hidden; /* Evita el desborde lateral solamente */
    overflow-y: auto;   /* Permite scroll vertical si el contenido es largo */
    font-family: 'Segoe UI', sans-serif; 
    background: var(--bg); 
    color: var(--txt); 
    display: flex; 
    flex-direction: column; /* Asegura que los elementos se apilen bien */
    -webkit-tap-highlight-color: transparent; 
}
.hidden { display:none !important; }

/* --- REDISEÑO DE AUTH SCREEN (CARRUSEL DINÁMICO) --- */
#auth-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99;
    display: flex; align-items: stretch; background: #ffffff; overflow: hidden;
}

/* Área Izquierda: Hero con Carrusel (AQUÍ AHORA) */
.auth-hero-area {
    flex: 1.5; /* Ocupa menos espacio para dar más al formulario */
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 3rem; color: white; overflow: hidden;
    background: linear-gradient(-45deg, #001f4d, var(--azul), #0f172a, #00224d);
    background-size: 300% 300%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} }

/* Burbujas Flotantes de Fondo */
.hero-blob { position: absolute; border-radius: 50%; filter: blur(90px); z-index: 1; opacity: 0.6; }
.hero-blob-1 { width: 500px; height: 500px; background: rgba(227, 11, 28, 0.3); top: -100px; left: -100px; animation: floatBlob 12s ease-in-out infinite alternate; }
.hero-blob-2 { width: 600px; height: 600px; background: rgba(59, 130, 246, 0.2); bottom: -150px; right: -100px; animation: floatBlob 15s ease-in-out infinite alternate-reverse; }

@keyframes floatBlob { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 40px) scale(1.1); } }

/* Contenido del Hero */
.hero-content { position: relative; z-index: 2; max-width: 600px; text-align: center; }
.hero-title { font-size: 3rem; font-weight: 900; line-height: 1.1; margin: 0 0 1rem 0; letter-spacing: -1.5px; }
.hero-title span { background: linear-gradient(120deg, #fde68a, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-subtitle { font-size: 1.1rem; color: #cbd5e1; margin-bottom: 2.5rem; line-height: 1.6; font-weight: 500; }

/* Carrusel Animado (Realistic Drawn Carousel) */
.value-props-carousel {
    position: relative; width: 100%; height: 280px; /* Altura del carrusel */
    display: flex; align-items: center; justify-content: center;
}

.v-prop-frame {
    position: absolute; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0.95);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.v-prop-card {
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 2.5rem; border-radius: 20px; text-align: center;
    max-width: 450px; box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.v-prop-icon { font-size: 4rem; margin-bottom: 1.5rem; color: #60a5fa; /* Color inicial */ }
.v-prop-card h4 { margin: 0 0 10px 0; font-size: 1.4rem; color: #ffffff; font-weight: 800; }
.v-prop-card p { margin: 0; font-size: 1.05rem; color: #cbd5e1; line-height: 1.5; }

/* Animación del Carrusel */
@keyframes carouselLoop {
    0%, 30% { opacity: 0; transform: scale(0.95); }
    5%, 25% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.95); }
}

.v-prop-frame.active { animation: carouselLoop 10s ease-in-out infinite; }
.frame-1 { animation-delay: 0s !important; }
.frame-2 { animation-delay: 3.33s !important; }
.frame-3 { animation-delay: 6.66s !important; }

/* Cambios de color por marco */
.frame-2 .v-prop-icon { color: #fca5a5; /* Color Fulfillment */ }
.frame-3 .v-prop-icon { color: #34d399; /* Color Tarifas */ }


/* Área Derecha: Formularios ( FORMULARIO MÁS GRANDE Y DESPLAZADO A LA IZQUIERDA ) */
.auth-form-area {
    flex: 1.8; /* Ocupa más espacio que antes */
    max-width: 600px; /* Ancho máximo aumentado */
    background: #ffffff; display: flex; align-items: center; justify-content: center;
    padding: 3rem; position: relative; z-index: 10; overflow-y: auto;
    /* Sombra invertida para que se proyecte hacia la IZQUIERDA */
    box-shadow: -20px 0 50px rgba(0,0,0,0.06);
}

.auth-box {
    width: 100%; max-width: 480px; /* Ancho máximo interno aumentado */
    text-align: center;
    /* Animación invertida: Desliza desde la DERECHA */
    animation: slideLeftFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideLeftFade { 
    0% { opacity: 0; transform: translateX(40px); } 
    100% { opacity: 1; transform: translateX(0); } 
}

@keyframes fadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
form:not(.hidden) { animation: fadeIn 0.4s ease-out forwards; }

.auth-input-group { text-align: left; margin-bottom: 20px; }
.auth-input-group label { display: block; font-size: 0.85rem; font-weight: 800; color: #475569; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;}

.auth-input-group input { 
    width: 100%; padding: 16px 18px; border: 2px solid #e2e8f0; border-radius: 12px; 
    font-size: 1.05rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); outline: none; 
    background: #f8fafc; font-family: inherit; color: #0f172a; font-weight: 500;
}
.auth-input-group input:hover { border-color: #cbd5e1; background: #f1f5f9; }
.auth-input-group input:focus { 
    background: #ffffff; border-color: var(--azul); 
    box-shadow: 0 0 0 4px rgba(0, 70, 155, 0.15); transform: translateY(-2px); 
}


/* --- CORRECCIÓN MÓVIL CRÍTICA --- */
/* Breakpoint bajado a 900px para una mejor transición */
/* --- CORRECCIÓN MÓVIL CRÍTICA --- */
@media (max-width: 900px) {
    #auth-screen { 
        flex-direction: column; overflow-y: auto; 
        background: linear-gradient(-45deg, #f8fafc, #e2e8f0, #dbeafe, #e0e7ff); 
        background-size: 400% 400%; 
        animation: gradientShift 15s ease infinite; 
        padding: 1rem;
    }
    .auth-hero-area { display: none; /* Ocultamos el showcase pesado en móviles */ }
    .auth-form-area { 
        max-width: 100%; box-shadow: none; background: transparent; padding: 1rem; flex: none; display: block; margin: auto;
    }
    .auth-box { 
        background: rgba(255, 255, 255, 0.90); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        padding: 2.5rem 1.5rem; border-radius: 24px; border: 1px solid rgba(255,255,255,0.6);
        box-shadow: 0 25px 50px -12px rgba(0, 70, 155, 0.15); margin: auto;
    }
}

/* Botón con brillo al pasar el mouse */
.btn-ui { 
    position: relative; overflow: hidden; transition: all 0.3s ease; width: 100%; padding: 15px; 
    background: linear-gradient(135deg, var(--rojo) 0%, #b91c1c 100%); 
    color: white; border: none; border-radius: 12px; font-weight: 800; cursor: pointer; 
    font-size: 1.05rem; margin-top: 10px; box-shadow: 0 10px 15px -3px rgba(227, 11, 28, 0.3); 
}
.btn-ui::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: all 0.5s ease;
}
.btn-ui:hover::after { left: 100%; }
.btn-ui:hover { transform: translateY(-3px); box-shadow: 0 15px 25px -5px rgba(227, 11, 28, 0.4); }
.btn-ui:active { transform: scale(0.97); }

.link-ui { color: var(--azul); cursor: pointer; font-size: 0.95rem; font-weight: 800; transition: 0.2s; display: inline-block; padding: 5px; border-radius: 6px; }
.link-ui:hover { background: #e0f2fe; text-decoration: none; }

/* HEADER FIJO (STICKY TOP NAV) */
.main { flex:1; overflow-y:auto; position:relative; background: var(--bg); display:flex; flex-direction:column; }
.top-nav-bar { position:sticky; top:0; z-index:90; background:rgba(255,255,255,0.98); backdrop-filter:blur(8px); border-bottom:1px solid #e2e8f0; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; box-shadow:0 2px 10px rgba(0,0,0,0.02); }
.main-content { padding: 2rem; max-width: 1100px; margin: 0 auto; width: 100%; }
.top-left { display:flex; align-items:center; gap:15px; }
.mobile-logo { display:none; height:38px; }
.desktop-greeting { margin:0; font-size:1.5rem; color:var(--txt); }
.top-right { display:flex; align-items:center; gap:10px; }
.balance-badge { background:#dcfce7; color:#166534; padding:8px 15px; border-radius:30px; font-weight:800; border:1px solid #bbf7d0; font-size:1.05rem; display:flex; align-items:center; gap:6px; box-shadow:0 2px 5px rgba(22,101,52,0.1); cursor:pointer; transition:0.2s; }
.balance-badge:hover { background:#bbf7d0; transform:translateY(-2px); box-shadow:0 4px 8px rgba(22,101,52,0.15); }
.help-btn { background:#eff6ff; color:#00469b; padding:8px 15px; border-radius:30px; font-weight:800; border:1px solid #bfdbfe; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:6px; transition:0.2s; font-size:1rem; cursor:pointer; }
.help-btn:hover { background:#dbeafe; transform:translateY(-2px); }
.hamburger-btn { display:none; background:none; border:none; font-size:1.6rem; color:var(--azul); cursor:pointer; padding:0 5px; outline:none; }

/* MENÚ LATERAL */
.sidebar { width:260px; background:white; border-right:1px solid #e2e8f0; display:flex; flex-direction:column; z-index:100; }
.menu-item { padding:14px 18px; font-weight:600; color:#64748b; border-radius:8px; margin-bottom:8px; cursor:pointer; display:flex; align-items:center; gap:12px; transition:0.2s; font-size:1rem; }
.menu-item:hover, .menu-item.active { background:#e0f2fe; color:var(--azul); }
.mobile-drawer { position:fixed; top:0; left:-100%; width:75%; max-width:280px; height:100vh; height:100dvh; background:white; z-index:1001; transition:left 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:5px 0 25px rgba(0,0,0,0.15); display:flex; flex-direction:column; }
.mobile-drawer.open { left:0; }
.drawer-header { padding:1.5rem; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #f1f5f9; background:#f8fafc; }
.drawer-links { padding:1.5rem 1rem; display:flex; flex-direction:column; gap:8px; flex:1; overflow-y:auto; }
.drawer-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(15,23,42,0.6); z-index:1000; opacity:0; visibility:hidden; transition:0.3s ease; backdrop-filter:blur(2px); }
.drawer-overlay.open { opacity:1; visibility:visible; }

/* ESTATUS COLORES GLOBALES */
.badge { padding:6px 12px; border-radius:20px; font-size:0.75rem; font-weight:bold; letter-spacing:0.5px; display:inline-block; text-align:center; }
.badge.status-purple { background:#e0e7ff !important; color:#4338ca !important; border:1px solid #c7d2fe !important; }
.badge.status-blue { background:#dbeafe !important; color:#1d4ed8 !important; border:1px solid #bfdbfe !important; }
.badge.status-green { background:#dcfce7 !important; color:#15803d !important; border:1px solid #bbf7d0 !important; }
.badge.status-red { background:#fee2e2 !important; color:#b91c1c !important; border:1px solid #fecaca !important; }
.badge.status-orange { background:#ffedd5 !important; color:#c2410c !important; border:1px solid #fed7aa !important; }

/* SKELETON LOADERS */
@keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
.skeleton { background: #f6f7f8; background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); background-repeat: no-repeat; background-size: 800px 100%; animation: shimmer 1.5s infinite linear forwards; border-radius: 4px; }
.sk-title { height: 20px; width: 60%; margin-bottom: 10px; }
.sk-text { height: 14px; width: 100%; margin-bottom: 6px; }
.sk-btn { height: 35px; width: 100%; border-radius: 8px; }
.sk-avatar { height: 45px; width: 45px; border-radius: 50%; }

/* UTILIDADES BÁSICAS Y NUEVOS INPUTS (UXMejorado) */
.card { background:white; padding:2rem; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.02); border:1px solid #e2e8f0; margin-bottom:2rem; }
.input-ui, .select-ui { width:100%; padding:12px; margin-bottom:12px; border-radius:8px; font-size:1rem; outline:none; font-family:inherit; color:#1e293b; transition: all 0.25s ease; border: 1.5px solid #cbd5e1; background: #fdfdfd; }
.input-ui:hover, .select-ui:hover { border-color: #94a3b8; background: #f8fafc; }
.input-ui:focus, .select-ui:focus { border-color: var(--azul); background: #fff; box-shadow: 0 0 0 4px rgba(0, 70, 155, 0.08); }
.input-group { margin-bottom:1rem; position:relative; }
.input-group label { display:block; font-size:0.85rem; font-weight:700; margin-bottom:6px; color:#475569; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.req { color: var(--rojo); font-weight: 900; margin-left: 3px; }
.input-hint { display: block; font-size: 0.75rem; color: #94a3b8; margin-top: 4px; font-weight: 500;}

/* SELECTOR CON BUSCADOR (SS - SMART SELECT) */
.ss-wrapper { position: relative; width: 100%; margin-bottom: 12px; font-family: inherit; }
.ss-display { width: 100%; border-radius: 8px; cursor: pointer; display: flex; align-items: center; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; transition: 0.2s; background: #f8fafc; border: 1.5px dashed #cbd5e1; color: #475569; font-weight: 600; justify-content: center; gap: 8px; padding: 14px; }
.ss-display:hover { background: #e2e8f0; border-color: #94a3b8; color: var(--azul); }
.ss-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: white; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); z-index: 100; margin-top: 5px; display: none; overflow: hidden; }
.ss-dropdown.active { display: block; animation: fadeIn 0.2s ease; }
.ss-search-wrap { padding: 10px; border-bottom: 1px solid #f1f5f9; background: #f8fafc; }
.ss-search { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 6px; outline: none; font-size: 0.95rem; font-family: inherit; }
.ss-search:focus { border-color: var(--azul); }
.ss-list { max-height: 220px; overflow-y: auto; }
.ss-option { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #f1f5f9; font-size: 0.95rem; transition: 0.2s; display:flex; flex-direction:column; }
.ss-option:hover { background: #f1f5f9; border-left: 3px solid var(--azul); padding-left: 12px; }
.ss-option-title { font-weight: 800; color: #1e293b; display: flex; align-items: center; justify-content: space-between;}
.ss-option-sub { font-size: 0.8rem; color: #64748b; margin-top: 4px; font-weight: 600;}

/* COTIZADOR HÍBRIDO */
.cot-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.5rem; }
.cot-col { background: #f8fafc; padding: 1.5rem; border-radius: 12px; border: 1px solid #e2e8f0; }
.d-title { margin: 0 0 15px 0; color: #0f172a; display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.m-title { display: none; }
.c-label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; color: #475569; }
.c-mobile-row { display: flex; flex-direction: column; gap: 12px; }
.c-hint { font-size: 0.75rem; color: #64748b; margin-top: 5px; min-height: 14px; font-weight:600; padding-left:2px; }
.c-select-sm { padding: 4px 8px; font-size: 0.75rem; font-weight:700; border: 1px solid #cbd5e1; border-radius: 6px; background: #f1f5f9; color: var(--azul); outline: none; cursor:pointer; }
.c-input-unit { position: relative; }
.c-input-unit span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.85rem; pointer-events: none; font-weight:700; }
.c-input-unit input { padding-right: 35px; margin-bottom:0; }
.pkg-container { background: #f8fafc; padding: 1.5rem; border-radius: 12px; border: 1px solid #e2e8f0; margin-top: 1.5rem; }
.pkg-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }

/* FILTROS DE HISTORIAL */
.filter-panel { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 15px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.f-search { flex: 2; min-width: 200px; position: relative; }
.f-prov { flex: 1.5; min-width: 150px; }
.f-dates { display: flex; gap: 10px; flex: 2; min-width: 250px; }
.f-date-wrap { position: relative; flex: 1; }
.f-input { width: 100%; height: 42px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 12px; outline: none; font-size: 0.9rem; font-family: inherit; background: white; color: #1e293b; transition:0.2s; }
.f-input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0,70,155,0.1); }
.f-has-icon { padding-left: 36px; }
.f-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; font-size:0.95rem; }

/* TARJETAS DE HISTORIAL */
.h-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 15px; }
.h-card { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.2rem; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: 0.2s; }
.h-card:hover { border-color: var(--azul); box-shadow: 0 6px 15px rgba(0,0,0,0.05); transform: translateY(-2px); }
.h-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #e2e8f0; padding-bottom: 10px; }
.h-date { font-size: 0.8rem; color: #64748b; font-weight: 600; display:flex; align-items:center; gap:5px; }
.h-body { display: flex; gap: 15px; align-items: center; }
.h-logo { width: 50px; flex-shrink: 0; text-align: center; }
.h-info { flex: 1; min-width: 0; }
.h-prov { font-weight: 800; color: #0f172a; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; flex-wrap:wrap; margin-bottom:2px;}
.h-folio { background: #f1f5f9; color: #475569; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; border:1px solid #e2e8f0; }
.h-trk { font-family: monospace; font-size: 0.95rem; margin: 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-trk a { color:var(--azul); text-decoration:none; border-bottom:1px dashed var(--azul); }
.h-price { font-weight: 900; color: var(--azul); font-size: 1.1rem; margin-top:2px;}
.h-price small { font-weight: normal; color: #64748b; font-size: 0.75rem; margin-left:4px; }
.h-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; }

/* =========================================
   HOVER EFECTOS: BOTONES DE HISTORIAL
   ========================================= */
.h-btn { padding: 8px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; cursor: pointer; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; text-align:center; min-width:40px; flex: 1; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.h-btn:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); filter: brightness(1.05); }
.h-btn:active { transform: scale(0.95); }

.h-btn.pdf { background: var(--azul); color: white; }
.h-btn.pdf:hover { box-shadow: 0 6px 12px rgba(0, 70, 155, 0.25); }

.h-btn.ver { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; flex:0 auto;}
.h-btn.ver:hover { background: #e2e8f0; color: var(--azul); border-color: #cbd5e1; }

.h-btn.dup { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; flex:0 auto;}
.h-btn.dup:hover { background: #fde68a; color: #b45309; }

.h-btn.can { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; flex:0 auto;}
.h-btn.can:hover { background: #fecaca; color: #b91c1c; }

.h-btn.ent { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; width: 100%; flex: 1; } 
.h-btn.ent:hover { background: #fde68a; color: #b45309; box-shadow: 0 6px 12px rgba(217, 119, 6, 0.2); }

.h-btn.ret { background: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; flex:0 auto; }
.h-btn.ret:hover { background: #e9d5ff; color: #6b21a8; box-shadow: 0 6px 12px rgba(126, 34, 206, 0.2); }

/* RATE CARDS */
.rate-card { background:white; border:1px solid #e2e8f0; padding:1.5rem; display:flex; justify-content:space-between; align-items:center; gap:15px; border-radius:12px; transition:0.2s; }
.rate-card-left { display:flex; align-items:center; gap:20px; flex:1; }
.rate-card-right { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.rate-price { font-size:1.8rem; font-weight:800; color:var(--azul); }
.rates-container.view-list { display:flex; flex-direction:column; gap:1.2rem; }
.rates-container.view-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.btn-view { background:white; color:#64748b; border:1px solid #cbd5e1; padding:8px 14px; border-radius:8px; cursor:pointer; transition:0.2s; }
.btn-view.active { background:#e0f2fe; color:var(--azul); border-color:#bae6fd; }
.btn-select { background:white; border:2px solid var(--azul); color:var(--azul); padding:10px 24px; border-radius:8px; cursor:pointer; font-weight:800; transition:0.2s; font-size:0.95rem; }

/* BILLETERA / CONFIGURACIONES */
.movimiento-item { background:white; border:1px solid #e2e8f0; border-radius:10px; padding:1.2rem; display:flex; justify-content:space-between; align-items:center; gap:15px; box-shadow:0 2px 4px rgba(0,0,0,0.02); margin-bottom:10px;}
.mov-text-box { overflow:hidden; }
.mov-desc { font-weight:800; color:#0f172a; font-size:0.95rem; word-break: break-word; line-height: 1.2;}
.cfg-item { display:flex; justify-content:space-between; align-items:center; background:#fff; padding:12px; border:1px solid #e2e8f0; border-radius:8px; margin-bottom:8px; }
.btn-icon-edit { color:#0284c7; background:#e0f2fe; border:1px solid #bae6fd; padding:6px 12px; border-radius:6px; cursor:pointer; font-weight:bold; font-size:0.8rem; margin-right:5px; transition:0.2s; }
.btn-icon-edit:hover { background:#bae6fd; }
.cfg-item-del { color:#ef4444; background:#fef2f2; border:1px solid #fecaca; padding:6px 12px; border-radius:6px; cursor:pointer; font-weight:bold; font-size:0.8rem; transition:0.2s; }
.cfg-item-del:hover { background:#fecaca; }

/* MODALES */
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(15,23,42,0.8); z-index:2000; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); padding:1rem; }
.modal-content { background:white; width:100%; max-width:1050px; max-height:95vh; overflow-y:auto; border-radius:16px; padding:2.5rem; position:relative; box-shadow:0 25px 50px -12px rgba(0,0,0,0.25); scroll-behavior: smooth; }
.close-modal { position:absolute; top:15px; right:20px; font-size:2rem; cursor:pointer; color:#94a3b8; transition:0.2s; background:#f1f5f9; width:45px; height:45px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index: 10; }
.swal2-container { z-index: 9999 !important; }
.swal2-styled.swal2-confirm { background-color: var(--azul) !important; font-weight: bold; border-radius: 8px !important; padding:12px 24px !important; }

/* --- ACORDEÓN DEL CHECKOUT UX MEJORADO --- */
.checkout-accordion { margin-top: 1.5rem; }
.acc-item { border: none; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); border-radius: 12px; margin-bottom: 16px; background: transparent; overflow: hidden; }
.acc-header { padding: 16px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 800; color: #475569; font-size: 1.05rem; transition: 0.2s; user-select: none; background: white; border: 1px solid #e2e8f0; border-radius: 12px; }
.acc-header:hover { background: #f8fafc; }
.acc-header.active { background: #f8fafc; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: #cbd5e1; border-bottom-color: transparent; color: var(--azul); }
.acc-header .toggle-icon { transition: transform 0.3s; color: #94a3b8; }
.acc-header.active .toggle-icon { transform: rotate(180deg); color: var(--azul); }
.acc-header.completed { border-left: 5px solid #10b981; color: #1e293b; }
.acc-content { display: none; background: white; border: 1px solid #cbd5e1; border-top: none; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; padding: 25px 20px; }
.acc-content.active { display: block; animation: fadeIn 0.3s ease; }
.step-actions { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 15px; border-top: 1px dashed #cbd5e1; }

/* =========================================
   UX DE VALIDACIÓN (VERDE Y ROJO SUAVE)
   ========================================= */

/* ACIERTO: Verde Claro con Palomita */
.input-ui.is-filled, .select-ui.is-filled, .auth-input-group input.is-filled {
    border-color: #10b981 !important;
    background-color: #f0fdf4 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%2310b981"><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px !important;
    color: #064e3b;
}

/* ERROR: Rojo Suave con Cruz */
.input-ui.is-invalid, .select-ui.is-invalid, .auth-input-group input.is-invalid {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23ef4444"><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px !important;
    color: #991b1b;
}

/* Ajuste para el input del SAT (para no encimarse con la lupa) */
#input_sat.is-filled, #input_sat.is-invalid {
    background-position: right 40px center !important;
    padding-right: 65px !important;
}

/* =========================================
   UX DE VALIDACIÓN: ESTADO CARGANDO (CÓDIGO POSTAL)
   ========================================= */
.input-ui.is-loading, .select-ui.is-loading {
    border-color: #cbd5e1 !important;
    background-color: #f8fafc !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2394a3b8"><circle cx="25" cy="25" r="16" fill="none" stroke-width="4" stroke-dasharray="25 25" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"/></circle></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px !important;
    color: #475569;
}

/* =========================================
   CORRECCIÓN: EVITAR QUE EL ÍCONO PISE "CM" O "KG"
   ========================================= */
.c-input-unit input.is-filled, 
.c-input-unit input.is-invalid {
    background-position: right 40px center !important;
    padding-right: 65px !important;
}

/* =========================================
   REDISEÑO: MODAL "VER DETALLES" (EL OJITO)
   ========================================= */
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; border-bottom: 2px solid #f1f5f9; padding-bottom: 1.5rem; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 768px) { .detail-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.detail-section { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; }
.detail-label { font-size: 0.85rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; border-bottom: 1px dashed #cbd5e1; padding-bottom: 8px; }

/* Iconos e información de las direcciones */
.detail-info { display: flex; flex-direction: column; gap: 10px; }
.detail-icon-text { 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
    font-size: 0.95rem; 
    color: #334155; 
    line-height: 1.4; 
    /* Las dos líneas mágicas para que el texto largo baje en lugar de salirse */
    word-break: break-word; 
    overflow-wrap: anywhere; 
}
.detail-icon-text i { margin-top: 3px; color: #94a3b8; width: 16px; text-align: center; }
.detail-icon-text strong { color: #0f172a; }

/* Rejilla moderna para el paquete */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 15px; margin-top: 15px; }
.pkg-card { background: white; border: 1px solid #cbd5e1; border-radius: 10px; padding: 15px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.pkg-val { font-size: 1.15rem; font-weight: 900; color: var(--azul); margin-bottom: 6px; }
.pkg-lbl { font-size: 0.75rem; font-weight: 800; color: #64748b; text-transform: uppercase; }

/* =========================================
   DISEÑO DE BADGES (TIPO ESQUINA) Y TARJETAS
   ========================================= */
.rate-card {
    position: relative; 
    border: 2px solid #e2e8f0; 
}

.rate-badge-container {
    position: absolute;
    top: -2px; 
    left: -2px;
    z-index: 10;
}

.badge-corner {
    padding: 5px 14px;
    font-size: 0.75rem;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top-left-radius: 12px; 
    border-bottom-right-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
}

/* --- VARIANTE: MÁS ECONÓMICO (VERDE) --- */
.card-price-highlight {
    border: 2px solid #10b981 !important;
    padding-top: 2.2rem !important; 
    background: #fcfdfd !important;
}
.badge-price { background: #10b981; }

/* --- VARIANTE: MÁS RÁPIDO (AZUL) --- */
.card-time-highlight {
    border: 2px solid #3b82f6 !important;
    padding-top: 2.2rem !important;
    background: #f8fafc !important;
}
.badge-time { background: #3b82f6; }

/* Letritas de MXN del precio */
.rate-price-currency {
    color: #94a3b8;
    font-size: 1.1rem;
    font-weight: 800;
    margin-right: 6px;
    vertical-align: baseline;
}

/* =========================================
   EFECTOS HOVER Y BRILLOS (COTIZADOR Y BADGES)
   ========================================= */
/* 1. Elevación en las secciones del Cotizador */
.cot-col, .pkg-container {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cot-col:hover, .pkg-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px -8px rgba(0, 70, 155, 0.15);
    border-color: #bae6fd;
}

/* 2. Hover más pronunciado en las Tarjetas de Tarifas */
.rate-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rate-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.1);
}

/* 3. Animación de "Destello de Luz" para los Badges (CORREGIDA) */
@keyframes destelloLuz {
    0% { left: -50px; opacity: 0; }
    2% { opacity: 1; }
    18% { left: 120%; opacity: 1; }
    19% { left: 120%; opacity: 0; } /* Se vuelve invisible inmediatamente al salir */
    100% { left: 120%; opacity: 0; } /* Se mantiene invisible el resto de la espera */
}

.badge-corner, .badge-seguro {
    position: relative;
    overflow: hidden;
}

/* Propiedades del rayo de luz unificadas */
.badge-corner::before, .badge-seguro::before {
    content: '';
    position: absolute;
    top: 0; 
    left: -50px; /* Inicia fuera de la pantalla a la izquierda */
    width: 30px; 
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    transform: skewX(-20deg);
    animation: destelloLuz 4s infinite linear;
}

/* El seguro brilla a destiempo para que no brillen todos a la vez */
.badge-seguro::before {
    animation-delay: 7s;
}

/* =========================================
   ADAPTACIÓN RESPONSIVA (MOBILE FIRST)
   ========================================= */
@media(max-width:850px){ 
    .sidebar { display:none; } 
    .top-nav-bar { padding:12px 15px; border-bottom:1px solid #e2e8f0; }
    .main-content { padding: 1rem; padding-bottom: 4rem; }
    .card { padding: 1.2rem; }
    .top-left { flex:1; gap:0; }
    .desktop-greeting { display:none; }
    .mobile-logo { display:block; }
    .hamburger-btn { display:block; margin-left:5px; }
    .top-right { flex:0 0 auto; gap:8px; justify-content:flex-end; }
    .balance-badge { font-size:0.9rem; padding:6px 12px; }
    .balance-text { display:none; } 
    .help-btn { padding:0; width:35px; height:35px; border-radius:50%; font-size:1.1rem; }
    .help-text { display:none; }
    
    .grid-2 { grid-template-columns: 1fr; }
    .cot-wrapper { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 1rem; }
    .cot-col { background: transparent; padding: 0; border: none; }
    .c-label, .d-select { display: none; }
    .d-title { display: flex; font-size: 1.05rem; margin-bottom: 12px; }
    .m-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.9rem; font-weight: 800; color: #0f172a; }
    .c-mobile-row { flex-direction: row; align-items: center; gap: 10px; }
    .cp-wrap { width: 90px; flex: none; }
    .col-wrap { flex: 1; min-width: 0; }
    
    .pkg-container { background: transparent; padding: 0; border: none; margin-top: 1.5rem; border-top: 1px dashed #e2e8f0; padding-top: 1.5rem; }
    .pkg-wrapper { grid-template-columns: 1fr 1fr; gap: 12px; }
    
    .filter-panel { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px; }
    .f-search, .f-prov, .f-dates { min-width: 100%; width: 100%; flex: none; }
    /* Cambiamos a columna para que ocupen todo el ancho y no se desborden */
    .f-dates { display: flex; flex-direction: column; gap: 12px; }

    .rate-card { flex-direction:column; align-items:flex-start; gap:15px; padding:1.2rem;}
    .rate-card-right { width:100%; flex-direction:row; justify-content:space-between; align-items:center; border-top:1px dashed #e2e8f0; padding-top:15px; }
    .rates-container.view-grid { grid-template-columns:1fr; }
    #rates-controls { flex-direction:column; align-items:flex-start; gap:15px; }
    
    /* MODAL MOVILES */
    .modal-content { padding: 1.5rem; padding-bottom: 3rem; } 
    #envio-summary > div { width:100%; text-align:left !important; border-bottom:1px solid #e2e8f0; padding-bottom:10px; }
    .acc-header { padding: 14px 15px; font-size: 1rem; }
    .acc-content { padding: 15px 12px; }
    .step-actions { flex-direction: column-reverse; gap: 10px; }
    .step-actions .btn-ui { width: 100% !important; text-align: center; }
    
    .movimiento-item { padding: 1rem; gap: 10px; }
    .mov-desc { font-size: 0.85rem; line-height: 1.2; }
    .movimiento-item .fas { font-size: 1rem; }
    .movimiento-item > div:first-child > div:first-child { width: 35px; height: 35px; min-width: 35px; }
    .movimiento-item > div:last-child > div:first-child { font-size: 1rem !important; }
    
    /* =========================================
   AJUSTES SWEETALERT2 (MODERNO Y RESPONSIVO)
   ========================================= */
    /* Estilo base más moderno para PC y Móvil */
    .swal2-popup {
        border-radius: 20px !important;
        padding: 2rem 1.5rem !important;
        box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important;
    }

    /* Ajustes específicos para los controles del cotizador (Móvil) */
    #rates-controls { 
        flex-direction: column; 
        align-items: stretch !important; 
        gap: 15px; 
    }
    
    #rates-controls > div:first-child { 
        display: flex !important; 
        flex-direction: column; 
        align-items: stretch !important; 
        width: 100%; 
        gap: 8px; 
    }
    
    #sort-rates { width: 100% !important; margin: 0 !important; }
    
    /* Ocultar los botones de vista lista/cuadrícula en celular */
    #rates-controls > div:last-child { 
        display: none !important; 
    }
}

@media(max-width: 600px) {
    .swal2-popup {
        width: 92% !important; 
        padding: 1.5rem 1rem !important;
    }
    .swal2-title {
        font-size: 1.3rem !important;
    }
    .swal2-html-container {
        margin: 1em 0 0.5em !important;
        font-size: 0.95rem !important;
    }
    /* En móviles, los botones de confirmación y cancelación se apilan uno sobre otro */
    .swal2-actions {
        flex-direction: column-reverse; /* El botón principal queda arriba */
        gap: 10px;
        width: 100%;
        margin-top: 1.5rem !important;
    }
    .swal2-styled {
        width: 100% !important;
        margin: 0 !important;
        padding: 14px !important;
        font-size: 1.05rem !important;
    }
}

/* =========================================
   ESTILOS DEL TOUR DE BIENVENIDA (INTRO.JS) - CORREGIDOS
   ========================================= */
.introjs-tooltip {
    border-radius: 16px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
    color: #1e293b !important;
    min-width: 320px;
    /* (Se eliminó el font-family: inherit para no romper FontAwesome) */
}

.introjs-tooltip-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 20px 0 20px !important;
    font-family: 'Segoe UI', sans-serif !important;
}

.introjs-tooltiptext {
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 15px 20px !important;
    font-family: 'Segoe UI', sans-serif !important;
}

/* Contenedor de botones (Atrás / Siguiente) */
.introjs-tooltipbuttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 10px 20px 20px 20px !important;
    gap: 10px;
    border-top: none !important;
}

/* Botones Atrás / Siguiente / Listo */
.introjs-button {
    border-radius: 8px !important;
    text-shadow: none !important;
    background-image: none !important; 
    font-weight: 700 !important;
    padding: 10px 18px !important;
    cursor: pointer;
    transition: 0.2s;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    background-color: #f8fafc !important;
    font-family: 'Segoe UI', sans-serif !important;
}
.introjs-button:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Apagar ABSOLUTAMENTE TODOS los iconos por defecto de intro.js (adiós cuadros tofu) */
.introjs-button::before, 
.introjs-button::after,
.introjs-skipbutton::before, 
.introjs-skipbutton::after {
    display: none !important;
    content: "" !important;
}

/* Botón Siguiente / Listo (Azul principal) */
.introjs-nextbutton, .introjs-donebutton {
    background-color: var(--azul) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 6px rgba(0, 70, 155, 0.2) !important;
}
.introjs-nextbutton:hover, .introjs-donebutton:hover {
    background-color: #00337a !important;
    color: white !important;
}

/* Botón Omitir (Arriba a la derecha como un botón de Cerrar 'X' nativo) */
.introjs-skipbutton {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    color: #94a3b8 !important;
    background: #f1f5f9 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
    transition: 0.2s;
}
.introjs-skipbutton:hover {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

/* Progress bar */
.introjs-progress {
    background-color: #e2e8f0 !important;
    border-radius: 4px;
    margin: 0 20px 20px 20px !important;
}
.introjs-progressbar {
    background-color: #10b981 !important; /* Verde éxito */
}
/* =========================================
   FIX DEFINITIVO: ÍCONOS FONTAWESOME EN INTRO.JS
   ========================================= */

/* 1. Forzar a que Intro.js respete los íconos de FontAwesome */
.introjs-tooltip i, 
.introjs-tooltip i.fas, 
.introjs-tooltip i.far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
}

/* 2. Truco para ocultar la palabra "Omitir" si el navegador la guardó en caché */
.introjs-skipbutton {
    font-size: 0 !important; /* Esconde las letras */
    color: transparent !important; 
}

/* 3. Devolverle el tamaño y color ÚNICAMENTE a la "X" */
.introjs-skipbutton i {
    font-size: 1.2rem !important; 
    color: #94a3b8 !important;
    transition: 0.2s;
}

.introjs-skipbutton:hover i {
    color: #ef4444 !important; /* La X se pone roja al pasar el mouse */
}

/* =========================================
   ESTILOS DEL DASHBOARD (ANALÍTICAS)
   ========================================= */
.dash-cards-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 15px; 
    margin-bottom: 25px; 
}
.dash-card { 
    background: white; 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    padding: 15px; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.02); 
    transition: 0.2s; 
}
.dash-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 15px rgba(0,0,0,0.05); 
    border-color: #cbd5e1; 
}
.dash-icon { 
    width: 52px; 
    height: 52px; 
    border-radius: 12px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.6rem; 
    flex-shrink: 0; 
}
.dash-info { flex: 1; }
.dash-val { 
    font-size: 1.5rem; 
    font-weight: 900; 
    color: #0f172a; 
    line-height: 1.1; 
}
.dash-lbl { 
    font-size: 0.75rem; 
    color: #64748b; 
    font-weight: 700; 
    text-transform: uppercase; 
    margin-top: 4px; 
}
.dash-charts-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: 20px; 
}
@media(max-width: 850px) { 
    .dash-charts-grid { grid-template-columns: 1fr; } 
}