/* Estilos Generales - Tema Claro Minimalista Profesional */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
    --primary: #1d4ed8; /* Azul eléctrico profesional */
    --primary-hover: #1e40af;
    --accent-mustard: #b45309; /* Mostaza cálido */
    --accent-orange: #ea580c; /* Naranja gastronómico */
    --bg-light: #f8fafc;
    --card-bg: #ffffff;
    --border-color: #e2e8f0;
    --text-main: #0f172a;
    --text-muted: #64748b;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f8fafc;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar limpia y sutil */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Tipografía mono para tickets */
.ticket-mono {
    font-family: 'Space Mono', monospace;
}

/* Transiciones suaves */
.transition-card {
    transition: all 0.15s ease-in-out;
}

/* Estilos de impresión térmica 58mm / 80mm */
@media print {
    body * {
        visibility: hidden !important;
    }
    #thermal-ticket-area, #thermal-ticket-area * {
        visibility: visible !important;
    }
    #thermal-ticket-area {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 78mm !important;
        margin: 0 !important;
        padding: 4mm !important;
        background: white !important;
        color: black !important;
        font-family: 'Space Mono', monospace !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        display: block !important;
    }
    .no-print {
        display: none !important;
    }
    @page {
        margin: 0;
        size: auto;
    }
}

/* Animación de error / sacudida para PIN incorrecto */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}
.animate-shake {
    animation: shake 0.4s ease-in-out;
}

/* Animación de campana / timbre para nuevos pedidos entrantes */
@keyframes bell-ring {
    0% { transform: rotate(0); }
    10%, 30%, 50%, 70% { transform: rotate(14deg); }
    20%, 40%, 60%, 80% { transform: rotate(-14deg); }
    90% { transform: rotate(4deg); }
    100% { transform: rotate(0); }
}
.animate-bell {
    display: inline-block;
    transform-origin: top center;
    animation: bell-ring 0.9s ease-in-out infinite;
}

/* Pulso brillante para badge de nuevos pedidos */
@keyframes badge-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7); }
    50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(225, 29, 72, 0); }
}
.animate-badge-pulse {
    animation: badge-pulse 1.8s infinite;
}

/* Ocultar barra de desplazamiento manteniendo scroll horizontal táctil en móviles */
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
    display: none;
}

/* Desplazamiento táctil fluido para dispositivos móviles y tablets */
.touch-pan-x {
    -webkit-overflow-scrolling: touch;
}

/* Modo Ordenador (Fuerza vista de escritorio lado a lado en móviles y tablets) */
body.mode-desktop-view #view-pos {
    flex-direction: row !important;
    min-width: 960px;
    overflow-x: auto;
}
body.mode-desktop-view #pos-cart-panel {
    display: flex !important;
    width: 340px !important;
    flex-shrink: 0 !important;
}
body.mode-desktop-view #pos-mobile-cart-bar {
    display: none !important;
}
body.mode-desktop-view {
    overflow-x: auto !important;
}

/* Insignias y animaciones para vinculación de pagos MacroDroid */
@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.animate-pulse-subtle {
    animation: pulse-subtle 2s ease-in-out infinite;
}

/* ========================================================================== */
/* OPTIMIZACIÓN EXCLUSIVA PARA MONITORES POS Y RESOLUCIONES 1024x980 / 1024x768 */
/* ========================================================================== */
@media (min-width: 1024px) and (max-width: 1200px) {
    html {
        font-size: 13.5px;
    }

    body {
        overflow-x: hidden !important;
    }

    main {
        padding: 0.75rem !important;
        overflow-x: hidden !important;
    }

    /* Reducir gaps para evitar que se desborden paneles */
    #view-pos, #view-menu, #view-dashboard, #view-ajustes, #view-hotspot, #view-deliverys, #view-caja, #view-carpetas {
        gap: 0.75rem !important;
    }

    /* Reducir padding en tarjetas para encajar más contenido */
    .p-5 {
        padding: 0.875rem !important;
    }
    .p-6 {
        padding: 1rem !important;
    }

    /* Asegurar que ninguna sección fuerce scroll horizontal */
    section {
        max-width: 100% !important;
    }

    /* Tablas con celdas compactas para aprovechar todo el ancho */
    table th, table td {
        padding-top: 0.45rem !important;
        padding-bottom: 0.45rem !important;
    }

    /* Alturas dinámicas para POS en pantallas 980px y 768px de alto */
    #pos-products-grid {
        max-height: calc(100vh - 145px) !important;
    }
    #pos-cart-panel {
        max-height: calc(100vh - 125px) !important;
    }

    /* Modales con altura máxima adaptada para no desbordar en 768-980px */
    #checkout-modal > div,
    #item-notes-modal > div,
    #product-edit-modal > div,
    #order-success-modal > div,
    #category-edit-modal > div,
    #cliente-edit-modal > div {
        max-height: 88vh !important;
    }
}

/* Modo Barra Lateral Colapsable en Escritorio (Permite 960px+ de espacio útil) */
@media (min-width: 1024px) {
    #admin-sidebar {
        transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), padding 0.2s ease;
    }
    #admin-sidebar.sidebar-collapsed {
        width: 4.25rem !important; /* ~68px */
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }
    #admin-sidebar.sidebar-collapsed #header-business-info,
    #admin-sidebar.sidebar-collapsed #tienda-status-card,
    #admin-sidebar.sidebar-collapsed #sidebar-hotspot-badge,
    #admin-sidebar.sidebar-collapsed #sidebar-bcv-box,
    #admin-sidebar.sidebar-collapsed .sidebar-hide-collapse {
        display: none !important;
    }
    #admin-sidebar.sidebar-collapsed nav button,
    #admin-sidebar.sidebar-collapsed nav a {
        justify-content: center !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    #admin-sidebar.sidebar-collapsed .nav-text-label,
    #admin-sidebar.sidebar-collapsed .nav-badge-label {
        display: none !important;
    }
    #admin-sidebar.sidebar-collapsed #collapse-sidebar-icon {
        transform: rotate(180deg);
    }
}

/* ========================================================================== */
/* RESPONSIVE UNIVERSAL: SMARTPHONES, TABLETS Y MONITORES POS INDUSTRIALES   */
/* ========================================================================== */

/* Safe area insets para móviles modernos (iPhone, Android con barra gestual) */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
    #pos-mobile-cart-bar {
        bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
    }
}

/* Optimización para pantallas táctiles de baja altura (<= 768px vertical) */
@media (max-height: 768px) {
    /* Compactar espacios en el carrito y modales */
    #pos-products-grid {
        max-height: calc(100vh - 120px) !important;
    }
    #pos-cart-panel {
        max-height: calc(100vh - 110px) !important;
        padding: 0.65rem !important;
    }
    #checkout-modal-body {
        max-height: 52vh !important;
        padding: 0.75rem !important;
    }
    .modal-compact-header {
        padding: 0.65rem 1rem !important;
    }
}

/* Ajustes para tablets táctiles medianas (641px a 1023px) */
@media (min-width: 641px) and (max-width: 1023px) {
    #pos-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.65rem !important;
    }
    .tablet-compact-text {
        font-size: 0.75rem !important;
    }
}

/* Tarjetas táctiles mínimas de 44px para dedos en POS */
.pos-touch-btn {
    min-height: 42px;
    touch-action: manipulation;
}

/* Estilos de Insignia de Stock Agotado / Alerta en POS */
.badge-out-of-stock {
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fecdd3;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Insignias de Mesas / Salón */
.mesa-btn-free {
    background-color: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}
.mesa-btn-free:hover {
    background-color: #dcfce7;
    border-color: #4ade80;
}
.mesa-btn-occupied {
    background-color: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}
.mesa-btn-occupied:hover {
    background-color: #ffedd5;
    border-color: #fb923c;
}
.mesa-btn-selected {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

/* Optimización para Aplicación Nativa Windows de Escritorio */
body {
    user-select: none;
    -webkit-user-select: none;
    overflow-x: hidden;
}

input, textarea, [contenteditable="true"], .selectable-text {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Transiciones táctiles y de ratón fluidas sin latencia */
button, .pos-touch-btn, .mesa-btn-free, .mesa-btn-occupied {
    -webkit-tap-highlight-color: transparent;
}

/* Barra de desplazamiento nativa fluida */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}