/* ===================== TEMAS =====================
   El tema se elige en la cabecera y se guarda como preferencia del usuario
   (viaja entre dispositivos). Todo color de fondo, texto o borde sale de estas
   variables: así agregar un tema es redefinir el bloque, sin tocar reglas.

   Criterio de contraste (Felipe tiene astigmatismo): ni blanco puro sobre negro
   puro ni negro puro sobre blanco puro — esos extremos hacen "brillar" el texto
   y cansan la vista. Los claros usan fondos tenues (crema / gris azulado) con
   texto gris muy oscuro, no negro. */
:root,
:root[data-tema="oscuro"] {
    --bg-primary: #0b0f19;
    --bg-secondary: #111827;
    --card-bg: #1e293b;
    --card-border: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    /* Azul cielo claro: el #3b82f6 anterior quedaba en 3,98:1 sobre la tarjeta
       —bajo el mínimo legible— y costaba leer en enlaces y textos chicos. */
    --accent-blue: #60a5fa;
    --accent-hover: #3b82f6;
    --on-accent: #0a2540;         /* texto sobre botones de acento */
    --accent-purple: #a78bfa;
    --accent-success: #10b981;
    --accent-danger: #ef4444;
    --accent-warning: #f59e0b;
    --gradient-primary: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    --border-radius: 12px;

    /* Superficies derivadas (antes escritas a mano en cada regla) */
    --input-bg: rgba(15, 23, 42, 0.6);
    --thead-bg: rgba(15, 23, 42, 0.5);
    --panel-suave: rgba(30, 41, 59, 0.6);
    --hover-bg: rgba(255, 255, 255, 0.05);
    --hover-suave: rgba(255, 255, 255, 0.04);
    --fila-par: rgba(255, 255, 255, 0.015);
    --fila-hover: rgba(96, 165, 250, 0.10);
    --sub-bg: #1c2f52;
    --velo-bg: rgba(15, 23, 42, 0.55);
    --scroll-thumb: #3f5c8c;
    --scroll-track: rgba(15, 23, 42, 0.45);
    --num-neg: #f87171;
    --buscar-bg: rgba(96, 165, 250, 0.10);
    --buscar-bg-foco: rgba(96, 165, 250, 0.18);
    --texto-danger: #fca5a5;
    --texto-info: #93c5fd;
    --chip-paga-bg: rgba(239, 68, 68, 0.18);
    --chip-rem-bg: rgba(16, 185, 129, 0.18);
    --texto-success: #6ee7b7;
    --f29-fija-bg: #1e293b;
    --invertir-icono: 1;   /* ícono de calendario: se invierte en oscuro */
}

/* --- Oscuro grafito: más neutro y cálido que el azul del actual --- */
:root[data-tema="grafito"] {
    --bg-primary: #16181d;
    --bg-secondary: #1d2026;
    --card-bg: #24272f;
    --card-border: #3b3f4a;
    --text-primary: #e8e6e3;      /* hueso, no blanco puro */
    --text-secondary: #a3a29e;
    --accent-blue: #6f9f6a;       /* verde salvia como color de acción */
    --accent-hover: #5c8757;
    --on-accent: #10240e;
    --accent-purple: #a78bfa;
    --accent-success: #34d399;
    --accent-danger: #f87171;
    --accent-warning: #fbbf24;
    --gradient-primary: linear-gradient(135deg, #6f9f6a 0%, #63a89e 100%);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.45);

    --input-bg: rgba(0, 0, 0, 0.25);
    --thead-bg: rgba(0, 0, 0, 0.22);
    --panel-suave: rgba(255, 255, 255, 0.04);
    --hover-bg: rgba(255, 255, 255, 0.06);
    --hover-suave: rgba(255, 255, 255, 0.04);
    --fila-par: rgba(255, 255, 255, 0.02);
    --fila-hover: rgba(111, 159, 106, 0.12);
    --sub-bg: #2a3a2c;
    --velo-bg: rgba(22, 24, 29, 0.6);
    --scroll-thumb: #566254;
    --scroll-track: rgba(0, 0, 0, 0.25);
    --num-neg: #f87171;
    --buscar-bg: rgba(111, 159, 106, 0.12);
    --buscar-bg-foco: rgba(111, 159, 106, 0.20);
    --texto-danger: #fca5a5;
    --texto-info: #b7d9b3;
    --chip-paga-bg: rgba(248, 113, 113, 0.18);
    --chip-rem-bg: rgba(52, 211, 153, 0.18);
    --texto-success: #86efac;
    --f29-fija-bg: #2d3037;
    --invertir-icono: 1;
}

/* --- Claro crema: papel tibio, muy tenue (el hueso anterior cansaba) --- */
:root[data-tema="crema"] {
    --bg-primary: #faf8f4;
    --bg-secondary: #f2efe9;
    --card-bg: #ffffff;
    --card-border: #e4e0d8;
    --text-primary: #2b2926;      /* gris muy oscuro, no negro puro */
    --text-secondary: #635d51;
    --accent-blue: #1d4ed8;
    --accent-hover: #1e3a8a;
    --on-accent: #ffffff;
    --accent-purple: #7c3aed;
    --accent-success: #047857;
    --accent-danger: #b91c1c;
    --accent-warning: #b45309;
    --gradient-primary: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%);
    --shadow-lg: 0 8px 20px -6px rgba(90, 78, 58, 0.16), 0 4px 8px -4px rgba(90, 78, 58, 0.12);

    --input-bg: #ffffff;
    --thead-bg: #f2efe9;
    --panel-suave: #f7f5f1;
    --hover-bg: rgba(0, 0, 0, 0.05);
    --hover-suave: rgba(0, 0, 0, 0.035);
    --fila-par: rgba(0, 0, 0, 0.022);
    --fila-hover: rgba(29, 78, 216, 0.08);
    --sub-bg: #e6ecf8;
    --velo-bg: rgba(250, 248, 244, 0.75);
    --scroll-thumb: #c4bcab;
    --scroll-track: rgba(0, 0, 0, 0.06);
    --num-neg: #b91c1c;
    --buscar-bg: rgba(29, 78, 216, 0.07);
    --buscar-bg-foco: rgba(29, 78, 216, 0.12);
    --texto-danger: #991b1b;
    --texto-info: #1e40af;
    --chip-paga-bg: rgba(185, 28, 28, 0.12);
    --chip-rem-bg: rgba(4, 120, 87, 0.14);
    --texto-success: #065f46;
    --f29-fija-bg: #f7f5f1;
    --invertir-icono: 0;
}

/* --- Claro lavanda: gris con un violeta apenas insinuado, sin tono cielo --- */
:root[data-tema="claro"] {
    --bg-primary: #efeef1;
    --bg-secondary: #e6e4ea;
    --card-bg: #faf9fb;
    --card-border: #d2ced8;
    --text-primary: #262330;
    --text-secondary: #5d5a63;
    --accent-blue: #2563eb;
    --accent-hover: #1d4ed8;
    --on-accent: #ffffff;
    --accent-purple: #7c3aed;
    --accent-success: #047857;
    --accent-danger: #b91c1c;
    --accent-warning: #b45309;
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --shadow-lg: 0 8px 20px -6px rgba(38, 35, 48, 0.16), 0 4px 8px -4px rgba(38, 35, 48, 0.12);

    --input-bg: #ffffff;
    --thead-bg: #e9e7ee;
    --panel-suave: #f2f1f5;
    --hover-bg: rgba(0, 0, 0, 0.05);
    --hover-suave: rgba(0, 0, 0, 0.035);
    --fila-par: rgba(0, 0, 0, 0.022);
    --fila-hover: rgba(37, 99, 235, 0.08);
    --sub-bg: #e2e0ef;
    --velo-bg: rgba(239, 238, 241, 0.75);
    --scroll-thumb: #aca7b8;
    --scroll-track: rgba(0, 0, 0, 0.06);
    --num-neg: #b91c1c;
    --buscar-bg: rgba(37, 99, 235, 0.07);
    --buscar-bg-foco: rgba(37, 99, 235, 0.12);
    --texto-danger: #991b1b;
    --texto-info: #1e40af;
    --chip-paga-bg: rgba(185, 28, 28, 0.12);
    --chip-rem-bg: rgba(4, 120, 87, 0.14);
    --texto-success: #065f46;
    --f29-fija-bg: #f2f1f5;
    --invertir-icono: 0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header Header Navigation */
header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--card-border);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}

.logo-badge {
    background: var(--gradient-primary);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.company-selector {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
}

.company-selector:hover {
    border-color: var(--accent-blue);
}

.btn-portal {
    background: transparent;
    color: var(--accent-blue);
    border: none;
    border-bottom: 2px solid var(--accent-blue);
    border-radius: 2px 2px 0 0;
    padding: 0.5rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-portal:hover {
    background: color-mix(in srgb, var(--accent-blue) 14%, transparent);
}

.btn-portal:active {
    background: color-mix(in srgb, var(--accent-blue) 24%, transparent);
}

/* ===== Layout con barra lateral ===== */
/* Solo el portal fija el alto de la ventana; la página pública /pdf scrollea normal. */
body.app-layout {
    height: 100vh;
    overflow: hidden;
}

/* El shell ocupa el alto restante y NO scrollea: cada panel maneja el suyo. */
.app-shell {
    display: flex;
    flex: 1;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
}

/* La barra lateral queda fija; solo scrollea si su propio menú no cabe. */
.sidebar {
    /* El ancho vive en una variable: el manillar la mueve y queda guardada
       como preferencia del usuario. */
    width: var(--sidebar-w, 240px);
    flex: 0 0 var(--sidebar-w, 240px);
    background: var(--bg-secondary);
    border-right: 1px solid var(--card-border);
    padding: 1rem 0.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    overflow-y: auto;
    align-self: stretch;
}

/* Átem de navegación (hoja del árbol) */
.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

.tab-btn.active {
    /* El texto va en el color de siempre (alto contraste con la barra) y el
       acento marca la pestaña con el fondo y la línea lateral: en claro, texto
       azul sobre azul tenue casi no se leía. */
    color: var(--text-primary);
    background: var(--buscar-bg-foco);
    border-left-color: var(--accent-blue);
    font-weight: 600;
}

.nav-ico { font-size: 1rem; line-height: 1; }

/* Grupo plegable */
.nav-section { margin-top: 0.35rem; }

.nav-group-toggle {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.6rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}

.nav-group-toggle:hover {
    color: var(--text-primary);
    background: var(--hover-suave);
}

.nav-group-label { flex: 1; text-align: left; }

.chevron {
    font-size: 1.05rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.nav-section.open .chevron { transform: rotate(90deg); }

.nav-children {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease;
}

/* Con ramas adentro, Configuración necesita más alto para desplegarse entera. */
.nav-section.open .nav-children { max-height: 40rem; }

/* ---- Ramas dentro de un grupo del menú ----
   Un nivel más: el grupo agrupa por área y la rama agrupa por tema, para que las
   tablas que alimentan a otras no queden al mismo nivel que las pantallas de uso. */
.nav-rama-toggle {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.4rem 0.85rem 0.4rem 1.6rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.nav-rama-toggle:hover { color: var(--text-primary); background: var(--hover-suave); }
.nav-rama-toggle .chevron { font-size: 0.9rem; }
.nav-rama.open .nav-rama-toggle .chevron { transform: rotate(90deg); }

.nav-nietos { max-height: 0; overflow: hidden; transition: max-height 0.2s ease; }
.nav-rama.open .nav-nietos { max-height: 14rem; }
/* Los nietos se indentan un paso más y llevan una guía a la izquierda. */
.nav-nietos .tab-btn {
    padding-left: 3rem;
    font-size: 0.84rem;
    border-left: 1px solid var(--card-border);
    margin-left: 1.9rem;
}

.nav-children .tab-btn {
    padding-left: 2.4rem;
    font-size: 0.87rem;
}

/* Contenido principal: es el único que scrollea. */
main {
    flex: 1;
    min-width: 0;
    padding: 2rem 1.5rem;
    overflow-y: auto;
}

/* ===== Pantalla de inicio de sesión ===== */
.login-screen {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.login-card {
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
}

.login-card h1 { font-size: 1.6rem; margin-bottom: 0.5rem; }

.login-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.btn-login { width: 100%; padding: 0.8rem; font-size: 1rem; }

.login-hint {
    margin-top: 1.75rem;
    margin-bottom: 0;
    font-size: 0.85rem;
}

.login-hint a { color: var(--accent-blue); text-decoration: none; }
.login-hint a:hover { text-decoration: underline; }

/* ---------- Barra lateral: plegar, reordenar y ancho ----------
   Tres cosas independientes: el lápiz enciende el modo reordenar (aparecen los
   puntitos y las ramas se arrastran), la flecha pliega la barra a solo iconos,
   y el manillar del borde cambia el ancho (escritorio nada más). */

.sidebar-top {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0 0.35rem 0.35rem;
}

.sidebar-ctrl {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.3rem 0.45rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.sidebar-ctrl:hover { background: var(--hover-bg); color: var(--text-primary); }
.sidebar-ctrl.activo { color: var(--accent-blue); background: var(--buscar-bg-foco); }

/* --- Plegada: solo los iconos --- */
.sidebar.plegada { --sidebar-w: 62px; padding-left: 0.35rem; padding-right: 0.35rem; }
.sidebar.plegada .nav-group-label,
.sidebar.plegada .chevron,
.sidebar.plegada .nav-children,
.sidebar.plegada .tab-btn > span:not(.nav-ico) { display: none; }
.sidebar.plegada .tab-btn,
.sidebar.plegada .nav-group-toggle { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.plegada .nav-ico { font-size: 1.2rem; }
/* El botón de plegar gira su flecha para indicar que ahora despliega. */
.sidebar.plegada #btnSidebarPlegar { transform: rotate(180deg); }
.sidebar.plegada .sidebar-top { justify-content: center; }
.sidebar.plegada #btnSidebarOrden { display: none; }

/* --- Modo reordenar --- */
.nav-drag {
    display: none;
    cursor: grab;
    color: var(--text-secondary);
    padding-right: 0.35rem;
    font-size: 0.95rem;
    line-height: 1;
    user-select: none;
}
.sidebar.editando .nav-drag { display: inline-block; }
.sidebar.editando .nav-section,
.sidebar.editando .nav-rama { border: 1px dashed var(--card-border); border-radius: 8px; }
.sidebar.editando .nav-section.arrastrando,
.sidebar.editando .nav-rama.arrastrando { opacity: 0.45; }
.sidebar.editando .nav-section.destino,
.sidebar.editando .nav-rama.destino { border-color: var(--accent-blue); border-style: solid; }

/* --- Manillar de ancho (solo escritorio) --- */
.sidebar-resizer {
    flex: 0 0 5px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
}
.sidebar-resizer:hover, body.redimensionando .sidebar-resizer { background: var(--accent-blue); }
/* Mientras se arrastra, que no se seleccione texto por toda la pantalla. */
body.redimensionando { user-select: none; cursor: col-resize; }

/* Responsive: la barra pasa arriba en pantallas chicas */
@media (max-width: 820px) {
    /* En pantallas chicas vuelve el scroll normal de página. */
    body.app-layout { height: auto; overflow: visible; }
    .app-shell { flex-direction: column; overflow: visible; }
    .sidebar,
    .sidebar.plegada {
        width: 100%;
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--card-border);
    }
    /* Sin manillar en móvil: no hay ancho que arrastrar. */
    .sidebar-resizer { display: none; }
    /* La barra pasa arriba a lo ancho: el pie quedaría entre el menú y el
       contenido, que es el peor lugar posible. */
    .sidebar-pie { display: none; }
    /* Plegada no aplica en móvil: se ve el menú completo. */
    .sidebar.plegada .nav-group-label,
    .sidebar.plegada .chevron,
    .sidebar.plegada .tab-btn > span:not(.nav-ico) { display: inline; }
    .sidebar.plegada .nav-children { display: block; }
    main { padding: 1.25rem; overflow: visible; }
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dashboard Cards & Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: var(--shadow-lg);
}

.stat-title {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-desc {
    font-size: 0.8rem;
    color: var(--accent-success);
}

/* Table Design */
.table-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    margin-bottom: 2rem;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.table-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
}

.btn-action {
    background: transparent;
    color: var(--accent-blue);
    border: none;
    border-bottom: 2px solid var(--accent-blue);
    border-radius: 2px 2px 0 0;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-action:hover {
    background: color-mix(in srgb, var(--accent-blue) 14%, transparent);
}

.btn-action:active {
    background: color-mix(in srgb, var(--accent-blue) 24%, transparent);
}

.custom-table-wrapper {
    overflow-x: auto;
}

table.custom-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

table.custom-table th {
    background: var(--thead-bg);
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--card-border);
}

table.custom-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
    color: var(--text-primary);
}

table.custom-table tr:hover {
    background: var(--fila-par);
}

.badge {
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-success { background: rgba(16, 185, 129, 0.2); color: var(--accent-success); }
.badge-warning { background: rgba(245, 158, 11, 0.2); color: var(--accent-warning); }
/* Despacho: venta cancelada que NO debe entregarse (ámbar del tema) y la ya repuesta. */
.card-admin table.tabla-datos tbody tr.fila-cancelada td { background: rgba(245, 158, 11, 0.13); }
.card-admin table.tabla-datos tbody tr.fila-repuesta td { opacity: 0.65; }
.badge-purple  { background: rgba(139, 92, 246, 0.2); color: var(--accent-purple); }

/* Query Card (Public Search) */
.query-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}

.card-header {
    margin-bottom: 1.5rem;
}

.card-header h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.card-header p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Ancla para la rueda de carga dentro de un campo (.input-rueda). */
    position: relative;
}

/* Rueda DENTRO de un campo mientras se consulta algo (ej: la ficha del cliente
   al escribir el RUT). Sin mensajes: aparece, gira y se va. */
.rueda-marco { position: relative; }
.input-rueda {
    position: absolute;
    right: 12px;
    bottom: 13px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--card-border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
    pointer-events: none;
}

.form-group.full-width {
    grid-column: span 2;
}

label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
}

input, select, textarea {
    background: var(--input-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {
    border-color: var(--accent-blue);
}


/* Spinner */
.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
    display: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.alert {
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1.25rem;
    /* Visible por defecto. El display:none original escondía TODOS los avisos
       creados por innerHTML (resultados de CAF, panel del SII, cola vacía de
       Por facturar…): se llenaban bien y nadie los veía. Los pocos avisos
       estáticos que deben partir ocultos ya lo hacen con style inline. */
    font-size: 0.9rem;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--texto-danger);
}

.alert-info {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--texto-info);
}

/* Results section & PDF Viewer */
.results-section {
    margin-top: 2rem;
}

.result-card {
    background: var(--panel-suave);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 1.5rem;
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.doc-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-blue);
}

.doc-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    background: var(--panel-suave);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
}


.references-box {
    margin-top: 1.5rem;
    background: var(--panel-suave);
    border: 1px dashed var(--accent-purple);
    border-radius: 8px;
    padding: 1.25rem;
}

.references-title {
    font-weight: 700;
    color: var(--accent-purple);
    margin-bottom: 0.5rem;
}

.pdf-viewer-container {
    margin-top: 1.5rem;
    width: 100%;
    height: 600px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--card-border);
}

.pdf-viewer-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Pie de la barra lateral. margin-top:auto lo empuja al fondo de la columna
   sin reservarle espacio: si el menú crece, el pie simplemente queda debajo. */
.sidebar-pie {
    /* order alto: el orden de las ramas se aplica moviendo nodos al final del
       aside (sidebarAplicarOrden), así que el pie dejaba de ser el último hijo y
       aparecía en medio del menú. Con flex, el orden visual no depende del DOM:
       999 lo deja siempre abajo pase lo que pase con los nodos. */
    order: 999;
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.3;
    opacity: 0.75;
}

/* Plegada solo quedan iconos: un texto de marca ahí no se entiende. */
.sidebar.plegada .sidebar-pie { display: none; }

@media (max-width: 640px) {
    /* La cabecera lleva grupo + tema + sesión: en 375px no caben en una línea,
       así que se envuelven y los selectores se reparten el ancho. */
    header { padding: 0.7rem 1rem; flex-direction: column; gap: 0.6rem; align-items: stretch; }
    .logo { font-size: 1.15rem; justify-content: center; }
    .header-right { width: 100%; flex-wrap: wrap; gap: 0.5rem; }
    .header-right .company-selector {
        flex: 1 1 45%;
        min-width: 0;
        padding: 0.45rem 0.6rem;
        font-size: 0.82rem;
    }
    #userInfo { width: 100%; justify-content: space-between; gap: 0.5rem !important; }
    #userName {
        font-size: 0.78rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .btn-salir, #btnLogin { padding: 0.45rem 0.9rem; font-size: 0.82rem; white-space: nowrap; }
    .form-grid { grid-template-columns: 1fr; }
    .form-group.full-width { grid-column: span 1; }
    .pdf-viewer-container { height: 450px; }
}

/* Modals */
.modal-backdrop {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    padding: 2rem;
    width: 100%;
    max-width: 600px;
    box-shadow: var(--shadow-lg);
    animation: fadeIn 0.3s;
}
.modal-card h3 {
    margin-bottom: 1.5rem;
}

/* Fix Dropdown Background */
.dropdown-menu {
    background-color: var(--card-bg) !important;
}

/* Truncate long cells */
.truncate-cell {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help; /* Para que sepan que pueden pasar el mouse */
}


/* ===== Pantalla de emisión ===== */
.emitir-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.emitir-row .form-group { flex: 1; min-width: 260px; }
.emitir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.emitir-fieldset {
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 1rem 1.25rem 1.25rem;
    margin-top: 1rem;
}
.emitir-fieldset legend { padding: 0 0.5rem; font-weight: 600; color: var(--text-secondary); }

/* ===== Receptor: cada campo del ancho que aguanta en el XML del SII =====
   Grilla de 12 columnas: razón social 100 caracteres es lo más ancho, comuna
   20 lo más angosto. Así el texto largo se lee completo sin tener que scrollear
   dentro del campo. */
.receptor-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}
.receptor-grid .col-2 { grid-column: span 2; }
.receptor-grid .col-3 { grid-column: span 3; }
.receptor-grid .col-4 { grid-column: span 4; }
.receptor-grid .col-5 { grid-column: span 5; }
.receptor-grid .col-6 { grid-column: span 6; }

/* Contador de caracteres contra el límite del SII: discreto mientras sobra
   espacio, naranjo cerca del tope y rojo al llegar (ahí el texto se recorta). */
.cuenta {
    float: right;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    opacity: 0.6;
}
.cuenta.cerca { color: var(--accent-warning); opacity: 1; }
.cuenta.tope  { color: var(--accent-danger);  opacity: 1; font-weight: 700; }

/* "Borrar" al pie del bloque: solo texto, sin caja, abajo a la derecha. */
.pie-borrar { display: flex; justify-content: flex-end; margin-top: 0.6rem; }
/* Enlaces de texto en los 4 temas (Felipe 2026-09-02: "recuerda los temas
   cuando apliques color"): el color de acción del tema, nunca el azul/púrpura
   del navegador. Los botones-enlace (.btn-portal) traen su propio color. */
a:not([class]) { color: var(--accent-blue); text-decoration: none; }
a:not([class]):hover { text-decoration: underline; }

.enlace-borrar {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
}
.enlace-borrar:hover { color: var(--accent-danger); text-decoration: underline; }
.emitir-tabla { width: 100%; border-collapse: collapse; }
.emitir-tabla th, .emitir-tabla td { padding: 0.4rem 0.5rem; text-align: left; }
.emitir-tabla th { font-size: 0.8rem; color: var(--text-secondary); border-bottom: 1px solid var(--card-border); }
.emitir-tabla input {
    width: 100%; padding: 0.5rem; background: var(--bg-primary);
    border: 1px solid var(--card-border); border-radius: 6px; color: var(--text-primary);
}
.emitir-flex {
    margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 8px;
    background: rgba(59,130,246,0.08); display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.emitir-total { text-align: right; font-size: 1.15rem; margin-top: 1rem; }
.emitir-total strong { color: var(--accent-blue); }
/* Contextual: sin subrayado (la línea por celda ensuciaría las tablas); el
   aviso de clickeable es el fondo tenue al pasar el mouse. */
.btn-eliminar-item {
    background: transparent; border: none; color: var(--accent-danger);
    border-radius: 2px; cursor: pointer; padding: 0.35rem 0.55rem;
    transition: background 0.15s;
}
.btn-eliminar-item:hover {
    background: color-mix(in srgb, var(--accent-danger) 15%, transparent);
}

/* ===== Modal de emisión ===== */
.modal-emision {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.modal-emision-caja {
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    width: min(920px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-emision-cab,
.modal-emision-pie {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    flex-wrap: wrap;
}
.modal-emision-cab { border-bottom: 1px solid var(--card-border); }
.modal-emision-cab strong { flex: 1; }
.modal-emision-pie { border-top: 1px solid var(--card-border); }
.modal-emision iframe {
    flex: 1;
    width: 100%;
    min-height: 55vh;
    border: none;
    background: #525659;
}

/* ===== Botón principal (acción destacada) =====
   Faltaba definirlo: los botones con esta clase salían con el estilo
   por defecto del navegador. */
/* ===== Formato único de botones: "subrayado de color" (2026-08-16) =====
   Elegido por Felipe entre 12 opciones: recto con hombros suaves (2px solo
   arriba), texto del color con su subrayado de 2px, plano en reposo. El fondo
   tenue aparece con el mouse encima — ese es el aviso de "clickeable" — y se
   intensifica al hacer clic. La regla del portal: subrayado = ejecuta algo;
   los contextuales (✕ de ítems, menú ⋮) llevan el hover pero SIN subrayado. */
.btn-primary {
    background: transparent;
    color: var(--accent-blue);
    border: none;
    border-bottom: 2px solid var(--accent-blue);
    border-radius: 2px 2px 0 0;
    padding: 0.55rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.2;
}

.btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-blue) 14%, transparent);
}

.btn-primary:active:not(:disabled) {
    background: color-mix(in srgb, var(--accent-blue) 24%, transparent);
}

.btn-primary:disabled,
.btn-portal:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Cerrar sesión: rojo tenue en cualquier tema (antes iba con estilo escrito a
   mano y en los temas claros quedaba texto blanco sobre fondo claro). */
.btn-salir {
    background: transparent;
    color: var(--texto-danger);
    border: none;
    border-bottom: 2px solid var(--accent-danger);
    border-radius: 2px 2px 0 0;
    padding: 0.5rem 1.2rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-salir:hover { background: color-mix(in srgb, var(--accent-danger) 14%, transparent); }
.btn-salir:active { background: color-mix(in srgb, var(--accent-danger) 24%, transparent); }

/* Variante secundaria para acciones neutras (Cancelar / Cerrar) */
.btn-neutro {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-bottom: 2px solid color-mix(in srgb, var(--text-secondary) 55%, transparent);
    border-radius: 2px 2px 0 0;
    padding: 0.55rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-neutro:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
}

.btn-neutro:active {
    background: color-mix(in srgb, var(--text-secondary) 20%, transparent);
}

/* El input de archivo nativo también se ve anticuado: se estiliza igual que los campos */
input[type="file"] {
    width: 100%;
    padding: 0.55rem;
    background: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    border-radius: 2px;
    padding: 0.4rem 0.9rem;
    margin-right: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

input[type="file"]::file-selector-button:hover {
    border-color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.12);
}

/* ===== Columnas reordenables (arrastrar el encabezado) ===== */
th.col-movible {
    cursor: grab;
    user-select: none;
    position: relative;
}

th.col-movible:hover { background: rgba(59, 130, 246, 0.12); }

th.col-movible:active { cursor: grabbing; }

th.col-arrastrando { opacity: 0.4; }

/* Marca dónde va a caer la columna arrastrada */
th.col-destino {
    box-shadow: inset 3px 0 0 var(--accent-blue);
    background: var(--buscar-bg-foco);
}

/* ===== Tirador para estirar una columna =====
   Vive pegado al borde derecho del título. Se ve al pasar el mouse por encima
   para no ensuciar la cabecera. */
th.col-movible { position: relative; }
.col-tirador {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    /* No hereda el drag del título: el arrastre de aquí cambia el ancho. */
    -webkit-user-drag: none;
}
.col-tirador::after {
    content: "";
    position: absolute;
    top: 20%;
    right: 3px;
    width: 2px;
    height: 60%;
    background: var(--accent-blue);
    opacity: 0;
    transition: opacity 0.12s;
}
th.col-movible:hover .col-tirador::after { opacity: 0.55; }
.col-tirador:hover::after { opacity: 1; }

/* Mientras se arrastra el tirador, el cursor manda en toda la página y no se
   selecciona texto por accidente. */
body.ajustando-col { cursor: col-resize; user-select: none; }
body.ajustando-col .col-tirador::after { opacity: 1; }

/* En celular el tirador es más ancho: con el dedo, 8px no se acierta. */
@media (pointer: coarse) {
    .col-tirador { width: 16px; }
    .col-tirador::after { opacity: 0.35; }
}

/* ===== Filtro de fechas de Ventas ===== */
.ventas-filtro {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--buscar-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
}
.ventas-filtro label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.ventas-filtro input[type="date"] {
    padding: 0.45rem 0.6rem;
    background: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text-primary);
}
.ventas-atajos { display: flex; gap: 0.35rem; }
.ventas-atajos .btn-neutro { padding: 0.4rem 0.75rem; font-size: 0.82rem; }

/* ===== Tarjeta y tablas del panel de administración =====
   Faltaban por completo: las tablas se veían sin bordes ni separadores. */
.card-admin {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
}

.card-admin h3 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Procesos automáticos: una tarjeta por tarea o repaso, dentro de su card.
   Misma piel que card-admin pero sin sombra, para que se lean como una lista. */
.proc-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
}
.proc-card:last-child { margin-bottom: 0; }
.proc-card .proc-titulo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.proc-card .proc-botones { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }

/* Tablas de datos: look moderno, no cuadrícula de planilla.
   Sin bordes verticales; separación por líneas horizontales suaves. */
.card-admin table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.86rem;
    text-align: left;
}

.card-admin table.tabla-datos thead th {
    position: sticky;
    /* Los títulos van pegados justo bajo la fila de subtotal; su alto lo mide
       ajustarTopeTitulos() y lo deja en --alto-subtotal (0 si no hay subtotal). */
    top: var(--alto-subtotal, 0px);
    z-index: 2;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.7rem 0.9rem;
    white-space: nowrap;
    border-bottom: 2px solid var(--card-border);
}

/* Los botones dentro de una misma celda (el "Ver" y el ⋮ de Acciones) miden
   distinto por sus glifos: misma altura fija y centrado para que el subrayado
   de ambos quede en la misma línea. */
.card-admin tbody td .btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.9rem;
    line-height: 1;
    vertical-align: middle;
}

.card-admin tbody td {
    padding: 0.62rem 0.9rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.45);
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-admin tbody tr {
    transition: background 0.12s;
}

.card-admin tbody tr:nth-child(even) {
    background: var(--fila-par);
}

.card-admin tbody tr:hover {
    background: var(--fila-hover);
}

.card-admin tbody tr:last-child td { border-bottom: none; }

/* Los números se alinean a la derecha y con tipografía tabular
   para que las columnas de montos queden parejas. */
.card-admin td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.card-admin td.num-neg { color: var(--num-neg); }

/* Contenedor con scroll propio y cabecera fija */
.tabla-scroll {
    overflow: auto;
    /* TODAS las tablas con el alto de la de Ventas (Felipe 2026-08-29: "que
       todas sean como esa": ~9 filas visibles en PC y el resto con scroll).
       El mínimo evita que se aplaste en pantallas chicas. */
    max-height: calc(100vh - 28.5rem);
    min-height: 260px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
}

/* ===== Barras de scroll a tono con el panel =====
   Las nativas de Windows se veían claras y cuadradas sobre el fondo oscuro. */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 8px; }
::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 8px;
    /* El borde transparente deja aire a los lados del pulgar. */
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ===== Barra de totales (estilo subtotal de planilla, arriba del título) ===== */
.totales-barra {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 1rem;
}

.total-item {
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--accent-blue);
    border-radius: 10px;
    padding: 0.7rem 1.1rem;
    min-width: 140px;
}

.total-item .total-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

.total-item .total-valor {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.total-item.acento { border-left-color: var(--accent-success); }
.total-item.acento .total-valor { color: var(--accent-success); }

/* Selector de SKU dentro de la barra de filtros */
.ventas-filtro select {
    padding: 0.45rem 0.6rem;
    background: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text-primary);
    max-width: 240px;
}

/* El ícono de calendario nativo es oscuro sobre fondo oscuro: se invierte
   (también en los campos de fecha del modal de edición). */
.ventas-filtro input[type="date"]::-webkit-calendar-picker-indicator,
#editModal input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(var(--invertir-icono));
    opacity: 0.75;
    cursor: pointer;
}
.ventas-filtro input[type="date"]:hover::-webkit-calendar-picker-indicator,
#editModal input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* ===== Menú de columnas: selección múltiple con Aplicar ===== */
.dd-cabecera {
    position: sticky;
    top: 0;
    background: var(--card-bg);
    padding: 0.5rem;
    border-bottom: 1px solid var(--card-border);
    z-index: 1;
}
.dd-buscar {
    width: 100%;
    padding: 0.45rem 0.6rem;
    background: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
}
.dd-acciones-rapidas { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.dd-acciones-rapidas button {
    flex: 1;
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 0.3rem;
    font-size: 0.78rem;
    cursor: pointer;
}
.dd-acciones-rapidas button:hover { color: var(--text-primary); border-color: var(--accent-blue); }
.dd-lista {
    max-height: 260px;
    overflow-y: auto;
    padding: 0.35rem 0;
    /* El scroll de la lista no debe arrastrar el fondo de la página (celular). */
    overscroll-behavior: contain;
}
.dd-pie {
    position: sticky;
    bottom: 0;
    background: var(--card-bg);
    border-top: 1px solid var(--card-border);
    padding: 0.55rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
.dd-pie .btn-primary, .dd-pie .btn-neutro { padding: 0.4rem 0.9rem; font-size: 0.85rem; }

/* ===== Subtotal en dos partes =====
   Arriba (en el encabezado, sobre los títulos) el resultado; abajo (al pie de
   la tabla) las casillas que eligen qué columnas se suman. */

/* --- Resultados: fila fija sobre los títulos --- */
.card-admin table.tabla-datos thead tr.fila-subtotal td {
    position: sticky;
    top: 0;
    z-index: 4;
    /* Opaco a propósito: con rgba las filas que pasan por detrás se transparentan. */
    background: var(--sub-bg);
    border-bottom: 1px solid var(--accent-blue);
    padding: 0.4rem 0.9rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    /* A la derecha, igual que los números de cada columna. */
    text-align: right;
    font-weight: 700;
    font-size: 0.85rem;
}
.card-admin table.tabla-datos thead .sub-num { color: var(--text-primary); }
.card-admin table.tabla-datos thead .sub-prom { color: var(--accent-warning); font-style: italic; }
.card-admin table.tabla-datos thead td.sub-vacia {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
}
.card-admin table.tabla-datos thead td.sub-conteo { text-align: center; }

/* --- Casillas: última fila de la tabla, pegada abajo --- */
.card-admin table.tabla-datos tfoot tr.fila-checks td {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--sub-bg);
    border-top: 2px solid var(--accent-blue);
    padding: 0.35rem 0.9rem;
    white-space: nowrap;
    /* Centradas para que todas queden en una misma línea vertical. */
    text-align: center;
}
.card-admin table.tabla-datos tfoot td.sub-check label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.card-admin table.tabla-datos tfoot tr.fila-checks:hover label { opacity: 1; }
.card-admin table.tabla-datos tfoot td.sub-check input { cursor: pointer; margin: 0; }
.card-admin table.tabla-datos tfoot td.sub-vacia {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== Combo con buscador (filtros de Ventas) ===== */
.combo { display: flex; align-items: center; gap: 0.4rem; }
.combo-etiqueta { font-size: 0.88rem; color: var(--text-secondary); white-space: nowrap; }
.combo-caja { position: relative; display: flex; align-items: center; gap: 0.25rem; z-index: 40; }

.combo-boton {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 150px;
    max-width: 190px;
    padding: 0.45rem 0.6rem;
    background: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.86rem;
}
.combo-boton:hover { border-color: var(--accent-blue); }
.combo-boton.con-valor { color: var(--text-primary); border-color: var(--accent-blue); font-weight: 600; }
.combo-texto { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-flecha { font-size: 0.7rem; opacity: 0.7; }

/* SKU necesita más ancho: los códigos son largos */
.combo-ancho .combo-boton { min-width: 449px; max-width: 585px; }
/* En la lista de compra el SKU va más angosto para que los cinco combos y la ✕
   quepan en UNA fila (Felipe 2026-09-08). */
#tab-lista-compra .combo-ancho .combo-boton { min-width: 300px; max-width: 360px; }

.combo-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 260px;
    max-height: 420px;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    z-index: 70;
}
.combo-menu.show { display: flex; }
/* Los menús desplegables scrollean sin arrastrar la página de fondo. */
.combo-menu, .dropdown-menu { overscroll-behavior: contain; }
/* Con un combo ABIERTO, su caja se eleva por sobre los combos vecinos (que
   empatan en z-index y ganaban por venir después en el HTML), el botón de
   columnas y el header fijo: la lista desplegada siempre queda encima.
   Misma regla para el menú de Columnas (vive en .dropdown, z-index 60). */
.combo-caja:has(.combo-menu.show) { z-index: 300; }
.dropdown:has(.dropdown-menu.show) { z-index: 300; }
/* La lista cede espacio a cabecera y pie: si no, el último ítem quedaba cortado. */
.combo-menu .dd-lista { flex: 1 1 auto; min-height: 0; max-height: none; }
.combo-menu label {
    display: block;
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.combo-menu label:hover { background: rgba(59, 130, 246, 0.15); }
.combo-menu label.elegido { background: rgba(59, 130, 246, 0.25); font-weight: 600; }

.combo-menu label.elegida { background: rgba(59, 130, 246, 0.25); font-weight: 600; }

/* ---- Combo de selección única sobre un <select> del formulario ----
   El <select> nativo sigue existiendo (es la fuente de valor) pero no se ve. */
.select-oculto { display: none !important; }

.combo-select { display: block; width: 100%; }
.combo-select .combo-boton {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0.6rem 0.7rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    border-color: var(--card-border);
    font-weight: 500;
}
.combo-select .combo-boton:hover { border-color: var(--accent-blue); }
.combo-select .combo-menu { min-width: 100%; }
.combo-select .dd-unica label { white-space: normal; }
/* ── Meses: matriz día × mes (25-08) ── */
.mm-tabla td, .mm-tabla th { padding: 0.25rem 0.5rem; font-size: 0.84rem; }
.mm-tabla td.num, .mm-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mm-dia { color: var(--text-secondary); font-size: 0.8rem; }
.mm-vacia { color: var(--text-secondary); }
.mm-hoy { background: rgba(59, 130, 246, 0.12); }
.mm-total td { border-top: 2px solid var(--card-border); font-weight: 700; }
.mm-prom td { color: var(--text-secondary); font-size: 0.8rem; }
.mm-comparar { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.mm-chip { border: 1.5px solid var(--card-border); background: transparent; color: var(--text-secondary);
           border-radius: 999px; padding: 0.25rem 0.8rem; font-size: 0.82rem; cursor: pointer; }
.mm-chip.activo { border-color: var(--accent-blue); color: var(--text-primary); background: var(--panel-suave); }
.mm-cmp { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm-dif { color: var(--text-secondary); font-size: 0.78rem; }
.mm-acumcol { border-right: 2px solid var(--card-border); font-weight: 600; }
.mm-hoyfila td { background: rgba(59, 130, 246, 0.10); }

/* ── Salud de procesos (el tablero del creador, 25-08) ── */
.sld-resumen { display: flex; gap: 1rem; flex-wrap: wrap; }
.sld-chip { border: 1.5px solid var(--card-border); border-radius: 12px; padding: 0.5rem 1rem; text-align: center; }
.sld-chip b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.sld-chip.es-mal b { color: var(--texto-danger); }
.sld-chip.es-bien b { color: var(--accent-success, #22c55e); }
.sld-tabla { width: 100%; border-collapse: collapse; }
.sld-tabla th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em;
                color: var(--text-secondary); padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--card-border); }
.sld-tabla td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--panel-suave); font-size: 0.88rem; }
.sld-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sld-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.5rem; }
.sld-ok   { background: #22c55e; }
.sld-warn { background: #eab308; }
.sld-mal  { background: #ef4444; }
.sld-err { color: var(--texto-danger); font-size: 0.8rem; }
.sld-viejo { color: var(--text-secondary); }
.sld-tabla tr.fila-mal td { background: rgba(239, 68, 68, 0.06); }

/* La opción marcada con las flechas del teclado (↓/↑ desde el buscador). */
.combo-select .dd-unica label.marcada,
.combo-menu label.marcada { background: var(--hover-bg); }

/* Botón para limpiar un filtro */
.btn-limpiar {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    border-radius: 2px;
    width: 26px;
    height: 26px;
    line-height: 1;
    cursor: pointer;
    font-size: 0.75rem;
    flex: 0 0 auto;
}
.btn-limpiar:hover { color: #f87171; border-color: #f87171; }

/* Campo de texto con botón de limpiar al lado */
.campo-x { display: flex; align-items: center; gap: 0.35rem; }

/* ===== Filtros por columna (segundo check del menú de Columnas) ===== */
/* La zona no es una caja: cada filtro entra a la banda como un campo más, al
   lado de los de siempre (Empresa, Envío, N° venta, SKU). */
.filtros-cols { display: contents; }
.campo-filtro { font-size: 0.88rem; color: var(--text-secondary); white-space: nowrap; }
/* Anchos calcados de los filtros que ya existían, para que la banda quede
   pareja: par de casillas cortas para números, ~150px de lista (como los
   combos Empresa/Envío), 230px de texto (como "N° venta") y el ancho grande
   solo para columnas de texto largo (títulos, descripciones). */
.campo-filtro input.filtro-num { width: 6.5rem; font-variant-numeric: tabular-nums; }
.campo-filtro input.filtro-fecha { width: 9.5rem; }
.campo-filtro select.filtro-lista { min-width: 150px; max-width: 260px; }
.campo-filtro input.filtro-texto { width: 230px; }
.campo-filtro input.filtro-texto-ancho { width: 340px; }
/* Con un valor puesto, el filtro se nota (mismo lenguaje que la caja de buscar). */
.campo-filtro.con-valor { color: var(--text-primary); font-weight: 600; }

/* Cada fila del menú de Columnas: check de visibilidad + nombre + check de
   filtro. (Especificidad doble a propósito: index.html trae
   ".dropdown-menu label { display:block }" en su <style>.) */
.dropdown-menu .dd-lista label, .dd-lista label { display: flex; align-items: center; gap: 0.4rem; }
.dd-filtro-chk {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    /* Nunca se comprime: con nombres largos (Precio_Unitario, Costo_Variable_v2)
       el que cede es el nombre, no el check. */
    flex-shrink: 0;
}
.dd-filtro-chk:hover { color: var(--accent-blue); }
/* Solo tiene sentido filtrar por una columna que se está viendo: si el check de
   visibilidad está apagado, el de filtro desaparece de esa fila. */
.dd-lista label:has(input[data-col-check]:not(:checked)) .dd-filtro-chk { display: none; }

/* La lista de formatos del botón Descargar: angosta, que son dos opciones.
   El botón es uno más de la barra (Felipe 2026-08-19: como enlace suelto no
   quedaba alineado y el clic directo se disparaba solo). */
.menu-descarga { min-width: 170px; }
.menu-descarga .vista-fila { cursor: pointer; padding: 0.45rem 0.6rem; border-radius: 6px; }
.menu-descarga .vista-fila:hover { background: var(--hover-bg); }
.menu-descarga .vista-nombre { cursor: pointer; }
.campo-corto input[type="text"] { width: 230px; font-variant-numeric: tabular-nums; }

/* Círculo de "buscando" sobre el propio campo: la calculadora rellena sus
   casillas con una consulta al servidor y hay que ver que está trabajando. */
.campo-x.cargando, #emiItems td.cargando { position: relative; }
.campo-x.cargando::after, #emiItems td.cargando::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -7px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--card-border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: girar-cargando 0.7s linear infinite;
    pointer-events: none;
}
@keyframes girar-cargando { to { transform: rotate(360deg); } }
/* En las celdas de ítems el td tiene relleno: la rueda va DENTRO del input. */
#emiItems td.cargando::after { right: 16px; }
/* Reparto fijo de columnas (Felipe 2026-09-01): los anchos del <th> mandan. */
#emiItems { table-layout: fixed; }

/* Campos de la calculadora en DOS COLUMNAS con la etiqueta arriba, como la app
   de escritorio (2026-08-18): con el layout de fila cada casilla se comía el
   ancho y quedaban todas apiladas. */
.calc-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 1rem;
    align-items: end;
}
.calc-campos .campo-x {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.calc-campos .campo-x input[type="text"],
.calc-campos .campo-x input[type="number"] { width: 100%; }
/* El check va en su propia línea, alineado a la izquierda como un campo más. */
.calc-campos .campo-check {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.calc-campos .campo-check input[type="checkbox"] { width: auto; }
@media (max-width: 520px) {
    .calc-campos { grid-template-columns: 1fr; }
}

/* Resultados de la calculadora, en UNA sola fila (Felipe 2026-08-19):
   Pago de ML · Ganancia · Margen, con el margen empujado a la derecha. */
.calc-resultados { display: flex; gap: 2.5rem; flex-wrap: wrap; align-items: center; }
.calc-res-item { display: flex; flex-direction: column; gap: 0.1rem; }
.calc-res-margen { margin-left: auto; align-items: flex-end; }
.calc-lbl { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.3; }
.calc-val { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-val-grande { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-val.azul, .calc-val-grande.azul { color: var(--accent-blue); }
.calc-val.verde, .calc-val-grande.verde { color: var(--accent-success); }
.calc-val.rojo, .calc-val-grande.rojo { color: var(--accent-danger); }

/* ===== Pie de tabla: check de subtotal y cuántas filas ver ===== */
.pie-tabla {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    flex-wrap: wrap;
    margin-top: 0.65rem;
    padding: 0.6rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.pie-tabla .pie-info strong { color: var(--text-primary); }
.pie-check, .pie-filas { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.pie-check input { cursor: pointer; }
.pie-filas select {
    padding: 0.3rem 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}

/* Separador visual entre el bloque de fechas y el de filtros */
.filtro-sep {
    width: 1px;
    align-self: stretch;
    background: var(--card-border);
    margin: 0 0.35rem;
}

/* Campo del rango de fechas */
.campo-rango {
    padding: 0.45rem 0.7rem !important;
    width: 235px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

/* El calendario debe quedar sobre la cabecera fija de la tabla */
.flatpickr-calendar { z-index: 90 !important; }

/* El aviso de sesión iniciada se desvanece solo */
#unauthBanner { transition: opacity 0.5s, transform 0.5s; }
#unauthBanner.ocultando { opacity: 0; transform: translateY(-6px); }


/* ===== Grilla de roles y permisos ===== */
.tabla-roles { width: auto; min-width: 100%; }
.tabla-roles th.rol-cabecera {
    text-align: center;
    border-left: 2px solid var(--card-border);
    color: var(--accent-blue);
}
.tabla-roles th.sub-cab {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.tabla-roles td.celda-area {
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-primary);
}
.tabla-roles td.celda-check { text-align: center; }
.tabla-roles td.celda-check input { cursor: pointer; width: 16px; height: 16px; }
/* Una casilla bloqueada tiene que verse bloqueada, no rota. */
.tabla-roles td.celda-check input:disabled { cursor: not-allowed; opacity: 0.45; }
/* La línea vertical separa visualmente un rol del siguiente. */
.tabla-roles tbody td:nth-child(2n):not(.celda-area) { border-left: 2px solid var(--card-border); }

/* Cabecera de la pantalla de permisos por usuario */
.cabecera-permisos {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
    font-size: 0.88rem;
}
.etiqueta-rol {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid var(--accent-blue);
    border-radius: 999px;
    padding: 0.25rem 0.8rem;
    white-space: nowrap;
}
/* "propio" vs "del rol": de un vistazo se ve qué se tocó a mano. */
.tabla-roles td.celda-origen { font-size: 0.76rem; color: var(--text-secondary); text-align: center; }

/* (2026-08-29: la regla especial de Ventas pasó a ser LA regla general de
   .tabla-scroll — todas las tablas con el mismo alto.) */

/* Dato que no se elige, se muestra: el ambiente lo define la empresa emisora. */
.valor-fijo {
    padding: 0.6rem 0.7rem;
    background: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
/* Producción tiene que saltar a la vista: ahí los documentos son reales. */
.valor-fijo.valor-produccion {
    color: var(--texto-danger);
    border-color: var(--accent-danger);
    background: rgba(239, 68, 68, 0.12);
    font-weight: 600;
}

/* ===== Velo de ARRANQUE del portal =====
   Solo se ve una vez, al entrar: cubre la pantalla mientras el servidor
   despierta (cold start de Azure) y llega el acceso del usuario. */
#veloPortal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.3rem;
}
.velo-portal-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.7rem;
    font-weight: 700;
}
.velo-portal-rueda {
    width: 36px;
    height: 36px;
    border: 3px solid var(--card-border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: girar 0.8s linear infinite;
}
#veloPortalTexto { color: var(--text-secondary); font-size: 0.95rem; }

/* Velo de carga sobre una tabla mientras se consulta */
.velo-carga {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--velo-bg);
    backdrop-filter: blur(1px);
    border-radius: 10px;
    /* Sobre los botones de combos (40) y el menú de columnas (60): con 20,
       los desplegables se asomaban por encima del "Cargando…". */
    z-index: 250;
}
.velo-caja {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--card-bg);
    border: 1px solid var(--accent-blue);
    border-radius: 10px;
    padding: 0.7rem 1.1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.velo-rueda {
    width: 16px;
    height: 16px;
    border: 2px solid var(--card-border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Salto rápido del calendario: grilla de años y de meses sobre el propio
   calendario, para no ir mes a mes con las flechas. */
.salto-panel {
    position: absolute;
    inset: 0;
    background: var(--card-bg);
    border-radius: 8px;
    z-index: 5;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.salto-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.salto-nav {
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1;
}
.salto-nav:hover { color: var(--text-primary); border-color: var(--accent-blue); }
.salto-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
}
.salto-celda {
    background: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.4rem 0;
}
.salto-celda:hover { border-color: var(--accent-blue); background: rgba(59,130,246,0.15); }
.salto-celda.actual { border-color: var(--accent-blue); font-weight: 700; }
.salto-anio {
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.15rem 0.7rem;
}
.salto-anio:hover { border-color: var(--accent-blue); }
/* El calendario necesita ser el marco del panel superpuesto. */
.flatpickr-calendar { position: relative; }

/* Subtítulo dentro del formulario de emisión (bloque de referencia NC/ND) */
.emi-subtitulo {
    margin: 1.1rem 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-top: 1px solid var(--card-border);
    padding-top: 0.9rem;
}

/* ===== Pantalla Por facturar ===== */
#pfTabla { min-height: 200px; }
#pfTabla .pf-check { width: 2.2rem; text-align: center; }
#pfTabla .pf-check input { width: 15px; height: 15px; cursor: pointer; }
#pfTabla .pf-id { font-variant-numeric: tabular-nums; font-size: 0.82rem; }
#pfTabla .pf-estado { font-size: 0.82rem; color: var(--text-secondary); white-space: normal; max-width: 320px; }

/* Interruptor del costo de envío */
.pf-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text-secondary);
    user-select: none;
}
.pf-switch input { display: none; }
.pf-switch-riel {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: var(--card-border);
    position: relative;
    transition: background 0.15s;
    flex-shrink: 0;
}
.pf-switch-riel::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--text-secondary);
    transition: transform 0.15s, background 0.15s;
}
.pf-switch input:checked + .pf-switch-riel { background: var(--accent-blue); }
.pf-switch input:checked + .pf-switch-riel::after { transform: translateX(16px); background: #fff; }

/* ===== Logo en la pantalla de Folios/CAF ===== */
.caf-logo-box { margin-top: 1.2rem; }
.caf-logo-fila { display: flex; align-items: flex-start; gap: 1.2rem; flex-wrap: wrap; }
.caf-logo-marco {
    width: 120px;
    height: 120px;
    border: 1px dashed var(--card-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    overflow: hidden;
    flex-shrink: 0;
}
.caf-logo-marco img { max-width: 100%; max-height: 100%; object-fit: contain; }
.caf-logo-controles { display: flex; flex-direction: column; gap: 0.5rem; max-width: 380px; }
.caf-logo-controles p { margin: 0; font-size: 0.8rem; }
#cafLogoAviso { margin-top: 0.8rem; }

/* Filas de la pantalla Folios/CAF: logo+empresa arriba, archivo+subir abajo */
.caf-fila {
    display: flex;
    align-items: flex-end;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.caf-fila .caf-logo-marco { align-self: flex-start; }
.caf-fila-empresa { flex: 1; min-width: 260px; margin: 0; }
.caf-fila .caf-logo-controles { max-width: 320px; }
.caf-fila-archivo { flex: 1; min-width: 280px; margin: 0; }
.caf-fila-boton { white-space: nowrap; }

/* ===== Ajustes para celular =====
   Es la MISMA página que en PC: el navegador del teléfono recibe idéntico
   HTML/CSS/JS y estas reglas solo re-acomodan según el ancho de pantalla
   (filtros apilados, listas a pantalla completa, altos para el dedo). */
@media (max-width: 640px) {
    main { padding: 1rem 0.75rem; }
    .card-admin, .query-card, .table-card { padding: 1rem; }

    /* Con letra menor a 16px, iPhone hace zoom automático al tocar un campo. */
    input, select, textarea, .dd-buscar, .combo-boton { font-size: 16px; }

    /* Filtros: cada control ocupa su propia fila a lo ancho. */
    .ventas-filtro { padding: 0.6rem 0.7rem; gap: 0.55rem; }
    .filtro-sep { display: none; }
    .ventas-filtro > label, .campo-x { width: 100%; }
    .campo-rango, .campo-corto input[type="text"] { width: 100%; }
    .campo-x input { flex: 1; min-width: 0; }
    .ventas-filtro input[type="date"], .ventas-filtro select { flex: 1; min-width: 0; max-width: none; }
    .combo { width: 100%; }
    .combo-caja { flex: 1; min-width: 0; }
    .combo-boton, .combo-ancho .combo-boton { width: 100%; min-width: 0; max-width: none; }

    /* Combos abiertos: panel casi a pantalla completa con ítems altos para el
       dedo. El buscador sigue arriba, pero el teclado solo sale si se toca
       (app.js no le hace focus en pantalla táctil). La sombra gigante hace de
       velo de fondo; tocar fuera cierra, igual que en PC. */
    .combo-menu.show {
        position: fixed;
        left: 0.6rem; right: 0.6rem; top: 8vh; bottom: 8vh;
        min-width: 0;
        max-height: none;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
    }
    .combo-menu label { padding: 0.8rem 0.9rem; font-size: 1rem; white-space: normal; }
    .combo-menu .dd-lista { max-height: none; }
    .dd-pie .btn-primary, .dd-pie .btn-neutro { padding: 0.7rem 1.1rem; font-size: 0.95rem; }

    /* El menú de Columnas (👁️) también pasa a panel completo: anclado al botón
       con right:0 se salía de la pantalla por la izquierda. Va en columna
       (cabecera / lista que crece / botones al pie) — antes los botones quedaban
       flotando a media altura con un vacío feo debajo. */
    .dropdown .dropdown-menu.show {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0.6rem; right: 0.6rem; top: 8vh; bottom: 8vh;
        min-width: 0;
        max-height: none;
        overflow: hidden;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
    }
    .dropdown .dropdown-menu.show .dd-lista { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
    .dropdown-menu label { padding: 0.7rem 0.6rem; font-size: 0.95rem; }

    /* Botones y pestañas con alto táctil (~44px es el mínimo cómodo). */
    .btn-primary, .btn-neutro, .btn-action { min-height: 44px; }
    .tab-btn { padding: 0.75rem 0.85rem; }
    .btn-limpiar { width: 34px; height: 34px; }

    /* Tablas: alto para unas 7 filas (fila ≈ 39px + cabecera), así el scroll se
       siente natural y no ocupa toda la pantalla. */
    .tabla-scroll, #tab-ventas .tabla-scroll { max-height: 21rem; min-height: 0; }
    .totales-barra { gap: 0.6rem; }
    .total-item { min-width: calc(50% - 0.3rem); padding: 0.55rem 0.8rem; }
    .total-item .total-valor { font-size: 1.05rem; }
    .pie-tabla { gap: 0.8rem; }

    /* Emisión: campos a una columna y modal del PDF a pantalla completa. */
    .emitir-row .form-group { min-width: 100%; }
    /* El receptor pasa a una sola columna: en 375px no cabe la grilla de 12. */
    .receptor-grid { grid-template-columns: 1fr; }
    .receptor-grid .col-2, .receptor-grid .col-3, .receptor-grid .col-4,
    .receptor-grid .col-5, .receptor-grid .col-6 { grid-column: span 1; }
    .modal-emision { padding: 0; }
    .modal-emision-caja { width: 100%; height: 100%; max-height: 100vh; border-radius: 0; }
    .modal-card { padding: 1.25rem; }
    .pdf-viewer-container { height: 70vh; }
}

/* Los campos numéricos van sin las flechitas de subir/bajar del navegador
   (molestaban en PC; en celular no existen). Se escribe el número y listo. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ===== Buscador de tabla (barra de herramientas) =====
   Con lupa dentro y fondo propio para que se lea como buscador y no como un
   campo más. La ✕ solo aparece cuando hay texto que borrar. */
.caja-buscar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 240px;
    padding: 0 0.7rem;
    background: var(--buscar-bg);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    transition: border-color 0.15s, background 0.15s;
}
.caja-buscar:focus-within {
    border-color: var(--accent-blue);
    background: var(--buscar-bg-foco);
}
.buscar-lupa { font-size: 0.85rem; opacity: 0.75; line-height: 1; }
.caja-buscar .table-filter::placeholder { color: var(--text-secondary); opacity: 0.9; }
.buscar-x {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0.2rem;
}
.caja-buscar.con-texto .buscar-x { display: block; }
.buscar-x:hover { color: #f87171; }

/* ===== Menú de Vistas guardadas (junto a Columnas) ===== */
/* La ✕ va al borde derecho, lejos del nombre, para no borrarla por accidente. */
.vista-fila {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.35rem 0.5rem;
    color: var(--text-primary);
    font-size: 0.85rem;
}
.vista-fila .vista-nombre {
    flex: 1;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.15rem 0.2rem;
}
.vista-fila .vista-nombre:hover { color: var(--accent-blue); }
.vista-fila .btn-limpiar { margin-left: auto; }

/* ===== Simulador de precios (tabla Ventas) ===== */
.sim-precio {
    width: 96px;
    padding: 0.3rem 0.45rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    background: var(--bg-primary);
    border: 1px dashed var(--accent-blue);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.86rem;
}
.sim-precio:focus { border-style: solid; }
/* Fila ya tocada: el borde pasa a ámbar para ver de un vistazo qué se movió. */
.sim-precio.sim-tocada { border-color: var(--accent-warning); }
/* Precio que cruza el umbral de envío gratis ($19.990): rojo — el envío se
   estima con la cotización del catálogo y puede variar (ver title del campo). */
.sim-precio.sim-umbral { border-color: var(--accent-danger); border-style: solid; }

/* ===== IVA mensual (F29 sobre el RCV) =====
   El grupo va en una tarjeta destacada y cada empresa en un plegable: primero
   la foto general, y el detalle solo de la empresa que se quiere mirar. */
.f29-anio { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--text-secondary); }
.f29-anio select {
    padding: 0.35rem 0.6rem;
    background: var(--input-bg);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}

.f29-grupo {
    background: var(--panel-suave);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.9rem;
}
.f29-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.f29-empresa {
    background: var(--panel-suave);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    margin-bottom: 0.5rem;
}
.f29-empresa > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 600;
    font-size: 0.92rem;
    list-style: none;
}
.f29-empresa > summary::-webkit-details-marker { display: none; }
.f29-empresa > summary::before { content: "›"; margin-right: 0.5rem; transition: transform 0.15s; display: inline-block; }
.f29-empresa[open] > summary::before { transform: rotate(90deg); }
.f29-empresa[open] > summary { margin-bottom: 0.7rem; }

/* La etiqueta del resumen dice de un vistazo si paga o arrastra saldo. */
.f29-chip {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}
.f29-chip-paga { background: var(--chip-paga-bg); color: var(--texto-danger); }
/* --texto-success (no --accent-success): el verde de acción es muy tenue sobre
   el fondo del chip y quedaba bajo el contraste legible. */
.f29-chip-rem  { background: var(--chip-rem-bg);  color: var(--texto-success); }

.f29-scroll { overflow-x: auto; }
.f29-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 640px;
}
.f29-tabla th {
    text-align: right;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.f29-tabla th:first-child { text-align: left; }
.f29-tabla td {
    text-align: right;
    padding: 0.28rem 0.5rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.f29-tabla td:first-child { text-align: left; color: var(--text-secondary); }

/* La columna de conceptos queda fija al desplazarse por los meses: sin esto,
   en el celular se perdía de vista qué fila se estaba leyendo. El fondo es
   OPACO a propósito (--f29-fija-bg) para que los montos no se vean por debajo. */
.f29-tabla th:first-child,
.f29-tabla td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--f29-fija-bg);
    /* Sombra en vez de borde: marca el corte sin sumar ancho a la columna. */
    box-shadow: 1px 0 0 var(--card-border);
}
/* El título de esa columna se cruza con la cabecera: tiene que ir más arriba. */
.f29-tabla thead th:first-child { z-index: 3; }
.f29-tabla tr.f29-sep td { border-top: 1px solid var(--card-border); padding-top: 0.45rem; }
.f29-tabla tr.f29-pagar td { font-weight: 700; }
.f29-tabla tr.f29-pagar td:first-child { color: var(--text-primary); }
.f29-tabla td.f29-rem { color: var(--texto-success); font-weight: 600; }

/* Respuesta cruda del SII en el aviso de emitidos: seleccionable y compacta */
#emitidosAviso { user-select: text; }
#emitidosAviso .sii-crudo {
    display: block;
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: var(--bg-primary);
    border-radius: 6px;
    font-size: 0.78rem;
    word-break: break-all;
    color: var(--text-secondary);
}

/* Menú "⋮" de acciones por fila. Vive en el <body> y se posiciona con JS: dentro
   de la tabla lo cortaría el scroll horizontal. */
.menu-acciones {
    position: fixed;
    z-index: 3000;
    min-width: 12rem;
    padding: 0.3rem;
    /* --card-bg y no --panel-suave: este último es semitransparente en los temas
       oscuros (0.04 de blanco en grafito) y el menú dejaba ver la tabla debajo.
       Un menú flotante necesita fondo opaco en los cuatro temas. */
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.menu-acciones-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}
.menu-acciones-item:hover { background: var(--bg-secondary); }

/* ── Switch modular (rama Stock/Comunicaciones, Felipe 2026-08-16) ──────────
   Todo sí/no de las tablas se pinta como switch: interactivo cuando la tabla
   lo declara (switchCols) y el rol puede editar; si no, solo visual (sw-solo).
   Reutilizable en toda la web. */
.sw { position: relative; display: inline-block; width: 34px; height: 18px; vertical-align: middle; }
.sw input { opacity: 0; width: 0; height: 0; }
.sw .sw-pista {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--bg-secondary); border: 1px solid var(--card-border);
    border-radius: 999px; transition: background 0.15s ease;
}
.sw .sw-pista::before {
    content: ""; position: absolute; width: 12px; height: 12px;
    left: 2px; top: 2px; border-radius: 50%;
    background: var(--text-secondary); transition: transform 0.15s ease, background 0.15s ease;
}
.sw input:checked + .sw-pista { background: var(--accent-success); border-color: var(--accent-success); }
.sw input:checked + .sw-pista::before { transform: translateX(16px); background: #fff; }
.sw.sw-solo .sw-pista { cursor: default; opacity: 0.65; }

/* ── Fecha de última venta junto al título de cada panel de la calculadora
   (Ajuste de precios, Felipe 2026-08-18): dato informativo, tenue. */
.calc-ult-venta { font-size: 0.78rem; font-weight: 400; color: var(--text-secondary); white-space: nowrap; }

/* ── Tarjetas de Preguntas (opción A estilo Telegram, Felipe 2026-08-19) ──
   Una tarjeta por comprador+publicación; la casilla trae el borrador IA. */
.preg-card { background: var(--card-bg); border: 1px solid var(--card-border);
             border-radius: 12px; padding: 1.1rem 1.3rem; margin-bottom: 1rem; max-width: 900px; }
.preg-cab { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; align-items: baseline; margin-bottom: 0.7rem; }
.preg-cab a { font-size: 0.82rem; color: var(--accent-blue); text-decoration: none; }
.preg-cab a:hover { text-decoration: underline; }
.preg-chip { background: var(--bg-secondary); border: 1px solid var(--card-border);
             border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.78rem; color: var(--text-secondary); }
.preg-chip.emp { color: var(--accent-blue); border-color: var(--accent-blue); }
.preg-fecha { color: var(--text-secondary); font-size: 0.78rem; margin-left: auto; }
.preg-pregunta { background: var(--bg-secondary); border-left: 3px solid var(--accent-blue);
                 border-radius: 0 8px 8px 0; padding: 0.6rem 0.9rem; margin-bottom: 0.8rem; font-style: italic; }
.preg-quien { font-style: normal; font-size: 0.75rem; color: var(--text-secondary); display: block; margin-bottom: 0.2rem; }
.preg-hermana { color: var(--text-secondary); font-size: 0.85rem; font-style: normal; margin: 0.15rem 0; }
.preg-hermana.ultima { color: var(--text-primary); font-weight: 600; }
.preg-lbl { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.25rem; display: block; }
.preg-card textarea { width: 100%; background: var(--bg-secondary); color: var(--text-primary);
                      border: 1px solid var(--card-border); border-radius: 8px; padding: 0.7rem 0.9rem;
                      font-family: inherit; font-size: 0.9rem; min-height: 74px; resize: vertical; }
.preg-card textarea:focus { outline: none; border-color: var(--accent-blue); }
.preg-acciones { display: flex; gap: 0.7rem; align-items: center; margin-top: 0.7rem; }
.preg-enviar { background: var(--accent-success); color: var(--on-accent); font-weight: 700;
               border: 0; border-radius: 8px; padding: 0.55rem 1.4rem; cursor: pointer; font-size: 0.9rem; }
.preg-enviar:disabled { opacity: 0.6; cursor: default; }
.preg-basura { background: transparent; color: var(--accent-danger);
               border: 1px solid var(--accent-danger); border-radius: 8px;
               padding: 0.5rem 0.8rem; cursor: pointer; font-size: 0.9rem; }
.preg-card.apagada { opacity: 0.55; }
.preg-estado { color: var(--accent-success); font-size: 0.82rem; font-weight: 600; }
/* texto informativo tenue (lo usaba el modal sin definición formal) */
.texto-suave { color: var(--text-secondary); font-size: 0.85rem; }

/* ── Dinámica de la lista de compra (Felipe 2026-08-22) ──
   Misma estructura de la tabla dinámica del Excel (Sector > Tienda > Producto,
   total por tienda, total por sector y total general), pero en PANTALLA con el
   lenguaje sobrio del resto de la web: títulos en versalitas como las otras
   tablas, bandas apenas insinuadas y el acento azul del sistema para marcar los
   totales. El naranja de Excel se veía como un parche —sobre todo el amarillo
   del total de sector— y por eso salió de aquí.
   La IMAGEN del WhatsApp sí conserva los naranjos del Excel sobre fondo blanco:
   la miran el socio y el empleado fuera de la web. Vive en PALETA_DINAMICA. */
.din-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.din-bloque { min-width: 340px; }
.din-fecha { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 0.5rem; }

.din-tabla {
    border-collapse: collapse;
    font-size: 0.86rem;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    overflow: hidden;
}
.din-tabla th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.55rem 0.75rem;
    white-space: nowrap;
    border-bottom: 2px solid var(--card-border);
}
.din-tabla td { padding: 0.38rem 0.75rem; color: var(--text-primary); }
.din-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Bandas verticales: la celda se pinta en TODAS las filas del grupo aunque el
   nombre aparezca solo en la primera (como las celdas combinadas de Excel). */
.din-c-sector { background: var(--panel-suave); font-weight: 600; }
/* La tienda va SIN fondo a propósito: en grafito, crema y claro las variables
   --panel-suave, --hover-suave y --hover-bg caen casi en el mismo color y los
   tres niveles se veían planos. Sin fondo, la jerarquía queda: banda de sector
   > tienda limpia > totales con su propio tono. */
.din-c-tienda { background: transparent; }

/* Línea solo bajo el producto, no bajo las bandas: así no aparecen escalones.
   Por clase, porque Sector y Tienda pueden no estar (Felipe 2026-09-08). */
.din-item td.din-c-prod, .din-item td.din-num {
    border-bottom: 1px solid var(--card-border);
}

.din-tot-tienda td { background: var(--bg-secondary); font-weight: 700;
                     border-top: 1px solid var(--card-border); }
.din-tot-tienda td.din-c-sector { background: var(--panel-suave); border-top: none; }

.din-tot-sector td {
    background: var(--sub-bg);
    color: var(--text-primary);
    font-weight: 700;
    border-top: 1px solid var(--accent-blue);
    border-bottom: 1px solid var(--accent-blue);
}
.din-tot-general td {
    font-weight: 700;
    border-top: 2px solid var(--accent-blue);
}
.din-nota { color: var(--text-secondary); font-style: italic; font-size: 0.78rem; }
.din-copiado { color: var(--texto-success, var(--accent-success)); font-size: 0.85rem; font-weight: 600; }

/* ── Lista de compra: fila que se está borrando (Felipe 2026-08-21) ──
   "el borrar era lento, necesito saber que lo está haciendo": apenas se aprieta
   el basurero la fila se tacha y se apaga. Los campos quedan DESHABILITADOS por
   JS (no solo con pointer-events: eso frena el mouse pero no el teclado si la
   casilla ya tenía el foco, y se podía seguir escribiendo en una fila que ya
   iba camino a borrarse). */
#tbl-lista-compra tr.fila-borrando { opacity: 0.4; text-decoration: line-through; }
/* "Traer de…" (Felipe 2026-09-07): un botón que despliega las tres fuentes. */
.lc-traer { position: relative; display: inline-block; }
.lc-traer > summary { list-style: none; cursor: pointer; display: inline-block; }
.lc-traer > summary::-webkit-details-marker { display: none; }
.lc-traer[open] > summary { border-color: var(--accent-blue); }
.lc-traer-menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 70;
    display: flex; flex-direction: column; gap: 0.3rem; min-width: 220px;
    padding: 0.45rem; background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.lc-traer-menu .btn-neutro { width: 100%; text-align: left; }
/* SKU anotado más de una vez (Felipe 2026-09-06): el ámbar de aviso del tema,
   el mismo de la venta cancelada en Despacho. Los inputs son transparentes, así
   que basta pintar la celda. */
#tbl-lista-compra tbody tr.fila-repetida td { background: rgba(245, 158, 11, 0.13); }
/* Sin comprar: bodega en negativo = urgente (Felipe 2026-09-07), mismo ámbar. */
#tbl-sin-comprar tbody tr.fila-urgente td { background: rgba(245, 158, 11, 0.13); }
/* Inventario guardando en segundo plano (Felipe 2026-09-07): SOLO la fila del SKU
   en curso va en gris, con la rueda en vez de los botones y el switch quieto; el
   resto de la tabla se sigue usando. */
#tbl-stock-bodega tbody tr.fila-guardando td { opacity: 0.55; background: rgba(148, 163, 184, 0.12); }
#tbl-stock-bodega tbody tr.fila-guardando label.sw { pointer-events: none; }
#tbl-stock-bodega .inv-rueda { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; opacity: 1; }
#tbl-lista-compra tr.fila-borrando input,
#tbl-lista-compra tr.fila-borrando select,
#tbl-lista-compra tr.fila-borrando button { pointer-events: none; text-decoration: line-through; }

/* Anchos POR DEFECTO. Son solo el punto de partida: cada columna se arrastra
   por su tirador y el ancho elegido viaja con las preferencias del usuario.
   Medidos para el peor caso real: cantidades de 4 cifras (1000), precios de
   5 (19.990) y el SKU más largo del catálogo (40 caracteres). */
/* Ancho mínimo = suma de las columnas: con 12 columnas la tabla desbordaba al
   100% y se aplastaba; ahora aparece el scroll lateral (Felipe 2026-09-07). */
#tbl-lista-compra { table-layout: fixed; min-width: 1630px; }
#tbl-lista-compra th, #tbl-lista-compra td { overflow: hidden; }

/* CAMPOS SIN RECUADRO (Felipe 2026-08-22). Cada celda era una caja de
   formulario y la pantalla no se leía como tabla de datos: "ese contorno
   completo del campo es el que no me gusta". Ahora el campo es invisible hasta
   que se usa — se ilumina al pasar el mouse (así se distingue lo editable de
   Stock y Última compra, que no lo son) y al escribir suma el subrayado.
   Todo con las variables de tema: --hover-bg y --buscar-bg ya vienen resueltas
   para los cuatro (en los claros son negros translúcidos, en los oscuros
   blancos), así que se ve bien en oscuro, grafito, crema y claro. */
#tbl-lista-compra tbody td { padding: 0; }
#tbl-lista-compra tbody td.celda-ro { padding: 0.55rem 0.7rem; }
#tbl-lista-compra tbody input,
#tbl-lista-compra tbody select {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.86rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 2px solid transparent;
    outline: none;
    transition: background 0.12s ease;
}
#tbl-lista-compra tbody input:hover,
#tbl-lista-compra tbody select:hover { background: var(--hover-bg); }
#tbl-lista-compra tbody input:focus,
#tbl-lista-compra tbody select:focus {
    background: var(--buscar-bg);
    border-bottom-color: var(--accent-blue);
}
#tbl-lista-compra tbody input:disabled,
#tbl-lista-compra tbody select:disabled { background: transparent; }
/* La fila vacía del final se insinúa apenas, para que se note dónde escribir. */
#tbl-lista-compra tr.fila-nueva input::placeholder { color: var(--text-secondary); }
/* Anchos: los de las columnas de datos los pone aplicarAnchosLista() por NOMBRE
   (data-col), porque las columnas se mueven (Felipe 2026-09-08); aquí solo las
   dos fijas: la casilla (th.th-check) y el basurero. */
/* Lista es un solo dígito (1..9): centrado se lee mejor que pegado al borde. */
#tbl-lista-compra td.lc-lista input { text-align: center; }
/* Resultado de una línea procesada: se lee completo aunque sea largo. */
#tbl-lista-compra td.lc-detalle { white-space: normal; overflow: visible; }
/* Acciones de la lista y de Sin comprar a la DERECHA, como el resto de la web. */
.lc-acciones { justify-content: flex-end; }
#tab-sin-comprar .ventas-filtro #scChips { margin-right: auto; }
/* Casilla de marcar todo sin título (Felipe 2026-09-07): el cuadrado arriba se
   entiende solo y así la columna queda angosta. Vale para todas las tablas. */
th.th-check { width: 40px; text-align: center; }
th.th-check input { margin: 0; }
/* Fila de acciones de la lista: Excel y Actualizar pegados a la derecha. */
.lc-derecha { margin-left: auto; display: inline-flex; gap: 0.5rem; align-items: center; }
/* Botón que se prende y apaga (Dropi "Último procesado"). */
.btn-alternar.activo { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(59, 130, 246, 0.12); }

/* Fila de subtotal, con el mismo lenguaje visual que la de Ventas. */
/* El pie queda PEGADO abajo del área con scroll (Felipe 2026-09-08: "ahora
   tengo que hacer scroll para verlo"). */
#tbl-lista-compra tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--sub-bg);
    border-top: 2px solid var(--accent-blue);
    padding: 0.4rem 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
#tbl-lista-compra tfoot .sub-num { text-align: right; }

/* En pantalla angosta la tabla vuelve al ancho automatico: con table-layout
   fijo y 10 columnas no cabria. El filtro de SKU ya trae su ancho de
   .combo-ancho, el mismo de Ventas y Catalogo. */
@media (max-width: 900px) {
    #tbl-lista-compra { table-layout: auto; min-width: 0; }
}

/* ── Autocompletar de las casillas de la lista de compra (Felipe 2026-08-22) ──
   Reemplaza al <datalist> nativo: lo dibujaba el navegador (ignora los temas) y
   en Android mandaba las opciones a la barra del teclado, como burbujas grises
   sin texto.
   PC: panel flotante pegado al campo, se abre al escribir.
   TELÉFONO: el mismo patrón que los combos de los filtros —que ahí SÍ
   funcionan— panel casi a pantalla completa, centrado, con velo y buscador
   propio. Anclarlo al campo no servía: con el teclado abierto quedaba tapado. */
.combo-celda-panel {
    display: none;
    position: fixed;
    z-index: 900;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
}
.combo-celda-panel.abierto { display: block; }
.combo-celda-op, .combo-celda-vacio {
    padding: 0.5rem 0.75rem;
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.combo-celda-op { color: var(--text-primary); cursor: pointer; }
.combo-celda-op:hover, .combo-celda-op.marcada { background: var(--hover-bg); }
.combo-celda-op + .combo-celda-op { border-top: 1px solid var(--card-border); }
.combo-celda-vacio { color: var(--text-secondary); font-size: 0.8rem; }

/* Panel del teléfono: hoja de MEDIA PANTALLA hacia abajo (Felipe 2026-08-22:
   "podríamos dejarla de mitad de pantalla para abajo") — así la tabla queda
   visible arriba mientras se elige, y el panel queda cerca del pulgar. La
   sombra gigante hace de velo; tocar fuera cierra. */
.combo-celda-panel.cc-movil {
    display: none;
    left: 0; right: 0; top: 50vh; bottom: 0;
    width: auto; max-height: none;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    border-bottom: none;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
}
.combo-celda-panel.cc-movil.abierto { display: flex; }
.cc-cab {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.7rem;
    border-bottom: 1px solid var(--card-border);
    background: var(--bg-secondary);
}
.cc-cab .cc-buscar {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    padding: 0.6rem 0.7rem;
    background: var(--input-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: var(--text-primary);
}
.cc-cab .cc-usar, .cc-cab .cc-cerrar {
    flex: 0 0 auto;
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
}
.cc-cab .cc-usar { color: var(--accent-blue); border-color: var(--accent-blue); }
.cc-lista {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Inercia de iOS y, sobre todo, que el gesto de deslizar quede para la
       lista y no lo intercepte la página de atrás. */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.cc-movil .combo-celda-op, .cc-movil .combo-celda-vacio {
    padding: 0.9rem 1rem;
    font-size: 1rem;
    white-space: normal;
}
/* La opción MARCADA en el teléfono (tocar marca, "Usar" aplica): tiene que
   verse fuerte, es la confirmación visual de qué va a quedar. */
.cc-movil .combo-celda-op.marcada {
    background: var(--buscar-bg-foco);
    border-left: 4px solid var(--accent-blue);
    font-weight: 700;
}

/* ── Salidas / Ajuste de Stock (Felipe 2026-08-24) ──
   Las dos tarjetas de contadores replican la pantalla de la app; los
   Pendientes son filas con el 0 editable, como su galería. */
.sal-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 540px; margin: 0 auto; }
.sal-tarjeta {
    border: 1.5px solid var(--card-border);
    border-radius: 14px;
    padding: 0.9rem;
    text-align: center;
}
.sal-titulo { margin: 0 0 8px; font-weight: 700; font-size: 1rem; }
.sal-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sal-grilla > div { display: flex; flex-direction: column; }
.sal-et { color: var(--text-secondary); font-size: 0.8rem; }
.sal-num { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.sal-pend {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0.6rem 0.7rem;
    border-left: 3px solid var(--accent-blue);
    background: var(--panel-suave);
    border-radius: 0 8px 8px 0;
    margin-bottom: 8px;
}
.sal-pend-check, #salPendTodos { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.sal-pend-info { flex: 1; min-width: 0; }
.sal-pend-sku { margin: 0; font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; }
.sal-pend-sub { margin: 0; font-size: 0.78rem; color: var(--text-secondary); }
.sal-pend-motivo { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.sal-pend-motivo.es-omitido { color: var(--texto-danger); }
.sal-pend-valor {
    width: 76px;
    text-align: center;
    font-size: 0.95rem;
    padding: 0.45rem 0.4rem;
}
.sal-pend-valor[data-dirty="1"] { border-color: var(--accent-blue); }
.sal-pend-valor:disabled { opacity: 0.55; }
/* Estado de la fila durante y después del envío (patrón .pf-estado). */
.sal-pend-estado { font-size: 0.82rem; font-weight: 600; white-space: normal; max-width: 260px; text-align: right; }
.sal-pend-estado.es-enviando { color: var(--text-secondary); }
.sal-pend-estado.es-ok { color: var(--accent-blue); }
.sal-pend-estado.es-error { color: var(--texto-danger); }
/* La fila que ya salió queda apagada y sin borde azul: no hay nada que hacer
   con ella hasta el próximo Actualizar. */
/* La fila enviada solo se atenúa — sin tachar el motivo (Felipe 2026-08-29:
   "quedó en 0 queda tachado, no lo quiero tachado"). */
.sal-pend.esta-lista { border-left-color: var(--card-border); opacity: 0.65; }

@media (max-width: 640px) {
    .sal-tarjetas { grid-template-columns: 1fr; }
}

/* El mismo círculo de "trabajando" de la calculadora, pero para un botón que
   queda apretado un rato (el pegar desde Excel de la lista de compra). */
.btn-cargando { position: relative; padding-right: 30px !important; }
.btn-cargando::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -7px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--card-border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: girar-cargando 0.7s linear infinite;
    pointer-events: none;
}

/* La lista de compra muestra ~7 filas y el resto con su propio scroll (Felipe
   2026-08-26: "se hace mucho scroll para llegar a las tablas dinámicas").
   Los títulos ya son sticky, así que al bajar no se pierden. */
/* El doble de filas a la vista que antes (Felipe 2026-09-09: "en pc se ven 4, que sean 7 u 8"). */
#tab-lista-compra .tabla-scroll { max-height: 400px; min-height: 0; }

/* ═══ POSVENTA: detalle (Felipe 2026-09-09) ═══ Modal ancho, chat a la izquierda y ficha a la derecha. */
.pv-modal { max-width: 1100px; max-height: 92vh; display: flex; flex-direction: column; padding: 1.25rem 1.5rem; }
.pv-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.pv-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; min-height: 0; flex: 1 1 auto; }
.pv-izq { display: flex; flex-direction: column; min-height: 0; }
.pv-chat { flex: 1 1 auto; min-height: 260px; max-height: 52vh; overflow-y: auto; border: 1px solid var(--card-border); border-radius: 10px; padding: 0.75rem; background: var(--bg-secondary); }
.pv-msg { max-width: 82%; margin: 0.35rem 0; padding: 0.5rem 0.75rem; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--card-border); font-size: 0.9rem; white-space: pre-wrap; word-break: break-word; }
.pv-msg.out { margin-left: auto; background: var(--panel-suave); }
.pv-msg.ml { border-color: var(--accent-blue); }
.pv-msg.bloqueado { border-color: var(--texto-danger); }
/* Mientras ML no confirma: la burbuja ya esta, pero se nota que va en camino. Si ML la
   rechaza queda marcada y con los dos botones (Felipe 2026-09-11). */
.pv-msg.saliendo { opacity: 0.65; border-style: dashed; }
.pv-msg.fallo { border-color: var(--texto-danger); }
.pv-msg.fallo .pv-hora { color: var(--texto-danger); }
.pv-reintento { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.pv-reintento button { font-size: 0.75rem; padding: 0.15rem 0.5rem; }
.pv-quien { display: block; font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 0.15rem; }
.pv-hora { display: block; font-size: 0.7rem; color: var(--text-secondary); text-align: right; margin-top: 0.2rem; }
.pv-dia { text-align: center; font-size: 0.72rem; color: var(--text-secondary); margin: 0.6rem 0 0.2rem; }
/* Sin color propio se quedaba con el azul por defecto del navegador (#0000EE), ilegible
   sobre el fondo del chat en oscuro y en grafito (Felipe 2026-09-11). */
/* La foto dentro de la burbuja: chica y recortada, para que el chat siga leyendose. Al
   tocarla se abre grande (Felipe 2026-09-11). */
.pv-foto { display: block; max-width: 180px; max-height: 180px; margin: 0.35rem 0 0;
           border-radius: 8px; border: 1px solid var(--card-border); object-fit: cover; cursor: zoom-in; background: var(--panel-suave); }
.pv-foto:not([src]) { min-width: 120px; min-height: 90px; }
.pv-visor { z-index: 1200; }
.pv-visor-caja { max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; gap: 0.5rem; }
.pv-visor-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--text-secondary); font-size: 0.85rem; }
.pv-visor-caja img { max-width: 92vw; max-height: 84vh; border-radius: 10px; background: var(--card-bg); }
.pv-adj { display: inline-block; margin: 0.25rem 0.4rem 0 0; font-size: 0.8rem;
          color: var(--accent-blue); text-decoration: underline; }
.pv-adj:hover { color: var(--text-primary); }
.pv-escribir { margin-top: 0.5rem; }
.pv-escribir textarea { width: 100%; resize: vertical; }
.pv-escribir-pie { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.35rem; }
.pv-der { border-left: 1px solid var(--card-border); padding-left: 1rem; min-width: 0; }
.pv-ficha { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; margin: 0; font-size: 0.88rem; }
.pv-ficha dt { color: var(--text-secondary); white-space: nowrap; }
.pv-ficha dd { margin: 0; word-break: break-word; }
.pv-ficha dd.urgente { color: var(--texto-danger); font-weight: 600; }
@media (max-width: 860px) {
    .pv-cols { grid-template-columns: 1fr; }
    .pv-der { border-left: none; padding-left: 0; border-top: 1px solid var(--card-border); padding-top: 0.75rem; }
    .pv-chat { max-height: 40vh; }
}

/* ═══ POSVENTA: tarjetas (Felipe 2026-09-09, tanda 5a) ═══ */
/* PESTANAS, NO FILTROS (Felipe 2026-09-11). Las pestanas usaban la misma pildora que los
   chips de filtro de la fila de abajo: dos filas identicas y ninguna pista de cual era cual.
   Ahora son pestanas de verdad, subrayadas como en ML, y los filtros siguen siendo pildoras. */
.pv-tabs { display: flex; gap: 1.3rem; flex-wrap: wrap; margin-bottom: 0.8rem;
           border-bottom: 1px solid var(--card-border); }
.pv-tab { border: none; border-bottom: 3px solid transparent; background: transparent;
          color: var(--text-secondary); border-radius: 0; padding: 0.4rem 0.1rem 0.5rem;
          margin-bottom: -1px; cursor: pointer; font-weight: 600; font-size: 0.95rem; }
.pv-tab:hover { color: var(--text-primary); }
.pv-tab.activo { border-bottom-color: var(--accent-blue); color: var(--text-primary); }
.pv-tab b { font-variant-numeric: tabular-nums; margin-left: 0.3rem; }
.pv-sub { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
/* Elegir varias y marcarlas juntas (Felipe 2026-09-11): la casilla va pegada al SKU y la
   barra solo aparece cuando hay algo elegido. */
.pv-seleccion { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
                margin: 0 0 0.6rem; padding: 0.4rem 0.6rem; border-radius: 8px;
                background: var(--panel-suave); border: 1px solid var(--accent-blue); }
.pv-seleccion button { font-size: 0.8rem; padding: 0.2rem 0.6rem; }
/* El motivo de lo que no salio solo, en Por facturar: se lee de un vistazo sin abrir nada
   (Felipe 2026-09-11). */
.pf-fallo { color: var(--texto-danger); font-weight: 600; }

.pv-lista { display: flex; flex-direction: column; gap: 0.6rem; }
/* La tarjeta es por FILAS (Felipe 2026-09-10): el SKU solo en la primera —puede ser largo—,
   debajo los datos y el motivo, y los botones al final. Antes los botones peleaban el ancho
   con el texto y las frases salían partidas en vertical. Sin clic en toda la caja: el texto
   se selecciona y se copia; para abrir está el botón. */
/* La tarjeta se parte en dos: una franja angosta para elegirla y el cuerpo de siempre. Toda
   la franja marca -no hay que apuntarle al cuadradito- y el check va centrado (Felipe
   2026-09-11). */
.pv-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1rem;
           background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; user-select: text; }
/* Solo las que se pueden elegir (Reclamos y Mensajes) se parten en franja + cuerpo. Las de
   Devoluciones no llevan franja y con la grilla puesta a todas quedaban partidas al medio. */
.pv-card.elegible { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0; padding: 0; overflow: hidden; }
.pv-cuerpo { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1rem; min-width: 0; }
.pv-elegir { display: flex; align-items: center; justify-content: center; cursor: pointer;
             border-right: 1px solid var(--card-border); background: var(--panel-suave); }
.pv-elegir:hover { background: color-mix(in srgb, var(--accent-blue) 18%, transparent); }
.pv-elegir input { cursor: pointer; }
.pv-card:hover { border-color: var(--accent-blue); }
.pv-card.atender { border-left: 4px solid var(--texto-danger); }
.pv-card .pv-sku { font-size: 1rem; font-weight: 600; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.pv-card .pv-datos { font-size: 0.84rem; color: var(--text-secondary); }
.pv-card .pv-motivo { font-weight: 600; font-size: 0.9rem; margin-top: 0.15rem; }
.pv-card .pv-estado { font-size: 0.88rem; color: var(--text-secondary); }
.pv-card .pv-ultimo { font-size: 0.85rem; color: var(--text-secondary); }
.pv-card .pv-plazo { font-size: 0.8rem; font-weight: 400; color: var(--text-secondary); }
.pv-card .pv-plazo.urgente { color: var(--texto-danger); font-weight: 600; }
.pv-card .pv-acc { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.55rem; }
.pv-card .pv-acc button { white-space: nowrap; }
.pv-vacio { color: var(--text-secondary); padding: 1rem 0.5rem; }
/* Lo que se va a mandar adjunto con el mensaje (Felipe 2026-09-11): una ficha por archivo,
   con su peso y una equis para sacarlo antes de enviar. */
.pv-adjuntos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0; }
.pv-adjuntos:empty { display: none; }
.pv-adj-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.5rem;
               background: var(--bg-secondary); border: 1px solid var(--card-border);
               border-radius: 999px; font-size: 0.82rem; max-width: 22rem; }
.pv-adj-chip small { color: var(--text-secondary); }
.pv-adj-chip button { background: none; border: none; color: var(--text-secondary);
                      cursor: pointer; padding: 0 0 0 0.1rem; font-size: 0.9rem; line-height: 1; }
.pv-adj-chip button:hover { color: var(--texto-danger); }
/* La lista de compra mientras un boton trabaja (Felipe 2026-09-11): todo apagado, y algo
   apagado tambien a la vista para que se note que hay algo en curso. */
#tab-lista-compra.lc-ocupada .tabla-scroll { opacity: 0.72; }
#tab-lista-compra.lc-ocupada { cursor: progress; }
/* La lista de compra mientras un boton trabaja (Felipe 2026-09-11): todo apagado y algo
   apagado tambien a la vista, para que se note que hay algo en curso. */
#tab-lista-compra.lc-ocupada .tabla-scroll { opacity: 0.72; }
#tab-lista-compra.lc-ocupada { cursor: progress; }
/* La lista de compra mientras un boton trabaja (Felipe 2026-09-11): todo apagado y algo
   apagado tambien a la vista, para que se note que hay algo en curso. */
#tab-lista-compra.lc-ocupada .tabla-scroll { opacity: 0.72; }
#tab-lista-compra.lc-ocupada { cursor: progress; }
/* Aviso de carga fallida dentro de la tabla (Felipe 2026-09-11): antes el error se iba a la
   consola y la pantalla mentia con los datos de la consulta anterior. */
.tabla-fallo { text-align: center; padding: 1.2rem 0.75rem; color: var(--texto-danger); font-weight: 600; }
.tabla-fallo .texto-suave { font-weight: 400; margin: 0.3rem 0 0.6rem; }
.pv-card.seguimiento { opacity: 0.92; }
/* Acciones del reclamo en el modal (tanda 5) */
.pv-acciones { display: flex; flex-direction: column; gap: 0.4rem; }
.pv-acciones button { text-align: left; }
.pv-confirma { border: 1px solid var(--card-border); border-radius: 8px; padding: 0.6rem 0.75rem; margin-top: 0.5rem; background: var(--bg-secondary); font-size: 0.85rem; }
.pv-confirma .pv-confirma-pie { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
.pv-confirma select, .pv-confirma textarea { width: 100%; margin-top: 0.35rem; }
.pv-ficha-toggle { display: none; }
@media (max-width: 860px) {
    .pv-card { gap: 0.3rem; padding: 0.65rem 0.75rem; }
    .pv-card .pv-acc button { flex: 1 1 auto; }
    .pv-modal { max-width: 100vw; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; padding: 0.75rem; overflow: auto; }
    .pv-cols { display: flex; flex-direction: column; }
    .pv-der { order: -1; border: 1px solid var(--card-border); border-radius: 8px; padding: 0.4rem 0.6rem; margin-bottom: 0.5rem; }
    .pv-ficha-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; background: transparent; border: none; color: var(--text-primary); font-size: 0.85rem; padding: 0.2rem 0; cursor: pointer; text-align: left; }
    .pv-der .pv-ficha, .pv-der #pvAcciones { display: none; }
    .pv-der.abierta .pv-ficha, .pv-der.abierta #pvAcciones { display: grid; margin-top: 0.4rem; }
    .pv-der.abierta #pvAcciones { display: block; }
    .pv-der.abierta .pv-ficha-flecha { transform: rotate(180deg); }
    .pv-chat { max-height: none; min-height: 200px; flex: 1 1 auto; }
}

/* Raya entre las vistas de fábrica (⭐) y las que guarda cada usuario. */
.dd-sep {
    height: 1px;
    background: var(--card-border);
    margin: 0.35rem 0.2rem;
}

/* ── Envío a Full: marca SUTIL de los ítems que ingresan por EAN (sin
   etiqueta 60×40) — un tinte apenas en la fila y el "EAN" en ámbar.
   El rgba bajito funciona en los cuatro temas. */
.full-fila-ean td { background: rgba(245, 158, 11, 0.06); }
.full-fila-ean .full-ean, .full-ean { color: var(--accent-warning); font-size: 0.82rem; }

/* Filas de subida compactas (Felipe 2026-08-31): la caja de archivos no
   necesita todo el ancho, y con ancho FIJO los tres botones quedan
   alineados en columna. */
#tab-envio-full .caf-fila { justify-content: flex-start; }
#tab-envio-full .caf-fila-archivo { flex: 0 0 440px; min-width: 0; max-width: 100%; }
#tab-envio-full .caf-fila-boton { min-width: 175px; }

/* Resaltado tipo Ctrl+F de la búsqueda de Fulls (SKU / Código ML / envío):
   ámbar fuerte con texto oscuro, legible en los cuatro temas. */
.full-mark {
    background: var(--accent-warning);
    color: #1f1a0c;
    border-radius: 3px;
    padding: 0 2px;
}

/* ── Columnas ocultas por rol (pantalla Roles, Felipe 2026-09-01): bloque
   abajo de las áreas, a lo ancho; las columnas son las MISMAS burbujas de
   grupo de la cabecera (.mm-chip / .activo) — azul = oculta para ese rol. */
.cols-rol-tabla { margin: 0 0 0.9rem; }
.cols-rol-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.35rem; }
.cols-rol-chips .mm-chip:disabled { cursor: default; opacity: 0.7; }

/* Corregir capas FIFO: las agotadas se atenuan pero siguen editables. */
.tbl-capas tr.capa-agotada td { opacity: 0.6; }
.tbl-capas tr.capa-agotada td input, .tbl-capas tr.capa-agotada td button { opacity: 1; }

/* ===== Permisos por pantalla (script 91): rama › subrama › pantalla ===== */
.tabla-permisos tr.perm-rama td { background: var(--hover-bg); padding-top: 0.6rem; padding-bottom: 0.6rem; }
.tabla-permisos tr.perm-rama .perm-toda { font-size: 0.78rem; padding: 0.2rem 0.6rem; }
.tabla-permisos tr.perm-subrama td { padding-top: 0.45rem; padding-bottom: 0.15rem; font-size: 0.82rem; }
.tabla-permisos td.perm-indent { padding-left: 2rem; }

/* ── Corte Flex en ML v4 (Felipe 2026-09-05): configuración por grupo ── */
.btn-corte { min-width: 5.5rem; font-weight: 600; }
.flex-grupo { border: 1px solid var(--card-border); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .6rem; }
.flex-grupo-cab { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .9rem; margin-bottom: .4rem; }
.flex-grupo-toggle { cursor: pointer; margin-bottom: 0; }
.flex-grupo-det { display: none; margin-top: .5rem; }
.flex-grupo.abierta .flex-grupo-det { display: block; }
.flex-grupo-cab label { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.flex-tabla { width: 100%; margin-top: .3rem; font-size: .82rem; }
.flex-tabla td, .flex-tabla th { padding: .3rem .4rem; white-space: nowrap; }
.flex-in { width: 3.2rem; padding: .15rem .3rem; } .flex-cap { width: 4.5rem; }
select.flex-hora { width: 5.2rem; }
.flex-modal-card { width: min(1000px, 96vw); }
/* Con una ventana abierta el fondo no hace scroll (celular, Felipe 2026-09-05). */
body.modal-abierto { overflow: hidden; }
.flex-modal-card { max-height: 92vh; display: flex; flex-direction: column; }
.flex-modal-card #flexModalCuerpo { flex: 1 1 auto; overflow: auto; max-height: none; -webkit-overflow-scrolling: touch; }
.flex-titulo { margin: 1.1rem 0 .35rem; padding-top: .6rem; border-top: 1px solid var(--card-border); }
.flex-zonas-cab { margin-top: 1.1rem; padding-top: .6rem; border-top: 1px solid var(--card-border); }
.flex-zonas { row-gap: .35rem; }
.flex-ctas { margin-bottom: .4rem; }
@media (max-width: 720px) {
    /* Celular: la tabla de días se apila por día, sin scroll lateral (Felipe 2026-09-05). */
    .flex-tabla thead { display: none; }
    .flex-tabla, .flex-tabla tbody { display: block; }
    .flex-tabla tr { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .8rem; padding: .5rem 0; border-bottom: 1px solid var(--card-border); }
    .flex-tabla td { white-space: normal; padding: 0; }
    .flex-tabla td:first-child { grid-column: 1 / -1; }
    .flex-tabla td:not(:first-child)::before { content: attr(data-th); display: block; font-size: .7rem; color: var(--text-secondary); }
    .flex-grupo-cab { gap: .5rem; }
    .flex-zonas, .flex-zonas-3 { grid-template-columns: 1fr 1fr; }
}
.flex-zonas-cab { display: flex; justify-content: space-between; font-size: .8rem; color: var(--text-secondary); margin: .6rem 0 .3rem; }
.flex-zonas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .2rem .9rem; font-size: .82rem; }
.flex-zonas-3 { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.flex-zona { display: flex; justify-content: space-between; gap: .5rem; }
.flex-zona.off { color: var(--text-secondary); }
.flex-ctas { display: flex; flex-direction: column; gap: .3rem; }
.flex-cta { display: flex; justify-content: space-between; gap: .75rem; border: 1px solid var(--card-border); border-radius: 6px; padding: .35rem .6rem; font-size: .85rem; }
.flex-cta.flex-castigo { display: block; border-color: var(--accent-warning); }
.flex-cta.flex-mal { border-color: var(--accent-danger); }
.flex-cta-cab { display: flex; justify-content: space-between; gap: .75rem; cursor: pointer; }
.flex-cta-det { display: none; margin-top: .4rem; }
.flex-cta.abierta .flex-cta-det { display: block; }
.flex-ok { color: var(--accent-success); } .flex-warn { color: var(--accent-warning); }
.flex-dia-off td { color: var(--text-secondary); }
.flex-switch { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.flex-zona-hora { width: 5rem; padding: .1rem .2rem; font-size: .8rem; }
.flex-baja { color: var(--accent-warning); font-weight: 600; }