/* css/styles.css - PWA Native iOS & Android Engine */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    /* Mapeo de áreas seguras para iPhone 15 Pro Max (Dynamic Island & Home Indicator) */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

* {
    /* Prevenir resaltado azul al tocar botones en pantallas táctiles */
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #0f172a; /* Color coincidente con la barra de estado iOS */
    color: #0f172a;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    height: -webkit-fill-available; /* Ajuste especial para Safari iOS */
    overflow: hidden;
    
    /* Comportamiento de App Nativa */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    overscroll-behavior-y: none; /* Bloquea el rebote Web de iOS */
}

/* Permitir selección de texto exclusivamente en campos de entrada */
input, textarea, select, [contenteditable="true"] {
    user-select: text !important;
    -webkit-user-select: text !important;
    touch-action: manipulation;
}

/* Ajuste de Contenedor Principal respetando las Safe Areas de iOS */
body > main, body > div#globalLoader {
    padding-top: var(--sat);
    padding-bottom: var(--sab);
    padding-left: var(--sal);
    padding-right: var(--sar);
}

/* Scrollbars finos para táctiles */
::-webkit-scrollbar { 
    width: 4px; 
    height: 4px; 
}
::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 10px; 
}
::-webkit-scrollbar-track { 
    background: transparent; 
}

/* Animaciones fluídas de UI */
.fade-in { 
    animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}
.slide-up { 
    animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
    opacity: 0; 
}
.slide-down { 
    animation: slideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Glassmorphism para modales nativos */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Feedback táctil nativo para botones al presionar (Active State) */
button:active, .cursor-pointer:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* Optimización para Tabletas / iPad (Grid responsivo adaptativo) */
@media (min-width: 768px) and (max-width: 1024px) {
    .tablet-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tablet-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tablet-p-4 { padding: 1rem; }
}
/* ==========================================
   ANIMACIÓN FLUIDA HOVER MENÚ LATERAL (DESKTOP)
   ========================================== */
@media (min-width: 768px) {
    /* Estado Normal (Contraído) */
    nav.group {
        width: 5rem !important; /* 80px */
        transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    /* Estado al Pasar el MOUSE (Desplegado) */
    nav.group:hover {
        width: 16rem !important; /* 256px */
    }

    /* Ocultar / Mostrar los textos suavemente */
    nav.group .nav-label {
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        visibility: hidden;
    }

    nav.group:hover .nav-label {
        opacity: 1;
        visibility: visible;
    }
}
/* ==========================================
   FIX PWA: SAFE AREAS, TABS Y NAVEGACIÓN
   ========================================== */

/* 1. SEPARACIÓN DE BARRA DE ESTADO iPHONE (Dynamic Island Fix) */
body > main {
    padding-top: calc(env(safe-area-inset-top, 0px) + 2.5rem) !important;
}

/* En el catálogo público (index.html), bajar el header */
header.sticky {
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem) !important;
}

/* 2. ESPACIADO DE BARRA INFERIOR MÓVIL (Home Indicator) */
nav {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem) !important;
}

/* 2. ESPACIADO DE BARRA INFERIOR MÓVIL (Home Indicator) */
nav.fixed.bottom-0, 
nav {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem) !important;
}

/* 3. FIX DE EMPALME DE PESTAÑAS (Tab Buttons) */
.tab-btn, 
.rep-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    min-height: 42px !important;
}

/* Scroll Horizontal limpio para pestañas sin que se monten texto sobre texto */
#tabsContainer, 
.flex.overflow-x-auto {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0.25rem !important;
}

/* 4. INDICADOR VISUAL DE PÁGINA ACTIVA EN MENÚ MÓVIL */
.active-nav-item {
    position: relative;
}

.active-nav-item::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 6px #ffffff;
}

@media (min-width: 768px) {
    .active-nav-item::after {
        display: none; /* En escritorio el fondo rojo es suficiente */
    }
}
/* ==========================================
   REDISEÑO UI: MENÚ FUNDIDO (INVERTED BORDER RADIUS)
   ========================================== */
@media (min-width: 768px) {
    /* Quitar el padding derecho del menú para que toque el fondo principal */
    nav.group {
        padding-right: 0 !important;
    }
    
    /* El botón inactivo se mantiene normal pero separado del borde */
    .nav-item-inactive {
        margin-right: 1rem !important;
        border-radius: 0.75rem !important;
    }

    /* El botón ACTIVO: Fondo claro, texto oscuro, esquinas redondas solo a la izq. */
    .nav-item-active {
        background-color: #f8fafc !important; /* bg-slate-50 (Mismo color que el fondo de tu app) */
        color: #0f172a !important; /* text-slate-900 (Tu color corporativo) */
        border-radius: 9999px 0 0 9999px !important; /* Efecto píldora a la izquierda */
        position: relative;
        margin-right: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* CURVA SUPERIOR INVERTIDA */
    .nav-item-active::before {
        content: '';
        position: absolute;
        top: -20px;
        right: 0;
        width: 20px;
        height: 20px;
        background-color: transparent;
        border-bottom-right-radius: 20px;
        box-shadow: 10px 10px 0 10px #f8fafc; /* Rellena el hueco con el color del fondo */
        pointer-events: none;
    }

    /* CURVA INFERIOR INVERTIDA */
    .nav-item-active::after {
        content: '';
        position: absolute;
        bottom: -20px;
        right: 0;
        width: 20px;
        height: 20px;
        background-color: transparent;
        border-top-right-radius: 20px;
        box-shadow: 10px -10px 0 10px #f8fafc; /* Rellena el hueco con el color del fondo */
        pointer-events: none;
    }
}

/* Diseño del botón activo en celulares (Píldora flotante) */
@media (max-width: 767px) {
    .nav-item-active {
        background-color: #ffffff !important;
        color: #0f172a !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        border-radius: 12px;
        transform: scale(1.05);
    }
}

/* ==========================================
   REDISEÑO UI: TABLAS "FLOTANTES" (Efecto Hover 3D)
   ========================================== */
tbody tr {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
    tbody tr:hover td {
        background-color: #ffffff !important;
        cursor: pointer;
    }
    
    /* Redondear las esquinas de la fila cuando se le pasa el mouse */
    tbody tr:hover td:first-child {
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
    }
    
    tbody tr:hover td:last-child {
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    /* Efecto de levitación con sombra suave (Como en la foto) */
    tbody tr:hover {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
        transform: translateY(-2px) scale(1.005);
        position: relative;
        z-index: 10;
    }
}
/* ==========================================
   REDISEÑO UI: MODERNIZACIÓN PREMIUM GLOBAL (Cero Impacto Estructural)
   ========================================== */

/* 1. Sombras más suaves, multicapa y profundas (Estilo Enterprise) */
.shadow-sm { box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05) !important; }
.shadow-md { box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08) !important; }
.shadow-lg { box-shadow: 0 10px 25px -3px rgba(15, 23, 42, 0.1) !important; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15) !important; }
.shadow-\[0_-4px_10px_rgba\(0\,0\,0\,0\.1\)\] { box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06) !important; }
/* 2. Botones Primarios: Gradientes sutiles y Brillo exterior (Glow) */
button.bg-blue-600, a.bg-blue-600 {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.25) !important;
    border: 1px solid rgba(255,255,255,0.1);
}
button.bg-blue-600:hover, a.bg-blue-600:hover { box-shadow: 0 6px 20px 0 rgba(37, 99, 235, 0.4) !important; transform: translateY(-1px); }

button.bg-red-600, a.bg-red-600 {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    box-shadow: 0 4px 14px 0 rgba(220, 38, 38, 0.25) !important;
    border: 1px solid rgba(255,255,255,0.1);
}
button.bg-red-600:hover, a.bg-red-600:hover { box-shadow: 0 6px 20px 0 rgba(220, 38, 38, 0.4) !important; transform: translateY(-1px); }

button.bg-emerald-600, a.bg-emerald-600 {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
    box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.25) !important;
    border: 1px solid rgba(255,255,255,0.1);
}
button.bg-emerald-600:hover, a.bg-emerald-600:hover { box-shadow: 0 6px 20px 0 rgba(16, 185, 129, 0.4) !important; transform: translateY(-1px); }

button.bg-amber-500, a.bg-amber-500 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.25) !important;
    border: 1px solid rgba(255,255,255,0.1);
}
button.bg-amber-500:hover, a.bg-amber-500:hover { box-shadow: 0 6px 20px 0 rgba(245, 158, 11, 0.4) !important; transform: translateY(-1px); }

button.bg-slate-900, a.bg-slate-900 {
    background: linear-gradient(135deg, #1e293b 0%, #020617 100%) !important;
    box-shadow: 0 4px 14px 0 rgba(15, 23, 42, 0.3) !important;
    border: 1px solid rgba(255,255,255,0.05);
}
button.bg-slate-900:hover, a.bg-slate-900:hover { box-shadow: 0 6px 20px 0 rgba(15, 23, 42, 0.5) !important; transform: translateY(-1px); }

/* 3. Inputs y Selects: Transiciones suaves y Focus Magnético */
input, select, textarea {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
input:focus, select:focus, textarea:focus {
    box-shadow: 0 8px 16px -4px rgba(59, 130, 246, 0.15) !important;
    transform: translateY(-2px);
    border-color: #3b82f6 !important;
}

/* 4. Cabeceras de Tablas (Glassmorphism Sticky) */
thead.bg-slate-50, thead.bg-white, thead.bg-slate-100 {
    background-color: rgba(248, 250, 252, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
thead tr {
    box-shadow: 0 2px 4px -2px rgba(0,0,0,0.05) !important;
}

/* 5. Micro-animaciones en iconos al pasar el mouse sobre botones */
button i[data-lucide], a i[data-lucide] {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
button:hover i[data-lucide], a:hover i[data-lucide] {
    transform: scale(1.15);
}

/* 6. Modales más elegantes (Fondo más difuminado y bordes finos) */
.backdrop-blur-sm {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background-color: rgba(15, 23, 42, 0.5) !important;
}
/* ==========================================
   REDISEÑO UI: DETALLES DE ALTA GAMA (APPLE & STRIPE STYLE)
   ========================================== */

/* 1. Interruptores estilo iOS (Transforma los checkboxes de ITBIS) */
input[type="checkbox"][id$="ItbisToggle"] {
    -webkit-appearance: none;
    appearance: none;
    width: 44px !important;
    height: 24px !important;
    background-color: #cbd5e1; /* slate-300 */
    border-radius: 9999px;
    position: relative;
    transition: background-color 0.3s ease;
    outline: none;
    border: none;
    margin: 0;
}
input[type="checkbox"][id$="ItbisToggle"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
input[type="checkbox"][id$="ItbisToggle"]:checked {
    background-color: #10b981; /* Verde por defecto */
}
input[type="checkbox"][id="posItbisToggle"]:checked {
    background-color: #dc2626 !important; /* Rojo para POS */
}
input[type="checkbox"][id="cotItbisToggle"]:checked {
    background-color: #2563eb !important; /* Azul para Cotizaciones */
}
input[type="checkbox"][id$="ItbisToggle"]:checked::after {
    transform: translateX(20px);
}

/* 2. Scrollbars estilo macOS (Delicadas y Reactivas) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3); /* slate-400 transparente */
    border-radius: 10px;
    transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.8); /* Oscurece al pasar el mouse */
}

/* 3. Rim Light (Luz de borde interna para dar volumen 3D a modales y tarjetas) */
.bg-white.rounded-\[32px\], .bg-white.rounded-3xl, .bg-white.rounded-2xl {
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.9) !important;
}

/* 4. Efecto de "Brillo Dinámico" (Shimmer) en las etiquetas / badges */
.bg-emerald-100, .bg-blue-100, .bg-amber-100, .bg-red-100 {
    position: relative;
    overflow: hidden;
}
.bg-emerald-100::after, .bg-blue-100::after, .bg-amber-100::after, .bg-red-100::after {
    content: '';
    position: absolute;
    top: 0; 
    left: -100%; 
    width: 50%; 
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    animation: badgeShine 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes badgeShine {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}
/* ==========================================
   REDISEÑO UI: MICRO-INTERACCIONES Y PULIDO FINAL (APPLE & STRIPE STYLE)
   ========================================== */

/* 1. Custom Checkboxes (Tablas CxC, CxP, Historial) */
input[type="checkbox"]:not([id$="ItbisToggle"]) {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem !important; /* 20px */
    height: 1.25rem !important; /* 20px */
    border: 2px solid #cbd5e1;
    border-radius: 0.375rem;
    background-color: #f8fafc;
    position: relative;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    margin: 0;
}
input[type="checkbox"]:not([id$="ItbisToggle"]):hover {
    border-color: #ef4444; /* Borde rojo al pasar el mouse */
}
input[type="checkbox"]:not([id$="ItbisToggle"]):checked {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
}
input[type="checkbox"]:not([id$="ItbisToggle"]):checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    animation: checkAnim 0.2s forwards;
}
@keyframes checkAnim {
    0% { height: 0; }
    100% { height: 10px; }
}

/* 2. Custom Selects (Flechitas minimalistas para todos los menús desplegables) */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1em !important;
    padding-right: 2rem !important;
}

/* 3. Animación "Spring" para los Modales (Efecto rebote iOS) */
@keyframes modalSpring {
    0% { opacity: 0; transform: scale(0.95) translateY(20px); }
    60% { transform: scale(1.02) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.fixed .relative.bg-white {
    animation: modalSpring 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

/* 4. Tarjetas KPI (Reportes y Gastos) - Efecto Luz Diagonal (Sweep Shine) */
.rep-content .bg-white.rounded-2xl, 
.grid-cols-2 .bg-white.rounded-2xl {
    position: relative;
    overflow: hidden;
}
.rep-content .bg-white.rounded-2xl::before, 
.grid-cols-2 .bg-white.rounded-2xl::before {
    content: '';
    position: absolute;
    top: 0; left: -150%; width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 10;
}
.rep-content .bg-white.rounded-2xl:hover::before, 
.grid-cols-2 .bg-white.rounded-2xl:hover::before {
    left: 150%;
}

/* 5. Menú Lateral Limpio (Ocultar Scrollbar manteniendo el scroll) */
nav.group {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
nav.group::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* 6. Efecto Pulso en área de "Arrastrar Foto" */
.border-dashed:hover {
    background-color: rgba(59, 130, 246, 0.05); /* blue-50 sutil */
    border-color: #3b82f6 !important;
}
/* ==========================================
   🌟 ACTUALIZACIÓN UI: LAVADO DE CARA (SOFT & FRIENDLY)
   ========================================== */

/* 1. Inputs y Selects: Estilo Nube (Gris suave que se ilumina al tocar) */
input:not([type="checkbox"]), select, textarea {
    background-color: #f8fafc !important; 
    border: 2px solid transparent !important;
    border-radius: 12px !important; /* Redondeado más natural y proporcionado */
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.02) !important; 
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Forzar que las opciones del menú desplegable se vean más limpias y claras */
select option {
    background-color: #ffffff;
    color: #0f172a;
    font-weight: 600;
    padding: 12px;
}
input:not([type="checkbox"]):focus, select:focus, textarea:focus {
    background-color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12), 0 6px 15px rgba(15, 23, 42, 0.05) !important; /* Anillo brillante y elevación */
    transform: translateY(-2px);
}

/* 2. Botones de Acción: Más gorditos y "apretables" con efecto elástico */
button, a[class*="bg-"] {
    border-radius: 16px !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* Efecto rebote */
}
button:active, a[class*="bg-"]:active {
    transform: scale(0.92) translateY(2px) !important; /* Se hunde suavemente al tocarlo */
    box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}

/* 3. Tarjetas, Paneles y Modales: Sombras difuminadas y bordes invisibles */
.bg-white.shadow-sm, .bg-white.shadow-md, .bg-white.shadow-2xl, .bg-white.rounded-2xl, .bg-white.rounded-3xl {
    border: 1px solid rgba(226, 232, 240, 0.6) !important; /* Borde súper sutil */
    box-shadow: 0 12px 40px -10px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.02) !important;
    border-radius: 28px !important; /* Esquinas de "Squircle" (Círculo cuadrado) */
}

/* 4. Transformación de Tablas a "Listas Flotantes" */
table {
    border-collapse: separate !important;
    border-spacing: 0 8px !important; /* Crea el espacio transparente entre filas */
}
thead th {
    border: none !important;
    background: transparent !important;
    color: #94a3b8 !important; /* slate-400 */
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
    padding-bottom: 4px !important;
}
tbody tr {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
tbody tr td {
    background-color: #ffffff !important;
    border: none !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
tbody tr td:first-child {
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
}
tbody tr td:last-child {
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}
/* Efecto de levitación en las tablas al pasar el mouse */
tbody tr:hover {
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: 0 14px 25px -8px rgba(15, 23, 42, 0.08) !important;
}

/* 5. Etiquetas de Estados (Badges) como Píldoras de Gelatina */
span[class*="bg-"][class*="text-"] {
    padding: 6px 12px !important;
    border-radius: 9999px !important; /* Totalmente circulares */
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
}

/* 6. Pestañas (Tabs) de navegación: Burbujas flotantes en vez de líneas */
.tab-btn, .rep-tab {
    border: none !important;
    background-color: transparent !important;
    color: #64748b !important; /* slate-500 */
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.tab-btn:hover, .rep-tab:hover {
    background-color: rgba(241, 245, 249, 0.8) !important; /* slate-100 */
    transform: translateY(-1px);
}
/* Estilo activo: Se levanta como una burbuja blanca brillante */
.tab-btn.active, .rep-tab.active {
    background-color: #ffffff !important;
    color: #2563eb !important; /* blue-600 */
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.1) !important;
    transform: translateY(-2px);
    font-weight: 900 !important;
}

/* 7. Iconos sutilmente más gruesos y redondeados */
i[data-lucide] {
    stroke-width: 2.5px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* 8. Rebote en Modales (Bounce In / Efecto iOS) */
@keyframes bounceInModal {
    0% { opacity: 0; transform: scale(0.85) translateY(40px); }
    60% { opacity: 1; transform: scale(1.02) translateY(-5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.fixed .relative.bg-white {
    animation: bounceInModal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
/* ==========================================
   ✨ TOQUES PREMIUM: RENDERIZADO, CRISTAL Y ALERTAS
   ========================================== */

/* 1. Texto Ultra-Nítido (Antialiasing) */
body, input, button, select, textarea {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* 2. Cabeceras con Efecto Cristal (True Glassmorphism iOS Style) */
/* Aplica al header principal y a las cabeceras de las tablas cuando haces scroll */
header.sticky, thead.sticky th {
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5) !important;
    box-shadow: none !important; /* Quitamos la sombra dura para dejar el difuminado puro */
}

/* 3. Modernización de las Notificaciones y Alertas (SweetAlert2 Override) */
/* Los Popups Centrales (Modales de alerta) */
div:where(.swal2-container) div:where(.swal2-popup) {
    border-radius: 28px !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    padding: 1.5rem !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    animation: bounceInModal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* Los Toasts (Las notificaciones pequeñitas que salen arriba a la derecha) */
div:where(.swal2-container) div:where(.swal2-toast) {
    border-radius: 16px !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: saturate(200%) blur(25px) !important;
    -webkit-backdrop-filter: saturate(200%) blur(25px) !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255,255,255,0.6) !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    padding: 0.5rem 1rem !important;
}

/* Redondear botones de SweetAlert */
div:where(.swal2-container) button:where(.swal2-styled) {
    border-radius: 14px !important;
    font-weight: 800 !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
div:where(.swal2-container) button:where(.swal2-styled):active {
    transform: scale(0.95) !important;
}

/* 4. Brillo Ambiental (Ambient Glow) en Tarjetas de Catálogo/POS */
#productsGrid > div, #inventoryGrid > div, #catalogGrid > div {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
#productsGrid > div:hover, #inventoryGrid > div:hover, #catalogGrid > div:hover {
    transform: translateY(-5px) scale(1.01) !important;
    box-shadow: 0 20px 40px -10px rgba(59, 130, 246, 0.12), 0 0 20px rgba(59, 130, 246, 0.05) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

/* 5. Cargar (Loaders) más suaves (Evita que el spinner se vea muy duro) */
.animate-spin {
    animation: spin 0.8s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite !important;
}

/* 6. Mejorar la apariencia del Scroll en el carrito para que se vea más limpio */
#cartPanel .overflow-y-auto::-webkit-scrollbar {
    width: 4px !important;
}
#cartPanel .overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2) !important; /* Muy sutil */
}