/* ================= IDENTIDAD CRAFTEA (kraft / hecho a mano) ================= */
        body { font-family: 'Inter', sans-serif; background-color: #FBF8F3; color-scheme: light; }

        /* Tarjetas "papel" en vez de blanco puro de laboratorio */
        .bg-white { background-color: #FFFDF9 !important; }
        #pantalla-login .bg-white, #modalRegistro .bg-white, #modalDetallePedido .bg-white,
        #modalMerma .bg-white, #reciboContent.bg-white { background-color: #FFFDF9; }

        /* Tipografía con carácter para títulos: redondeada y cálida, coherente con el logo Craftea */
        h1, h2, h3, h4, .font-display { font-family: 'Fredoka', 'Inter', sans-serif; letter-spacing: -0.01em; }

        /* Foco más cálido y consistente en toda la app */
        input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(225, 78, 4, 0.18) !important; }

        /* Botones y pills primarios: leve elevación y transición táctil */
        button { transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
        button:active { transform: translateY(1px); }

        /* Barra superior de acento tipo "washi tape" en tarjetas de contenido principal */
        main > section.bg-white, #sec-registro, #sec-historial, #sec-clientes, #sec-inventario, #sec-calculadora, #sec-ajustes {
            position: relative;
        }
        main > section.bg-white::before {
            content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 3px; border-radius: 0 0 4px 4px;
            background: linear-gradient(90deg, #f97316, #ec4899); opacity: 0.9;
        }

        /* Tarjetas de estadísticas del Dashboard: elevación suave + acento por tipo de dato */
        #sec-dashboard .grid.grid-cols-2 > div, #sec-dashboard .grid.grid-cols-2.lg\:grid-cols-5 > div {
            transition: transform 0.2s ease, box-shadow 0.2s ease; border-top: 3px solid transparent;
        }
        #sec-dashboard .grid.grid-cols-2 > div:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -8px rgba(107, 38, 7, 0.18); }
        #sec-dashboard .grid.grid-cols-2 > div:has(#dashTotal):hover { border-top-color: #10b981; }
        #sec-dashboard .grid.grid-cols-2 > div:has(#dashPendiente):hover { border-top-color: #f59e0b; }
        #sec-dashboard .grid.grid-cols-2 > div:has(#dashGanancia):hover { border-top-color: #E14E04; }
        #sec-dashboard .grid.grid-cols-2 > div:has(#dashActivos):hover { border-top-color: #52453A; }
        #sec-dashboard .grid.grid-cols-2 > div:has(#dashMermas):hover { border-top-color: #e11d48; }

        /* Semáforo de urgencia de entrega (Historial) */
        .semaforo-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(0,0,0,0.04); }
        .semaforo-vencido { background-color: #e11d48; }
        .semaforo-urgente { background-color: #f59e0b; }
        .semaforo-atiempo { background-color: #10b981; }
        .semaforo-neutro { background-color: #d8c4a8; }

        /* Nav móvil: se colapsa a solo el logo al hacer scroll hacia abajo.
           Solo en dispositivos táctiles reales (hover: none, pointer: coarse):
           así una ventana de PC angosta NUNCA activa este comportamiento,
           sin importar qué tan chica la hagas — solo celulares/tablets de
           verdad. SIN transición: animar un hijo de un elemento
           position:sticky causaba que el navegador dejara de repintar la
           página al hacer scroll (bug real, reproducido varias veces). */
        @media (hover: none) and (pointer: coarse) {
            .nav-collapsible { max-height: 260px; overflow: hidden; }
            nav.nav-collapsed { gap: 0 !important; }
            nav.nav-collapsed .nav-collapsible { max-height: 0; }
        }

        /* Modo forzado "hoja carta" para exportar el recibo a PDF, sin importar el
           ancho real de pantalla del dispositivo que lo genera (ver compartirPDF()
           en app.js). En pantalla el recibo es responsivo para verse bien en
           celular; justo antes de capturarlo para el PDF se agrega esta clase. */
        #reciboContent.recibo-pdf-modo { width: 750px !important; max-width: none !important; padding: 3rem !important; flex-shrink: 0 !important; }
        .recibo-pdf-modo .recibo-header { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; }
        .recibo-pdf-modo .recibo-logo { height: 5rem !important; }
        .recibo-pdf-modo .recibo-titulo { font-size: 1.875rem !important; }
        .recibo-pdf-modo .recibo-eslogan { font-size: 0.875rem !important; }
        .recibo-pdf-modo .recibo-docinfo { text-align: right !important; }
        .recibo-pdf-modo .recibo-cliente-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
        .recibo-pdf-modo .recibo-fecha-entrega { text-align: right !important; }
        .recibo-pdf-modo .recibo-th th { padding: 0.75rem 1rem !important; font-size: 0.75rem !important; }
        .recibo-pdf-modo .recibo-th th:first-child { width: 4rem !important; }
        .recibo-pdf-modo .recibo-th th:nth-child(3), .recibo-pdf-modo .recibo-th th:nth-child(4) { width: 8rem !important; }
        .recibo-pdf-modo #printItems { font-size: 0.875rem !important; }
        .recibo-pdf-modo .recibo-desc-corta { display: none !important; }
        .recibo-pdf-modo .recibo-desc-larga { display: inline !important; }
        .recibo-pdf-modo .recibo-totales-row { flex-direction: row !important; }
        .recibo-pdf-modo .recibo-banco-box { width: 50% !important; }
        .recibo-pdf-modo .recibo-totales-box { width: 18rem !important; margin-left: auto !important; }

        /* Fondo de Login y Planes: papel kraft claro + halos suaves del gradiente de marca (no oscuro) */
        .tapete-corte {
            background-color: #FBF3E7;
            background-image:
                radial-gradient(circle at 12% 12%, rgba(249, 115, 22, 0.20) 0%, transparent 38%),
                radial-gradient(circle at 88% 82%, rgba(236, 72, 153, 0.18) 0%, transparent 42%),
                radial-gradient(rgba(178, 141, 96, 0.18) 1px, transparent 1px);
            background-size: auto, auto, 22px 22px;
            position: relative;
        }
        .tapete-corte > * { position: relative; z-index: 1; }

        /* Panel oscuro del Cotizador: ink kraft neutro */
        .panel-tapete { background: linear-gradient(160deg, #362B22, #241C16) !important; }

        /* Badge de salud de margen (Cotizador) */
        .salud-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
        .salud-bajo { background: rgba(225, 29, 72, 0.15); color: #fda4af; }
        .salud-saludable { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
        .salud-alto { background: rgba(249, 115, 22, 0.2); color: #fdba74; }
        .logo-container { position: relative; cursor: pointer; display: inline-flex; align-items: center; transition: opacity 0.15s ease; }
        @media (hover: hover) { .logo-container:hover { opacity: 0.8; } }
        
        @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        .toast-enter { animation: slideIn 0.3s ease-out forwards; }
        
        #pedFecha { text-transform: uppercase; }
        .flatpickr-day.selected, .flatpickr-day.today { border-color: #4f46e5 !important; border-radius: 50% !important; }
        .flatpickr-day.selected { background: #4f46e5 !important; color: white !important; }
        .flatpickr-day:hover { background: #e0e7ff !important; border-color: #e0e7ff !important; color: #3730a3 !important; border-radius: 50% !important; }
        .flatpickr-current-month { text-transform: capitalize; }
        
        #reciboModalOverlay { overflow-y: auto; }
        
        @media print { 
            body * { visibility: hidden; } 
            #reciboContent, #reciboContent * { visibility: visible; } 
            #reciboContent { position: absolute; left: 0; top: 0; width: 100%; border: none; box-shadow: none; padding: 0;} 
            .no-print { display: none !important; } 
        }
        
        .fc-event { cursor: pointer; border: none; padding: 4px 6px; border-radius: 6px; transition: transform 0.1s;} 
        .fc-event:hover { transform: scale(1.02); }
        .fc-toolbar-title { font-size: 1.1rem !important; font-weight: bold !important; color: #0f172a; }
        .fc .fc-button-primary { background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #475569 !important; text-transform: capitalize; font-weight: 600;}
        .fc .fc-button-primary:hover { background-color: #e2e8f0 !important; color: #0f172a !important;}
        .fc .fc-button-active { background-color: #4f46e5 !important; border-color: #4f46e5 !important; color: white !important;}
        
        .tooltip { position: relative; display: inline-block; cursor: help; }
        .tooltip .tooltiptext { visibility: hidden; width: 220px; background-color: #334155; color: #fff; text-align: center; border-radius: 6px; padding: 8px; position: absolute; z-index: 50; bottom: 125%; left: 50%; margin-left: -110px; opacity: 0; transition: opacity 0.3s; font-size: 0.75rem; font-weight: normal; font-family: 'Inter', sans-serif;}
        .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #334155 transparent transparent transparent; }
        .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

        .table-input { width: 100%; padding: 0.6rem; border: 1px solid #cbd5e1; border-radius: 0.375rem; outline: none; transition: all 0.2s; font-weight: 500; color: #1e293b; }
        .table-input:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); }

        /* ================= MODO OSCURO (neutro real, sin tinte café ni verde) ================= */
        .dark-mode body, body.dark-mode, html.dark-mode { background-color: #18181B; }
        .dark-mode { color-scheme: dark; }

        .dark-mode .bg-white { background-color: #232326 !important; }
        .dark-mode .bg-slate-50 { background-color: #18181B !important; }
        .dark-mode .bg-slate-100 { background-color: #232326 !important; }
        .dark-mode .bg-slate-200 { background-color: #3A3A3F !important; }
        .dark-mode .bg-gray-50 { background-color: #232326 !important; }
        .dark-mode .bg-gray-100 { background-color: #3A3A3F !important; }

        .dark-mode .bg-indigo-50 { background-color: rgba(225, 78, 4, 0.14) !important; }
        .dark-mode .bg-indigo-100 { background-color: rgba(225, 78, 4, 0.20) !important; }
        .dark-mode .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12) !important; }
        .dark-mode .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.18) !important; }
        .dark-mode .bg-emerald-200 { background-color: rgba(16, 185, 129, 0.25) !important; }
        .dark-mode .bg-rose-50 { background-color: rgba(244, 63, 94, 0.12) !important; }
        .dark-mode .bg-rose-100 { background-color: rgba(244, 63, 94, 0.18) !important; }
        .dark-mode .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; }
        .dark-mode .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2) !important; }
        .dark-mode .bg-slate-300 { background-color: #3A3A3F !important; }
        .dark-mode .bg-slate-900 { background-color: #3A3A3F !important; }
        .dark-mode .hover\:bg-slate-800:hover { background-color: #4A4A50 !important; }

        .dark-mode .text-slate-900 { color: #F4F4F5 !important; }
        .dark-mode .text-slate-800 { color: #E4E4E7 !important; }
        .dark-mode .text-slate-700 { color: #D4D4D8 !important; }
        .dark-mode .text-slate-600 { color: #A1A1AA !important; }
        .dark-mode .text-slate-500 { color: #A1A1AA !important; }
        .dark-mode .text-slate-400 { color: #71717A !important; }
        .dark-mode .text-slate-300 { color: #D4D4D8 !important; }
        .dark-mode .text-gray-900 { color: #F4F4F5 !important; }
        .dark-mode .text-gray-700 { color: #D4D4D8 !important; }
        .dark-mode .text-gray-500 { color: #A1A1AA !important; }
        .dark-mode .text-gray-400 { color: #71717A !important; }

        .dark-mode .text-indigo-700, .dark-mode .text-indigo-800, .dark-mode .text-indigo-900 { color: #FDBA74 !important; }
        .dark-mode .text-rose-700, .dark-mode .text-rose-900 { color: #fda4af !important; }
        .dark-mode .text-emerald-700, .dark-mode .text-emerald-800, .dark-mode .text-emerald-900 { color: #6ee7b7 !important; }
        .dark-mode .text-amber-600, .dark-mode .text-amber-700, .dark-mode .text-amber-800, .dark-mode .text-amber-900 { color: #fcd34d !important; }

        .dark-mode .border-slate-100, .dark-mode .border-slate-200, .dark-mode .border-slate-300,
        .dark-mode .border-gray-200, .dark-mode .border-gray-300 { border-color: #3A3A3F !important; }
        .dark-mode .border-indigo-100, .dark-mode .border-indigo-200 { border-color: rgba(225, 78, 4, 0.35) !important; }
        .dark-mode .border-emerald-200, .dark-mode .border-emerald-300 { border-color: rgba(16, 185, 129, 0.35) !important; }
        .dark-mode .border-rose-100 { border-color: rgba(244, 63, 94, 0.35) !important; }
        .dark-mode .border-amber-200, .dark-mode .border-amber-300, .dark-mode .border-amber-400 { border-color: rgba(245, 158, 11, 0.4) !important; }
        .dark-mode .border-indigo-400 { border-color: rgba(225, 78, 4, 0.5) !important; }

        .dark-mode .table-input { background-color: #18181B; border-color: #3A3A3F; color: #E4E4E7; }
        .dark-mode .table-input::placeholder { color: #71717A; }
        .dark-mode input, .dark-mode select, .dark-mode textarea { color-scheme: dark; background-color: #232326; }
        .dark-mode input::placeholder, .dark-mode textarea::placeholder { color: #71717A; }

        .dark-mode #modalRegistro .bg-white,
        .dark-mode #reciboModalOverlay .bg-white,
        .dark-mode #modalDetallePedido .bg-white,
        .dark-mode #modalMerma .bg-white { background-color: #232326 !important; }

        .dark-mode .shadow-sm, .dark-mode .shadow-md, .dark-mode .shadow-xl, .dark-mode .shadow-2xl { box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; }

        .dark-mode .fc-toolbar-title { color: #F4F4F5 !important; }
        .dark-mode .fc .fc-button-primary { background-color: #232326 !important; border-color: #3A3A3F !important; color: #D4D4D8 !important; }
        .dark-mode .fc-daygrid-day, .dark-mode .fc-scrollgrid, .dark-mode .fc-theme-standard td, .dark-mode .fc-theme-standard th { border-color: #3A3A3F !important; }
        .dark-mode .fc-daygrid-day-number { color: #D4D4D8 !important; }

        .dark-mode .fc, .dark-mode .fc-theme-standard {
            --fc-border-color: #3A3A3F;
            --fc-page-bg-color: transparent;
            --fc-neutral-bg-color: #232326;
            --fc-list-event-hover-bg-color: #3A3A3F;
        }
        .dark-mode .fc-list-day-cushion { background-color: #232326 !important; }
        .dark-mode .fc-list-day-cushion .fc-list-day-text,
        .dark-mode .fc-list-day-cushion .fc-list-day-side-text { color: #E4E4E7 !important; }
        .dark-mode .fc-list-table td, .dark-mode .fc-list-table th { color: #D4D4D8 !important; border-color: #3A3A3F !important; }
        .dark-mode .fc-list-event-title, .dark-mode .fc-list-event-time { color: #E4E4E7 !important; }
        .dark-mode .fc-list-event:hover td { background-color: #3A3A3F !important; }
        .dark-mode .fc-list-empty { background-color: transparent !important; color: #A1A1AA !important; }
        .dark-mode .salud-bajo { background: rgba(225, 29, 72, 0.22); }
        .dark-mode .salud-alto { background: rgba(249, 115, 22, 0.28); }

        /* ================= INTRO ANIMADA DEL LOGO CRAFTEA ================= */
        .craftea-intro { position: relative; width: 180px; height: 92px; margin-bottom: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
        .craftea-intro:focus-visible { outline: 2px solid #f97316; outline-offset: 4px; border-radius: 8px; }
        .craftea-box-scene { position: absolute; inset: 0; perspective: 400px; }
        .craftea-box, .craftea-lid, .craftea-tape, .craftea-scissors, .craftea-sticker { position: absolute; left: 50%; }

        /* La animación queda pausada hasta que la página termine de cargar (ver script inline).
           Evita que scripts pesados (Tailwind CDN, fuentes, librerías) se coman los primeros frames. */
        #crafteaIntro:not(.craftea-ready) .craftea-box,
        #crafteaIntro:not(.craftea-ready) .craftea-lid,
        #crafteaIntro:not(.craftea-ready) .craftea-tape,
        #crafteaIntro:not(.craftea-ready) .craftea-scissors,
        #crafteaIntro:not(.craftea-ready) .craftea-sticker,
        #crafteaIntro:not(.craftea-ready) .craftea-wordmark { animation-play-state: paused; }

        .craftea-box { top: 54px; width: 52px; height: 34px; margin-left: -26px; background: linear-gradient(135deg,#fbbf24,#f97316); border-radius: 6px; box-shadow: 0 8px 16px -4px rgba(194,65,12,.35); animation: crafteaBoxLife 1.9s ease forwards; }
        .craftea-box::after { content: ''; position: absolute; left: 0; right: 0; top: 42%; height: 2px; background: rgba(0,0,0,.12); }

        .craftea-lid { top: 54px; width: 56px; height: 18px; margin-left: -28px; background: linear-gradient(135deg,#f97316,#ea580c); border-radius: 6px 6px 2px 2px; box-shadow: 0 2px 4px rgba(0,0,0,.15); transform-origin: 50% 100%; animation: crafteaLidOpen 1.9s ease forwards; }

        .craftea-tape { top: 46px; width: 6px; height: 22px; margin-left: -3px; background: #fef3c7; border-radius: 2px; animation: crafteaTapeCut 1.9s ease forwards; }

        .craftea-scissors { top: 42px; width: 22px; height: 22px; margin-left: -62px; opacity: 0; animation: crafteaScissorsMove 1.9s ease forwards; }

        .craftea-sticker { top: 58px; margin-left: -8px; font-size: 15px; line-height: 1; opacity: 0; animation-duration: 1.9s; animation-timing-function: ease; animation-fill-mode: forwards; }
        .craftea-sticker-1 { color: #f97316; animation-name: crafteaStickerPop1; }
        .craftea-sticker-2 { color: #ec4899; font-size: 9px; animation-name: crafteaStickerPop2; }
        .craftea-sticker-3 { color: #E14E04; animation-name: crafteaStickerPop3; }

        .craftea-wordmark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transform: scale(.4); animation: crafteaWordmarkIn 1.9s cubic-bezier(.34,1.56,.64,1) forwards; }

        @keyframes crafteaBoxLife {
            0%, 8% { transform: rotate(0deg); opacity: 1; }
            2% { transform: rotate(-3deg); }
            4% { transform: rotate(3deg); }
            6% { transform: rotate(-2deg); }
            65% { opacity: 1; transform: rotate(0deg); }
            80% { opacity: 0; transform: rotate(0deg) scale(.85); }
            100% { opacity: 0; transform: scale(.85); }
        }
        @keyframes crafteaLidOpen {
            0%, 28% { transform: translateY(-100%) rotateX(0deg); opacity: 1; }
            55% { transform: translateY(-100%) rotateX(-125deg); opacity: 1; }
            78% { transform: translateY(-100%) rotateX(-125deg); opacity: 0; }
            100% { transform: translateY(-100%) rotateX(-125deg); opacity: 0; }
        }
        @keyframes crafteaTapeCut {
            0%, 24% { opacity: 1; transform: scaleY(1); }
            30% { opacity: 0; transform: scaleY(0); }
            100% { opacity: 0; transform: scaleY(0); }
        }
        @keyframes crafteaScissorsMove {
            0%, 8% { opacity: 0; transform: translateX(0) rotate(0deg); }
            15% { opacity: 1; }
            28% { opacity: 1; transform: translateX(58px) rotate(-8deg); }
            36% { opacity: 0; transform: translateX(72px) rotate(-8deg); }
            100% { opacity: 0; }
        }
        @keyframes crafteaStickerPop1 {
            0%, 38% { opacity: 0; transform: translate(-10px,0) scale(.4) rotate(0deg); }
            55% { opacity: 1; transform: translate(-34px,-42px) scale(1.1) rotate(-20deg); }
            75% { transform: translate(-34px,-46px) scale(1) rotate(-15deg); opacity: 1; }
            100% { opacity: 0; transform: translate(-34px,-52px) scale(.8) rotate(-15deg); }
        }
        @keyframes crafteaStickerPop2 {
            0%, 46% { opacity: 0; transform: translate(0,0) scale(.4); }
            62% { opacity: 1; transform: translate(6px,-50px) scale(1.2); }
            80% { transform: translate(6px,-54px) scale(1); opacity: 1; }
            100% { opacity: 0; transform: translate(6px,-60px) scale(.8); }
        }
        @keyframes crafteaStickerPop3 {
            0%, 42% { opacity: 0; transform: translate(10px,0) scale(.4) rotate(0deg); }
            58% { opacity: 1; transform: translate(38px,-38px) scale(1.1) rotate(20deg); }
            78% { transform: translate(38px,-42px) scale(1) rotate(15deg); opacity: 1; }
            100% { opacity: 0; transform: translate(38px,-48px) scale(.8) rotate(15deg); }
        }
        @keyframes crafteaWordmarkIn {
            0%, 66% { opacity: 0; transform: scale(.4); }
            85% { opacity: 1; transform: scale(1.08); }
            100% { opacity: 1; transform: scale(1); }
        }
        @media (prefers-reduced-motion: reduce) {
            .craftea-box, .craftea-lid, .craftea-tape, .craftea-scissors, .craftea-sticker { display: none; }
            .craftea-wordmark { opacity: 1; transform: scale(1); animation: none; }
        }