/* ═══════════════════════════════════════════════════════════════════════
   PANEL DE ADMINISTRACIÓN BAJO LOS TEMAS PULIDA Y RETAIL
   ═══════════════════════════════════════════════════════════════════════

   common.css ya reasigna las utilidades Tailwind (text-white, bg-white/5,
   border-white/10…) en todo el body salvo el visor de imágenes, así que la
   mayor parte del panel viaja sola. Esta hoja cubre lo que NO es Tailwind:

     1. Las 5 superficies de main.css que llevan `!important` y ganarían
        siempre (.admin-content, .admin-header, .admin-tabs, el backdrop y
        el login). Hay que vencerlas con `!important` propio.
     2. `.input-pro`, que fija `color: white`. Sin esto, en Retail claro
        quedaría texto blanco sobre fondo blanco.
     3. Los colores de estado (insignias de pedidos, KPIs, avisos de margen),
        que se mapean a los tokens --td-ok / --td-warn / --td-danger / --td-info.
     4. Las superficies oscuras escritas a mano en los componentes JS.

   El tema Clásico no entra aquí: todos los selectores arrancan por
   html:is([data-web-theme="pulida"], [data-web-theme="retail"]).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Superficies con !important en main.css ─── */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .admin-content {
    background: var(--td-bg) !important;
    background-image: var(--td-bg-image, none) !important;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .admin-header {
    background: var(--td-nav-bg-solid) !important;
    border-bottom: 1px solid var(--td-line) !important;
    box-shadow: var(--td-card-shadow) !important;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .admin-tabs {
    background: var(--td-bg-2) !important;
    border-bottom: 1px solid var(--td-line) !important;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #admin-modal-backdrop {
    background: var(--td-bg) !important;
    background-image: var(--td-bg-image, none) !important;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #login-view {
    background: var(--td-bg) !important;
    background-image: var(--td-bg-image, none) !important;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(#admin-modal, #manual-sale-modal) {
    color: var(--td-text);
}

/* ─── 2. Formularios ─── */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .input-pro {
    background: var(--td-input);
    color: var(--td-text);
    border-color: var(--td-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .input-pro:focus {
    background: var(--td-input);
    border-color: var(--td-primary);
    box-shadow: 0 0 0 3px var(--td-primary-soft);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .input-pro::placeholder {
    color: var(--td-faint);
}
/* Las <option> se pintan con el tema del sistema operativo: sin esto quedan
   blancas sobre blanco en Retail claro y negras sobre negro al revés. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(select.input-pro, #admin-modal select, #manual-sale-modal select) option {
    background: var(--td-surface-2);
    color: var(--td-text);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(#admin-modal, #manual-sale-modal) :is(input, select, textarea) {
    color: var(--td-text);
}

/* ─── 3. Pestañas y navegación del panel ─── */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .admin-tab {
    color: var(--td-muted);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .admin-tab:hover {
    background: var(--td-hover);
    color: var(--td-text);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .admin-tab.active {
    background: var(--td-primary-soft);
    background-image: none;
    color: var(--td-primary-text);
    border-color: var(--td-primary-line);
    box-shadow: none;
    text-shadow: none;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .finance-subtab {
    color: var(--td-muted);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .finance-subtab:hover {
    background: var(--td-hover);
    color: var(--td-text);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .finance-subtab.active {
    background: var(--td-primary-soft);
    background-image: none;
    color: var(--td-primary-text);
    border-color: var(--td-primary-line);
    box-shadow: none;
    text-shadow: none;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .order-filter-btn {
    background: var(--td-surface-3);
    color: var(--td-muted);
    border-color: var(--td-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .order-filter-btn:hover {
    background: var(--td-hover);
    color: var(--td-text);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .order-filter-btn.active {
    background: var(--td-primary);
    background-image: none;
    color: var(--td-on-primary);
    border-color: var(--td-primary);
    box-shadow: none;
}

/* ─── 4. KPIs, avisos de margen y galería ─── */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .finance-kpi {
    background: var(--td-surface);
    border-color: var(--td-line);
    box-shadow: var(--td-card-shadow);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .finance-kpi-label {
    color: var(--td-faint);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .finance-kpi-value {
    color: var(--td-text);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .finance-kpi-sub {
    color: var(--td-muted);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .margin-banner.good {
    background: var(--td-ok-soft);
    border-color: var(--td-ok-line);
    color: var(--td-ok);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .margin-banner.warn {
    background: var(--td-warn-soft);
    border-color: var(--td-warn-line);
    color: var(--td-warn);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .margin-banner.bad {
    background: var(--td-danger-soft);
    border-color: var(--td-danger-line);
    color: var(--td-danger);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .margin-banner.nodata {
    background: var(--td-neutral-soft);
    border-color: var(--td-neutral-line);
    color: var(--td-neutral);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .gallery-image-row {
    background: var(--td-surface-3);
    border-color: var(--td-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .gallery-image-row.dragging {
    background: var(--td-hover);
    border-color: var(--td-primary-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .gallery-drag-handle {
    color: var(--td-faint);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #gallery-thumb-preview {
    background: var(--td-surface-2);
    border-color: var(--td-line);
    box-shadow: var(--td-shadow-lg);
}

/* ─── 5. Barra de desplazamiento y botón de cerrar ─── */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .admin-scrollbar::-webkit-scrollbar-track {
    background: var(--td-bg-2);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .admin-scrollbar::-webkit-scrollbar-thumb {
    background: var(--td-line-2);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .admin-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--td-primary);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-close-admin {
    background: var(--td-surface-3);
    color: var(--td-muted);
    border-color: var(--td-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #btn-close-admin:hover {
    background: var(--td-danger-soft);
    color: var(--td-danger);
    border-color: var(--td-danger-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .admin-header-icon {
    background: var(--td-primary);
    background-image: none;
    color: var(--td-on-primary);
    box-shadow: none;
}
/* El rayo de dentro lleva .text-brand, que common.css reasigna al color de
   acción: quedaba morado sobre morado, es decir, invisible. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .admin-header-icon > i {
    color: var(--td-on-primary);
}

/* ─── 6. Colores de estado generados por JS ───
   orders.js getStatusBadge() compone las clases por interpolación
   (`bg-${color}-500/15`, `text-${color}-400`, `border-${color}-500/20`), con
   yellow|orange|green|red|gray. Están en la safelist de Tailwind, así que se
   cubren desde aquí en lugar de tocar el JS. Mismo criterio para el resto de
   insignias del panel. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-green-500\/10, .bg-green-500\/15, .bg-green-500\/20, .bg-emerald-600\/20, .bg-emerald-600\/30, .bg-emerald-500\/10) {
    background-color: var(--td-ok-soft);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.border-green-500\/20, .border-green-500\/30, .border-emerald-500\/20) {
    border-color: var(--td-ok-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.text-green-400, .text-green-300, .text-emerald-400, .text-emerald-300) {
    color: var(--td-ok);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-yellow-500\/10, .bg-yellow-500\/15, .bg-yellow-500\/20) {
    background-color: var(--td-warn-soft);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.border-yellow-500\/10, .border-yellow-500\/20, .border-yellow-500\/30) {
    border-color: var(--td-warn-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.text-yellow-400, .text-yellow-300, .text-yellow-400\/90) {
    color: var(--td-warn);
}
/* Naranja aparte del amarillo: en Pedidos son dos estados distintos
   ("Pendiente" y "Enviado") y con el mismo tono se confundían. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-orange-500\/10, .bg-orange-500\/15, .bg-orange-500\/20) {
    background-color: var(--td-warn2-soft);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.border-orange-500\/20, .border-orange-500\/30) {
    border-color: var(--td-warn2-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.text-orange-400, .text-orange-500) {
    color: var(--td-warn2);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-red-500\/10, .bg-red-500\/15, .bg-red-500\/20, .bg-red-500\/30) {
    background-color: var(--td-danger-soft);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.border-red-500, .border-red-500\/10, .border-red-500\/20, .border-red-500\/30) {
    border-color: var(--td-danger-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.text-red-400, .text-red-300, .text-red-400\/80) {
    color: var(--td-danger);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-blue-500\/10, .bg-blue-500\/20, .bg-blue-600\/20, .bg-blue-600\/40) {
    background-color: var(--td-info-soft);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.border-blue-500\/10, .border-blue-500\/20, .border-blue-500\/30) {
    border-color: var(--td-info-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.text-blue-400, .text-sky-400, .text-blue-300, .text-cyan-400, .text-indigo-400) {
    color: var(--td-info);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .text-purple-400 {
    color: var(--td-primary-text);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-gray-500\/10, .bg-gray-500\/15, .bg-gray-500\/20) {
    background-color: var(--td-neutral-soft);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.border-gray-500\/20, .border-gray-500\/30) {
    border-color: var(--td-neutral-line);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.text-gray-400.border-gray-500\/20, .bg-gray-500\/15 .text-gray-400) {
    color: var(--td-neutral);
}
/* Botones sólidos de acción */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-gray-600, .bg-gray-700, .bg-gray-800) {
    background-color: var(--td-surface-3);
    color: var(--td-text);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-red-500, .bg-red-600) {
    /* No el token: en los temas oscuros --td-danger es un rojo claro y el
       texto blanco caía a 2.77:1. #dc2626 aguanta blanco (4.83:1) en todos. */
    background-color: #dc2626;
    color: #fff;
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .bg-orange-500 {
    background-color: #c2410c;
    color: #fff;
}

/* ─── 7. Superficies oscuras escritas a mano en los componentes JS ───
   Ojo: es #1a1830, un dígito distinto del #1a1638 que reasigna common.css.
   Son los modales de Gastos, Proveedores y Compras. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-\[\#1a1830\], .bg-\[\#1E1536\], .bg-\[\#0A0514\]) {
    background-color: var(--td-surface-2);
}
/* Las 7 tarjetas del panel de Analítica llevan un degradado oscuro fijo. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) [class*="from-[#1E1536]"] {
    background-image: none;
    background-color: var(--td-surface);
    border-color: var(--td-line);
}
/* Resplandores neón de las barras de progreso: fuera en ambos temas. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(#admin-modal, #manual-sale-modal) [class*="shadow-[0_0_"] {
    box-shadow: none !important;
}
/* Barras flotantes al pie de los formularios largos. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-\[\#0b0921\]\/90, .bg-\[\#0f0c29\]\/95, .bg-\[\#1a1638\]\/95) {
    background-color: var(--td-nav-bg-solid);
}
/* Sombra dura del desplegable de notificaciones. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #admin-notif-dropdown {
    background-color: var(--td-surface-2);
    border-color: var(--td-line);
    box-shadow: var(--td-shadow-lg);
}

/* ─── 8. Degradados de acción del panel ─── */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(#admin-modal, #manual-sale-modal) :is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-l).from-brand {
    background-image: none;
    background-color: var(--td-primary);
    color: var(--td-on-primary);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(#admin-modal, #manual-sale-modal) .bg-gradient-to-r.from-green-500\/10 {
    background-image: none;
    background-color: var(--td-ok-soft);
}

/* Rótulo "Tecni-Dynamics" bajo el título del panel: morado al 50 % sobre la
   cabecera (1.58:1 en Retail claro, 2.64:1 en los oscuros). */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .admin-header .text-purple-400\/50 {
    color: var(--td-primary-text);
}


/* Botones de icono de la lista de productos y del carrusel (editar, eliminar):
   text-yellow-500 / text-red-500 sobre su tinte daba 1.74:1 y 3.29:1 en
   Retail claro. Van a los tokens de estado del tema. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .text-yellow-500:not(:hover) {
    color: var(--td-warn);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .text-red-500:not(:hover) {
    color: var(--td-danger);
}

/* ─── Contraste (2ª pasada, 2026-09-22): colores de las plantillas JS del panel ─── */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .text-green-500 {
    color: var(--td-ok);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.text-red-200, .text-red-400\/70) {
    color: var(--td-danger);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-cyan-500\/10, .bg-blue-400\/10, .bg-indigo-600\/20) {
    background-color: var(--td-info-soft);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-red-600\/20, .bg-red-400\/10) {
    background-color: var(--td-danger-soft);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .bg-green-600\/20 {
    background-color: var(--td-ok-soft);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .bg-gray-600\/20 {
    background-color: var(--td-neutral-soft);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) :is(.bg-purple-500\/10, .bg-purple-400\/10) {
    background-color: var(--td-primary-soft);
}
/* Iconos decorativos que casi no se veían (estados vacíos, "+" de los botones). */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .text-gray-700 {
    color: var(--td-faint);
}
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) .text-brand\/50 {
    color: var(--td-primary-text);
}
/* Selector de días de Analítica: fondo negro al 50 % con el texto ya reasignado
   a oscuro en Retail claro (4.16:1). Va como un campo más del tema. */
html:is([data-web-theme="pulida"], [data-web-theme="retail"]) #analytics-time-filter {
    background-color: var(--td-input);
    color: var(--td-text);
    border-color: var(--td-line);
}