/* =========================================
   1. RESETEO Y CONFIGURACIÓN BASE (FORCE FIX)
   ========================================= */
html {
    /* Forzamos el tamaño al 80% (aprox 12.8px) y usamos !important 
       para ganar a dashboard.css. Esto arregla el efecto "GIGANTE".
    */
    font-size: 80% !important; 
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1rem; 
    line-height: 1.5;
    background-color: #f8fafc;
    color: #1e293b;

    /* === FIX DE SCROLL Y ZOOM === */
    overflow-y: auto !important; 
    height: auto !important; 
    min-height: 100vh;
    
    /* Aseguramos que no haya zooms extraños heredados */
    zoom: 1 !important;
    transform: none !important;
}

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

/* =========================================
   2. FIX WIDGET DE TIEMPO / CLIMA (NUEVO)
   ========================================= */
/* Atrapamos cualquier contenedor que parezca del clima para
   quitarle la sombra y ponerle letras oscuras */
[class*="weather"], 
[class*="clima"], 
.widget-weather,
.weather-card {
    text-shadow: none !important;
    color: #334155 !important; /* Gris Oscuro (Slate 700) */
}

/* Aplicamos lo mismo a todos los hijos (textos, temperaturas, etc.) */
[class*="weather"] *, 
[class*="clima"] *, 
.widget-weather *,
.weather-card * {
    text-shadow: none !important;
    color: #334155 !important;
    fill: #334155 !important; /* Para iconos SVG si los hay */
}

/* =========================================
   3. CORRECCIÓN DE ICONOS SWEETALERT (CRÍTICO)
   ========================================= */
/* Arregla que la X o el Check se vean rotos o cortados */
.swal2-icon, 
.swal2-icon div, 
.swal2-icon span,
.swal2-icon::before,
.swal2-icon::after {
    box-sizing: content-box !important;
}

/* =========================================
   4. VARIABLES GLOBALES (TEMA CYGNUS)
   ========================================= */
:root {
    --primary: #2563EB;        /* Azul Royal */
    --primary-dark: #1E40AF;   /* Azul Oscuro */
    --secondary: #64748B;      /* Gris Acero */
    --success: #10B981;        /* Verde Éxito */
    --danger: #EF4444;         /* Rojo Error */
    --warning: #F59E0B;        /* Amarillo Alerta */
    --dark: #0F172A;           /* Negro Azulado */
    --light: #F1F5F9;          /* Blanco Humo */
    --radius: 12px;            /* Redondeo estándar */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* =========================================
   5. TOGGLES / SWITCHES (Estilo iOS)
   ========================================= */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    vertical-align: middle;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(24px); }
input:focus + .slider { box-shadow: 0 0 1px var(--primary); }

.switch.switch-sm { width: 36px; height: 20px; }
.switch.switch-sm .slider:before { height: 16px; width: 16px; left: 2px; bottom: 2px; }
.switch.switch-sm input:checked + .slider:before { transform: translateX(16px); }

/* =========================================
   6. SWEET ALERT 2 (ESTILOS GENERALES)
   ========================================= */
div:where(.swal2-container) div:where(.swal2-popup) {
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: 20px !important;
    padding: 2em !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    font-family: 'Inter', sans-serif !important;
}

div:where(.swal2-container) .swal2-title {
    color: var(--dark) !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
}

div:where(.swal2-container) .swal2-html-container {
    color: var(--secondary) !important;
    font-size: 1rem !important;
}

div:where(.swal2-container) .swal2-confirm {
    background-color: var(--primary) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
    transition: transform 0.2s !important;
}
div:where(.swal2-container) .swal2-confirm:hover {
    background-color: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
}

div:where(.swal2-container) .swal2-cancel {
    background-color: #f1f5f9 !important;
    color: var(--secondary) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
}
div:where(.swal2-container) .swal2-cancel:hover {
    background-color: #e2e8f0 !important;
    color: var(--dark) !important;
}

.swal2-icon { transform: scale(0.9); margin-top: 20px !important; }

/* =========================================
   7. SWEET ALERT TOASTS (MINIATURAS)
   ========================================= */
body.swal2-toast-shown .swal2-container.swal2-top-end {
    width: auto !important; right: 10px !important; top: 10px !important;
}

div:where(.swal2-container) .swal2-popup.swal2-toast {
    width: auto !important; max-width: 320px !important;
    padding: 10px 15px !important; font-size: 0.85rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
}

div:where(.swal2-container) .swal2-title {
    font-size: 0.95rem !important; margin: 0 !important; font-weight: 700 !important;
}

div:where(.swal2-container) .swal2-icon {
    width: 24px !important; height: 24px !important;
    margin: 0 !important; border-width: 2px !important;
}

/* =========================================
   8. CLASES DE UTILIDAD Y PARCHES EXTRA
   ========================================= */
.text-primary { color: var(--primary) !important; }
.text-danger { color: var(--danger) !important; }
.bg-white { background-color: white !important; }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.6rem 1.2rem; border-radius: var(--radius);
    font-weight: 600; cursor: pointer; transition: all 0.2s;
    border: none; gap: 8px; font-size: 1rem;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; height: auto; }

/* Scrollbar Global Mejorado */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

/* === PARCHE FINAL DE EMERGENCIA === */
.sales-container, .dashboard-container, .main-content {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
}
/* =========================================
   STYLE.CSS - GLOBAL UTILITIES & PATCHES
   ========================================= */

/* 1. REFUERZO DE ZOOM Y SCROLL */
html {
    font-size: 80% !important; 
    scroll-behavior: smooth;
    overflow-y: auto !important; /* Asegura scroll en móviles/tablets */
}

body {
    overflow-y: auto !important; 
    background-color: #f8fafc !important; /* Fuerza fondo claro */
}

/* 2. SWEETALERT 2 FIX (ICONOS ROTOS) */
.swal2-icon, 
.swal2-icon div, 
.swal2-icon span,
.swal2-icon::before,
.swal2-icon::after {
    box-sizing: content-box !important;
}

/* 3. WIDGET CLIMA (RESPALDO GLOBAL) */
[class*="weather"], .widget-weather {
    text-shadow: none !important;
    color: #334155 !important;
}
[class*="weather"] svg, .widget-weather svg {
    filter: drop-shadow(0 0 0 transparent) !important;
    color: #334155 !important;
}

/* 4. UTILDADES GLOBALES */
.text-primary { color: #2563EB !important; }
.text-danger { color: #EF4444 !important; }
.bg-white { background-color: white !important; }

/* Scrollbar Bonita Global */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }
/* =========================================
   FIX SWEETALERT 2 (Arreglo de Iconos Rotos)
   ========================================= */

/* 1. Arregla la geometría (Evita que se vean cortados o separados) */
.swal2-icon,
.swal2-icon div,
.swal2-icon span,
.swal2-icon::before,
.swal2-icon::after {
    box-sizing: content-box !important;
}

/* 2. Modernización de Estilos (Para que no se vean "feos") */

/* Fondo y bordes más limpios */
div:where(.swal2-container) div:where(.swal2-popup) {
    border-radius: 24px !important;
    padding: 2rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* Títulos y Textos */
div:where(.swal2-container) .swal2-title {
    color: #1e293b !important; /* Gris oscuro elegante */
    font-size: 1.5rem !important;
    font-weight: 800 !important;
}

div:where(.swal2-container) .swal2-html-container {
    color: #64748b !important; /* Gris suave */
    font-size: 1rem !important;
}

/* Botón de Confirmar (Azul Cygnus) */
div:where(.swal2-container) .swal2-confirm {
    background-color: #2563EB !important; /* Tu color primario */
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
}

/* Botón de Cancelar (Gris suave) */
div:where(.swal2-container) .swal2-cancel {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
}

/* Ajuste de colores de los Iconos para que sean menos "chillones" */
.swal2-icon.swal2-success { border-color: #10b981 !important; color: #10b981 !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #10b981 !important; }
.swal2-icon.swal2-success .swal2-success-ring { border: .25em solid rgba(16, 185, 129, .2) !important; }

.swal2-icon.swal2-error { border-color: #ef4444 !important; color: #ef4444 !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: #ef4444 !important; }

.swal2-icon.swal2-info { border-color: #3b82f6 !important; color: #3b82f6 !important; }
.swal2-icon.swal2-info .swal2-info-content { color: #3b82f6 !important; }