/* ========================================================
   Bet Repair - Estilos Personalizados y Animaciones
   ======================================================== */

/* Gradiente suave estilo Imagen 1 */
.bg-mesh-gradient {
    background: radial-gradient(circle at 10% 20%, rgba(204, 242, 244, 0.7) 0%, rgba(226, 240, 251, 0.5) 45%, rgba(248, 250, 252, 1) 90%);
}

/* Resplandores */
.cyan-glow {
    box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.45);
}
.emerald-glow {
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.45);
}

/* Scrollbar estilizada */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.04);
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.35);
}

.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ========================================================
   ESTILOS PREMIUM PARA TARJETAS
   "Dale un poco de estilos a las tarjetas para que no se vean demasiado blancas"
   ======================================================== */

.card-hover,
.metric-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.card-hover:hover,
.metric-card:hover {
    transform: translateY(-4px) scale(1.01) !important;
}

/* Base sutil con degradado suave y bordes nítidos para tarjetas de métricas */
.metric-card {
    position: relative;
    border-radius: 1.25rem !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 1px 3px 0 rgba(15, 23, 42, 0.04) !important;
}

/* Variantes temáticas con tinte suave y acento superior */
.metric-card-sky {
    background: linear-gradient(145deg, #ffffff 15%, #f0f9ff 65%, #e0f2fe 100%) !important;
    border: 1px solid rgba(186, 230, 253, 0.85) !important;
    border-top: 3px solid #0ea5e9 !important;
}
.metric-card-sky:hover {
    border-color: #0ea5e9 !important;
    box-shadow: 0 16px 32px -8px rgba(14, 165, 233, 0.25) !important;
}

.metric-card-emerald {
    background: linear-gradient(145deg, #ffffff 15%, #f0fdf4 65%, #dcfce7 100%) !important;
    border: 1px solid rgba(187, 247, 208, 0.85) !important;
    border-top: 3px solid #10b981 !important;
}
.metric-card-emerald:hover {
    border-color: #10b981 !important;
    box-shadow: 0 16px 32px -8px rgba(16, 185, 129, 0.25) !important;
}

.metric-card-teal {
    background: linear-gradient(145deg, #ffffff 15%, #f0fdfa 65%, #ccfbf1 100%) !important;
    border: 1px solid rgba(153, 246, 228, 0.85) !important;
    border-top: 3px solid #14b8a6 !important;
}
.metric-card-teal:hover {
    border-color: #14b8a6 !important;
    box-shadow: 0 16px 32px -8px rgba(20, 184, 166, 0.25) !important;
}

.metric-card-indigo {
    background: linear-gradient(145deg, #ffffff 15%, #f5f3ff 65%, #ede9fe 100%) !important;
    border: 1px solid rgba(221, 214, 254, 0.85) !important;
    border-top: 3px solid #6366f1 !important;
}
.metric-card-indigo:hover {
    border-color: #6366f1 !important;
    box-shadow: 0 16px 32px -8px rgba(99, 102, 241, 0.25) !important;
}

.metric-card-purple {
    background: linear-gradient(145deg, #ffffff 15%, #faf5ff 65%, #f3e8ff 100%) !important;
    border: 1px solid rgba(233, 213, 255, 0.85) !important;
    border-top: 3px solid #a855f7 !important;
}
.metric-card-purple:hover {
    border-color: #a855f7 !important;
    box-shadow: 0 16px 32px -8px rgba(168, 85, 247, 0.25) !important;
}

.metric-card-amber {
    background: linear-gradient(145deg, #ffffff 15%, #fffbeb 65%, #fef3c7 100%) !important;
    border: 1px solid rgba(253, 230, 138, 0.85) !important;
    border-top: 3px solid #f59e0b !important;
}
.metric-card-amber:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 16px 32px -8px rgba(245, 158, 11, 0.25) !important;
}

/* Tarjetas de Producto en el POS */
.pos-card {
    background: linear-gradient(160deg, #ffffff 25%, #f8fafc 80%, #f1f5f9 100%) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05), 0 1px 2px 0 rgba(15, 23, 42, 0.03) !important;
    transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.pos-card:hover {
    background: linear-gradient(160deg, #ffffff 10%, #f0f9ff 100%) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 12px 24px -6px rgba(14, 165, 233, 0.2) !important;
    transform: translateY(-3px) scale(1.01) !important;
}

/* Contenedores y Paneles Principales (Tablas, Filtros, Carrito) */
.card-panel {
    background: linear-gradient(180deg, #ffffff 0%, #fcfdfe 60%, #f8fafc 100%) !important;
    border: 1px solid rgba(203, 213, 225, 0.75) !important;
    box-shadow: 0 4px 18px -3px rgba(15, 23, 42, 0.04), 0 1px 3px 0 rgba(15, 23, 42, 0.02) !important;
}

/* Tarjetas de Accesos Rápidos */
.quick-action-card {
    background: linear-gradient(145deg, #ffffff 30%, #f8fafc 85%, #f1f5f9 100%) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.22s ease !important;
}
.quick-action-card:hover {
    background: linear-gradient(145deg, #ffffff 10%, #f0f9ff 100%) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 10px 20px -4px rgba(14, 165, 233, 0.16) !important;
    transform: translateY(-2px) !important;
}

/* ========================================================
   SIDEBAR DESKTOP: RETRAÍDO POR DEFECTO Y EXPANSIÓN EN HOVER
   ======================================================== */
@media (min-width: 1024px) {
    #sidebar {
        width: 5rem !important; /* Retraído por defecto a 80px */
        transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease !important;
        overflow-x: hidden;
    }

    /* Estado Retraído (cuando el cursor NO está encima) */
    #sidebar:not(:hover):not(.hover-expanded) .sidebar-text,
    #sidebar:not(:hover):not(.hover-expanded) .sidebar-header-brand,
    #sidebar:not(:hover):not(.hover-expanded) .sidebar-footer-info,
    #sidebar:not(:hover):not(.hover-expanded) #submenu-inv,
    #sidebar:not(:hover):not(.hover-expanded) #badge-rep-activas,
    #sidebar:not(:hover):not(.hover-expanded) #chevron-inv {
        display: none !important;
    }

    #sidebar:not(:hover):not(.hover-expanded) .sidebar-item {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #sidebar:not(:hover):not(.hover-expanded) .sidebar-header-box {
        justify-content: center !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    #sidebar:not(:hover):not(.hover-expanded) .sidebar-footer-card {
        justify-content: center !important;
        padding: 0.5rem !important;
    }

    /* Estado Expandido (al pasar el mouse por encima) */
    #sidebar:hover,
    #sidebar.hover-expanded {
        width: 16rem !important; /* Se expande a 256px */
        box-shadow: 10px 0 30px -5px rgba(0, 0, 0, 0.45) !important;
        z-index: 60 !important;
    }

    #sidebar:hover .sidebar-text,
    #sidebar.hover-expanded .sidebar-text {
        display: inline !important;
    }

    #sidebar:hover .sidebar-header-brand,
    #sidebar.hover-expanded .sidebar-header-brand {
        display: flex !important;
    }

    #sidebar:hover .sidebar-footer-info,
    #sidebar.hover-expanded .sidebar-footer-info {
        display: block !important;
    }

    #sidebar:hover #badge-rep-activas,
    #sidebar.hover-expanded #badge-rep-activas {
        display: inline-block !important;
    }

    #sidebar:hover #chevron-inv,
    #sidebar.hover-expanded #chevron-inv {
        display: inline-block !important;
    }

    #sidebar:hover .sidebar-item,
    #sidebar.hover-expanded .sidebar-item {
        justify-content: flex-start !important;
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }

    #sidebar:hover .sidebar-header-box,
    #sidebar.hover-expanded .sidebar-header-box {
        justify-content: space-between !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #sidebar:hover .sidebar-footer-card,
    #sidebar.hover-expanded .sidebar-footer-card {
        justify-content: space-between !important;
        padding: 0.5rem !important;
    }
}

/* Estilos de Impresión de Tickets Térmicos */
@media print {
    body * {
        visibility: hidden;
    }
    #print-area, #print-area * {
        visibility: visible;
    }
    #print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 78mm;
        padding: 4mm;
        font-family: monospace;
        color: #000;
        background: #fff;
    }
    .no-print {
        display: none !important;
    }
}

/* ========================================================
   MODALES CON SCROLL AUTOMÁTICO Y SUAVE
   "El modal que sea demasiado largo, tendrá scroll."
   ======================================================== */
.modal-scroll {
    max-height: min(90vh, 720px);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.modal-scroll::-webkit-scrollbar {
    width: 6px;
}
.modal-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.modal-scroll::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 9999px;
}
.modal-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* Animación fluida de entrada para Modales */
@keyframes modalIn {
    0% {
        opacity: 0;
        transform: scale(0.96) translateY(6px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-scale-up {
    animation: modalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Transiciones enfocadas y ligeras para controles interactivos */
input:focus, select:focus, textarea:focus {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}