/* ==========================================================================
   APP STYLES - Solid Disco ERP & Facturación Electrónica
   Paleta: Slate (Superficie) + Indigo/Brand (Acento)
   ========================================================================== */

/* Variables CSS para consistencia de tema */
:root {
    color-scheme: light;
    --color-surface-ground: #f8fafc;
    --color-surface-card: #ffffff;
    --color-surface-border: #e2e8f0;
    --color-text-main: #0f172a;
    --color-text-muted: #64748b;
    --color-brand-primary: #4f46e5;
}

html.dark,
.dark {
    color-scheme: dark;
    --color-surface-ground: #0f172a;
    --color-surface-card: #172033;
    --color-surface-border: #1e293b;
    --color-text-main: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-brand-primary: #6366f1;
}

/* Scrollbars modernos y discretos */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Barras de desplazamiento finas en contenedores con scroll propio (listas, modales, menú lateral) */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.dark .custom-scrollbar {
    scrollbar-color: #475569 transparent;
}

/* Animación shimmer para Skeletons de carga */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-shimmer {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.dark .skeleton-shimmer {
    background: linear-gradient(90deg, #1e293b 25%, #334155 37%, #1e293b 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Fade in suave de elementos montados */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.25s ease-out forwards;
}

/* Ajustes de foco accesibles */
.focus-ring {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus-ring:focus-visible {
    outline-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Foco visible por defecto para todo lo interactivo (WCAG 2.4.7). :where() no suma especificidad:
   cualquier estilo de foco propio (focus-ring, focus:ring-*, focus:border-*) sigue prevaleciendo. */
:where(a[href], button, summary, [role="button"], [role="tab"], [role="option"], [tabindex]:not([tabindex="-1"]), input[type="checkbox"], input[type="radio"]):focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

/* Movimiento reducido (WCAG 2.3.3): sin animaciones ni transiciones si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* POS en computadora: lista de la venta en la columna ancha (pages/pos.js). Dos líneas por artículo: nombre y total
   arriba; precio, código, existencias y cantidad abajo. «±10» solo si la lista mide 640 px o más. Las clases de
   Tailwind de estos elementos no tocan display (tailwind.css carga después y lo anularía) */
.pos-cart-wide {
    container-type: inline-size;
}

.pos-cart-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name total" "meta qty";
    column-gap: 1rem;
    row-gap: 0.5rem;
    align-items: center;
}

.pos-cart-row + .pos-cart-row {
    border-top-width: 1px;
}

.pos-cart-name { grid-area: name; }
.pos-cart-total { grid-area: total; }
.pos-cart-meta { grid-area: meta; }
.pos-cart-qty { grid-area: qty; }

.pos-cart-step {
    display: none;
}

@container (min-width: 640px) {
    .pos-cart-step {
        display: inline-flex;
    }
}

/* Libros fiscales impresos (pages/reports/*, raíz .fiscal-book): carta horizontal, sin menú ni controles y la tabla
   con bordes finos a 7 pt en todos los libros (el de compras tiene 22 columnas). Todo va acotado a las páginas que
   tienen un .fiscal-book para no cambiar la impresión de otras pantallas. */
.fiscal-book {
    page: fiscal-book;
}

@page fiscal-book {
    size: letter landscape;
    margin: 8mm 6mm 10mm 6mm;
}

@media print {
    body:has(.fiscal-book) {
        background: #ffffff !important;
        color: #0f172a !important;
    }

    body:has(.fiscal-book) header,
    body:has(.fiscal-book) aside,
    body:has(.fiscal-book) nav,
    body:has(.fiscal-book) button,
    body:has(.fiscal-book) input,
    body:has(.fiscal-book) select {
        display: none !important;
    }

    body:has(.fiscal-book) main {
        padding: 0 !important;
        max-width: none !important;
    }

    .fiscal-book .print-table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 7pt !important;
    }

    .fiscal-book .print-table .text-xs {
        font-size: 7pt !important;
        line-height: 1.2 !important;
    }

    /* En papel no hay desplazamiento horizontal: el texto largo pasa a la línea siguiente en lugar de cortarse */
    .fiscal-book .print-table th,
    .fiscal-book .print-table td {
        border: 1px solid #cbd5e1 !important;
        padding: 1px 2px !important;
        white-space: normal !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        color: #0f172a !important;
    }

    /* Los códigos (control, generación, sello) se cortan donde haga falta; los montos nunca */
    .fiscal-book .print-table td.font-mono {
        overflow-wrap: anywhere;
    }

    .fiscal-book .print-table td.text-right {
        white-space: nowrap !important;
    }

    /* En papel no hay desplazamiento: la tabla entera a la vista, sin recortes del contenedor */
    .fiscal-book .overflow-x-auto,
    .fiscal-book .overflow-hidden {
        overflow: visible !important;
    }

    /* Tipo de DTE y de retención como texto: la pastilla de pantalla ocupa ancho que el papel no tiene */
    .fiscal-book .print-table td span {
        white-space: normal !important;
        border: 0 !important;
        padding: 0 !important;
        background: none !important;
        font-weight: inherit !important;
    }

    .fiscal-book .print-table th {
        background-color: #f1f5f9 !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .fiscal-book .print-table tfoot td {
        background-color: #f8fafc !important;
        font-weight: 700 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .fiscal-book .print-table thead {
        display: table-header-group;
    }

    .fiscal-book .print-table tr {
        break-inside: avoid;
    }
}

/* Libros de IVA en pantalla: vista compacta (oculta columnas de referencia) y # + fecha fijos al desplazar.
   El impreso siempre lleva todas las columnas y sin posiciones fijas. */
@media screen {
    .report-compact .col-opt {
        display: none;
    }

    .report-sticky thead th:nth-child(-n + 2),
    .report-sticky tbody td:nth-child(-n + 2) {
        position: sticky;
        z-index: 1;
        background-color: var(--color-surface-card);
    }

    .report-sticky thead th:nth-child(-n + 2) {
        background-color: #f8fafc;
    }

    .dark .report-sticky thead th:nth-child(-n + 2) {
        background-color: #0f172a;
    }

    .report-sticky thead th:first-child,
    .report-sticky tbody td:first-child {
        left: 0;
        width: 4rem;
        min-width: 4rem;
        max-width: 4rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .report-sticky thead th:nth-child(2),
    .report-sticky tbody td:nth-child(2) {
        left: 4rem;
        box-shadow: inset -1px 0 0 var(--color-surface-border);
    }
}

/* ==========================================================================
   Modo oscuro de controles nativos (desplegables y campos del navegador)
   ========================================================================== */

/* Desplegables nativos en modo oscuro */
.dark select {
    background-color: #0f172a;
    color: #f8fafc;
}

.dark select option {
    background-color: #0f172a;
    color: #f8fafc;
}

/* Asegurar legibilidad en campos de texto en modo oscuro */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"]),
.dark textarea {
    color: #f8fafc;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #94a3b8;
}