/* ==========================================================
   PALETA MADRE — Azul institucional + Naranja vial.
   Todo el sistema toma sus colores de acá. Para retocar la paleta el día de
   mañana, alcanza con cambiar estos valores — no hace falta salir a buscar
   cada hexadecimal suelto en el resto del archivo.
   ========================================================== */
:root {
    --color-primario: #1e2a44;       /* Header, botones principales, marca */
    --color-primario-oscuro: #14203a;
    --color-acento: #f97316;         /* Naranja vial — detalles de marca, hover, activo */
    --color-acento-suave: #ffedd5;
    --color-exito: #15803d;          /* Semáforo bueno / positivo */
    --color-alerta: #b45309;         /* Semáforo medio / atención */
    --color-peligro: #dc2626;        /* Semáforo malo / negativo */
    --color-info: #4338ca;           /* Acentos neutros informativos */
    --color-fondo: #eef2f7;          /* Fondo general de la app */
    --color-superficie: #ffffff;     /* Tarjetas, tablas, modales */
    --color-texto: #1e293b;
    --color-texto-tenue: #64748b;
    --color-borde: #e2e8f0;
}

/* CONFIGURACIONES GENERALES Y RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
}

/* MENÚ SUPERIOR DE NAVEGACIÓN */
.app-header {
    background-color: var(--color-primario);
    border-bottom: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.header-derecha {
    display: flex;
    align-items: center;
    gap: 22px;
}

.btn-menu-mobile {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

/* MENÚ RESPONSIVE PARA CELULAR/TABLET */
@media screen and (max-width: 900px) {
    .btn-menu-mobile {
        display: block;
    }

    .header-derecha {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--color-primario);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 0 14px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.28);
    }

    .header-derecha.abierto {
        display: flex;
    }

    .header-derecha .app-tabs {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .header-derecha .app-tabs .nav-link {
        padding: 13px 22px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        color: #cbd5e1;
    }

    .header-derecha .app-tabs .nav-link.active {
        color: #fff;
        border-bottom-color: rgba(255,255,255,0.08);
        border-left: 3px solid var(--color-acento);
        padding-left: 19px;
    }

    .header-derecha > a,
    .header-derecha > div {
        width: 100%;
        box-sizing: border-box;
    }

    .header-derecha > a {
        padding: 13px 22px !important;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    #btn-config-toggle {
        display: block;
        padding: 13px 22px !important;
    }

    #menu-configuracion {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
    }
}

.app-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.2px;
}

.app-tabs {
    display: flex;
    gap: 22px;
}

.nav-link {
    color: #a9b4c9;
    text-decoration: none;
    padding: 4px 0;
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.nav-link:hover, .nav-link.active {
    color: #ffffff;
    border-bottom-color: var(--color-acento);
}

/* CONTROL DE VISTAS (PESTAÑAS) */
.main-content {
    max-width: 1400px;
    margin: 70px auto 40px auto;
    padding: 0 20px;
}

.tab-content {
    display: none;
}

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

/* BARRA DE FILTROS */
.filter-bar {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-bar select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    outline: none;
    background-color: #ffffff;
    min-width: 180px;
}

.filter-bar-compact {
    display: inline-flex;
    justify-content: flex-start;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 12px;
    gap: 8px;
}

.dashboard-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 4px;
}

.dashboard-header .filter-bar-compact {
    margin-bottom: 0;
}

.filter-bar-compact select {
    min-width: 110px;
    padding: 4px 8px;
    font-size: 0.78rem;
    border-radius: 5px;
}

/* RECUADROS KPI (MÁRGENES Y COLORES DE ALERTAS) — usados en Vehículos */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

/* Versión más chica de .kpi-card para que las 5 tarjetas de Vehículos entren en una sola
   fila en desktop, en vez de achicar .kpi-card en general (esa clase no se usa hoy en
   ningún otro lado, pero se deja acotado a .kpi-grid por las dudas). */
.kpi-grid .kpi-card {
    padding: 14px 12px;
}

.kpi-grid .kpi-card h3 {
    font-size: 0.72rem;
    margin-bottom: 6px;
}

.kpi-grid .kpi-card p {
    font-size: 1.5rem;
}

@media screen and (max-width: 1100px) {
    .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 900px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 520px) {
    .kpi-grid { grid-template-columns: 1fr; }
}

/* Fila de 2 columnas para paneles chicos que antes iban cada uno en su propia fila completa,
   apilados, dejando la pestaña muy larga (hoy usado en Vehículos: Ranking de Utilización +
   Costo de Envío por Localidad). "stretch" (el default de grid) hace que ambos recuadros
   terminen del mismo alto, igualados al más alto de los dos. En pantallas angostas vuelven a
   apilarse (1 columna) para no achicar los paneles de más. */
.fila-dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

@media screen and (max-width: 900px) {
    .fila-dos-columnas { grid-template-columns: 1fr; }
}

/* Fila asimétrica de Postventa: un recuadro grande a la izquierda (Ranking de Causas) y, a la
   derecha, una columna con 2 recuadros apilados (Antigüedad + Costo por Localidad) que se
   reparten el alto disponible para igualar juntos el alto del recuadro grande. */
.fila-postventa-asimetrica {
    display: flex;
    align-items: stretch;
    gap: 18px;
}

.fila-postventa-asimetrica > .chart-container {
    flex: 1.3;
    display: flex;
    flex-direction: column;
}

.columna-postventa-apilada {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.columna-postventa-apilada > .chart-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 900px) {
    .fila-postventa-asimetrica { flex-direction: column; }
}

.kpi-card {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border-left: 5px solid #6b7280;
}

.kpi-card h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.kpi-card p {
    font-size: 2rem;
    font-weight: bold;
}

.text-success { border-left-color: var(--color-exito); color: var(--color-exito); }
.text-danger { border-left-color: var(--color-peligro); color: var(--color-peligro); }
.text-warning { border-left-color: var(--color-alerta); color: var(--color-alerta); }
.text-primary { border-left-color: var(--color-info); color: var(--color-info); }

/* CONTENEDORES DE GRÁFICOS EVITANDO COLISIONES */
.charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.chart-container {
    background-color: #ffffff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    min-width: 0;
}

.chart-container h2 {
    font-size: 1.05rem;
    color: #374151;
    margin-bottom: 15px;
}

.HTML-canvas-holder {
    position: relative;
    height: 270px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

/* Forzar proporciones estables en ejes cartesianos */
#chart-obras-mes, #chart-obras-linea, #chart-instalador-barras, #chart-instaladas-semana, #chart-evolucion-espera {
    width: 100% !important;
    height: 85% !important;
    margin-top: auto;
}

/* Torta ampliada y centrada */
#chart-obras-estado {
    display: block !important;
    max-width: 195px !important;
    max-height: 195px !important;
    margin: 0 auto !important;
}

.chart-holder-dona {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.leyenda-torta-custom {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 15px;
}

.leyenda-item {
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.leyenda-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
}

/* TABLAS DE DATOS */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.search-box {
    margin-bottom: 15px;
}

.search-box input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    outline: none;
}

.table-container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow-x: auto;
    padding: 10px;
}

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

.data-table th {
    background-color: #f9fafb;
    padding: 12px 16px;
    font-weight: 600;
    border-bottom: 2px solid #e5e7eb;
    color: #4b5563;
    white-space: nowrap;
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.data-table tr:hover {
    background-color: #f9fafb;
}

/* Obras: letra del contenido un poco más chica que el resto de las tablas (a pedido), dejando
   los encabezados (th) sin tocar — por eso el font-size va en el td específico de Obras y no
   en .data-table td de arriba, que es compartido con Instaladores/Vehículos/Postventa. */
#sec-obras .data-table td {
    font-size: 0.78rem;
}

/* A pedido: todo el listado de Obras centrado, encabezados incluidos (antes todo alineado a la
   izquierda, como el resto de las tablas del sistema). Solo Obras, no toca Instaladores/
   Vehículos/Postventa. La vista de tarjetas en celular sigue como estaba — ahí el valor va
   alineado a la derecha del label en cada renglón, centrar no tendría sentido en ese layout —
   por eso esta regla no está scopeada a esa media query y la más específica de abajo (que ya
   trae su propio text-align:right para esa vista) sigue ganando ahí. */
#sec-obras .data-table th,
#sec-obras .data-table td {
    text-align: center;
}

/* A pedido: Cliente, Dirección, Localidad y Estado vuelven a alinearse a la izquierda como
   estaban originalmente (el resto de las columnas sigue centrado). Va aparte, con más
   especificidad que la regla de arriba (nth-child/data-label suma más que un th/td solo) para
   ganarle, y adentro de un min-width para no pisar la vista de tarjetas en celular, que ya
   tiene su propio text-align:right para esas mismas celdas y no hay que tocarla. */
@media screen and (min-width: 901px) {
    #sec-obras .data-table th:nth-child(2),
    #sec-obras .data-table th:nth-child(4),
    #sec-obras .data-table th:nth-child(5),
    #sec-obras .data-table th:nth-child(6),
    #sec-obras .data-table td[data-label="Cliente"],
    #sec-obras .data-table td[data-label="Dirección"],
    #sec-obras .data-table td[data-label="Localidad"],
    #sec-obras .data-table td[data-label="Estado"] {
        text-align: left;
    }
}

/* Botón "☰" que reemplaza a los 3 botones sueltos (Editar/Link/Borrar) de la columna Acciones
   de Obras: un solo recuadro chico que abre el menú de opciones (#menu-acciones-obra). */
/* Con !important porque hay una regla más genérica (aplicarEstilosCompactosProporcionales() en
   script.js, inyectada en tiempo de ejecución) que aplasta cualquier cosa con "btn-" en la clase
   a padding/font-size/height fijos — sin esto, el ícono quedaría con la tipografía de esa regla. */
#sec-obras .btn-accion-menu {
    width: 30px !important;
    height: 24px !important;
    border: none;
    border-radius: 6px !important;
    background-color: #e3e9f2;
    color: #4a6689;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1;
    padding: 0 !important;
    cursor: pointer;
}

#sec-obras .btn-accion-menu:hover {
    background-color: #d4dde8;
}

/* Menú desplegable flotante de Acciones de Obras — un solo elemento compartido por todas las
   filas, ver toggleMenuAccionesObra() en script.js. */
.menu-acciones-obra {
    display: none;
    position: fixed;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    min-width: 220px;
    z-index: 3000;
    overflow: hidden;
    font-size: 0.85rem;
}

.menu-acciones-obra a {
    display: block;
    padding: 10px 14px;
    color: #334155;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.12s ease;
}

.menu-acciones-obra a:last-child {
    border-bottom: none;
}

.menu-acciones-obra a:hover {
    background-color: #f8fafc;
}

.menu-acciones-obra a.menu-acciones-obra-borrar {
    color: #b91c1c;
}

/* BOTONES */
.btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-primary { background-color: var(--color-primario); color: white; }
.btn-primary:hover { background-color: var(--color-primario-oscuro); }
.btn-secondary { background-color: #e5e7eb; color: #374151; }
.btn-secondary:hover { background-color: #d1d5db; }
.btn-danger { background-color: var(--color-peligro); color: white; }
.btn-danger:hover { background-color: #b91c1c; }
.btn-small { padding: 4px 10px; font-size: 0.8rem; margin-right: 4px; }

/* MODALES Y FORMULARIOS */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    width: 500px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.close-btn {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 1.5rem; cursor: pointer; color: #9ca3af;
}

form label {
    display: block;
    font-size: 0.85rem; font-weight: 500; margin: 10px 0 4px 0;
}

form input, form select, form textarea {
    width: 100%; padding: 8px 12px;
    border: 1px solid #d1d5db; border-radius: 6px; outline: none;
}

.form-fieldset {
    border: 1px solid #e5e7eb; padding: 15px; border-radius: 6px; margin-top: 15px;
}

.form-fieldset legend {
    padding: 0 8px; font-size: 0.85rem; font-weight: bold; color: #4338ca;
}

/* RESPONSIVE */
@media screen and (max-width: 768px) {
    .charts-row { grid-template-columns: 1fr; }
}

/* Lista de sugerencias del buscador de obras en Postventa */
.autocomplete-resultados {
    position: relative;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    margin-top: -1px;
    z-index: 10;
}

.autocomplete-item {
    padding: 8px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
}

.autocomplete-item:hover {
    background-color: #eef2ff;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-sin-resultados {
    padding: 10px 12px;
    font-size: 0.82rem;
    color: #94a3b8;
    font-style: italic;
}

/* AGENDA MENSUAL (calendario tipo grilla, con obras + notas libres por día) */
.agenda-mensual-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-top: 15px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agenda-mensual-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: 8px;
    margin-top: 8px;
}

.agenda-dia-celda {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 150px;
}

.agenda-dia-celda.fuera-de-mes {
    background-color: #f8fafc;
    box-shadow: none;
}

.agenda-dia-celda.fin-de-semana {
    background-color: #e2e8f0;
}

.agenda-dia-celda.fin-de-semana.fuera-de-mes {
    background-color: #e9edf2;
}

.agenda-dia-celda.es-hoy {
    border: 2px solid #4338ca;
}

.agenda-dia-numero {
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
}

.fuera-de-mes .agenda-dia-numero {
    color: #cbd5e1;
}

.agenda-dia-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    max-height: 130px;
}

.agenda-chip-obra {
    background-color: #eef2ff;
    border-left: 3px solid #4338ca;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 0.62rem;
    color: #1e293b;
    cursor: grab;
    line-height: 1.35;
}

.agenda-chip-obra:active {
    cursor: grabbing;
}

.agenda-dia-celda.arrastrando-encima {
    background-color: #eef2ff;
    outline: 2px dashed #4338ca;
    outline-offset: -2px;
}

.agenda-chip-obra:hover {
    background-color: #e0e7ff;
}

.agenda-chip-nota {
    background-color: #fefce8;
    border-left: 3px solid #b45309;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 0.62rem;
    color: #78350f;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.35;
    cursor: grab;
}

/* Recordatorio puntual (llamar, visita de cliente, etc.) — se distingue en verde de la
   nota amarilla de "continuación de obra" */
.agenda-chip-nota.agenda-chip-nota-recordatorio {
    background-color: #ecfdf5;
    border-left-color: #15803d;
    color: #14532d;
}

.agenda-chip-postventa {
    background-color: #fce7f3;
    border-left: 3px solid #be185d;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 0.62rem;
    color: #831843;
    cursor: grab;
    line-height: 1.35;
}

.agenda-chip-nota:active, .agenda-chip-postventa:active {
    cursor: grabbing;
}

.agenda-chip-postventa:hover {
    background-color: #fbcfe8;
}

.agenda-chip-nota .borrar-nota {
    cursor: pointer;
    color: #b45309;
    font-weight: 700;
    flex-shrink: 0;
}

.agenda-btn-agregar-nota {
    font-size: 0.68rem;
    color: #4338ca;
    cursor: pointer;
    text-align: left;
    background: none;
    border: none;
    padding: 2px 4px;
    font-weight: 600;
}

.agenda-btn-agregar-nota:hover {
    text-decoration: underline;
}

@media screen and (max-width: 900px) {
    .agenda-mensual-header, .agenda-mensual-grid { grid-template-columns: repeat(7, minmax(90px, 1fr)); overflow-x: auto; }
}

/* Se ocultan en pantalla normal — solo aparecen al imprimir (ver @media print más abajo) */
#reporte-mensual-imprimible,
#hoja-ruta-imprimible,
#vencimientos-flota-imprimible,
#ficha-vehiculo-imprimible,
#aging-postventa-imprimible {
    display: none;
}

/* IMPRESIÓN: por defecto imprime la Agenda; con alguna clase .imprimir-* en el body, imprime
   esa vista en su lugar. Se usa display:none (no visibility:hidden) para que lo oculto no
   deje espacio en blanco reservado en la hoja. */
@media print {
    @page { size: A4 landscape; margin: 10mm; }

    html, body {
        width: 100% !important;
        margin: 0 !important;
    }

    /* --- Modo Reporte Mensual --- */
    body.imprimir-reporte > *:not(#reporte-mensual-imprimible) {
        display: none !important;
    }
    body.imprimir-reporte #reporte-mensual-imprimible {
        display: block !important;
    }

    /* --- Modo Hoja de Ruta --- */
    body.imprimir-ruta > *:not(#hoja-ruta-imprimible) {
        display: none !important;
    }
    body.imprimir-ruta #hoja-ruta-imprimible {
        display: block !important;
    }

    /* --- Modo Reporte de Vencimientos de Flota --- */
    body.imprimir-vencimientos > *:not(#vencimientos-flota-imprimible) {
        display: none !important;
    }
    body.imprimir-vencimientos #vencimientos-flota-imprimible {
        display: block !important;
    }

    /* --- Modo Ficha Histórica de Vehículo --- */
    body.imprimir-ficha-vehiculo > *:not(#ficha-vehiculo-imprimible) {
        display: none !important;
    }
    body.imprimir-ficha-vehiculo #ficha-vehiculo-imprimible {
        display: block !important;
    }

    /* --- Modo Reporte de Antigüedad de Postventa --- */
    body.imprimir-aging-postventa > *:not(#aging-postventa-imprimible) {
        display: none !important;
    }
    body.imprimir-aging-postventa #aging-postventa-imprimible {
        display: block !important;
    }

    /* --- Modo Agenda (por defecto, cuando no hay ninguna clase .imprimir-* de arriba) --- */
    body:not(.imprimir-reporte):not(.imprimir-ruta):not(.imprimir-vencimientos):not(.imprimir-ficha-vehiculo):not(.imprimir-aging-postventa) > .app-header,
    body:not(.imprimir-reporte):not(.imprimir-ruta):not(.imprimir-vencimientos):not(.imprimir-ficha-vehiculo):not(.imprimir-aging-postventa) > [id^="modal-"],
    body:not(.imprimir-reporte):not(.imprimir-ruta):not(.imprimir-vencimientos):not(.imprimir-ficha-vehiculo):not(.imprimir-aging-postventa) #reporte-mensual-imprimible,
    body:not(.imprimir-reporte):not(.imprimir-ruta):not(.imprimir-vencimientos):not(.imprimir-ficha-vehiculo):not(.imprimir-aging-postventa) #hoja-ruta-imprimible,
    body:not(.imprimir-reporte):not(.imprimir-ruta):not(.imprimir-vencimientos):not(.imprimir-ficha-vehiculo):not(.imprimir-aging-postventa) #vencimientos-flota-imprimible,
    body:not(.imprimir-reporte):not(.imprimir-ruta):not(.imprimir-vencimientos):not(.imprimir-ficha-vehiculo):not(.imprimir-aging-postventa) #ficha-vehiculo-imprimible,
    body:not(.imprimir-reporte):not(.imprimir-ruta):not(.imprimir-vencimientos):not(.imprimir-ficha-vehiculo):not(.imprimir-aging-postventa) #aging-postventa-imprimible {
        display: none !important;
    }
    body:not(.imprimir-reporte):not(.imprimir-ruta):not(.imprimir-vencimientos):not(.imprimir-ficha-vehiculo):not(.imprimir-aging-postventa) .main-content > *:not(#sec-agenda) {
        display: none !important;
    }
    body:not(.imprimir-reporte):not(.imprimir-ruta):not(.imprimir-vencimientos):not(.imprimir-ficha-vehiculo):not(.imprimir-aging-postventa) .main-content {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    body:not(.imprimir-reporte):not(.imprimir-ruta):not(.imprimir-vencimientos):not(.imprimir-ficha-vehiculo):not(.imprimir-aging-postventa) #sec-agenda {
        width: 100% !important;
    }
    .agenda-mensual-header, .agenda-mensual-grid {
        width: 100% !important;
    }

    /* Se ocultan los controles que no tienen sentido en un papel impreso */
    #sec-agenda .section-header button,
    #sec-agenda .filter-bar button,
    .agenda-btn-agregar-nota,
    .borrar-nota {
        display: none !important;
    }

    /* Se achica todo lo que va arriba del calendario, para dejarle el máximo espacio posible */
    #sec-agenda .section-header { margin-bottom: 2px !important; }
    #sec-agenda .section-header h2 { font-size: 1rem !important; margin: 0 !important; }
    #sec-agenda .filter-bar {
        padding: 2px 0 !important;
        margin-bottom: 2px !important;
        background: transparent !important;
        box-shadow: none !important;
        min-height: 0 !important;
    }
    #agenda-rango-mes { font-size: 0.85rem !important; }
    #agenda-resumen-mes { margin: 0 0 2px 0 !important; font-size: 0.72rem !important; }
    .agenda-mensual-header { font-size: 0.65rem !important; margin-top: 2px !important; margin-bottom: 2px !important; }

    .agenda-dia-celda { break-inside: avoid; }
    .agenda-chip-obra, .agenda-chip-nota, .agenda-chip-postventa { cursor: default !important; }

    /* Filtro de qué incluir al imprimir, según los checkboxes de arriba */
    body.ocultar-obras-print .agenda-chip-obra { display: none !important; }
    body.ocultar-postventa-print .agenda-chip-postventa { display: none !important; }
    body.ocultar-notas-print .agenda-chip-nota { display: none !important; }

    /* Bloque de "Para Retirar/Entregar (sin fecha fija)" — se achica igual que el resto de arriba
       del calendario, para no comerse espacio de la grilla, y no se corta entre hojas. */
    #agenda-sin-fecha-bloque {
        break-inside: avoid;
        margin-top: 4px !important;
        padding: 6px 8px !important;
    }
    #agenda-sin-fecha-bloque h2 { font-size: 0.75rem !important; margin: 0 0 2px 0 !important; }
    #agenda-sin-fecha-bloque p { font-size: 0.62rem !important; margin: 0 0 3px 0 !important; }
    body.ocultar-obras-print #agenda-sin-fecha-bloque { display: none !important; }

    /* Antes cada fila (semana) tenía una altura fija repartida en partes iguales (1fr de una
       altura total fija de 125mm), pensado para que el mes completo entre siempre en una sola
       hoja. El problema: un día con muchas tareas cargadas no entraba en esa porción fija, y
       como el desborde no se recortaba (overflow: visible), el contenido de más se salía del
       casillero y se dibujaba encima de la fila de abajo — el "solapamiento" reportado.
       Ahora cada fila crece según lo que tenga el día más cargado de esa semana (grid-auto-rows
       con "auto"), con un mínimo prolijo para las semanas livianas. Si una semana cargada
       termina no entrando en una sola hoja, imprime en dos — se ve toda la información en vez
       de perder tareas por superposición, que es peor. */
    .agenda-mensual-grid {
        grid-auto-rows: minmax(20mm, auto) !important;
        gap: 3px !important;
    }
    .agenda-dia-celda { padding: 3px !important; min-height: 0 !important; height: auto !important; overflow: visible; }
    .agenda-dia-items { max-height: none !important; overflow: visible !important; }
    .agenda-dia-numero { font-size: 0.7rem !important; }
    .agenda-chip-obra, .agenda-chip-nota, .agenda-chip-postventa {
        font-size: 0.58rem !important;
        padding: 1px 3px !important;
    }
}

/* TABLAS RESPONSIVE: en pantalla angosta, cada fila se convierte en una tarjeta apilada
   (etiqueta + valor) en vez de columnas horizontales que obligan a scrollear al costado.
   Aplica a las 4 pestañas con tablas: Obras, Instaladores, Vehículos y Postventa. */
@media screen and (max-width: 900px) {
    #sec-obras .table-container,
    #sec-instaladores .table-container,
    #sec-vehiculos .table-container,
    #sec-postventa .table-container {
        overflow-x: visible;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    #sec-obras .data-table thead,
    #sec-instaladores .data-table thead,
    #sec-vehiculos .data-table thead,
    #sec-postventa .data-table thead {
        display: none;
    }

    #sec-obras .data-table, #sec-obras .data-table tbody, #sec-obras .data-table tr, #sec-obras .data-table td,
    #sec-instaladores .data-table, #sec-instaladores .data-table tbody, #sec-instaladores .data-table tr, #sec-instaladores .data-table td,
    #sec-vehiculos .data-table, #sec-vehiculos .data-table tbody, #sec-vehiculos .data-table tr, #sec-vehiculos .data-table td,
    #sec-postventa .data-table, #sec-postventa .data-table tbody, #sec-postventa .data-table tr, #sec-postventa .data-table td {
        display: block;
        width: 100%;
    }

    #sec-obras .data-table tr,
    #sec-instaladores .data-table tr,
    #sec-vehiculos .data-table tr,
    #sec-postventa .data-table tr {
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        margin-bottom: 12px;
        padding: 6px 14px;
    }

    #sec-obras .data-table td,
    #sec-instaladores .data-table td,
    #sec-vehiculos .data-table td,
    #sec-postventa .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        white-space: normal;
        text-align: right;
        padding: 8px 0;
        border-bottom: 1px solid #f1f5f9;
    }

    #sec-obras .data-table td:last-child,
    #sec-instaladores .data-table td:last-child,
    #sec-vehiculos .data-table td:last-child,
    #sec-postventa .data-table td:last-child {
        border-bottom: none;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    #sec-obras .data-table td::before,
    #sec-instaladores .data-table td::before,
    #sec-vehiculos .data-table td::before,
    #sec-postventa .data-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.72rem;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        text-align: left;
        flex-shrink: 0;
    }

    /* La fila de "no hay resultados" no tiene data-label ni tiene sentido como tarjeta */
    #sec-obras .data-table tr:has(td[colspan]),
    #sec-instaladores .data-table tr:has(td[colspan]),
    #sec-vehiculos .data-table tr:has(td[colspan]),
    #sec-postventa .data-table tr:has(td[colspan]) {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }
    #sec-obras .data-table tr td[colspan],
    #sec-instaladores .data-table tr td[colspan],
    #sec-vehiculos .data-table tr td[colspan],
    #sec-postventa .data-table tr td[colspan] {
        display: block;
        text-align: center;
    }
    #sec-obras .data-table tr td[colspan]::before,
    #sec-instaladores .data-table tr td[colspan]::before,
    #sec-vehiculos .data-table tr td[colspan]::before,
    #sec-postventa .data-table tr td[colspan]::before {
        content: none;
    }
}

/* DASHBOARD EN CELULAR: la fila asimétrica (torta chica + gráfico grande) se separa en dos
   filas completas apiladas, en vez de achicarse hasta ilegible tratando de compartir espacio. */
@media screen and (max-width: 900px) {
    .charts-row-asimetrica {
        flex-direction: column;
    }
    .chart-container-chico {
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
    .chart-container-grande {
        width: 100%;
    }
}

/* "+N más" solo tiene sentido en celular (casillero chico); en compu el casillero ya
   muestra todo con su propio scroll interno, así que no hace falta ni debe aparecer. */
.agenda-dia-mas {
    display: none;
}

/* AGENDA EN CELULAR: se mantiene el mismo calendario de 7 columnas (no una lista lineal),
   pero compacto — cada casillero muestra hasta 2 tarjetas y, si hay más, un "+N más" que
   abre el detalle completo de ese día en un modal aparte (tocando el número del día también
   se abre ese mismo detalle, para cuando no entra ni una tarjeta). */
@media screen and (max-width: 900px) {
    .agenda-mensual-header > div {
        font-size: 0.6rem;
        padding: 2px 0;
    }

    .agenda-mensual-grid {
        gap: 2px;
    }

    .agenda-dia-celda {
        padding: 3px 2px;
        min-height: 64px;
    }

    .agenda-dia-numero {
        font-size: 0.72rem;
        cursor: pointer;
    }

    .agenda-dia-items {
        max-height: 48px;
        overflow: hidden;
    }

    .agenda-chip-obra, .agenda-chip-nota, .agenda-chip-postventa {
        font-size: 0.5rem;
        padding: 1px 3px;
        line-height: 1.3;
        border-radius: 3px;
        margin-bottom: 2px;
        border-left-width: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .agenda-btn-agregar-nota {
        display: none;
    }

    .agenda-dia-mas {
        display: block;
        font-size: 0.58rem;
        color: #64748b;
        text-align: center;
        cursor: pointer;
        margin-top: 1px;
    }
}

/* Modal de detalle del día (celular) */
.modal-dia-detalle-item {
    padding: 9px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}

/* MAPA EN CELULAR: paneles flotantes más chicos y la leyenda plegable, para no tapar
   demasiado mapa en una pantalla angosta. */
@media screen and (max-width: 900px) {
    .mapa-panel-buscador {
        width: 160px !important;
        padding: 7px 8px !important;
        top: 8px !important;
        left: 8px !important;
    }
    .mapa-panel-buscador input {
        font-size: 0.72rem !important;
        padding: 6px 8px !important;
    }
    #mapa-filtros-estado span {
        font-size: 0.6rem !important;
        padding: 2px 6px !important;
    }

    .mapa-panel-leyenda {
        padding: 6px 10px !important;
        bottom: 10px !important;
        left: 8px !important;
        font-size: 0.65rem !important;
    }
    .mapa-leyenda-titulo-mobile {
        display: block !important;
    }
    .mapa-leyenda-contenido {
        display: block;
    }
    .mapa-panel-leyenda.leyenda-cerrada .mapa-leyenda-contenido {
        display: none;
    }

    .mapa-canvas {
        height: 480px !important;
    }
}