/* =====================================================================
   noche.css — modo noche
   =====================================================================

   Se activa con data-tema="oscuro" en <html>. El interruptor está junto
   al nombre del usuario y lo que elija el cajero se recuerda en esa
   tablet; si nunca eligió, se sigue lo que traiga configurado Android.

   Este archivo se carga al final, después de pos.css, para poder pintar
   encima de todo sin pelear con la especificidad.

   Paleta: la misma marca, pero de noche. El cobalto de la talavera se
   vuelve el fondo, y el azul y el dorado suben de luminosidad para que
   sigan leyéndose sobre oscuro.
   ===================================================================== */

html[data-tema="oscuro"] {
    /* Que los controles del sistema (fechas, selects, barras de
       desplazamiento) también se pinten oscuros. */
    color-scheme: dark;

    --n-fondo: #0E1420;
    --n-superficie: #161E2C;
    --n-superficie-2: #1E2839;
    --n-superficie-3: #263349;
    --n-borde: #2C3A50;
    --n-borde-suave: #222E42;

    --n-texto: #E9EDF5;
    --n-texto-2: #A7B2C6;
    --n-texto-3: #7C879C;

    --n-azul: #6E9BFF;
    --n-azul-fuerte: #3D6FE0;
    --n-azul-fondo: rgba(110, 155, 255, 0.16);
    --n-dorado: #F3C356;
    --n-verde: #4FD1A0;
    --n-verde-fondo: rgba(79, 209, 160, 0.14);
    --n-rojo: #F98A80;
    --n-rojo-fondo: rgba(249, 138, 128, 0.14);
    --n-ambar: #F0B84C;
    --n-ambar-fondo: rgba(240, 184, 76, 0.14);

    /* Se reescriben también las variables originales, para que todo lo
       que las use quede cubierto sin tocarlo una por una. */
    --azul-talavera: #6E9BFF;
    --azul-talavera-oscuro: #A9C4FF;
    --azul-suave: #2C3A50;
    --crema-fondo: #161E2C;
    --crema-claro: #161E2C;
    --dorado-suave: #F3C356;
    --gris-borde: #2C3A50;
    --texto-suave: #A7B2C6;
    --texto-titulo: #E9EDF5;
    --rojo-error: #F98A80;
    --rosa-error: rgba(249, 138, 128, 0.14);
    --verde-ok: #4FD1A0;
    --verde-ok-fondo: rgba(79, 209, 160, 0.14);
}

/* ---------------------------------------------------------------------
   Fondo
   --------------------------------------------------------------------- */
html[data-tema="oscuro"] body {
    /* La foto de dulces se retira: sobre oscuro ensucia el texto.
       Queda un degradado con el azul de la marca. */
    background:
        radial-gradient(1200px 700px at 15% -10%, #1B2A47 0%, transparent 60%),
        radial-gradient(900px 600px at 100% 0%, #1A2338 0%, transparent 55%),
        var(--n-fondo);
    background-attachment: fixed;
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] body::before {
    /* El punteado de talavera se queda, mucho más discreto. */
    background-image:
        radial-gradient(circle, rgba(147, 178, 255, 0.30) 1px, transparent 1px);
    opacity: 0.10;
}

/* ---------------------------------------------------------------------
   Encabezado y menú
   --------------------------------------------------------------------- */
html[data-tema="oscuro"] .app-header {
    background: rgba(18, 25, 38, 0.96);
    border-bottom-color: var(--n-borde);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

html[data-tema="oscuro"] .app-logo-title {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .app-logo-subtitle,
html[data-tema="oscuro"] .app-card-subtitle,
html[data-tema="oscuro"] .app-card-header-actions,
html[data-tema="oscuro"] .app-sidebar-title,
html[data-tema="oscuro"] .app-nav-sep,
html[data-tema="oscuro"] .form-row label,
html[data-tema="oscuro"] .form-row-smalllabel,
html[data-tema="oscuro"] .pos-section-label,
html[data-tema="oscuro"] .pos-ticket-cajero,
/* Estos se habían quedado fuera y salían en gris oscuro sobre fondo
   oscuro: los subtítulos de todas las tarjetas y las etiquetas de los
   filtros de inventario, historial y fondo de caja. */
html[data-tema="oscuro"] .altas-card-subtitle,
html[data-tema="oscuro"] .altas-list-mini,
html[data-tema="oscuro"] .inv-filters-search label,
html[data-tema="oscuro"] .inv-filters-simple label,
html[data-tema="oscuro"] .altas-card .inv-filters-simple label,
html[data-tema="oscuro"] .inv-filters-range,
html[data-tema="oscuro"] .inv-filters-range label,
html[data-tema="oscuro"] .cash-filter-group label {
    color: var(--n-texto-3);
}

html[data-tema="oscuro"] .app-user-pill {
    background: var(--n-azul-fondo);
    border-color: rgba(110, 155, 255, 0.45);
    color: #C3D6FF;
}

html[data-tema="oscuro"] .app-user-rol {
    background: rgba(255, 255, 255, 0.12);
}

html[data-tema="oscuro"] .app-menu-toggle {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
}

html[data-tema="oscuro"] .app-menu-toggle span,
html[data-tema="oscuro"] .app-menu-toggle span::before,
html[data-tema="oscuro"] .app-menu-toggle span::after {
    background: var(--n-texto);
}

html[data-tema="oscuro"] .app-sidebar {
    background: rgba(20, 27, 41, 0.99);
    border-right-color: var(--n-borde);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.5);
}

html[data-tema="oscuro"] .app-nav a,
html[data-tema="oscuro"] .app-nav button {
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] .app-nav a:hover,
html[data-tema="oscuro"] .app-nav button:hover {
    background: var(--n-superficie-3);
    color: var(--n-texto);
}

html[data-tema="oscuro"] .app-nav a.is-active {
    background: var(--n-azul-fondo);
    color: #BFD3FF;
}

/* ---------------------------------------------------------------------
   Tarjetas y superficies
   --------------------------------------------------------------------- */
html[data-tema="oscuro"] .app-card,
html[data-tema="oscuro"] .altas-card,
html[data-tema="oscuro"] .cash-summary-card,
html[data-tema="oscuro"] .cash-filters,
html[data-tema="oscuro"] .inv-filters {
    background: var(--n-superficie);
    border-color: var(--n-borde);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] .app-card-title,
html[data-tema="oscuro"] .altas-card-title,
html[data-tema="oscuro"] .cash-toggle-title,
html[data-tema="oscuro"] .altas-modal-title {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .altas-list-mini-item {
    border-bottom-color: var(--n-borde-suave);
}

html[data-tema="oscuro"] .altas-list-mini-empty,
html[data-tema="oscuro"] .cash-toggle-sub,
html[data-tema="oscuro"] .inv-empty,
html[data-tema="oscuro"] .imp-tenue,
html[data-tema="oscuro"] .inv-pagination-info,
html[data-tema="oscuro"] .hist-pagination {
    color: var(--n-texto-3);
}

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
html[data-tema="oscuro"] .form-row input[type="text"],
html[data-tema="oscuro"] .form-row input[type="number"],
html[data-tema="oscuro"] .form-row input[type="password"],
html[data-tema="oscuro"] .form-row input[type="file"],
html[data-tema="oscuro"] .form-row input[type="date"],
html[data-tema="oscuro"] .form-row select,
html[data-tema="oscuro"] .form-row textarea,
html[data-tema="oscuro"] .inv-filters input,
html[data-tema="oscuro"] .inv-filters select,
html[data-tema="oscuro"] .cash-filters input,
html[data-tema="oscuro"] .cash-filters select,
html[data-tema="oscuro"] .altas-modal-search input,
html[data-tema="oscuro"] .inv-input,
html[data-tema="oscuro"] .pos-metodo,
html[data-tema="oscuro"] .pos-visor,
html[data-tema="oscuro"] .pos-pago-select {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto);
}

html[data-tema="oscuro"] input::placeholder,
html[data-tema="oscuro"] textarea::placeholder {
    color: var(--n-texto-3);
}

html[data-tema="oscuro"] .form-row input:focus,
html[data-tema="oscuro"] .form-row select:focus,
html[data-tema="oscuro"] .form-row textarea:focus,
html[data-tema="oscuro"] .inv-input:focus {
    outline: none;
    border-color: var(--n-azul);
    background: var(--n-superficie-3);
}

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
html[data-tema="oscuro"] .btn-secondary,
html[data-tema="oscuro"] .btn-small,
html[data-tema="oscuro"] .btn-logout,
html[data-tema="oscuro"] .inv-page-btn,
html[data-tema="oscuro"] .hist-page-btn,
html[data-tema="oscuro"] .stats-chip-btn,
html[data-tema="oscuro"] .pos-btn-secundario,
html[data-tema="oscuro"] .pos-tecla,
html[data-tema="oscuro"] .pos-cat-chip,
html[data-tema="oscuro"] .pos-paso,
html[data-tema="oscuro"] .pos-modal-cerrar,
html[data-tema="oscuro"] .pos-pago-quitar,
html[data-tema="oscuro"] .pos-buscador-limpiar {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto);
}

html[data-tema="oscuro"] .btn-secondary:hover,
html[data-tema="oscuro"] .btn-small:hover,
html[data-tema="oscuro"] .pos-tecla:active,
html[data-tema="oscuro"] .pos-paso:active,
html[data-tema="oscuro"] .pos-card:active {
    background: var(--n-superficie-3);
}

html[data-tema="oscuro"] .btn-primary,
html[data-tema="oscuro"] .btn-small-primary,
/* Este faltaba: usa el degradado de las variables de marca, que de noche
   se aclaran, así que quedaba texto blanco sobre azul pálido. */
html[data-tema="oscuro"] .pos-search-bar button,
html[data-tema="oscuro"] .pos-btn-primario {
    background: var(--n-azul-fuerte);
    border-color: var(--n-azul-fuerte);
    color: #ffffff;
}

html[data-tema="oscuro"] .pos-cat-chip.is-active {
    background: var(--n-azul-fuerte);
    border-color: var(--n-azul-fuerte);
    color: #ffffff;
}

html[data-tema="oscuro"] .pos-pago-quitar,
html[data-tema="oscuro"] .pos-tecla-borrar {
    color: var(--n-rojo);
}

html[data-tema="oscuro"] .altas-view-more {
    color: var(--n-azul);
}

/* ---------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------- */
html[data-tema="oscuro"] .inv-table-wrapper,
html[data-tema="oscuro"] .hist-table-wrapper,
html[data-tema="oscuro"] .cash-table-wrapper {
    background: var(--n-superficie);
    border-color: var(--n-borde);
}

html[data-tema="oscuro"] .inv-table,
html[data-tema="oscuro"] .hist-table,
html[data-tema="oscuro"] .cash-table {
    color: var(--n-texto-2);
    background: transparent;
}

html[data-tema="oscuro"] .inv-table thead,
html[data-tema="oscuro"] .inv-table th,
html[data-tema="oscuro"] .hist-table th,
html[data-tema="oscuro"] .cash-table thead th {
    background: var(--n-superficie-2);
    color: var(--n-texto-3);
    border-color: var(--n-borde);
}

html[data-tema="oscuro"] .inv-table td,
html[data-tema="oscuro"] .hist-table td,
html[data-tema="oscuro"] .cash-table td {
    border-color: var(--n-borde-suave);
}

html[data-tema="oscuro"] .inv-table tbody tr:hover,
html[data-tema="oscuro"] .hist-table tbody tr:hover {
    background: var(--n-superficie-2);
}

html[data-tema="oscuro"] .inv-td-code,
html[data-tema="oscuro"] .inv-td-name {
    color: var(--n-texto);
}

/* ---------------------------------------------------------------------
   Mensajes y píldoras
   --------------------------------------------------------------------- */
html[data-tema="oscuro"] .message-info {
    background: var(--n-azul-fondo);
    color: #BFD3FF;
}

html[data-tema="oscuro"] .message-success {
    background: var(--n-verde-fondo);
    color: #8DEFC6;
}

html[data-tema="oscuro"] .message-warning {
    background: var(--n-ambar-fondo);
    color: #F7D08A;
}

html[data-tema="oscuro"] .message-error,
html[data-tema="oscuro"] .message-danger {
    background: var(--n-rojo-fondo);
    color: #FFB4AC;
}

html[data-tema="oscuro"] .hist-summary-pill,
html[data-tema="oscuro"] .cash-chip,
html[data-tema="oscuro"] .hist-chip-producto {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] .imp-estado-ok {
    background: var(--n-verde-fondo);
    color: #8DEFC6;
}

html[data-tema="oscuro"] .imp-estado-mal {
    background: var(--n-rojo-fondo);
    color: #FFB4AC;
}

html[data-tema="oscuro"] .imp-estado-espera {
    background: var(--n-ambar-fondo);
    color: #F7D08A;
}

html[data-tema="oscuro"] .imp-token {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto-2);
}

/* ---------------------------------------------------------------------
   Fondo de caja
   --------------------------------------------------------------------- */
html[data-tema="oscuro"] .cash-summary-label {
    color: var(--n-texto-3);
}

html[data-tema="oscuro"] .cash-summary-value {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .cash-check {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] .cash-badge,
html[data-tema="oscuro"] .cash-method-badge {
    background: var(--n-superficie-3);
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] .cash-switch-track {
    background: var(--n-superficie-3);
}

/* ---------------------------------------------------------------------
   Punto de venta
   --------------------------------------------------------------------- */
html[data-tema="oscuro"] .pos-mode .pos-panel {
    background: var(--n-superficie);
    border-color: var(--n-borde);
}

html[data-tema="oscuro"] .pos-buscador {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
}

html[data-tema="oscuro"] .pos-buscador:focus-within {
    border-color: var(--n-azul);
    box-shadow: 0 0 0 4px rgba(110, 155, 255, 0.18);
}

html[data-tema="oscuro"] .pos-buscador input {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .pos-escaner-aviso {
    color: var(--n-texto-3);
}

html[data-tema="oscuro"] .pos-card,
html[data-tema="oscuro"] .pos-linea,
html[data-tema="oscuro"] .pos-pago {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto);
}

html[data-tema="oscuro"] .pos-card-precio {
    color: #A9C4FF;
}

html[data-tema="oscuro"] .pos-card-stock {
    background: rgba(255, 255, 255, 0.08);
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] .pos-card.is-agotado .pos-card-stock {
    background: var(--n-rojo-fondo);
    color: var(--n-rojo);
}

html[data-tema="oscuro"] .pos-card.is-favorito {
    border-color: rgba(243, 195, 86, 0.55);
    box-shadow: inset 0 0 0 1px rgba(243, 195, 86, 0.28);
}

html[data-tema="oscuro"] .pos-ticket-titulo,
html[data-tema="oscuro"] .pos-linea-nombre,
html[data-tema="oscuro"] .pos-cantidad,
html[data-tema="oscuro"] .pos-linea-total,
html[data-tema="oscuro"] .pos-pago-nombre,
html[data-tema="oscuro"] .pos-resumen-fila {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .pos-ticket-contador,
html[data-tema="oscuro"] .pos-ticket-vacio,
html[data-tema="oscuro"] .pos-vacio,
html[data-tema="oscuro"] .pos-linea-unitario,
html[data-tema="oscuro"] .pos-pago-detalle,
html[data-tema="oscuro"] .pos-campo-label,
html[data-tema="oscuro"] .pos-modal-sub {
    color: var(--n-texto-3);
}

html[data-tema="oscuro"] .pos-total {
    background: linear-gradient(135deg, #2A4C99, #1D3A79);
}

html[data-tema="oscuro"] .pos-modal-caja,
html[data-tema="oscuro"] .pos-confirmar-caja,
html[data-tema="oscuro"] .altas-modal-dialog {
    background: var(--n-superficie);
    border-color: var(--n-borde);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

html[data-tema="oscuro"] .pos-modal-titulo,
html[data-tema="oscuro"] .pos-confirmar-texto {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .pos-billete {
    background: rgba(243, 195, 86, 0.14);
    border-color: rgba(243, 195, 86, 0.45);
    color: var(--n-dorado);
}

html[data-tema="oscuro"] .pos-resumen-fila.is-cambio {
    background: var(--n-verde-fondo);
    color: #8DEFC6;
}

html[data-tema="oscuro"] .pos-resumen-fila.is-falta {
    color: var(--n-rojo);
}

html[data-tema="oscuro"] .pos-suggest-list {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
}

html[data-tema="oscuro"] .pos-suggest-item:hover {
    background: var(--n-superficie-3);
}

html[data-tema="oscuro"] .pos-suggest-name {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .pos-suggest-meta {
    color: var(--n-texto-3);
}

html[data-tema="oscuro"] .pos-impresora {
    background: var(--n-verde-fondo);
    color: #8DEFC6;
}

html[data-tema="oscuro"] .pos-impresora.is-caida {
    background: var(--n-rojo-fondo);
    color: #FFB4AC;
}

/* ---------------------------------------------------------------------
   El interruptor
   --------------------------------------------------------------------- */
.tema-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 10px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.55);
    background: rgba(255, 255, 255, 0.7);
    color: #4b5563;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

html[data-tema="oscuro"] .tema-switch {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto-2);
}

.tema-switch-riel {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #cbd5e1;
    flex: 0 0 auto;
    transition: background 0.18s ease;
}

html[data-tema="oscuro"] .tema-switch-riel {
    background: var(--n-azul-fuerte);
}

.tema-switch-bolita {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.4);
    transition: transform 0.18s ease;
}

html[data-tema="oscuro"] .tema-switch-bolita {
    transform: translateX(18px);
}

/* El icono cambia de sol a luna sin JavaScript */
.tema-switch-icono::before {
    content: "☀";
    font-size: 15px;
    line-height: 1;
}

html[data-tema="oscuro"] .tema-switch-icono::before {
    content: "☾";
}

.tema-switch-texto {
    display: none;
}

@media (min-width: 900px) {
    .tema-switch-texto {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tema-switch-riel,
    .tema-switch-bolita {
        transition: none;
    }
}

/* ---------------------------------------------------------------------
   Historial y Estadísticas: sus estilos viven dentro de la plantilla,
   con colores claros escritos a mano. Aquí se repintan.
   --------------------------------------------------------------------- */
html[data-tema="oscuro"] .hist-filters,
html[data-tema="oscuro"] .stats-filters,
html[data-tema="oscuro"] .hist-table-wrapper,
html[data-tema="oscuro"] .stats-table-wrapper,
html[data-tema="oscuro"] .stats-summary-card,
html[data-tema="oscuro"] .stats-card {
    background: var(--n-superficie);
    border-color: var(--n-borde);
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] .hist-filter-group label,
html[data-tema="oscuro"] .stats-filters-group label,
html[data-tema="oscuro"] .stats-summary-label,
html[data-tema="oscuro"] .stats-summary-sub,
html[data-tema="oscuro"] .stats-card-subtitle {
    color: var(--n-texto-3);
}

html[data-tema="oscuro"] .hist-filter-group select,
html[data-tema="oscuro"] .hist-filter-group input[type="date"],
html[data-tema="oscuro"] .hist-filter-group input[type="number"],
html[data-tema="oscuro"] .hist-filter-group input[type="text"],
html[data-tema="oscuro"] .stats-filters-group input[type="date"] {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto);
}

html[data-tema="oscuro"] table.hist-table,
html[data-tema="oscuro"] table.stats-table {
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] table.hist-table thead,
html[data-tema="oscuro"] table.stats-table thead {
    background: var(--n-superficie-2);
}

html[data-tema="oscuro"] table.hist-table th,
html[data-tema="oscuro"] table.stats-table th {
    color: var(--n-texto-3);
    border-bottom-color: var(--n-borde);
}

html[data-tema="oscuro"] table.hist-table td,
html[data-tema="oscuro"] table.stats-table td {
    border-bottom-color: var(--n-borde-suave);
}

html[data-tema="oscuro"] table.hist-table tbody tr:hover,
html[data-tema="oscuro"] table.stats-table tbody tr:hover {
    background: var(--n-superficie-2);
}

html[data-tema="oscuro"] .hist-chip-producto,
html[data-tema="oscuro"] .stats-badge {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] .hist-summary-pill {
    background: var(--n-azul-fondo);
    border-color: rgba(110, 155, 255, 0.4);
    color: #C3D6FF;
}

html[data-tema="oscuro"] .hist-summary-pill--utilidad {
    background: var(--n-verde-fondo);
    border-color: rgba(79, 209, 160, 0.5);
    color: #8DEFC6;
}

html[data-tema="oscuro"] .stats-summary-value,
html[data-tema="oscuro"] .stats-card-title {
    color: var(--n-texto);
}

/* Ojo: un <canvas> NO hereda `color`. Chart.js pinta sus ejes y su
   leyenda con sus propios valores, así que el color de noche se le pasa
   desde el guion de estadisticas.html (Chart.defaults). Esta regla solo
   sirve para el texto HTML que rodea a la gráfica. */
html[data-tema="oscuro"] .stats-chart-box {
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] .stats-table-wrapper {
    border-top-color: var(--n-borde);
}

/* --- Fondo de caja --- */
html[data-tema="oscuro"] .caja-saldo-ahora {
    background: var(--n-azul-fondo);
    color: #C3D6FF;
}

html[data-tema="oscuro"] .caja-desglose {
    border-top-color: var(--n-borde);
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] .caja-desglose strong {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .caja-desglose-aviso {
    color: #F7D08A;
}

html[data-tema="oscuro"] .caja-accion {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
}

html[data-tema="oscuro"] .caja-accion--retiro { border-left-color: #F0B84C; }
html[data-tema="oscuro"] .caja-accion--ingreso { border-left-color: #4FD1A0; }
html[data-tema="oscuro"] .caja-accion--ajuste { border-left-color: #7C879C; }

html[data-tema="oscuro"] .caja-accion-titulo {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .caja-accion-sub,
html[data-tema="oscuro"] .caja-ultimo-ajuste {
    color: var(--n-texto-3);
}

html[data-tema="oscuro"] .caja-enlace {
    color: var(--n-azul);
}

html[data-tema="oscuro"] .cash-row--efectivo {
    background: rgba(79, 209, 160, 0.07);
}

/* --- Historial: buscador de producto --- */
html[data-tema="oscuro"] .hist-buscador-limpiar {
    background: rgba(255, 255, 255, 0.08);
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] .hist-sugerencias {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

html[data-tema="oscuro"] .hist-sugerencia {
    border-bottom-color: var(--n-borde-suave);
    color: var(--n-texto);
}

html[data-tema="oscuro"] .hist-sugerencia:hover {
    background: var(--n-superficie-3);
}

html[data-tema="oscuro"] .hist-sugerencia-nombre {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .hist-sugerencia-meta,
html[data-tema="oscuro"] .hist-sugerencia-vacia {
    color: var(--n-texto-3);
}

html[data-tema="oscuro"] .hist-folio {
    color: var(--n-azul);
}

/* --- Detalle de venta --- */
html[data-tema="oscuro"] .detalle-producto {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .detalle-total td {
    border-top-color: var(--n-borde);
    background: var(--n-superficie-2);
    color: var(--n-texto);
}

html[data-tema="oscuro"] .detalle-arriba {
    background: var(--n-verde-fondo);
    color: #8DEFC6;
}

html[data-tema="oscuro"] .detalle-abajo {
    background: var(--n-ambar-fondo);
    color: #F7D08A;
}

/* --- Estadísticas: comparación --- */
html[data-tema="oscuro"] .stats-comparacion {
    background: var(--n-superficie);
    border-color: var(--n-borde);
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] .stats-comparacion-titulo {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .stats-var {
    background: var(--n-superficie-3);
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] .stats-var.is-sube {
    background: var(--n-verde-fondo);
    color: #8DEFC6;
}

html[data-tema="oscuro"] .stats-var.is-baja {
    background: var(--n-rojo-fondo);
    color: #FFB4AC;
}

html[data-tema="oscuro"] .caja-cuenta {
    background: var(--n-superficie-2);
    color: var(--n-texto-2);
}

html[data-tema="oscuro"] .caja-cuenta strong {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .cash-summary-card--ajuste {
    background: var(--n-ambar-fondo);
    border-color: rgba(240, 184, 76, 0.35);
}

html[data-tema="oscuro"] .caja-reinicio {
    border-color: var(--n-borde);
    background: var(--n-superficie-2);
}

/* --- Gestión --- */
html[data-tema="oscuro"] .gestion-tarjeta {
    background: var(--n-superficie);
    border-color: var(--n-borde);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
}

html[data-tema="oscuro"] .gestion-tarjeta-total,
html[data-tema="oscuro"] .gestion-tarjeta-ir {
    color: var(--n-azul);
}

html[data-tema="oscuro"] .gestion-tarjeta-titulo,
html[data-tema="oscuro"] .gestion-etiqueta,
html[data-tema="oscuro"] .gestion-switch-titulo {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .gestion-tarjeta-sub,
html[data-tema="oscuro"] .gestion-ayuda,
html[data-tema="oscuro"] .gestion-conteo {
    color: var(--n-texto-3);
}

html[data-tema="oscuro"] .gestion-buscador input,
html[data-tema="oscuro"] .gestion-campo input[type="text"],
html[data-tema="oscuro"] .gestion-campo input[type="password"],
html[data-tema="oscuro"] .gestion-campo input[type="number"],
html[data-tema="oscuro"] .gestion-campo input[type="file"],
html[data-tema="oscuro"] .gestion-campo select,
html[data-tema="oscuro"] .gestion-campo textarea,
html[data-tema="oscuro"] .gestion-switch {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto);
}

html[data-tema="oscuro"] .gestion-form-pie {
    border-top-color: var(--n-borde);
}

html[data-tema="oscuro"] .gestion-borrar {
    color: var(--n-rojo);
    border-color: rgba(249, 138, 128, 0.4);
}

/* --- Alta rápida --- */
html[data-tema="oscuro"] .alta-bloque {
    background: var(--n-superficie);
    border-color: var(--n-borde);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
}

html[data-tema="oscuro"] .alta-titulo {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .alta-sub {
    color: var(--n-texto-3);
}

html[data-tema="oscuro"] .alta-bloque .gestion-campo input[type="text"],
html[data-tema="oscuro"] .alta-bloque .gestion-campo input[type="password"],
html[data-tema="oscuro"] .alta-bloque .gestion-campo input[type="number"],
html[data-tema="oscuro"] .alta-bloque .gestion-campo input[type="file"],
html[data-tema="oscuro"] .alta-bloque .gestion-campo select {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto);
}

html[data-tema="oscuro"] .alta-pie {
    border-top-color: var(--n-borde);
}


/* --- Mapa del código de barras --- */
html[data-tema="oscuro"] .gestion-codigo-nota {
    background: var(--n-superficie);
    border-color: var(--n-borde);
}
/* Los bloques conservan su color: son una leyenda, y el contraste de
   texto oscuro sobre pastel claro se lee bien en los dos temas. */


/* --- Utilidad contra flujo --- */
html[data-tema="oscuro"] .stats-flujo-bloque {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
}
html[data-tema="oscuro"] .stats-flujo-cuenta { border-bottom-color: var(--n-borde); }

/* Separador con encabezado (panel del catálogo y compras) */
html[data-tema="oscuro"] .cw-aparte { border-color: var(--n-borde); }

/* Buscador con sugerencias (compras: captura e historial) */
html[data-tema="oscuro"] .cp-buscador input,
html[data-tema="oscuro"] .cp-sugerencias {
    background: var(--n-superficie);
    border-color: var(--n-borde);
    color: var(--n-texto);
}
html[data-tema="oscuro"] .cp-sug { border-bottom-color: var(--n-borde); }
html[data-tema="oscuro"] .cp-sug:hover,
html[data-tema="oscuro"] .cp-sug.is-marcada { background: var(--n-azul-fondo); }

/* Cancelación (ventas, compras y gastos) */
html[data-tema="oscuro"] .canc-panel,
html[data-tema="oscuro"] .canc-aviso {
    background: rgba(190, 40, 50, .16);
    border-color: rgba(248, 113, 113, .45);
}
html[data-tema="oscuro"] .canc-texto,
html[data-tema="oscuro"] .canc-aviso,
html[data-tema="oscuro"] .canc-etiqueta { color: #FCA5A5; }
html[data-tema="oscuro"] .canc-abrir {
    background: var(--n-superficie);
    border-color: rgba(248, 113, 113, .45);
    color: #FCA5A5;
}
html[data-tema="oscuro"] .canc-panel input[type="text"] {
    background: var(--n-superficie);
    border-color: rgba(248, 113, 113, .45);
    color: var(--n-texto);
}
html[data-tema="oscuro"] .canc-bloqueo {
    background: rgba(180, 130, 10, .16);
    border-color: rgba(250, 204, 21, .4);
    color: var(--n-ambar);
}
html[data-tema="oscuro"] .canc-etiqueta-fila {
    background: rgba(190, 40, 50, .2);
    color: #FCA5A5;
}
/* El botón de confirmar tiene que seguir siendo el rojo lleno: es el que
   hace el daño y no puede confundirse con el de al lado. */
html[data-tema="oscuro"] .canc-confirmar {
    background: #B91C1C;
    border-color: #B91C1C;
    color: #ffffff;
}
html[data-tema="oscuro"] .canc-botones .canc-cerrar {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto);
}




/* ---------------------------------------------------------------------
   Existencias en negativo

   El rojo de día (#b91c1c sobre rosa claro) es ilegible de noche: se
   apaga contra el fondo oscuro y el número, que es justo lo que hay que
   ver, se pierde. Aquí se usa el rojo claro de la paleta nocturna sobre
   su propio fondo translúcido.
   --------------------------------------------------------------------- */

html[data-tema="oscuro"] .inv-td-stock.es-negativo {
    background: var(--n-rojo-fondo);
    color: var(--n-rojo);
}

/* Tres clases de especificidad, igual que la regla de día, para ganarle
   a la regla general de .inv-input de más arriba. */
html[data-tema="oscuro"] .inv-td-stock.es-negativo .inv-input {
    background: rgba(249, 138, 128, 0.12);
    border-color: rgba(249, 138, 128, 0.5);
    color: var(--n-rojo);
}

html[data-tema="oscuro"] .inv-td-stock.es-agotado {
    color: var(--n-ambar);
}

html[data-tema="oscuro"] .inv-td-stock.es-agotado .inv-input {
    border-color: rgba(240, 184, 76, 0.35);
    color: var(--n-ambar);
}

html[data-tema="oscuro"] .inv-negativos-aviso {
    background: var(--n-rojo-fondo);
    border-color: rgba(249, 138, 128, 0.35);
    color: var(--n-rojo);
}

html[data-tema="oscuro"] .inv-negativos-punto {
    background: var(--n-rojo);
}

html[data-tema="oscuro"] .inv-negativos-btn {
    background: var(--n-superficie-2);
    border-color: rgba(249, 138, 128, 0.45);
    color: var(--n-rojo);
}

html[data-tema="oscuro"] .inv-negativos-btn:hover {
    background: var(--n-superficie-3);
}

/* Ticket: la línea que se lleva más de lo que hay.

   El tinte va SOBRE la superficie, no en lugar de ella. Con un color
   translúcido a secas, la línea marcada perdía la elevación que tienen
   las demás y acababa viéndose más hundida que el resto en vez de
   resaltada, que es justo lo contrario de lo que se busca. */
html[data-tema="oscuro"] .pos-linea.es-sin-existencia {
    background:
        linear-gradient(rgba(249, 138, 128, 0.16), rgba(249, 138, 128, 0.16)),
        var(--n-superficie-2);
    border-color: rgba(249, 138, 128, 0.3);
    box-shadow: inset 3px 0 0 var(--n-rojo);
}

html[data-tema="oscuro"] .pos-linea-pedido,
html[data-tema="oscuro"] .pos-card-stock.es-negativo {
    background: rgba(249, 138, 128, 0.2);
    color: var(--n-rojo);
}

/* El aviso de «se vende bajo pedido» mantiene el fondo lleno también de
   noche: flota sobre la pantalla, no sobre una superficie de la página,
   así que necesita contraste propio. */
html[data-tema="oscuro"] .pos-aviso.is-aviso {
    background: #7C3E0B;
    color: #FDE9C8;
}

/* ---------------------------------------------------------------------
   Pedidos y facturación

   Los fondos claros translúcidos del día se ven sucios sobre oscuro y
   los textos ámbar y verde oscuros desaparecen. Aquí se usan los colores
   claros de la paleta nocturna sobre sus propios fondos.
   --------------------------------------------------------------------- */

html[data-tema="oscuro"] .ped-chip-apartado {
    background: var(--n-ambar-fondo);
    color: var(--n-ambar);
}
html[data-tema="oscuro"] .ped-chip-liquidado {
    background: var(--n-verde-fondo);
    color: var(--n-verde);
}
html[data-tema="oscuro"] .ped-chip-cancelado {
    background: var(--n-rojo-fondo);
    color: var(--n-rojo);
}
html[data-tema="oscuro"] .ped-chip-venta {
    background: var(--n-azul-fondo);
    color: var(--n-azul);
}

html[data-tema="oscuro"] .ped-estado {
    background: var(--n-superficie);
    border-color: var(--n-borde);
}
html[data-tema="oscuro"] .ped-estado.es-apartado {
    background: var(--n-ambar-fondo);
    border-color: rgba(240, 184, 76, 0.35);
}
html[data-tema="oscuro"] .ped-estado.es-liquidado {
    background: var(--n-verde-fondo);
    border-color: rgba(79, 209, 160, 0.35);
}
html[data-tema="oscuro"] .ped-estado.es-cancelado {
    background: var(--n-rojo-fondo);
    border-color: rgba(249, 138, 128, 0.35);
}

html[data-tema="oscuro"] .ped-cifra-saldo { color: var(--n-ambar); }
html[data-tema="oscuro"] .ped-estado.es-liquidado .ped-cifra-saldo {
    color: var(--n-verde);
}

html[data-tema="oscuro"] .ped-abono-form {
    background: var(--n-azul-fondo);
    border-color: rgba(110, 155, 255, 0.4);
}
html[data-tema="oscuro"] .ped-abono-titulo { color: var(--n-azul); }
html[data-tema="oscuro"] .ped-abono-campos input,
html[data-tema="oscuro"] .ped-abono-campos select,
html[data-tema="oscuro"] .fac-campos input,
html[data-tema="oscuro"] .fac-campos select {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto);
}

html[data-tema="oscuro"] .fac-datos strong { color: var(--n-texto); }
html[data-tema="oscuro"] .fac-detalles summary { color: var(--n-azul); }
html[data-tema="oscuro"] .fac-aviso,
html[data-tema="oscuro"] .pos-factura-aviso {
    background: var(--n-ambar-fondo);
    border-color: rgba(240, 184, 76, 0.35);
    color: var(--n-ambar);
}
html[data-tema="oscuro"] .pos-factura-error {
    background: var(--n-rojo-fondo);
    color: var(--n-rojo);
}

html[data-tema="oscuro"] .hist-subfecha { color: var(--n-verde); }
html[data-tema="oscuro"] .hist-summary-pill--saldo {
    background: var(--n-ambar-fondo);
    color: var(--n-ambar);
}
html[data-tema="oscuro"] .hist-summary-apartados {
    border-left-color: rgba(240, 184, 76, 0.55);
}

html[data-tema="oscuro"] .stats-nota {
    background: var(--n-azul-fondo);
    border-left-color: var(--n-azul);
}

/* Punto de venta */
html[data-tema="oscuro"] .pos-modo {
    background: var(--n-superficie-2);
}
html[data-tema="oscuro"] .pos-modo-btn { color: var(--n-texto-2); }
html[data-tema="oscuro"] .pos-modo-btn.is-activo {
    background: var(--n-superficie-3);
    color: var(--n-azul);
}
html[data-tema="oscuro"] .pos-cliente {
    background: var(--n-azul-fondo);
    border-color: rgba(110, 155, 255, 0.35);
}
html[data-tema="oscuro"] .pos-cliente-titulo { color: var(--n-azul); }
html[data-tema="oscuro"] .pos-cliente-nota { color: var(--n-texto-2); }
html[data-tema="oscuro"] .pos-campo {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto);
}
html[data-tema="oscuro"] .pos-btn-factura {
    border-color: var(--n-borde);
    color: var(--n-texto-2);
}
html[data-tema="oscuro"] .pos-btn-factura.tiene-datos {
    background: var(--n-verde-fondo);
    border-color: rgba(79, 209, 160, 0.5);
    color: var(--n-verde);
}

html[data-tema="oscuro"] .ped-chip-factura {
    background: rgba(167, 139, 250, 0.18);
    color: #C4B5FD;
}

html[data-tema="oscuro"] .pos-cantidad-input {
    background: var(--n-superficie-2);
    border-color: rgba(110, 155, 255, 0.45);
    color: var(--n-texto);
}

html[data-tema="oscuro"] .fac-desglose {
    background: var(--n-azul-fondo);
    border-color: rgba(110, 155, 255, 0.32);
}
html[data-tema="oscuro"] .fac-desglose-titulo { color: var(--n-azul); }
html[data-tema="oscuro"] .fac-desglose-tabla td:last-child { color: var(--n-texto); }
html[data-tema="oscuro"] .fac-desglose-total td {
    border-top-color: rgba(110, 155, 255, 0.35);
}

/* ---------------------------------------------------------------------
   Reportes de vitrina
   --------------------------------------------------------------------- */

html[data-tema="oscuro"] .vit-escribir,
html[data-tema="oscuro"] .vit-bloque {
    background: var(--n-superficie);
    border-color: var(--n-borde);
}
html[data-tema="oscuro"] .vit-escribir { border-color: rgba(110, 155, 255, 0.3); }
html[data-tema="oscuro"] .vit-etiqueta,
html[data-tema="oscuro"] .vit-bloque-titulo,
html[data-tema="oscuro"] .vit-fecha,
html[data-tema="oscuro"] .vit-contenido { color: var(--n-texto); }
html[data-tema="oscuro"] .vit-texto,
html[data-tema="oscuro"] .vit-filtro input,
html[data-tema="oscuro"] .vit-filtro select {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
    color: var(--n-texto);
}
html[data-tema="oscuro"] .vit-texto:focus { border-color: var(--n-azul); }
html[data-tema="oscuro"] .vit-ficha {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
}
html[data-tema="oscuro"] .vit-ficha-cabecera {
    border-bottom-color: var(--n-borde);
}
html[data-tema="oscuro"] .vit-autora {
    background: var(--n-azul-fondo);
    color: var(--n-azul);
}
html[data-tema="oscuro"] .vit-hora,
html[data-tema="oscuro"] .vit-nota,
html[data-tema="oscuro"] .vit-vacio,
html[data-tema="oscuro"] .vit-bloque-sub,
html[data-tema="oscuro"] .vit-filtro label { color: var(--n-texto-2); }

html[data-tema="oscuro"] .vit-dia {
    background: var(--n-azul-fondo);
}
html[data-tema="oscuro"] .vit-dia-paso {
    background: var(--n-superficie-2);
    border-color: rgba(110, 155, 255, 0.4);
    color: var(--n-azul);
}
html[data-tema="oscuro"] .vit-dia-paso:hover { background: var(--n-superficie-3); }
html[data-tema="oscuro"] .vit-dia-actual { color: var(--n-texto); }
html[data-tema="oscuro"] .vit-dia-hoy { color: var(--n-azul); }
html[data-tema="oscuro"] .vit-buscador .pos-suggest-list {
    background: var(--n-superficie-2);
    border-color: var(--n-borde);
}

html[data-tema="oscuro"] .inv-check { color: var(--n-texto-2); }

/* ---------------------------------------------------------------------
   Cestos en modo noche

   El cesto tiene que seguir leyéndose como un bloque elevado sobre el
   panel. Una tinta translúcida sola no lo logra —se ve hundido—, así
   que el tinte azul va encima de una superficie opaca.
   --------------------------------------------------------------------- */
html[data-tema="oscuro"] .pos-cesto {
    background: var(--n-superficie-2);
    border-color: rgba(110, 155, 255, 0.35);
}

html[data-tema="oscuro"] .pos-cesto.is-armando {
    background:
        linear-gradient(var(--n-azul-fondo), var(--n-azul-fondo)),
        var(--n-superficie-2);
    border-color: rgba(110, 155, 255, 0.65);
}

html[data-tema="oscuro"] .pos-cesto-titulo {
    color: var(--n-azul);
}

html[data-tema="oscuro"] .pos-cesto-total {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .pos-cesto-sub,
html[data-tema="oscuro"] .pos-cesto-vacio {
    color: var(--n-texto-3);
}

html[data-tema="oscuro"] .pos-cesto-vacio {
    background: rgba(255, 255, 255, 0.05);
}

html[data-tema="oscuro"] .pos-cesto-chip {
    background: var(--n-azul-fondo);
    color: var(--n-azul);
}

html[data-tema="oscuro"] .pos-cesto-accion {
    background: var(--n-superficie-3);
    border-color: var(--n-borde);
    color: var(--n-texto);
}

html[data-tema="oscuro"] .pos-cesto-accion.es-principal {
    background: var(--n-azul-fuerte);
    border-color: var(--n-azul-fuerte);
    color: #FFFFFF;
}

html[data-tema="oscuro"] .pos-cesto-accion.es-quitar {
    border-color: rgba(249, 138, 128, 0.45);
    color: var(--n-rojo);
}

html[data-tema="oscuro"] .pos-cesto-btn {
    background: var(--n-azul-fondo);
    border-color: rgba(110, 155, 255, 0.55);
    color: var(--n-azul);
}

html[data-tema="oscuro"] .pos-cesto-btn.is-armando {
    background: var(--n-azul-fuerte);
    border-color: var(--n-azul-fuerte);
    color: #FFFFFF;
}

html[data-tema="oscuro"] .pos-cesto-ayuda {
    background: var(--n-azul-fondo);
    color: var(--n-texto-2);
}

/* El contenido de un cesto en el detalle de la venta. */
html[data-tema="oscuro"] .detalle-cesto-btn {
    color: var(--n-texto);
}

html[data-tema="oscuro"] .detalle-cesto > td {
    background: var(--n-azul-fondo);
}

html[data-tema="oscuro"] .detalle-cesto-item > td {
    background: rgba(255, 255, 255, 0.03);
}

html[data-tema="oscuro"] .hist-chip-producto.es-cesto {
    background: var(--n-azul-fondo);
    border-color: rgba(110, 155, 255, 0.40);
    color: var(--n-azul);
}

/* El ticket impreso se queda blanco también de noche: es papel, y
   enseñarlo oscuro haría dudar de si así se va a imprimir. Lo que se
   oscurece es la mesa donde está puesto. */
html[data-tema="oscuro"] .ticket-vista {
    background:
        repeating-linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.28) 0 10px,
            rgba(0, 0, 0, 0.38) 10px 20px
        ),
        var(--n-superficie-2);
}

html[data-tema="oscuro"] .ticket-papel {
    background: #FFFFFF;
    color: #111827;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55));
}