/* Paleta e identidad tomadas de insuseg.cl (analizado el 2026-07-22):
   naranja de marca #ef6000, texto oscuro #303030, gris claro #eaeaea, tipografía Open Sans,
   formas de borde recto (sin esquinas redondeadas, sin sombras). */

:root {
    --insuseg-orange: #ef6000;
    --insuseg-orange-dark: #bc4c00;
    --insuseg-dark: #303030;
    --insuseg-gray-light: #eaeaea;
    --insuseg-gray-bg: #f8f8f8;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--insuseg-dark);
    background: var(--insuseg-gray-bg);
    margin: 0;
}

.insuseg-header {
    background: #fff;
    border-bottom: 1px solid var(--insuseg-gray-light);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.insuseg-header img {
    height: 40px;
}

.insuseg-header .insuseg-user {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* En celular, el correo largo + "Cerrar sesión" no cabían junto al logo y el botón se salía 18 px de la pantalla
   (visto 2026-10-14, arreglado 2026-10-27): el correo se recorta con "…" y el botón nunca se achica. */
@media (max-width: 600px) {
    .insuseg-header {
        padding: 0.5rem 1rem;
        gap: 0.75rem;
    }

    .insuseg-header img {
        height: 32px;
        flex-shrink: 0;
    }

    .insuseg-header .insuseg-user {
        min-width: 0;
        gap: 0.5rem;
    }

    .insuseg-header .insuseg-user span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .insuseg-header .insuseg-user button {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

.insuseg-app {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 57px);
}

.insuseg-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--insuseg-dark);
    padding: 1.25rem 0;
}

.insuseg-sidebar .insuseg-section-title {
    color: #9a9a9a;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.9rem 1.25rem 0.35rem;
}

.insuseg-sidebar a {
    display: block;
    color: #e8e8e8;
    text-decoration: none;
    padding: 0.5rem 1.25rem;
    font-size: 0.92rem;
    border-left: 3px solid transparent;
}

.insuseg-sidebar a:hover {
    background: #3d3d3d;
}

.insuseg-sidebar a.active {
    border-left-color: var(--insuseg-orange);
    background: #3d3d3d;
    color: #fff;
    font-weight: 600;
}

.insuseg-main {
    flex: 1;
    min-width: 0;
}

.insuseg-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

h1, h2, h3 {
    font-weight: 700;
    color: var(--insuseg-dark);
}

.insuseg-btn {
    display: inline-block;
    background: var(--insuseg-orange);
    color: #fff;
    border: none;
    padding: 0.65rem 1.5rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
}

.insuseg-btn:hover {
    background: var(--insuseg-orange-dark);
    color: #fff;
}

.insuseg-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Reasignar vendedor inline en la tabla de Usuarios — select + botón "Guardar" en una fila chica. */
.form-asignar-vendedor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.insuseg-btn-link {
    background: none;
    color: var(--insuseg-orange);
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.insuseg-btn-link:disabled {
    color: #aaa;
    cursor: not-allowed;
}

.insuseg-card {
    background: #fff;
    border: 1px solid var(--insuseg-gray-light);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Administracion/GestionTareas (pedido 2026-09-06) — una tarjeta por VendorTask, con el borde
   izquierdo coloreado según el estado de aprobación. Reusa los mismos colores que ya usa el semáforo
   de %MG/pct-ritmo (verde/amarillo/rojo, ver .chip-ritmo más abajo) para no introducir un lenguaje de
   color nuevo en la misma app. */
.tarjeta-tarea-gestion {
    border-left: 4px solid var(--insuseg-gray-light);
}

.tarjeta-tarea-gestion.tarea-pendiente {
    border-left-color: #ffcc00;
}

.tarjeta-tarea-gestion.tarea-aprobada {
    border-left-color: #2f7a3d;
}

.tarjeta-tarea-gestion.tarea-rechazada {
    border-left-color: #b23b2e;
    opacity: 0.7;
}

.tarea-gestion-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tarea-gestion-acciones {
    display: flex;
    gap: 0.5rem;
}

/* Mismo rojo que .chip-ritmo.pct-mg-malo — "Rechazar" es una acción negativa, no debía compartir el
   naranja de marca que ya usa la acción principal (.insuseg-btn, "Aprobar"). */
.insuseg-btn-secundario {
    background: none;
    border: 1px solid #b23b2e;
    color: #b23b2e;
    padding: 0.6rem 1.4rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.insuseg-btn-secundario:hover {
    background: #b23b2e;
    color: #fff;
}

/* Mismo porte que .insuseg-btn-secundario (Rechazar/Eliminar), pero neutro en vez de rojo — para
   acciones secundarias que no son destructivas/negativas (ej. "Editar" al lado de Aprobar/Rechazar/
   Eliminar en Gestión de tareas, 2026-09-09), así los 4 botones de esa fila quedan del mismo porte. */
.insuseg-btn-secundario-neutro {
    display: inline-block;
    background: none;
    border: 1px solid var(--insuseg-gray-light);
    color: var(--insuseg-dark);
    padding: 0.6rem 1.4rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
}

.insuseg-btn-secundario-neutro:hover {
    border-color: var(--insuseg-orange);
    color: var(--insuseg-orange);
}

.insuseg-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--insuseg-gray-bg);
}

.insuseg-login-card {
    background: #fff;
    border: 1px solid var(--insuseg-gray-light);
    padding: 2.5rem;
    width: 100%;
    max-width: 380px;
}

.insuseg-login-card img {
    height: 44px;
    display: block;
    margin: 0 auto 1.5rem;
}

.insuseg-field {
    margin-bottom: 1rem;
}

.insuseg-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.insuseg-field input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--insuseg-gray-light);
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    border-radius: 0;
}

.insuseg-field input:focus {
    outline: none;
    border-color: var(--insuseg-orange);
}

.insuseg-error {
    background: #fdeceb;
    border: 1px solid #e0a89f;
    color: #9c3320;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.insuseg-summary {
    background: #fff4ec;
    border: 1px solid var(--insuseg-orange);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

table.insuseg-table {
    width: 100%;
    /* separate, no collapse: con position:sticky (header + columnas fijas), border-collapse:collapse
       tiene un bug conocido en Chrome (la columna fija deja de quedarse pegada al scrollear). No cambia
       el look: los bordes ya se ponen por celda (border-bottom en th/td), no a nivel de tabla. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

table.insuseg-table th {
    background: var(--insuseg-dark);
    color: #fff;
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
}

table.insuseg-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--insuseg-gray-light);
}

table.insuseg-table tr:nth-child(even) {
    background: var(--insuseg-gray-bg);
}

/* Filtro de fechas: una fila, arriba de todo el contenido analítico. */
.insuseg-filters {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.insuseg-filters .insuseg-field {
    margin-bottom: 0;
}

/* KPIs de Cartera: un hero (venta del mes actual, con la comparación contra el año anterior ya
   integrada adentro — flecha + texto, nunca solo color) más una grilla 2x2 de datos de apoyo más
   chicos. Reemplaza la fila de 5 tarjetas con el mismo peso visual — el mes en curso es el dato que
   más se consulta, así que es el único con protagonismo propio (ver Insuseg.md, 2026-08-21). */
.insuseg-kpi-row {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1.5rem;
}

.insuseg-kpi-hero {
    flex: 0 0 320px;
    background: var(--insuseg-orange);
    color: #fff;
    padding: 1.6rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.insuseg-kpi-hero-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.insuseg-kpi-hero-valor {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.insuseg-kpi-hero-delta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.insuseg-kpi-hero-delta svg {
    flex-shrink: 0;
}

.insuseg-kpi-hero-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.25rem;
}

.insuseg-kpi-secundarias {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
    background: var(--insuseg-gray-light);
    border: 1px solid var(--insuseg-gray-light);
}

.insuseg-kpi-mini {
    background: #fff;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.insuseg-kpi-mini-label {
    font-size: 0.75rem;
    color: #696969;
    margin-bottom: 0.3rem;
}

.insuseg-kpi-mini-valor {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--insuseg-dark);
    overflow-wrap: break-word;
}

.insuseg-kpi-mini-highlight {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--insuseg-orange);
    margin-top: 0.2rem;
}

.insuseg-kpi-mini-sub {
    font-size: 0.7rem;
    color: #969696;
    margin-top: 0.2rem;
}

/* Vista de Vendedor en Cartera: solo el % de margen, como número grande, sin monto neto
   (a pedido explícito del usuario, 2026-09-09 — no debe ver los montos netos de margen). */
.insuseg-kpi-mini-pct-grande {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.insuseg-kpi-mini-pct-grande.pct-grande-bueno {
    color: #2f7a3d;
}

.insuseg-kpi-mini-pct-grande.pct-grande-naranjo {
    color: var(--insuseg-orange);
}

/* Gráfico de barras horizontal, en HTML/CSS plano (no librería):
   una sola tonalidad de marca (magnitud, no identidad), barra fina con
   extremo redondeado, valor como texto fuera de la barra. */
.insuseg-barchart {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.insuseg-bar-row {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    align-items: center;
    gap: 0.75rem;
}

.insuseg-bar-row .insuseg-bar-label {
    font-size: 0.85rem;
    color: var(--insuseg-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insuseg-bar-track {
    background: var(--insuseg-gray-bg);
    height: 20px;
}

.insuseg-bar-fill {
    background: var(--insuseg-orange);
    height: 20px;
    max-width: 100%;
    border-radius: 0 4px 4px 0;
}

.insuseg-bar-row .insuseg-bar-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--insuseg-dark);
    font-variant-numeric: tabular-nums;
    min-width: 90px;
    text-align: right;
}

.insuseg-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .insuseg-charts-grid {
        grid-template-columns: 1fr;
    }

    .insuseg-kpi-row {
        flex-direction: column;
    }

    .insuseg-kpi-hero {
        flex: none;
    }

    .insuseg-kpi-secundarias {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .insuseg-app {
        flex-direction: column;
    }

    .insuseg-sidebar {
        width: 100%;
        display: flex;
        overflow-x: auto;
    }
}

/* Ventas > Cartera de clientes: tabla dinámica por mes con detalle de producto expandible. */

.detalle-nota {
    color: #696969;
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

/* Chips de leyenda dentro de una nota de texto (ej. estado de comparación año anterior en los
   gráficos de Cartera) — el glifo lleva el color/forma; el texto ("verde"/"naranja"/"gris") se
   queda en el gris normal de la nota, igual que en los gráficos el color nunca lo lleva el texto,
   solo la marca. */
.leyenda-punto {
    font-weight: 400;
    white-space: nowrap;
}

.leyenda-glifo {
    font-weight: 700;
    color: var(--insuseg-orange);
}

.tabla-scroll {
    overflow-x: auto;
}

table.insuseg-table th.col-total,
table.insuseg-table td.col-total {
    border-left: 2px solid var(--insuseg-gray-light);
    font-weight: 700;
}

table.insuseg-table th.col-calc,
table.insuseg-table td.col-calc {
    color: #696969;
}

table.insuseg-table td.col-mg {
    font-weight: 600;
}

/* Columnas del mes actual (Facturas/Guías/Total/% vs año anterior) en "Ventas por cliente" — se
   "mueven" solas al mes que esté en curso (ver Cartera.cshtml.cs), reemplazando la columna simple que
   tendría ese mes. Encabezado en naranja de marca (en vez del gris oscuro de siempre) + fondo tenue
   en el cuerpo + borde a los dos lados del grupo — para que salte a la vista que estas 4 columnas son
   distintas del resto (el mes en curso, no un mes ya cerrado). Ver Insuseg.md, 2026-08-12.
   Ancho acotado en Facturas/Guías/Total (no en el %, que necesita más lugar para el nombre) y padding
   más chico, para que entre más tabla en pantalla — el nombre completo de cada columna queda en el
   title (tooltip) del encabezado.
   El ancho (95px, con box-sizing:border-box de la línea 14 el padding ya está descontado de esos
   95px) tiene que alcanzar para un monto de hasta 10 caracteres tipo "12.345.678" sin partirse en dos
   líneas — con 72px (probado en la sesión 2026-08-12) números como "3.417.400" se cortaban a la mitad
   y las 4 columnas quedaban pegoteadas. white-space:nowrap es la red de seguridad para que, si algún
   valor igual no entra, se recorte con scroll de la tabla en vez de partirse en dos renglones. */
table.insuseg-table th.col-mes-actual {
    background: var(--insuseg-orange);
}

table.insuseg-table th.col-mes-actual:not(.col-mes-actual-fin),
table.insuseg-table td.col-mes-actual:not(.col-mes-actual-fin) {
    max-width: 95px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

table.insuseg-table td.col-mes-actual {
    background: #fff7f0;
    white-space: nowrap;
}

table.insuseg-table th.col-mes-actual-inicio,
table.insuseg-table td.col-mes-actual-inicio {
    border-left: 2px solid var(--insuseg-orange-dark);
}

table.insuseg-table th.col-mes-actual-fin,
table.insuseg-table td.col-mes-actual-fin {
    border-right: 2px solid var(--insuseg-orange-dark);
}

table.insuseg-table td.col-mes-actual-total {
    font-weight: 700;
}

/* Frecuencia (2026-09-08) — pegada a la caja naranja del mes actual (misma posición en la tabla), pero
   NO forma parte de ese grupo: se calcula sobre una ventana propia fija (últimos 12 meses desde hoy)
   que no depende de si el bloque naranja está activo o no (ver ResolverDesglose en Cartera.cshtml.cs),
   así que tiene que seguir visible aunque el filtro de fechas apague el bloque naranja. Un borde
   tenue (gris, no el naranja fuerte de .col-mes-actual-inicio/-fin) alcanza para separarla visualmente
   del resto de columnas de cálculo sin dar a entender que es parte del grupo real. */
table.insuseg-table th.col-frecuencia,
table.insuseg-table td.col-frecuencia {
    border-left: 2px solid var(--insuseg-gray-light);
}

/* Total de la columna "Guías" — chico, debajo del nombre de la columna, dentro del propio <th>.
   white-space:nowrap ya viene heredado de th.th-ordenable; font-size reducido (mismo criterio que
   insuseg-kpi-sub) para que un monto de hasta ~11 caracteres ("$78.200.862") quepa en los 95px de la
   columna sin partirse — si algún mes el total fuera más largo, el scroll horizontal de la tabla (ya
   existente) es la red de seguridad, mismo patrón que el resto de esta columna. */
table.insuseg-table th.col-mes-actual .th-total {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.85;
    margin-top: 0.15rem;
}

/* Semáforo de ritmo en "% año ant.": verde si el cliente ya lleva, en lo que va del mes, más
   porcentaje del año pasado que los días transcurridos del mes (RitmoEsperadoMesActualPct en
   Cartera.cshtml.cs); rojo si va por debajo. Pastilla de fondo sólido (no solo texto de color) —
   el primer intento coloreaba solo el texto con var(--insuseg-orange-dark), el mismo color exacto que
   ya usa el borde de esta columna y el tinte del grupo entero, así que el estado "malo" se camuflaba
   en la decoración en vez de leerse como alerta (ver Insuseg.md, 2026-08-12). Por eso "malo" usa acá
   un rojo que no es el naranja de marca — a propósito distinto de otras marcas de estado de esta
   página, que sí pueden compartir el naranja porque no están sentadas sobre un fondo ya teñido de naranja.
   Filas sin dato de comparación ("—") no llevan pastilla, quedan con el texto normal de la tabla. */
.chip-ritmo {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.chip-ritmo.pct-ritmo-bueno {
    background: #2f7a3d;
}

.chip-ritmo.pct-ritmo-malo {
    background: #b23b2e;
}

/* Semáforo de "% MG" (margen) en la tabla de clientes de Cartera: rojo bajo 19%, amarillo de 19%
   a 23%, verde de 24% en adelante (Cartera.cshtml.cs, corte de Ignacio 2026-09-03 — reusa la
   misma pastilla .chip-ritmo de "% año ant." de arriba, mismo criterio de fondo sólido en vez de
   solo texto de color). Amarillo real (no un ámbar oscurecido) a pedido explícito de Ignacio — un
   primer intento con un ámbar oscuro (para poder mantener texto blanco) se veía casi igual al rojo,
   sin distinguirse. Con amarillo real, el texto pasa a oscuro (--insuseg-dark) en vez de blanco —
   blanco sobre amarillo no tiene contraste suficiente para leerse bien. */
.chip-ritmo.pct-mg-bueno {
    background: #2f7a3d;
}

.chip-ritmo.pct-mg-medio {
    background: #ffcc00;
    color: var(--insuseg-dark);
}

.chip-ritmo.pct-mg-malo {
    background: #b23b2e;
}

/* Estado calculado de una VendorTask a partir de sus SubTareas (2026-09-29, pedido del usuario) —
   ver EstadoTareaCalculado. Misma pastilla .chip-ritmo, mismo lenguaje verde/amarillo/rojo; gris
   para "Sin iniciar" porque todavía no hay nada que evaluar (ni bueno ni malo). */
.chip-ritmo.estado-completada {
    background: #2f7a3d;
}

.chip-ritmo.estado-en-progreso {
    background: #ffcc00;
    color: var(--insuseg-dark);
}

.chip-ritmo.estado-pendiente {
    background: #b23b2e;
}

.chip-ritmo.estado-sin-iniciar {
    background: var(--insuseg-gray-light);
    color: var(--insuseg-dark);
}

/* Categoría y producto (dentro de Cartera) ya no son mini-tablas anidadas con su propio recuadro y
   scroll — son filas de esta MISMA tabla, insertadas después de su padre con sangría (ver Insuseg.md,
   2026-08-21: la estructura anidada era la causa real de que "maniobrar" se sintiera incómodo al bajar
   de nivel). .fila-categoria sigue siendo clicable (expande a productos); .fila-producto es hoja, sin
   comportamiento de clic. */
.fila-cliente,
.fila-categoria {
    cursor: pointer;
}

.fila-cliente:hover td,
.fila-cliente.expandida td,
.fila-categoria:hover td,
.fila-categoria.expandida td {
    background: var(--insuseg-gray-bg);
}

/* Columnas fijas al scrollear horizontalmente (N° y Cliente) — el fondo se hereda de la fila para que
   siga el tinte de cada nivel (o el hover/expandida de arriba) en vez de quedar siempre blanco. La
   especificidad de estas dos reglas de nivel tiene que igualar a la de abajo (mismo selector largo)
   para poder pisarla. */
table.insuseg-table tbody tr {
    background: #fff;
}

table.insuseg-table tbody tr.fila-categoria {
    background: #fcfcfc;
}

table.insuseg-table tbody tr.fila-producto {
    background: #fbfbfb;
    color: #4a4a4a;
}

/* Categorías prioritarias del negocio (pedido de Alexis Artus, 2026-09-05 — Calzado, Ropa, Manos,
   Auditiva, Respiratoria, Facial, Altura) — mismo nivel de especificidad que .fila-categoria de arriba,
   colocada después para poder pisar su fondo. Amarillo vivo + borde izquierdo en el naranja de marca —
   primer intento con un teal suave (#d6f5f0) resultó poco llamativo a pedido explícito del usuario
   (2026-09-05), se reemplazó por este. El borde va en el td sticky (no en el tr: border-left en <tr>
   no se renderiza de forma confiable en tablas) para que se vea como una franja fija al scrollear
   horizontalmente. El hover/expandida sigue tiñendo de gris igual que cualquier otra fila de categoría
   (ver .fila-categoria:hover td más arriba) — acá solo cambia el estado de reposo, para que siga siendo
   obvio que se puede interactuar con la fila. */
table.insuseg-table tbody tr.fila-categoria-prioritaria {
    background: #ffe066;
}

table.insuseg-table tbody tr.fila-categoria-prioritaria td.col-sticky-1 {
    border-left: 4px solid var(--insuseg-orange);
}

.col-sticky {
    position: sticky;
    z-index: 2;
    background: inherit;
}

.col-sticky-1 {
    left: 0;
    width: 40px;
}

.col-sticky-2 {
    left: 40px;
    min-width: 200px;
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.2);
}

.nombre-cliente {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Sangría de categoría/producto — la línea vertical fina conecta cada fila con su padre, mismo
   criterio de "outline de árbol" que un explorador de archivos. El pseudo-elemento se estira un poco
   más allá de la propia caja (top/bottom negativos) para simular una línea continua entre filas
   consecutivas, ya que cada fila la dibuja por separado. */
.nombre-nivel1,
.nombre-nivel2 {
    position: relative;
}

.nombre-nivel1 {
    padding-left: 22px;
    font-weight: 600;
    font-size: 0.86rem;
}

.nombre-nivel2 {
    padding-left: 44px;
    font-weight: 400;
    font-size: 0.84rem;
}

.nombre-nivel1::before,
.nombre-nivel2::before {
    content: '';
    position: absolute;
    left: 10px;
    top: -0.6rem;
    bottom: -0.6rem;
    width: 1px;
    background: var(--insuseg-gray-light);
}

.nombre-nivel2::before {
    left: 32px;
}

.banda-nivel {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #969696;
    white-space: nowrap;
}

.chevron {
    display: inline-flex;
    color: var(--insuseg-orange);
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

/* Fila hoja (producto) — no expande nada, el chevron queda reservado para que el nombre no salte de
   posición según el nivel, pero invisible (no es un botón). */
.chevron-hoja {
    visibility: hidden;
}

.fila-cliente.expandida .chevron,
.fila-categoria.expandida .chevron {
    transform: rotate(90deg);
}

.chip-vendedor {
    font-size: 0.7rem;
    color: #696969;
    background: var(--insuseg-gray-bg);
    border: 1px solid var(--insuseg-gray-light);
    padding: 0.05rem 0.4rem;
    white-space: nowrap;
}

/* Fila de "Cargando…" / mensaje de error / vacío — sola, sin clic, mientras se resuelve el fetch de
   categorías o productos de un cliente/categoría. */
.fila-estado-texto {
    padding: 0.6rem 0.75rem;
    color: #696969;
    font-size: 0.85rem;
    font-style: italic;
}

.nota-sin-limite {
    color: #696969;
    font-size: 0.8rem;
    margin: 0.75rem 0 0;
}

/* Buscador + contador — Ventas por cliente en Cartera. */
.cartera-controles {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.cartera-buscador {
    width: 100%;
    max-width: 320px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--insuseg-gray-light);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    border-radius: 0;
}

.cartera-buscador:focus {
    outline: none;
    border-color: var(--insuseg-orange);
}

.cartera-contador {
    color: #696969;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* Botón chico secundario, mismo look que "Expandir tabla" — para acciones de apoyo, no la acción
   principal de la página (esa es .insuseg-btn, sólido en naranja). "Colapsar todo" vive acá porque
   sin él, con varios clientes expandidos a la vez, no hay forma rápida de volver al estado inicial
   sin cerrar uno por uno (pedido del usuario, 2026-08-21). */
.btn-secundario-chico {
    margin-left: auto;
    background: none;
    border: 1px solid var(--insuseg-gray-light);
    color: var(--insuseg-dark);
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
}

.btn-secundario-chico:hover {
    border-color: var(--insuseg-orange);
    color: var(--insuseg-orange);
}

/* Fila de cliente fijada — mientras el scroll está dentro del detalle de un cliente expandido, su
   propia fila (con sus montos reales, no una franja aparte) se pega justo debajo del encabezado, para
   poder seguir viendo su Total general/Peso/etc. mientras se lee la categoría/producto de más abajo
   (pedido del usuario, 2026-08-21). El "top" de cada celda lo pone JS (altura real del encabezado,
   no un valor fijo). El fondo ya lo pone la regla de abajo (.fila-cliente.expandida td) — acá solo
   hace falta la sombra que la separe visualmente de las filas que scrollean por debajo. */
.fila-cliente-fija td {
    position: sticky;
    /* Alto a propósito (muy por encima de cualquier z-index que ya use el resto de la tabla, ver
       .col-sticky más arriba) — con todas las celdas de esta fila en el mismo z-index, al scrollear
       para el lado una celda de monto (que viene después en el HTML) terminaba pintándose ENCIMA de la
       columna Cliente en vez de al revés, porque a igual z-index gana el orden del documento. Bug real,
       encontrado con Playwright, 2026-08-22. */
    z-index: 10;
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.25);
}

/* La columna Cliente de la fila fija tiene que ganarle a las demás celdas de SU PROPIA fila (no solo a
   las de las demás filas) — es sticky en los dos ejes (arriba Y a la izquierda) a la vez. */
.fila-cliente-fija td.col-sticky {
    z-index: 11;
}

/* Encabezados ordenables — clic para ordenar por esa columna, clic de nuevo invierte el sentido.
   La flecha (▲/▼) solo se muestra en la columna con el orden activo; el resto queda neutro para no
   sugerir que todas las columnas ya tienen un orden aplicado. */
th.th-ordenable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.th-ordenable:hover {
    background: #4a4a4a;
}

th.th-ordenable::after {
    content: '';
    display: inline-block;
    width: 0.6em;
    margin-left: 0.25em;
    opacity: 0.5;
}

th.th-ordenable.orden-asc::after {
    content: '▲';
    opacity: 1;
    color: var(--insuseg-orange);
}

th.th-ordenable.orden-desc::after {
    content: '▼';
    opacity: 1;
    color: var(--insuseg-orange);
}

/* Tablas sin tope de filas: alto máximo con scroll propio, para que no empujen el resto de la página
   hacia abajo — se scrollea la tabla, no toda la pantalla, para llegar a lo que sigue. */
.tabla-vertical-limitada {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--insuseg-gray-light);
    /* Sin esto, al llegar al final del scroll de ESTA tabla, el gesto sigue de largo y mueve toda la
       página de golpe ("scroll chaining") — se siente brusco/incómodo, más notorio con tablas
       anidadas (categoría/producto dentro de Cartera) porque hay varios de estos contenedores chicos
       uno dentro del otro. Bug real, confirmado con un scroll de mouse de verdad (no forzado por script). */
    overscroll-behavior: contain;
}

.tabla-vertical-limitada table.insuseg-table {
    border: none;
}

.tabla-vertical-limitada table th {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* La celda de la esquina (fija arriba Y a la izquierda, ej. "N°"/"Cliente"/"Categoría") necesita un
   z-index más alto que el resto del header — si no, al scrollear horizontal, las celdas del header que
   solo son fijas arriba (vienen después en el HTML, mismo z-index que la esquina) se dibujan encima de
   la esquina en vez de al revés, y la tapan casi por completo. Bug real encontrado con Playwright. */
.tabla-vertical-limitada table th.col-sticky {
    z-index: 4;
}

.tabla-vertical-limitada.expandida {
    max-height: none;
    overflow-y: visible;
}

/* Detalle por producto (Ventas > Cartera): mismo patrón de scroll acotado + header pegajoso que el
   resto de la app, pero más bajo — es contenido anidado dentro de una fila ya expandida. */
.tabla-detalle-mini {
    max-height: 300px;
}

.btn-expandir-tabla {
    display: block;
    margin: 0 0 0.5rem auto;
    background: none;
    border: 1px solid var(--insuseg-gray-light);
    color: var(--insuseg-dark);
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
}

.btn-expandir-tabla:hover {
    border-color: var(--insuseg-orange);
    color: var(--insuseg-orange);
}

/* Gráfico de tendencia (línea + área) — Cartera de clientes. Un solo hue de marca (naranja),
   consistente con el resto de los gráficos de la app. */
.viz-tendencia {
    position: relative;
}

.viz-svg {
    width: 100%;
    height: auto;
    display: block;
}

.viz-baseline {
    stroke: var(--insuseg-gray-light);
    stroke-width: 1;
}

.viz-area {
    fill: var(--insuseg-orange);
    opacity: 0.1;
}

.viz-linea {
    fill: none;
    stroke: var(--insuseg-orange);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Marcas de estado por mes (Tendencia y Margen por mes) — comparan cada mes contra el mismo mes
   del año anterior. El color reutiliza el mismo verde/naranja oscuro que ya usan las tarjetas KPI
   "kpi-good"/"kpi-bad", pero acá el estado depende SOLO de la forma, nunca del color (pedido del
   usuario, 2026-08-21) — círculo lleno = superó, rombo lleno = no alcanzó, anillo hueco = sin datos,
   las tres en el mismo naranja de marca (mismo tono que la línea/área del gráfico). Los meses pasados
   salen atenuados (opacity); el mes actual sale a tamaño y opacidad plena para que resalte más — ver
   clase .marca-actual. */
.viz-marca {
    stroke-width: 2;
    transition: opacity 0.15s ease;
}

.viz-marca-superado,
.viz-marca-no-alcanzado {
    fill: var(--insuseg-orange);
    stroke: #fff;
}

.viz-marca-sin-datos {
    fill: none;
    stroke: var(--insuseg-orange);
}

.viz-marca:not(.marca-actual) {
    opacity: 0.55;
}

.viz-marca.marca-actual {
    opacity: 1;
}

.viz-etiqueta-valor {
    font-size: 11px;
    fill: var(--insuseg-dark);
    font-weight: 600;
}

.viz-crosshair {
    stroke: var(--insuseg-gray-light);
    stroke-width: 1;
    pointer-events: none;
}

.viz-crosshair-punto {
    fill: var(--insuseg-orange);
    stroke: #fff;
    stroke-width: 2;
    pointer-events: none;
}

.viz-eje-x {
    position: relative;
    height: 16px;
    margin-top: 0.25rem;
}

.viz-eje-x span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #969696;
    white-space: nowrap;
}

/* Margen por mes — barras verticales (eje es tiempo, no un ranking, por eso no son horizontales
   como "Ventas por cliente"). El % Mg es el dato que más pesa (grande, naranja); el monto es apoyo
   chico y gris. La altura de la barra sigue representando el monto, no el %, para no perder la
   comparación de magnitud entre meses. */
/* Con muchos meses en el filtro, las columnas ya no pueden achicarse infinito — a partir de cierto
   ancho mínimo, el gráfico scrollea horizontalmente puertas adentro en vez de aplastar el texto. */
.margen-chart-scroll {
    overflow-x: auto;
}

.margen-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    height: 200px;
    padding-top: 1.6rem;
    border-bottom: 1px solid var(--insuseg-gray-light);
}

.margen-barra-col {
    flex: 1 0 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

/* Marca de estado sobre cada columna — mismo criterio que .viz-marca en Tendencia, adaptado a
   HTML/CSS en vez de SVG: el estado depende SOLO de la forma (círculo lleno / rombo / anillo hueco),
   nunca del color — las tres en el mismo naranja de marca (pedido del usuario, 2026-08-21). */
.margen-marca {
    width: 9px;
    height: 9px;
    margin: 0 auto 0.35rem;
    box-sizing: border-box;
    transition: opacity 0.15s ease;
}

.margen-marca-superado {
    background: var(--insuseg-orange);
    border-radius: 50%;
}

.margen-marca-no-alcanzado {
    background: var(--insuseg-orange);
    transform: rotate(45deg);
}

.margen-marca-sin-datos {
    background: transparent;
    border: 2px solid var(--insuseg-orange);
    border-radius: 50%;
}

.margen-marca:not(.marca-actual) {
    opacity: 0.55;
}

.margen-marca.marca-actual {
    width: 14px;
    height: 14px;
    opacity: 1;
}

.margen-pct {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--insuseg-orange);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.margen-valor {
    font-size: 0.66rem;
    font-weight: 700;
    color: #696969;
    margin-bottom: 0.4rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.margen-barra {
    width: 100%;
    max-width: 34px;
    background: var(--insuseg-orange);
    transition: background 0.15s ease;
}

.margen-barra-col:hover .margen-barra {
    background: var(--insuseg-orange-dark);
}

.margen-barra-col.destacada .margen-barra {
    background: var(--insuseg-orange-dark);
}

.margen-barra-col.destacada .margen-pct {
    color: var(--insuseg-orange-dark);
}

.margen-eje-x {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.margen-eje-x span {
    flex: 1 0 56px;
    text-align: center;
    font-size: 0.72rem;
    color: #969696;
}

.viz-tooltip {
    position: absolute;
    top: 0.25rem;
    transform: translateX(-50%);
    background: var(--insuseg-dark);
    color: #fff;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}

.viz-tooltip strong {
    font-size: 0.85rem;
}

.viz-tooltip span {
    color: #c9c9c9;
}

.viz-tooltip-derecha {
    transform: translateX(-100%);
}

/* Barra apilada de composición (part-to-whole, 2 segmentos) — Análisis de ventas. */
.viz-stack {
    display: flex;
    height: 32px;
    background: var(--insuseg-gray-bg);
}

.viz-stack-seg {
    display: flex;
    align-items: center;
    padding: 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
}

.viz-stack-margen {
    background: var(--insuseg-orange);
    border-right: 2px solid #fff;
}

.viz-stack-costo {
    background: #6b6b6b;
}

/* Clientes/InformesConsumo (2026-09-27) — números del Informe de Consumo por cliente, en pantalla,
   para validarlos antes de armar el PDF (ver docs/informe-consumo/PLAN.md). */
.informe-intro {
    color: #696969;
    margin-top: -0.5rem;
}

.informe-filtros {
    flex-wrap: wrap;
}

.informe-campo-cliente {
    flex: 1 1 320px;
}

.insuseg-field select {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--insuseg-gray-light);
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    background: #fff;
}

.informe-periodo-texto {
    font-size: 0.9rem;
    color: #696969;
    margin: -0.5rem 0 1.5rem;
}

.informe-cliente {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.informe-btn-pdf {
    font-size: 0.85rem;
    padding: 0.35rem 0.8rem;
}

.informe-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.informe-kpi {
    background: #fff;
    border: 1px solid var(--insuseg-gray-light);
    border-top: 3px solid var(--insuseg-orange);
    padding: 0.9rem 1rem;
}

.informe-kpi-etq {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #696969;
    font-weight: 600;
}

.informe-kpi-val {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0.2rem 0;
}

.informe-kpi-nota {
    font-size: 0.78rem;
    color: #696969;
}

.informe-seccion {
    margin-top: 0;
}

table.informe-tabla {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

table.informe-tabla th,
table.informe-tabla td {
    white-space: nowrap;
    padding: 0.45rem 0.55rem;
}

table.informe-tabla .num {
    text-align: right;
}

table.informe-tabla td.codigo {
    color: #696969;
}

/* Períodos largos (24 meses, 2026-10-15): la columna con el nombre de la fila queda fija al
   desplazar la tabla hacia los lados. El fondo blanco tapa las celdas que pasan por debajo; las
   filas con fondo propio (total, categoría) lo mantienen porque sus reglas son más específicas. */
table.informe-tabla .col-fija {
    position: sticky;
    left: 0;
    z-index: 1;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.informe-tabla td.col-fija {
    background: #fff;
    box-shadow: inset -1px 0 0 var(--insuseg-gray-light);
}

table.informe-tabla tr.fila-secundaria td {
    color: #696969;
}

table.informe-tabla tr.fila-pareto td:first-child {
    box-shadow: inset 3px 0 0 var(--insuseg-orange);
    font-weight: 600;
}

table.informe-tabla tr.fila-total td {
    font-weight: 700;
    border-top: 2px solid var(--insuseg-dark);
    background: var(--insuseg-gray-bg);
}

table.informe-tabla tr.fila-categoria td {
    background: #fdebdd;
    font-weight: 700;
}

.informe-nota {
    font-size: 0.82rem;
    color: #696969;
    margin-bottom: 0;
}

.informe-notas ul {
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.6;
    font-size: 0.9rem;
}

/* Gráficos SVG del Informe de Consumo (GraficosInforme, mismo código que usará el PDF). */
.informe-grafico {
    margin-bottom: 0.75rem;
}

.informe-grafico svg {
    display: block;
    height: auto;
}

.informe-grafico-barras {
    max-width: 820px;
}

/* Variaciones % en las tablas del informe: alzas en verde, bajas en rojo (2026-10-13). Selector
   más específico que "tr.fila-secundaria td" (gris), que si no le gana en la fila Variación. */
table.informe-tabla tr td.num.var-sube {
    color: #1e8e3e;
}

table.informe-tabla tr td.num.var-baja {
    color: #c62828;
}

/* Gráfico de consumo mensual: dato al pasar el mouse sobre un punto (2026-10-13). */
.informe-grafico-interactivo {
    position: relative;
}

.informe-grafico-interactivo .punto-dato {
    cursor: pointer;
    outline: none;
}

.informe-grafico-interactivo .punto-dato:hover .punto-vis,
.informe-grafico-interactivo .punto-dato:focus .punto-vis {
    stroke-width: 4;
}

.informe-tooltip {
    position: absolute;
    pointer-events: none;
    white-space: nowrap;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-left: 4px solid var(--insuseg-orange);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: 0.85rem;
    line-height: 1.3;
    z-index: 2;
}

.informe-tooltip.serie-anterior,
.informe-tooltip.serie-ant12 {
    border-left-color: #2f6db5;
}

.informe-tooltip.serie-ant24 {
    border-left-color: #7b4fa0;
}

.informe-tooltip-mes {
    color: #8a8a8a;
}

.informe-tooltip-monto {
    font-weight: 700;
    color: var(--insuseg-dark);
}

.informe-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.82rem;
    color: #696969;
    margin-bottom: 1rem;
}

.informe-leyenda .ley,
.informe-comparar .ley {
    display: inline-block;
    width: 1.6rem;
    height: 0;
    vertical-align: middle;
    margin-right: 0.4rem;
}

.informe-leyenda .ley-actual {
    border-top: 3px solid var(--insuseg-orange);
}

.informe-leyenda .ley-anterior,
.informe-comparar .ley-anterior {
    border-top: 2.5px dashed #2f6db5;
}

.informe-leyenda .ley-anterior24,
.informe-comparar .ley-anterior24 {
    border-top: 3px dotted #7b4fa0;
}

/* Comparaciones con 12 y 24 meses antes (2026-10-15): las casillas de "Comparar con" ponen o sacan
   ocultar-ant12 / ocultar-ant24 en #informe-cuerpo, y eso esconde curvas, filas, columnas y notas. */
.informe-comparar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin: -0.25rem 0 1rem;
    font-size: 0.9rem;
}

.informe-comparar-titulo {
    font-weight: 600;
}

.informe-comparar label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.ocultar-ant12 .serie-ant12,
.ocultar-ant24 .serie-ant24 {
    display: none;
}

/* Año en curso: meses de la base que todavía no pasan (después del último mes cerrado). */
table.informe-tabla td.mes-sin-datos {
    background: var(--insuseg-gray-bg);
}

.informe-leyenda .ley-promedio {
    border-top: 1.5px dotted var(--insuseg-dark);
}

/* Alertas del Informe de Consumo (AlertasInforme). */
.informe-alerta {
    border-left: 3px solid;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.informe-alerta-titulo {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}

.informe-alerta.alerta-mesatipico {
    background: #fff4dc;
    border-color: #e0a100;
}

.informe-alerta.alerta-mesatipico .informe-alerta-titulo {
    color: #8a5a00;
}

.informe-alerta.alerta-alzarelevante {
    background: #fdebdd;
    border-color: var(--insuseg-orange);
}

.informe-alerta.alerta-alzarelevante .informe-alerta-titulo {
    color: var(--insuseg-orange-dark);
}

.informe-alerta.alerta-comprainterrumpida {
    background: #fbeae8;
    border-color: #b3261e;
}

.informe-alerta.alerta-comprainterrumpida .informe-alerta-titulo {
    color: #b3261e;
}

.informe-alerta-interna {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    background: var(--insuseg-dark);
    color: #fff;
    font-size: 0.66rem;
    letter-spacing: 0.03em;
    text-transform: none;
}

/* PDF del Informe de consumo (2026-10-30): el navegador imprime la misma página ("Guardar como PDF").
   Se ocultan el menú, los filtros y los botones; las tablas salen completas (sin scroll ni columna
   fija) y los colores se mantienen. Lo que solo va en papel lleva .solo-impresion. */
.solo-impresion {
    display: none;
}

.informe-generado {
    font-size: 0.8rem;
    color: #696969;
    margin: -0.6rem 0 0.8rem;
}

@media print {
    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        background: #fff;
    }

    .insuseg-header,
    .insuseg-sidebar,
    .solo-pantalla,
    .btn-expandir-tabla {
        display: none !important;
    }

    .solo-impresion {
        display: block;
    }

    .insuseg-app {
        display: block;
        min-height: 0;
    }

    .insuseg-container {
        max-width: none;
        padding: 0;
    }

    .insuseg-card {
        padding: 0.8rem 1rem;
        margin-bottom: 0.8rem;
    }

    /* Los 6 indicadores en una sola fila del ancho de la hoja. */
    .informe-kpis {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 0.6rem;
        margin-bottom: 0.8rem;
    }

    .informe-kpi {
        padding: 0.6rem 0.7rem;
    }

    .tabla-scroll,
    .tabla-vertical-limitada {
        overflow: visible;
        max-height: none;
        border: none;
    }

    table.informe-tabla {
        font-size: 7pt;
    }

    table.informe-tabla th,
    table.informe-tabla td {
        padding: 0.2rem 0.3rem;
    }

    table.informe-tabla .col-fija,
    .tabla-vertical-limitada table th {
        position: static;
    }

    table.informe-tabla .col-fija {
        max-width: 55mm;
    }

    /* El encabezado de la tabla se repite en cada página; ni una fila, ni un gráfico, ni un indicador
       quedan partidos entre dos páginas, y un título no queda solo al final de una. */
    table.informe-tabla thead {
        display: table-header-group;
    }

    table.informe-tabla tr,
    .informe-kpi,
    .informe-alerta,
    .informe-grafico,
    .informe-leyenda {
        break-inside: avoid;
    }

    .informe-seccion {
        break-after: avoid;
    }
}

/* ===== Administracion/GestionTareas — rediseño 2026-09-30 (prefijo gt-) =====
   Ordenar sin borrar: mismo contenido que antes, jerarquizado. Color solo con significado — estado de
   la tarea (franja superior, mismo semáforo que .chip-ritmo.estado-*), prioridad (Alta naranja, Media
   azul) y origen de subtarea (Admin naranja, Vendedor azul). Naranja + azul se distinguen también por
   luminosidad, no solo por tono. Ver Insuseg.md, sesión 2026-09-30. */
.gt-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-bottom: 1.25rem;
}

.gt-encabezado h1 {
    margin: 0;
}

.gt-selector {
    margin-bottom: 0;
    flex-wrap: wrap;
}

.gt-tenue {
    color: #5f5f5f;
    font-weight: 400;
    font-size: 0.85rem;
}

.gt-nota-chica {
    font-size: 0.8rem;
    margin: 0;
}

.gt-etiqueta {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #5f5f5f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gt-verde { color: #22602f; font-weight: 700; }
.gt-naranjo { color: #8a3a00; }
.gt-azul { color: #1f4f82; }

.gt-resumen-titulo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1rem;
}

.gt-resumen-titulo h2 {
    margin: 0;
    font-size: 1.25rem;
}

.gt-resumen-titulo .gt-tenue {
    font-size: 1.05rem;
}

.gt-ayuda summary {
    cursor: pointer;
    color: var(--insuseg-orange-dark);
    font-weight: 600;
    font-size: 0.9rem;
}

.gt-ayuda p {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
    max-width: 640px;
    line-height: 1.5;
}

.gt-indicadores {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.gt-indicador {
    border: 1px solid var(--insuseg-gray-light);
    border-top: 4px solid var(--insuseg-dark);
    padding: 0.75rem 0.9rem;
}

.gt-cifra {
    font-size: 1.5rem;
    font-weight: 700;
}

.gt-cifra span {
    font-size: 0.95rem;
    font-weight: 600;
    color: #4a4a4a;
}

.gt-detalle {
    font-size: 0.8rem;
    color: #5f5f5f;
}

.gt-ind-subtareas { border-top-color: #2f7a3d; background: #f3f9f4; }
.gt-ind-subtareas .gt-cifra { color: #22602f; }
.gt-ind-meta { border-top-color: var(--insuseg-orange); background: #fff6ef; }
.gt-ind-meta .gt-cifra { color: #8a3a00; }
.gt-ind-margen { border-top-color: #1f5f99; background: #f2f7fc; }
.gt-ind-margen .gt-cifra { color: #1f4f82; }

.gt-barra {
    height: 6px;
    background: #dfe9e1;
    margin-top: 0.5rem;
}

.gt-barra div {
    height: 6px;
    background: #2f7a3d;
}

.gt-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.gt-filtros .gt-etiqueta {
    margin-right: 0.25rem;
}

.gt-filtro {
    min-height: 36px;
    padding: 0 0.9rem;
    border: 1px solid #c9c9c9;
    background: #fff;
    color: var(--insuseg-dark);
    font: 600 0.88rem 'Open Sans', sans-serif;
    cursor: pointer;
}

.gt-filtro.activo {
    background: var(--insuseg-dark);
    border-color: var(--insuseg-dark);
    color: #fff;
}

.gt-punto {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 0.4rem;
    background: var(--gt-color);
}

/* Color por estado: franja superior de la tarjeta y punto del filtro. */
.gt-punto-en-progreso, .gt-tarea-en-progreso { --gt-color: #ffcc00; }
.gt-punto-pendiente, .gt-tarea-pendiente { --gt-color: #b23b2e; }
.gt-punto-sin-iniciar, .gt-tarea-sin-iniciar { --gt-color: #bdbdbd; }
.gt-punto-completada, .gt-tarea-completada { --gt-color: #2f7a3d; }
.gt-punto-por-revisar, .gt-tarea-por-revisar { --gt-color: #ffcc00; }
.gt-punto-rechazada, .gt-tarea-rechazada { --gt-color: #b23b2e; }

.gt-tarea {
    background: #fff;
    border: 1px solid var(--insuseg-gray-light);
    border-top: 4px solid var(--gt-color, var(--insuseg-gray-light));
    padding: 1.1rem 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gt-tarea[hidden] {
    display: none;
}

.gt-tarea-rechazada {
    opacity: 0.7;
}

.gt-tarea-rechazada h3 {
    text-decoration: line-through;
}

.gt-tarea-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.gt-tarea-titulo {
    min-width: 0;
}

.gt-tarea-linea {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
}

.gt-tarea-linea h3 {
    margin: 0;
    font-size: 1.05rem;
}

.gt-accion {
    margin: 0.4rem 0 0;
    line-height: 1.45;
}

.gt-tarea-acciones {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.gt-prioridad {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid #c9c9c9;
    color: #4a4a4a;
}

.gt-prioridad-alta { background: #fdebdc; color: #8a3a00; border-color: #f3bf94; }
.gt-prioridad-media { background: #e4eef8; color: #1f4f82; border-color: #b6cde8; }
.gt-prioridad-baja { background: #f1f1f1; color: #4a4a4a; border-color: #d4d4d4; }

.gt-chip {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.gt-chip-por-revisar { background: #fff; color: #7a5b00; border: 1px solid #d9b400; }
.gt-chip-rechazada { background: #b23b2e; color: #fff; }
.gt-chip-alerta { background: #fff8e1; color: #7a5b00; border: 1px solid #f3dd8a; white-space: normal; }

.gt-metas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    padding: 0.6rem 0.9rem;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    font-size: 0.9rem;
    color: #4a4a4a;
}

.gt-meta-objetivo {
    flex: 1 1 260px;
}

.gt-metas strong {
    color: var(--insuseg-dark);
}

.gt-metas strong.gt-naranjo { color: #8a3a00; }
.gt-metas strong.gt-azul { color: #1f4f82; }

.gt-vacio {
    padding: 0.6rem 0.75rem;
    background: #f8f8f8;
    border: 1px solid #eeeeee;
    font-size: 0.9rem;
    color: #4a4a4a;
}

.gt-subtareas {
    border: 1px solid #eeeeee;
}

.gt-sub-fila {
    display: grid;
    grid-template-columns: 28px minmax(0, 2.4fr) minmax(0, 1fr) 110px minmax(0, 1.6fr) 150px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid #eeeeee;
    font-size: 0.9rem;
}

.gt-sub-encabezado {
    border-top: none;
    background: #f4f4f4;
    font-size: 0.72rem;
    font-weight: 700;
    color: #5f5f5f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.gt-sub-edicion {
    border-top: 1px solid #eeeeee;
    padding: 0.75rem;
    background: #fafafa;
}

.gt-sub-edicion .insuseg-filters {
    margin-bottom: 0;
    flex-wrap: wrap;
}

.gt-sub-check {
    display: inline-flex;
    width: 18px;
    height: 18px;
    border: 2px solid #9a9a9a;
    color: #2f7a3d;
    align-items: center;
    justify-content: center;
}

.gt-sub-completada {
    background: #fafafa;
}

.gt-sub-completada .gt-sub-check {
    border: none;
}

.gt-sub-descripcion {
    font-weight: 600;
}

.gt-sub-completada .gt-sub-descripcion {
    font-weight: 400;
    color: #6b6b6b;
    text-decoration: line-through;
}

.gt-sub-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
}

.gt-origen {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.gt-origen-admin { background: #fdebdc; color: #8a3a00; }
.gt-origen-vendedor { background: #e4eef8; color: #1f4f82; }

.gt-solo-movil {
    display: none;
}

.gt-btn-neutro {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 1rem;
    background: #fff;
    border: 1px solid #c9c9c9;
    color: var(--insuseg-dark);
    font: 600 0.9rem 'Open Sans', sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.gt-btn-neutro:hover {
    border-color: var(--insuseg-orange);
    color: var(--insuseg-orange-dark);
}

.gt-btn-texto,
.gt-btn-eliminar {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 0.4rem;
    background: none;
    border: none;
    font: 600 0.88rem 'Open Sans', sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.gt-btn-texto { color: var(--insuseg-orange-dark); }
.gt-btn-eliminar { color: #9b2f24; }
.gt-btn-texto:hover, .gt-btn-eliminar:hover { text-decoration: underline; }

.gt-agregar summary {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    cursor: pointer;
    color: var(--insuseg-orange-dark);
    font-weight: 600;
    font-size: 0.9rem;
    list-style: none;
}

.gt-agregar summary::-webkit-details-marker {
    display: none;
}

.gt-agregar[open] summary {
    margin-bottom: 0.5rem;
}

.gt-agregar .insuseg-filters {
    margin-bottom: 0;
    padding: 0.75rem;
    background: #f8f8f8;
    border: 1px solid var(--insuseg-gray-light);
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .gt-indicadores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gt-tarea-cabecera {
        flex-direction: column;
    }

    .gt-tarea-acciones {
        flex-wrap: wrap;
    }

    .gt-sub-encabezado {
        display: none;
    }

    .gt-sub-fila {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 0.3rem 0.75rem;
    }

    .gt-sub-fila > :nth-child(n+3) {
        grid-column: 2;
    }

    .gt-sub-acciones {
        justify-content: flex-start;
    }

    .gt-solo-movil {
        display: inline;
        color: #5f5f5f;
    }
}

/* Administracion/MisTareas (vista Vendedor) — paso 2 del rediseño 2026-09-30. Reusa los gt-* de
   GestionTareas; esto es solo lo propio de esta pantalla (resumen + avance, fila de subtarea con
   formularios de completar/nota). */
.gt-semana {
    font-size: 1.1rem;
}

.gt-cabecera-vendedor {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

.gt-cabecera-vendedor .insuseg-card {
    margin-bottom: 0;
}

.gt-cabecera-vendedor h2 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.gt-resumen-semana {
    border-top: 4px solid var(--insuseg-orange);
}

.gt-resumen-semana ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.gt-mi-avance {
    border-top: 4px solid #2f7a3d;
    background: #f3f9f4;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gt-mi-avance .gt-cifra {
    font-size: 1.75rem;
    color: #22602f;
}

.gt-avance-texto {
    font-weight: 600;
    color: #4a4a4a;
}

.gt-avance-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gt-titulo-plan {
    margin: 1.25rem 0 0.75rem;
    font-size: 1.25rem;
}

/* Columna Estado de ancho fijo: la fecha (150px) y "Marcar completada" entran en una sola línea
   (antes quedaban apiladas). Fijo y no max-content porque cada fila es su propia grilla — con
   max-content las columnas no quedarían alineadas entre filas y con el encabezado. */
.gt-sub-fila.gt-sub-vendedor {
    grid-template-columns: 28px minmax(0, 2fr) 100px 330px minmax(0, 1.4fr);
}

.gt-sub-vendedor .gt-form-linea input[type=date] {
    width: 150px;
}

@media (min-width: 1301px) {
    .gt-sub-vendedor .gt-form-linea {
        flex-wrap: nowrap;
    }
}

/* Bajo 1300px de ventana (menú lateral de 220px incluido) la columna fija de 330px le deja muy poco a Subtarea y Mi nota — las filas del
   vendedor se apilan antes que las de Admin (mismo formato que en celular). */
@media (max-width: 1300px) {
    .gt-sub-fila.gt-sub-vendedor {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 0.3rem 0.75rem;
    }

    .gt-sub-vendedor > :nth-child(n+3) {
        grid-column: 2;
    }

    .gt-sub-vendedor.gt-sub-encabezado {
        display: none;
    }

    .gt-sub-vendedor .gt-solo-movil {
        display: inline;
        color: #5f5f5f;
    }
}

.gt-form-linea {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.gt-form-linea input {
    height: 38px;
    border: 1px solid #c9c9c9;
    background: #fff;
    padding: 0 0.6rem;
    font: 0.88rem 'Open Sans', sans-serif;
    color: var(--insuseg-dark);
}

.gt-form-nota input {
    flex: 1 1 140px;
    min-width: 0;
}

.gt-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .gt-cabecera-vendedor {
        grid-template-columns: 1fr;
    }

    .gt-sub-fila.gt-sub-vendedor {
        grid-template-columns: 28px minmax(0, 1fr);
    }
}

/* Inventario > Consulta de stock (2026-10-16). Las 4 cantidades se llenan al apretar "Ver stock"
   (consulta en vivo a SAP); antes quedan vacías a propósito, para no mostrar un número viejo. */
.stock-campo-buscar {
    min-width: 280px;
}

.stock-conteo {
    font-size: 0.82rem;
    color: #666;
    margin: 0 0 0.5rem;
}

.stock-tabla-wrap {
    max-height: 600px;
}

table.stock-tabla .num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

table.stock-tabla td.stock-disponible {
    font-weight: 700;
}

table.stock-tabla td.stock-negativo {
    color: #c62828;
}

/* Disponible mayor a 0 en verde (2026-10-24), mismo verde que las alzas del informe. En una fila
   "sin stock ahora" manda el gris de la fila. */
table.stock-tabla td.stock-positivo {
    color: #1e8e3e;
}

table.stock-tabla .stock-accion {
    white-space: nowrap;
}

table.stock-tabla .stock-estado {
    display: block;
    font-size: 0.72rem;
    color: #666;
    margin-top: 0.2rem;
}

table.stock-tabla .stock-estado.stock-error {
    color: #c62828;
    white-space: normal;
    max-width: 180px;
}

/* Consulta de stock v2 (2026-10-16): buscador con sugerencias, filtros y paginación. */
.stock-filtros {
    align-items: flex-end;
    flex-wrap: wrap;
}

.stock-sugerencias-wrap {
    position: relative;
}

.stock-sugerencias-wrap input {
    width: 100%;
}

.stock-sugerencias {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--insuseg-gray-light);
    border-top: none;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.stock-sugerencias li {
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid var(--insuseg-gray-bg);
}

.stock-sugerencias li:hover,
.stock-sugerencias li.activa {
    background: var(--insuseg-gray-bg);
    color: var(--insuseg-orange);
}

.stock-checks {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    padding-bottom: 0.2rem;
}

.stock-checks label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

table.stock-tabla .stock-dato {
    font-size: 0.78rem;
    color: #666;
    white-space: nowrap;
}

table.stock-tabla .stock-dato.stock-dato-vivo {
    color: var(--insuseg-orange-dark);
    font-weight: 600;
}

.stock-paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

.stock-paginacion .btn-secundario-chico {
    margin-left: 0;
    text-decoration: none;
}

@media (max-width: 900px) {
    .stock-campo-buscar {
        min-width: 0;
        width: 100%;
    }
}

/* Consulta de stock paso 3 (2026-10-16): "Actualizar página" y filas que quedaron sin stock al
   actualizar (en gris, siguen en la lista hasta el próximo Buscar). */
.stock-btn-pagina {
    margin-left: 0.75rem;
}

.stock-estado-pagina {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    color: var(--insuseg-orange-dark);
}

.stock-estado-pagina.stock-error {
    color: #c62828;
}

table.stock-tabla tr.stock-sin-stock td {
    color: #9a9a9a;
    background: var(--insuseg-gray-bg);
}

/* Consulta de stock: marca de producto de mix (inventario permanente, U_Mix = MIX). 2026-10-23. */
.stock-mix {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.35rem;
    border: 1px solid var(--insuseg-orange);
    border-radius: 3px;
    color: var(--insuseg-orange-dark);
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
}