/* Capa visual compartida: tipografía, tarjetas, y restyle de DataTables /
   Flatpickr para que se vean nativos de Tailwind en vez del look por defecto
   de esas librerías (que viene pensado para Bootstrap). */

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* El sidebar móvil es position:fixed y queda corrido fuera de pantalla con
   translateX; algunos navegadores móviles igual lo cuentan para calcular el
   ancho desplazable de la página, dejando una franja en blanco sin fin al
   deslizar y tapando contenido real. Se bloquea el scroll horizontal a nivel
   de documento como red de seguridad, independientemente de la causa. */
html, body { overflow-x: hidden; max-width: 100vw; }

/* El título de cada header es texto fijo (`text-2xl`) que compite por
   espacio con el botón de hamburguesa (inyectado por common.js) y la fecha
   completa del lado derecho; sin esto, en pantallas angostas el título se
   parte en 2 líneas y se sale de la altura fija de 64px del header. */
header h2 { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
    header h2 { font-size: 1.05rem !important; }
    header #currentDate { display: none; }
}

/* Sin min-width:0, cualquier descendiente ancho (tabla, formulario, input)
   puede estirar "main" más allá del viewport en vez de quedar contenido por
   el flex del body — es la causa real del scroll horizontal "sin fin". */
main { min-width: 0; }

/* Paneles de modal (mismo selector que la animación de apertura, arriba):
   en pantallas angostas nunca deben exceder el ancho visible, aunque algún
   formulario interno use una grilla de 2 columnas no adaptada a móvil. */
@media (max-width: 640px) {
    div[id^="modal"] > div { max-width: calc(100vw - 2rem); }
}

.sidebar-item { transition: background-color .15s ease, padding-left .18s ease; }
.sidebar-item i { width: 1.1rem; text-align: center; display: inline-block; transition: transform .18s ease; }
.sidebar-item:hover { padding-left: 1.6rem; }
.sidebar-item:hover i { transform: scale(1.2); }

.card {
    background: #fff;
    border: 1px solid rgb(241 245 249);
    border-radius: 0.9rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.08);
    transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: 0 10px 26px -12px rgba(15, 23, 42, 0.16); }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 30px -10px rgba(15, 23, 42, 0.18); }

.btn-primary, .btn-secondary, .btn-danger {
    position: relative; overflow: hidden; font-weight: 600; border-radius: .6rem;
    padding: .55rem 1.1rem; transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn-primary::after, .btn-secondary::after, .btn-danger::after {
    content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg); pointer-events: none;
}
.btn-primary:hover::after, .btn-secondary:hover::after, .btn-danger:hover::after { animation: btn-shine .8s ease; }
@keyframes btn-shine { from { left: -75%; } to { left: 130%; } }

.btn-primary {
    background: #4f46e5; color: #fff;
    box-shadow: 0 4px 14px -4px rgba(79,70,229,.5);
}
.btn-primary:hover { background: #4338ca; box-shadow: 0 6px 18px -4px rgba(79,70,229,.6); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.btn-secondary {
    background: #fff; color: #334155; border: 1px solid #e2e8f0;
}
.btn-secondary:hover { background: #f8fafc; }

.btn-danger {
    background: #fff; color: #dc2626; border: 1px solid #fecaca;
}
.btn-danger:hover { background: #fef2f2; }

/* Aparición animada de cualquier modal (todas siguen el patrón id="modalX") */
@keyframes modal-pop { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop-panel { from { opacity: 0; transform: scale(.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
div[id^="modal"]:not(.hidden) { animation: modal-pop .15s ease-out; }
div[id^="modal"]:not(.hidden) > div { animation: modal-pop-panel .22s cubic-bezier(.34,1.56,.64,1); }

.form-input, .form-select, .form-textarea {
    width: 100%; border: 1px solid #cbd5e1; border-radius: .55rem; padding: .6rem .85rem;
    font-size: .875rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.form-label { display: block; font-size: .8rem; font-weight: 600; color: #475569; margin-bottom: .3rem; }

/* Skeleton loader mientras carga data por fetch */
.skeleton { position: relative; overflow: hidden; background: #eef1f5; border-radius: .5rem; }
.skeleton::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    animation: skeleton-sweep 1.4s infinite;
}
@keyframes skeleton-sweep { 100% { transform: translateX(100%); } }

/* ---------- DataTables sobre Tailwind ---------- */
table.dataTable { width: 100% !important; border-collapse: separate !important; border-spacing: 0; }
table.dataTable thead th {
    background: #f8fafc; color: #64748b; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .04em; font-weight: 700; padding: .75rem 1rem !important; border-bottom: 1px solid #e2e8f0 !important;
}
table.dataTable tbody td { padding: .75rem 1rem !important; font-size: .875rem; color: #334155; border-bottom: 1px solid #f1f5f9 !important; }
table.dataTable tbody tr:hover { background: #f8fafc; }
div.dataTables_wrapper input[type="search"] {
    border: 1px solid #cbd5e1; border-radius: .55rem; padding: .45rem .8rem; font-size: .85rem;
}
div.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: .5rem !important; padding: .35rem .7rem !important; margin-left: .2rem !important; border: 1px solid transparent !important;
}
div.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #4f46e5 !important; color: #fff !important; border: none !important;
}
div.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) { background: #eef2ff !important; border: none !important; }
div.dataTables_wrapper .dataTables_info { color: #64748b; font-size: .8rem; }

/* ---------- Flatpickr calendar sobre la paleta indigo ---------- */
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: #4f46e5; border-color: #4f46e5; }
.flatpickr-day.today { border-color: #4f46e5; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month input.cur-year { color: #1e293b; }

/* ---------- Boleta imprimible ---------- */
@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; }
    .print-ticket { box-shadow: none !important; border: none !important; width: 100% !important; }
}