/* ============================================
   BASE
   ============================================ */

/* El atributo hidden tiene que ganar siempre. El navegador lo aplica con
   display:none desde su hoja base, que es lo mas debil que hay: alcanza con
   que una regla propia defina display para que el elemento vuelva a
   aparecer. Paso con el visor de fotos, que tenia display:flex y quedaba
   invisible pero tapando la pantalla entera y bloqueando todos los clics. */
[hidden] {
    display: none !important;
}

/* ============================================
   SISTEMA DE CONTROL DE CAMIONETAS
   Estilos principales
   ============================================ */

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.6;
    padding: 20px;
    min-height: 100vh;
}

/* ============================================
   CONTENEDOR PRINCIPAL
   ============================================ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ============================================
   LOGIN
   ============================================ */
/* ============================================
   LOGIN - UltraHub
   ============================================
   Se conservan los dos colores que ya tenia la pantalla: el verde y el azul
   del degradado. El resto es negro, blanco y gris, que es lo que deja leer
   bien un formulario a la intemperie y en el celular.                      */

:root {
    --ultra-verde: #06b406;
    --ultra-azul: #0522a5;
    --ultra-negro: #0d0d12;
    --ultra-gris: #6b7280;
    --ultra-gris-claro: var(--u-borde);
}

/* ==========================================================================
   LOGIN
   --------------------------------------------------------------------------
   Antes: un degradado verde->azul a 45 grados ocupando la pantalla entera, con
   los dos colores de marca mezclados. Es el gesto que mas delata una interfaz
   hecha con IA, y ademas dejaba sin color propio a los estados.

   Ahora: lienzo claro igual al resto de la app, con un lavado radial muy suave
   del acento y grano. La jerarquia la hace la tipografia, no el fondo.
   ========================================================================== */

.login-body {
    margin: 0;
    background: var(--u-fondo);
}

.login-container {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;   /* en el celular, 100vh mide mas que lo que se ve */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--u-esp-6);
    padding: var(--u-esp-6) var(--u-esp-4);
    padding-bottom: max(var(--u-esp-8), env(safe-area-inset-bottom));
    /* Marfil: el fondo claro del manual de marca. */
    background: var(--u-marfil);
    overflow: hidden;
}

/* Un lavado muy suave de los tres colores del degradado de marca, radial y no
   lineal: un degradado uniforme a 45 grados ocupando la pantalla es el gesto
   que mas delata una interfaz generada. Aca la marca esta, pero no grita. */
.login-container::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(65% 50% at 14% 0%, rgba(49, 99, 198, 0.13), transparent 70%),
        radial-gradient(55% 45% at 92% 100%, rgba(61, 198, 130, 0.13), transparent 70%),
        radial-gradient(45% 40% at 55% 110%, rgba(56, 163, 153, 0.08), transparent 70%);
}

/* Grano: rompe la planitud digital sin que se note como un efecto. */
.login-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
}

.login-box {
    position: relative;   /* por encima del lavado y del grano */
    z-index: var(--u-capa-elevada);
    width: 100%;
    max-width: 396px;
    padding: var(--u-esp-8) var(--u-esp-8) var(--u-esp-6);
    background: var(--u-superficie);
    border-radius: var(--u-radio-lg);
    /* Sombra tintada con la matiz del fondo, no negra. Sin borde: borde mas
       sombra mas fondo blanco es la tarjeta mas generica que existe. */
    box-shadow: var(--u-sombra-lg);
    overflow: hidden;
    animation: u-entrar var(--u-vel-lenta) var(--u-curva-salida) both;
}

/* La franja del degradado de marca arriba de la tarjeta, como en la pieza de
   firma del manual. Va ahi y no de fondo: el blanco sobre el verde del cierre
   da 2.19 de contraste, asi que cualquier texto encima se perderia. En una
   franja sin texto, el degradado se ve entero y no compromete nada. */
.login-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--u-degradado);
}

/* --- Marca --------------------------------------------------------------
   Alineada a la izquierda, no centrada: la tarjeta ya esta centrada en la
   pantalla, centrar tambien adentro deja todo flotando sin eje. */
.login-marca {
    margin-bottom: var(--u-esp-8);
}

.login-logo {
    display: block;
    width: 56px; height: 56px;
    margin-bottom: var(--u-esp-4);
}
.login-logo img { display: block; width: 100%; height: 100%; }

.login-box h1 {
    margin: 0 0 var(--u-esp-1);
    font-size: var(--u-txt-2xl);
    font-weight: var(--u-peso-normal);
    letter-spacing: var(--u-track-titulo);
    /* Indigo, que es el color de los titulares sobre claro segun el manual. */
    color: var(--u-marca-indigo);
    line-height: var(--u-alto-apretado);
}
/* La jerarquia del wordmark sale del peso, no del color. El azul significa
   "se puede tocar" en toda la app: un "Hub" azul se leeria como un link. */
.login-box h1 span { font-weight: var(--u-peso-fuerte); }

.login-bajada {
    margin: 0;
    font-size: var(--u-txt-sm);
    color: var(--u-texto-suave);
}

/* --- Formulario ---------------------------------------------------------- */

.login-form { display: flex; flex-direction: column; gap: var(--u-esp-4); }

.login-campo { display: block; }

/* Minuscula, no MAYUSCULA: el versal sostenido se lee mas lento y en un
   formulario eso se acumula. */
.login-campo label {
    display: block;
    margin-bottom: var(--u-esp-1);
    font-size: var(--u-txt-2xs);
    font-weight: var(--u-peso-medio);
    color: var(--u-texto-suave);
    letter-spacing: var(--u-track-normal);
    text-transform: none;
}

.login-input {
    display: flex;
    align-items: center;
    gap: var(--u-esp-2);
    padding-inline: var(--u-esp-3);
    background: var(--u-superficie);
    border: 1px solid var(--u-borde-fuerte);
    border-radius: var(--u-radio-sm);
    transition: border-color var(--u-vel-rapida) var(--u-curva-suave),
                box-shadow var(--u-vel-rapida) var(--u-curva-suave);
}
.login-input:hover { border-color: var(--u-neutro-400); }
.login-input:focus-within {
    border-color: var(--u-marca-indigo);
    box-shadow: 0 0 0 3px rgba(42, 18, 104, 0.12);
}

.login-input > i {
    flex: none;
    color: var(--u-texto-tenue);
    font-size: var(--u-txt-base);
    transition: color var(--u-vel-rapida) var(--u-curva-suave);
}
.login-input:focus-within > i { color: var(--u-marca-indigo); }

.login-input input {
    flex: 1;
    min-width: 0;
    min-height: var(--u-tacto-minimo);
    padding: var(--u-esp-2) 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--u-txt-base);
    color: var(--u-texto);
}
.login-input input:focus { outline: none; }
.login-input input::placeholder { color: var(--u-texto-tenue); }

.login-ojo {
    flex: none;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    padding: 0; border: 0;
    background: transparent;
    color: var(--u-texto-tenue);
    border-radius: var(--u-radio-xs);
    cursor: pointer;
    transition: background-color var(--u-vel-rapida) var(--u-curva-suave),
                color var(--u-vel-rapida) var(--u-curva-suave),
                transform var(--u-vel-instante) var(--u-curva-suave);
}
.login-ojo:hover { background: var(--u-neutro-100); color: var(--u-texto); }
.login-ojo:active { transform: scale(0.92); }

.login-entrar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--u-esp-2);
    width: 100%;
    min-height: 48px;
    margin-top: var(--u-esp-2);
    padding: var(--u-esp-3) var(--u-esp-5);
    border: 0;
    border-radius: var(--u-radio-sm);
    /* Indigo pleno: blanco encima da 15.16, el mayor contraste de la paleta. */
    background: var(--u-marca-indigo);
    color: var(--u-texto-invertido);
    box-shadow: 0 2px 8px rgba(42, 18, 104, 0.25);
    font-family: inherit;
    font-size: var(--u-txt-base);
    font-weight: var(--u-peso-medio);
    cursor: pointer;
    transition: background-color var(--u-vel-rapida) var(--u-curva-suave),
                box-shadow var(--u-vel-rapida) var(--u-curva-suave),
                transform var(--u-vel-instante) var(--u-curva-suave);
}
.login-entrar:hover { background: #1d0c49; }   /* el indigo, un paso mas oscuro */
/* El pulsado es lo que hace que se sienta un objeto y no una imagen. */
.login-entrar:active { transform: scale(0.98); }
.login-entrar i { transition: transform var(--u-vel-normal) var(--u-curva-salida); }
.login-entrar:hover i { transform: translateX(2px); }

/* --- Error ---------------------------------------------------------------
   Franja al costado, no fondo rojo pleno. */
.login-error {
    display: flex;
    align-items: flex-start;
    gap: var(--u-esp-2);
    margin-bottom: var(--u-esp-5);
    padding: var(--u-esp-3);
    background: var(--u-riesgo-fondo);
    border-left: 3px solid var(--u-riesgo);
    border-radius: var(--u-radio-xs);
    color: var(--u-riesgo);
    font-size: var(--u-txt-sm);
    animation: u-entrar var(--u-vel-normal) var(--u-curva-salida) both;
}
.login-error i { flex: none; line-height: 1.4; }

.login-pie {
    position: relative;
    z-index: var(--u-capa-elevada);
    margin: 0;
    font-size: var(--u-txt-2xs);
    color: var(--u-texto-tenue);
    text-align: center;
}

.login-pie p { margin: 0; }

/* La firma de los autores: mas tenue que la linea de modulos, que es la que
   dice de que se trata el sistema. Se lee si se la busca, no compite. */
.login-pie .login-creditos {
    margin-top: var(--u-esp-2);
    opacity: 0.75;
}

/* ---- Aviso para agregar el sistema a la pantalla de inicio ----
   Arranca con [hidden] y lo muestra el script del login solo si el celular
   puede instalarlo y todavia no lo hizo. Va debajo de la caja de ingreso, no
   arriba: primero se entra, y si de paso se instala, mejor. */
.login-instalar {
    position: relative;
    z-index: var(--u-capa-elevada);
    display: flex;
    align-items: center;
    gap: var(--u-esp-3);
    width: 100%;
    /* La misma medida que .login-box: si no, queda un escaloncito. */
    max-width: 396px;
    padding: var(--u-esp-3) var(--u-esp-4);
    border: 1px solid var(--u-borde);
    border-radius: var(--u-radio-md);
    background: var(--u-superficie);
    box-shadow: var(--u-sombra-xs);
    text-align: left;
}

.login-instalar > .bi {
    flex: none;
    font-size: 1.25rem;
    color: var(--u-marca-indigo);
}

.login-instalar-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.login-instalar-texto strong { font-size: var(--u-txt-xs); color: var(--u-texto); }
.login-instalar-texto span { font-size: var(--u-txt-2xs); color: var(--u-texto-suave); }

.login-instalar-btn {
    flex: none;
    min-height: 36px;
    padding: 0 var(--u-esp-4);
    border: 0;
    border-radius: var(--u-radio-sm);
    background: var(--u-marca-indigo);
    color: #fff;
    font-size: var(--u-txt-2xs);
    font-weight: 600;
    cursor: pointer;
}
.login-instalar-btn:active { transform: scale(0.96); }

.login-instalar-cerrar {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--u-texto-tenue);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.login-instalar-cerrar:hover { background: var(--u-neutro-100); color: var(--u-texto); }

@media (max-width: 380px) {
    .login-box { padding: var(--u-esp-6) var(--u-esp-5) var(--u-esp-5); }
}

/* ============================================
   HEADER
   ============================================ */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

header h1 {
    font-size: 24px;
    color: #333;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.user-info span {
    font-weight: 500;
    color: var(--u-neutro-600);
}

/* ============================================
   NAVEGACIÓN
   ============================================ */
/* Un selector de elemento suelto le pega a TODOS los <nav> de la app,
   incluido el de la barra lateral: cada link pasaba a ser un item de flex en
   fila y media lo que su texto, asi que el sombreado al pasar por encima
   llegaba hasta la palabra y no hasta el borde. Se limita a los <nav> que no
   son la barra lateral. */
nav:not(.sidebar-nav) {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 15px 0;
}

/* La barra lateral apila sus links, uno por fila, ocupando el ancho entero. */
.sidebar-nav { display: block; }

.admin-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* ============================================
   BOTONES
   ============================================ */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--u-acento);
    color: white;
}
.btn-primary:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,123,255,0.3);
}

.btn-secondary {
    background-color: var(--u-texto-suave);
    color: white;
}
.btn-secondary:hover {
    background-color: #545b62;
}

.btn-success {
    background-color: var(--u-ok);
    color: white;
}
.btn-success:hover {
    background-color: #1e7e34;
}

.btn-danger {
    background-color: var(--u-riesgo);
    color: white;
}
.btn-danger:hover {
    background-color: #c82333;
}

.btn-warning {
    background-color: var(--u-aviso);
    color: #333;
}
.btn-warning:hover {
    background-color: #e0a800;
}

.btn-info {
    background-color: var(--u-acento);
    color: white;
}
.btn-info:hover {
    background-color: #138496;
}

.btn-block {
    width: 100%;
    display: block;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 16px;
}

/* ============================================
   FORMULARIOS
   ============================================ */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--u-neutro-600);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--u-borde-fuerte);
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--u-acento);
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

.form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

.form-inline .form-group {
    flex: 1;
    min-width: 150px;
    margin-bottom: 0;
}

.form-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ============================================
   TABLAS
   ============================================ */
.table-responsive {
    overflow-x: auto;
    margin: 15px 0;
    border-radius: 4px;
    border: 1px solid var(--u-borde);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table th,
.table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--u-borde);
}

.table th {
    background-color: var(--u-neutro-50);
    font-weight: 600;
    color: var(--u-neutro-600);
    border-bottom: 2px solid var(--u-borde);
}

.table tbody tr:hover {
    background-color: var(--u-neutro-50);
}

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

.text-center {
    text-align: center;
}

.text-muted {
    color: var(--u-texto-suave);
}

/* ============================================
   BADGES / ETIQUETAS
   ============================================ */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-success {
    background-color: var(--u-ok-fondo);
    color: var(--u-ok);
}

.badge-warning {
    background-color: var(--u-aviso-fondo);
    color: var(--u-aviso);
}

.badge-danger {
    background-color: var(--u-riesgo-fondo);
    color: var(--u-parado);
}

.badge-info {
    background-color: #d1ecf1;
    color: #0c5460;
}

.badge-primary {
    background-color: #cce5ff;
    color: #004085;
}

/* ============================================
   ALERTAS / MENSAJES
   ============================================ */
.alert {
    padding: 12px 20px;
    margin: 15px 0;
    border-radius: 4px;
    font-size: 14px;
    border: 1px solid transparent;
}

.alert-success {
    background-color: var(--u-ok-fondo);
    color: var(--u-ok);
    border-color: #c3e6cb;
}

.alert-danger {
    background-color: var(--u-riesgo-fondo);
    color: var(--u-parado);
    border-color: #f5c6cb;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #bee5eb;
}

.alert-warning {
    background-color: var(--u-aviso-fondo);
    color: var(--u-aviso);
    border-color: #ffeeba;
}

/* ============================================
   CARDS / TARJETAS
   ============================================ */
.card {
    background: var(--u-neutro-50);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--u-borde);
    margin: 15px 0;
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.card h3 {
    margin-bottom: 10px;
    color: #333;
}

.card p {
    margin: 8px 0;
}

/* ============================================
   SECCIONES
   ============================================ */
section {
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid var(--u-neutro-100);
}

section:first-of-type {
    border-top: none;
    padding-top: 0;
}

section h2 {
    margin-bottom: 20px;
    color: #333;
    font-size: 22px;
}

/* ============================================
   PANEL DEL TÉCNICO
   ============================================ */
.tecnico-info {
    margin: 20px 0;
}

.acciones {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.instrucciones {
    margin-top: 30px;
    padding: 20px;
    background: var(--u-neutro-50);
    border-radius: 8px;
    border: 1px solid var(--u-borde);
}

.instrucciones h3 {
    margin-bottom: 10px;
}

.instrucciones ul {
    margin-left: 20px;
}

.instrucciones li {
    margin: 5px 0;
}

/* ============================================
   ASIGNACIÓN MÚLTIPLE
   ============================================ */
.camioneta-select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--u-borde-fuerte);
    border-radius: 4px;
    font-size: 14px;
    background: white;
}

.camioneta-select:focus {
    outline: none;
    border-color: var(--u-acento);
}

/* ============================================
   RESPONSIVE / MÓVILES
   ============================================ */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    .container {
        padding: 15px;
        border-radius: 4px;
    }
    
    header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    header h1 {
        font-size: 20px;
        text-align: center;
    }
    
    .user-info {
        justify-content: space-between;
    }
    
    .form-inline {
        flex-direction: column;
    }
    
    .form-inline .form-group {
        width: 100%;
        min-width: unset;
        margin-bottom: 10px;
    }
    
    .table th,
    .table td {
        padding: 8px 10px;
        font-size: 13px;
    }
    
    .btn {
        width: 100%;
        padding: 12px;
    }
    
    .btn-sm {
        width: auto;
        padding: 4px 10px;
    }
    
    .admin-nav {
        flex-direction: column;
    }
    
    .acciones {
        flex-direction: column;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    nav {
        flex-direction: column;
    }
    
    .card {
        padding: 15px;
    }
    
    section {
        padding: 15px 0;
        margin: 20px 0;
    }
}

/* ============================================
   EDICIÓN DIRECTA - TABLA
   ============================================ */
.table-editable td {
    vertical-align: middle;
}

.camioneta-select-directo {
    width: 100%;
    padding: 6px 8px;
    border: 2px solid var(--u-borde-fuerte);
    border-radius: 4px;
    font-size: 14px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.camioneta-select-directo:hover {
    border-color: var(--u-acento);
    background: var(--u-neutro-50);
}

.camioneta-select-directo:focus {
    outline: none;
    border-color: var(--u-acento);
    box-shadow: 0 0 0 3px rgba(0,123,255,0.15);
}

.camioneta-select-directo option:checked {
    background: var(--u-acento);
    color: white;
}

.form-edicion-directa {
    margin: 0;
    display: inline-block;
}

/* Efecto de carga al cambiar */
.camioneta-select-directo.cargando {
    border-color: var(--u-ok);
    background-color: var(--u-ok-fondo);
}

/* Estilo para el botón de eliminar */
.btn-danger.btn-sm {
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-danger.btn-sm:hover {
    transform: scale(1.1);
}

/* Mensaje de carga */
.text-muted {
    color: var(--u-texto-suave);
    font-size: 12px;
    margin-left: 5px;
}

/* ============================================
   EXTRA - UTILIDADES
   ============================================ */
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-center { align-items: center; justify-content: center; }
.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }

.hidden { display: none; }

/* ============================================
   JORNADA SELECTOR
   ============================================ */
/* ==========================================================================
   ASIGNACIONES
   --------------------------------------------------------------------------
   Antes: el formulario de fecha y jornada ocupaba tres filas a todo el ancho
   (un campo de fecha de mil pixeles para ocho caracteres), y la planilla
   arrancaba con una barra azul plena repitiendo en MAYUSCULAS la fecha y el
   turno que ya estaban arriba.
   ========================================================================== */

.jornada-selector {
    margin: 0 0 var(--u-esp-5);
}

/* Una sola linea: fecha, jornada y las dos acciones. */
.jornada-selector form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--u-esp-3);
    padding: var(--u-esp-4);
    background: var(--u-superficie);
    border: 1px solid var(--u-borde);
    border-radius: var(--u-radio-md);
    box-shadow: var(--u-sombra-xs);
}

.jornada-selector .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--u-esp-1);
    flex: 0 0 auto;
    min-width: 0;
    /* Bootstrap le pone margin-bottom: 1rem a .form-group. Con align-items:
       flex-end, ese margen empuja los campos 16px arriba de los botones y la
       barra queda escalonada. */
    margin-bottom: 0;
}

.jornada-selector label {
    font-size: var(--u-txt-2xs);
    font-weight: var(--u-peso-medio);
    color: var(--u-texto-suave);
    margin: 0;
}

/* Los campos miden lo que miden sus datos, no el ancho de la pantalla. */
.jornada-selector input[type="date"],
.jornada-selector select {
    min-height: var(--u-tacto-minimo);
    padding: var(--u-esp-2) var(--u-esp-3);
    font-family: var(--u-fuente-dato);
    font-size: var(--u-txt-sm);
    color: var(--u-texto);
    background: var(--u-superficie);
    border: 1px solid var(--u-borde-fuerte);
    border-radius: var(--u-radio-sm);
    transition: border-color var(--u-vel-rapida) var(--u-curva-suave),
                box-shadow var(--u-vel-rapida) var(--u-curva-suave);
}
.jornada-selector select { font-family: var(--u-fuente); min-width: 130px; }
.jornada-selector input[type="date"]:focus,
.jornada-selector select:focus {
    outline: none;
    border-color: var(--u-acento);
    box-shadow: 0 0 0 3px var(--u-acento-suave);
}

/* En el telefono, cada control ocupa su fila entera. */
@media (max-width: 640px) {
    .jornada-selector form { flex-direction: column; align-items: stretch; }
    .jornada-selector .form-group { width: 100%; }
    .jornada-selector input[type="date"],
    .jornada-selector select,
    .jornada-selector .btn { width: 100%; }
}

/* ============================================
   PLANILLA
   ============================================ */
.planilla-container {
    background: var(--u-superficie);
    border-radius: var(--u-radio-md);
    border: 1px solid var(--u-borde);
    box-shadow: var(--u-sombra-xs);
    overflow: hidden;
    margin: 0 0 var(--u-esp-6);
}

/* Superficie, no barra azul plena. */
.planilla-header {
    padding: var(--u-esp-4) var(--u-esp-5);
    background: var(--u-neutro-50);
    border-bottom: 1px solid var(--u-borde);
    color: var(--u-texto);
}

.planilla-titulo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--u-esp-3);
}

.planilla-header h2 {
    margin: 0;
    font-size: var(--u-txt-xl);
    font-weight: var(--u-peso-semi);
    letter-spacing: var(--u-track-titulo);
    color: var(--u-texto);
}

.planilla-cuando {
    display: inline-flex;
    align-items: center;
    gap: var(--u-esp-2);
    font-size: var(--u-txt-sm);
    color: var(--u-texto-suave);
}

.planilla-header p {
    font-size: var(--u-txt-xs);
    margin: var(--u-esp-1) 0 0;
    color: var(--u-texto-suave);
    max-width: 72ch;
}

.table-planilla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--u-txt-sm);
}

/* Sin MAYUSCULAS: el versal sostenido se lee mas lento. Y sin bordes en cada
   celda: alcanza con la linea horizontal para separar filas. */
.table-planilla thead th {
    background: var(--u-superficie);
    font-weight: var(--u-peso-medio);
    font-size: var(--u-txt-2xs);
    letter-spacing: var(--u-track-normal);
    color: var(--u-texto-suave);
    padding: var(--u-esp-3) var(--u-esp-4);
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--u-borde);
    white-space: nowrap;
}

.table-planilla td {
    padding: var(--u-esp-3) var(--u-esp-4);
    border: none;
    border-bottom: 1px solid var(--u-neutro-100);
    vertical-align: middle;
}
.table-planilla tbody tr:last-child td { border-bottom: none; }

.table-planilla tr:hover { background-color: var(--u-neutro-50); }

/* La fila de una camioneta que no puede salir se distingue por la franja, no
   por un fondo pintado: sigue siendo una fila mas de la planilla. */
.table-planilla tbody tr:has(.planilla-bloqueo) {
    box-shadow: inset 3px 0 0 var(--u-parado);
}

.table-planilla td .u-patente {
    font-size: var(--u-txt-base);
    font-weight: var(--u-peso-semi);
}

.table-planilla input[type="text"],
.table-planilla select {
    width: 100%;
    min-height: 38px;
    padding: var(--u-esp-1) var(--u-esp-2);
    border: 1px solid var(--u-borde);
    border-radius: var(--u-radio-sm);
    font-family: inherit;
    font-size: var(--u-txt-xs);
    color: var(--u-texto);
    background: var(--u-superficie);
    transition: border-color var(--u-vel-rapida) var(--u-curva-suave),
                box-shadow var(--u-vel-rapida) var(--u-curva-suave);
}
.table-planilla select:hover { border-color: var(--u-borde-fuerte); }
.table-planilla input[type="text"]:focus,
.table-planilla select:focus {
    outline: none;
    border-color: var(--u-acento);
    box-shadow: 0 0 0 3px var(--u-acento-suave);
}
/* Un select sin elegir se ve distinto del que ya tiene alguien. */
.table-planilla select:has(option[value=""]:checked) { color: var(--u-texto-tenue); }

.planilla-pie,
.planilla-actions {
    padding: var(--u-esp-4) var(--u-esp-5);
    background: var(--u-neutro-50);
    border-top: 1px solid var(--u-borde);
    display: flex;
    gap: var(--u-esp-3);
    flex-wrap: wrap;
}

/* ============================================
   REPORTES
   ============================================ */
.reportes-section {
    margin: 30px 0;
    padding: 20px;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--u-borde);
}

.reportes-section h2 {
    margin: 0 0 20px 0;
    font-size: 20px;
    color: #333;
}

.reportes-section label {
    font-size: 14px;
    color: #555;
}

.patente-selector {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    margin: 10px 0 20px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    background-color: white;
}

.alerta-fallas {
    background-color: var(--u-aviso-fondo);
    border: 1px solid #ffeeba;
    color: var(--u-aviso);
    padding: 15px;
    border-radius: 5px;
}

.alerta-ok {
    background-color: var(--u-ok-fondo);
    border: 1px solid #c3e6cb;
    color: var(--u-ok);
    padding: 15px;
    border-radius: 5px;
}

.item-reporte {
    background: white;
    padding: 12px 15px;
    margin-bottom: 8px;
    border-radius: 8px;
    border-left: 4px solid var(--u-aviso);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    list-style: none;
}

.item-reporte .btn-resolver {
    background: var(--u-ok);
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-right: 4px;
}

.item-reporte .btn-resolver:hover {
    background: #1e7e34;
}

.item-reporte .btn-resolver:disabled {
    background: var(--u-texto-suave);
    cursor: not-allowed;
}

.item-reporte .btn-comentar {
    background: var(--u-acento);
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-right: 4px;
}

.item-reporte .btn-comentar:hover {
    background: #138496;
}

.item-reporte .btn-comentar:disabled {
    background: var(--u-texto-suave);
    cursor: not-allowed;
}

.item-reporte .btn-remito {
    background: var(--u-texto-suave);
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
}

.item-reporte .btn-remito:hover {
    background: #545b62;
}

/* Descripciones de problemas */
.descripcion-problema {
    color: var(--u-riesgo);
    font-weight: 500;
    font-size: 0.9rem;
    display: block;
    margin-top: 2px;
}

.descripcion-ok {
    color: var(--u-ok);
    font-size: 0.85rem;
    display: block;
    margin-top: 2px;
}

/* Tabla de historial */
.tabla-historial {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 10px;
}

.tabla-historial th,
.tabla-historial td {
    padding: 8px 10px;
    border: 1px solid #ddd;
    text-align: left;
}

.tabla-historial th {
    background: var(--u-neutro-50);
    font-weight: 600;
}

.tabla-historial tr:nth-child(even) {
    background: var(--u-neutro-50);
}

.tabla-historial tr:hover {
    background: var(--u-neutro-100);
}

/* Estados en el historial */
.estado-falla {
    background: var(--u-riesgo);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.estado-faltante {
    background: var(--u-aviso);
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.estado-ok {
    background: var(--u-ok);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.estado-resuelto {
    background: var(--u-texto-suave);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Botón de ver historial */
.btn-toggle-historial {
    background: var(--u-acento);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 0;
}

.btn-toggle-historial:hover {
    background: #0056b3;
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--u-borde);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--u-texto-suave);
}

.modal-close:hover {
    color: var(--u-riesgo);
}

.modal-body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

/* ============================================
   MODALES FULLSCREEN
   ============================================ */
.modal-fullscreen {
    max-width: 100%;
    margin: 0;
}

.modal-fullscreen .modal-content {
    border-radius: 0;
    min-height: 100vh;
    max-height: 100vh;
}

.modal-fullscreen .modal-body {
    padding: 20px 30px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.modal-fullscreen .modal-header {
    padding: 15px 30px;
    background: var(--u-neutro-50);
    border-bottom: 2px solid var(--u-borde);
}

.modal-fullscreen .modal-header .modal-title {
    font-size: 1.3rem;
    font-weight: 600;
}

.modal-fullscreen .table {
    font-size: 0.9rem;
}

.modal-fullscreen .table th {
    background: var(--u-neutro-100);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.modal-fullscreen .table td {
    vertical-align: middle;
    padding: 8px 12px;
}

.modal-fullscreen .stat-card {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .modal-fullscreen .modal-body {
        padding: 15px;
    }
    .modal-fullscreen .modal-header {
        padding: 10px 15px;
    }
    .modal-fullscreen .modal-header .modal-title {
        font-size: 1rem;
    }
    .modal-fullscreen .table {
        font-size: 0.75rem;
    }
    .modal-fullscreen .table th,
    .modal-fullscreen .table td {
        padding: 4px 6px;
    }
}

@media (max-width: 576px) {
    .modal-fullscreen .modal-body {
        padding: 10px;
    }
    .modal-fullscreen .table {
        font-size: 0.7rem;
    }
    .modal-fullscreen .table th,
    .modal-fullscreen .table td {
        padding: 3px 4px;
    }
}

/* ============================================
   UTILIDADES GENERALES
   ============================================ */
.oculto {
    display: none;
}

.panel {
    padding: 15px;
    margin-top: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white;
}

.panel h2 {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: #333;
}

.panel select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    max-width: 400px;
}

/* ============================================
   PANEL JEFE
   ============================================ */
.jefe-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.jefe-header h1 {
    font-size: 1.5rem;
    margin: 0;
}

.jefe-header .btn-outline-light {
    color: white;
    border-color: rgba(255,255,255,0.5);
}

.jefe-header .btn-outline-light:hover {
    background: rgba(255,255,255,0.1);
}

.btn-estadisticas {
    background: linear-gradient(135deg, var(--u-acento) 0%, var(--u-acento-fuerte) 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-estadisticas:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102,126,234,0.3);
    color: white;
}

/* ============================================
   STAT CARDS
   ============================================ */
.stat-card {
    background: white;
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s;
    border-left: 4px solid var(--u-acento);
    margin-bottom: 15px;
}

.stat-card:hover {
    transform: translateY(-3px);
}

.stat-card .number {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

.stat-card .label {
    font-size: 0.85rem;
    color: var(--u-texto-suave);
}

.stat-card.danger { border-left-color: var(--u-riesgo); }
.stat-card.success { border-left-color: var(--u-ok); }
.stat-card.warning { border-left-color: var(--u-aviso); }
.stat-card.info { border-left-color: var(--u-acento); }
.stat-card.primary { border-left-color: var(--u-acento); }

/* ============================================
   CARDS DE FLOTA
   ============================================ */
.card-flota {
    background: white;
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.card-flota:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

.card-flota .card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid var(--u-neutro-100);
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.card-flota .estado-badge {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
}

.card-flota .estado-badge.ok { background: var(--u-ok); }
.card-flota .estado-badge.alerta { background: var(--u-aviso); }
.card-flota .estado-badge.falla { background: var(--u-riesgo); }

.card-flota .ultimo-registro {
    font-size: 0.8rem;
    color: var(--u-texto-suave);
}

/* ============================================
   MODAL ESTADÍSTICAS
   ============================================ */
.modal-xl {
    max-width: 95%;
}

@media (min-width: 992px) {
    .modal-xl {
        max-width: 90%;
    }
}

.modal-fullscreen-md-down {
    max-width: 95%;
}

.ranking-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid var(--u-neutro-50);
}

.ranking-item .posicion {
    font-weight: bold;
    color: var(--u-acento);
    width: 30px;
}

.ranking-item .nombre {
    flex: 1;
}

.ranking-item .cantidad {
    font-weight: 600;
}

/* ============================================
   TIMELINE
   ============================================ */
.timeline-item {
    padding: 8px 12px;
    border-left: 3px solid var(--u-texto-suave);
    margin-bottom: 8px;
    background: var(--u-neutro-50);
    border-radius: 0 6px 6px 0;
}

.timeline-item.faltante { border-left-color: var(--u-riesgo); }
.timeline-item.resuelto { border-left-color: var(--u-ok); }
.timeline-item.observacion { border-left-color: var(--u-aviso); }

.timeline-item .fecha {
    font-size: 0.75rem;
    color: var(--u-texto-suave);
}

.timeline-item .tecnico {
    font-size: 0.8rem;
    font-weight: 500;
}

/* ============================================
   RESPONSIVE PANEL JEFE
   ============================================ */
@media (max-width: 768px) {
    .stat-card .number {
        font-size: 1.5rem;
    }
    .jefe-header h1 {
        font-size: 1.2rem;
    }
    .btn-estadisticas {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .card-flota {
        padding: 10px 12px;
    }
    .card-flota .card-title {
        font-size: 0.8rem;
    }
}

/* ============================================
   VISTA DE TARJETAS PARA DETALLE DE CAMIONETA
   ============================================ */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.card-item {
    background: white;
    border-radius: 10px;
    padding: 12px 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    border-left: 4px solid var(--u-ok);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.card-item .card-header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-item .card-elemento {
    font-weight: 600;
    font-size: 0.95rem;
}

.card-item .card-fecha {
    font-size: 0.7rem;
    color: var(--u-texto-suave);
}

.card-item .card-tecnico {
    font-size: 0.8rem;
    color: var(--u-neutro-600);
}

.card-item .card-observacion {
    font-size: 0.75rem;
    color: var(--u-riesgo);
    margin-top: 2px;
    word-wrap: break-word;
}

.card-item.estado-ok { border-left-color: var(--u-ok); }
.card-item.estado-faltante { border-left-color: var(--u-aviso); background: #fffef5; }
.card-item.estado-falla { border-left-color: var(--u-riesgo); background: #fff5f5; }
.card-item.estado-resuelto { border-left-color: var(--u-acento); background: #f5faff; }

.card-item .badge-estado {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.resumen-rapido {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.resumen-rapido .stat-mini {
    background: white;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.resumen-rapido .stat-mini .numero {
    font-size: 1.5rem;
    font-weight: bold;
}

.resumen-rapido .stat-mini .etiqueta {
    font-size: 0.7rem;
    color: var(--u-texto-suave);
}

@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .resumen-rapido {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   HISTORIAL DE CAMIONETA
   ============================================ */
.historial-container {
    max-width: 1200px;
    margin: 0 auto;
}

.historial-header {
    background: linear-gradient(135deg, var(--u-acento) 0%, var(--u-acento-fuerte) 100%);
    color: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.historial-header h1 {
    margin: 0;
    font-size: 1.8rem;
}

.historial-header .subtitle {
    opacity: 0.9;
    font-size: 0.95rem;
}

.btn-volver-historial {
    background: rgba(255,255,255,0.2);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-volver-historial:hover {
    background: rgba(255,255,255,0.3);
    color: white;
}

.nav-tabs-historial {
    border-bottom: 2px solid var(--u-borde);
    margin-bottom: 20px;
}

.nav-tabs-historial .nav-link {
    color: var(--u-neutro-600);
    font-weight: 500;
    border: none;
    padding: 10px 20px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.nav-tabs-historial .nav-link:hover {
    border-bottom-color: var(--u-borde);
}

.nav-tabs-historial .nav-link.active {
    color: var(--u-acento);
    border-bottom-color: var(--u-acento);
    background: transparent;
}

.fecha-card {
    background: white;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 4px solid var(--u-texto-suave);
}

.fecha-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

.fecha-card .fecha-texto {
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
}

.fecha-card .tecnico-nombre {
    color: var(--u-texto-suave);
    font-size: 0.9rem;
}

.badge-tipo {
    font-size: 0.75rem;
    padding: 4px 12px;
}

.badge-retiro {
    background: var(--u-ok);
    color: white;
}

.badge-devolucion {
    background: var(--u-acento);
    color: white;
}

.badge-finalizado {
    background: var(--u-ok);
    color: white;
}

.badge-pendiente {
    background: var(--u-aviso);
    color: #000;
}

.fecha-card .toggle-icon {
    transition: transform 0.3s ease;
    font-size: 1.2rem;
}

.fecha-card .toggle-icon.rotated {
    transform: rotate(180deg);
}

.detalle-control {
    display: none;
    padding: 15px 20px;
    background: var(--u-neutro-50);
    border-radius: 0 0 12px 12px;
    margin-top: -5px;
    margin-bottom: 15px;
    border: 1px solid var(--u-neutro-100);
    border-top: none;
}

.detalle-control.mostrar {
    display: block;
}

.detalle-control .elemento-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    border-radius: 4px;
    transition: background 0.15s;
}

.detalle-control .elemento-item:hover {
    background: var(--u-neutro-100);
}

.detalle-control .elemento-item:last-child {
    border-bottom: none;
}

.detalle-control .elemento-item .nombre-categoria {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.detalle-control .elemento-item .categoria-tag {
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--u-neutro-100);
    color: var(--u-neutro-600);
    font-weight: 600;
    text-transform: uppercase;
}

.detalle-control .elemento-item .estado-ok {
    color: var(--u-ok);
    font-weight: 600;
}

.detalle-control .elemento-item .estado-faltante {
    color: var(--u-riesgo);
    font-weight: 600;
}

.detalle-control .elemento-item .estado-observacion {
    color: var(--u-aviso);
    font-weight: 600;
}

.detalle-control .elemento-item .estado-resuelto {
    color: var(--u-acento);
    font-weight: 600;
}

.detalle-control .elemento-item .info-entrega {
    font-size: 0.75rem;
    color: var(--u-texto-suave);
    margin-left: 10px;
}

.detalle-control .elemento-item .info-entrega .entregado {
    color: var(--u-ok);
}

.detalle-control .elemento-item .info-entrega .recibido {
    color: var(--u-acento);
}

.elemento-historial {
    background: white;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
}

.elemento-historial:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.elemento-historial .nombre-elemento {
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.elemento-historial .nombre-elemento:hover {
    color: var(--u-acento);
}

.elemento-historial .ultimo-estado {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.elemento-historial .badge-contador {
    font-size: 0.7rem;
    padding: 3px 10px;
}

.linea-tiempo {
    position: relative;
    padding-left: 25px;
    margin-top: 10px;
}

.linea-tiempo::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--u-borde);
}

.linea-tiempo .evento {
    position: relative;
    padding: 10px 0 10px 25px;
    border-bottom: 1px solid var(--u-neutro-100);
    transition: background 0.2s ease;
}

.linea-tiempo .evento:hover {
    background: var(--u-neutro-50);
    border-radius: 4px;
}

.linea-tiempo .evento:last-child {
    border-bottom: none;
}

.linea-tiempo .evento::before {
    content: '';
    position: absolute;
    left: -17px;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--u-texto-suave);
    background: var(--u-texto-suave);
}

.linea-tiempo .evento.ok::before {
    background: var(--u-ok);
    box-shadow: 0 0 0 2px var(--u-ok);
}

.linea-tiempo .evento.faltante::before {
    background: var(--u-riesgo);
    box-shadow: 0 0 0 2px var(--u-riesgo);
    animation: pulse-danger 1.5s ease-in-out infinite;
}

.linea-tiempo .evento.observacion::before {
    background: var(--u-aviso);
    box-shadow: 0 0 0 2px var(--u-aviso);
}

.linea-tiempo .evento.resuelto::before {
    background: var(--u-acento);
    box-shadow: 0 0 0 2px var(--u-acento);
}

@keyframes pulse-danger {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.linea-tiempo .evento .fecha-evento {
    font-size: 0.8rem;
    color: var(--u-neutro-600);
    font-weight: 500;
}

.linea-tiempo .evento .tecnico-evento {
    font-size: 0.8rem;
    color: var(--u-texto-suave);
}

.linea-tiempo .evento .entrega-info {
    font-size: 0.75rem;
    color: var(--u-texto-suave);
    margin-top: 2px;
}

.linea-tiempo .evento .entrega-info .entregado-por {
    color: var(--u-ok);
}

.linea-tiempo .evento .entrega-info .recibido-por {
    color: var(--u-acento);
}

.linea-tiempo .evento .badge {
    font-size: 0.7rem;
    padding: 3px 8px;
}

.buscador-elemento {
    border-radius: 8px;
    border: 2px solid var(--u-borde);
    padding: 10px 15px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.buscador-elemento:focus {
    border-color: var(--u-acento);
    box-shadow: none;
}

@media (max-width: 768px) {
    .historial-header h1 {
        font-size: 1.3rem;
    }
    .fecha-card .fecha-texto {
        font-size: 0.95rem;
    }
    .detalle-control .elemento-item {
        font-size: 0.85rem;
        flex-wrap: wrap;
        gap: 4px;
    }
    .detalle-control .elemento-item .info-entrega {
        font-size: 0.7rem;
        margin-left: 0;
        width: 100%;
    }
    .elemento-historial .ultimo-estado {
        font-size: 0.75rem;
    }
    .linea-tiempo .evento {
        font-size: 0.85rem;
    }
}

/* ============================================
   CATEGORÍAS COLAPSABLES EN HISTORIAL
   ============================================ */
.categoria-colapsable {
    border: 1px solid var(--u-neutro-100);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 8px;
}

.categoria-header-click {
    padding: 8px 12px;
    background: var(--u-neutro-50);
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--u-neutro-100);
}

.categoria-header-click:hover {
    background: var(--u-neutro-100);
}

.categoria-header-click .toggle-cat-icon {
    transition: transform 0.3s ease;
}

.categoria-contenido {
    padding: 5px 10px;
    background: white;
}

.categoria-contenido .elemento-item {
    padding: 4px 8px;
    border-bottom: 1px solid var(--u-neutro-50);
}

.categoria-contenido .elemento-item:last-child {
    border-bottom: none;
}

/* ============================================
   MEJORA DE CONTRASTE PARA ESTADOS
   ============================================ */
.estado-ok {
    color: var(--u-ok) !important;
    background: var(--u-ok-fondo);
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.75rem;
}

.estado-faltante {
    color: var(--u-parado) !important;
    background: var(--u-riesgo-fondo);
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.75rem;
}

.estado-observacion {
    color: var(--u-aviso) !important;
    background: var(--u-aviso-fondo);
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.75rem;
}

.estado-resuelto {
    color: #0c5460 !important;
    background: #d1ecf1;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.75rem;
}

.info-entrega {
    font-size: 0.7rem;
    color: var(--u-texto-suave);
}

.info-entrega .entregado {
    color: var(--u-ok);
}

.info-entrega .recibido {
    color: var(--u-acento);
}

.seccion-content {
    animation: fadeIn 0.3s ease;
}

.seccion-header {
    margin-bottom: 25px;
}

.seccion-header h1 {
    font-size: 1.8rem;
    margin: 0;
    color: #333;
}

.seccion-header h1 i {
    color: var(--u-acento);
}

.seccion-header .text-muted {
    font-size: 0.95rem;
    margin-top: 5px;
}

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

@media (max-width: 768px) {
    .seccion-header h1 {
        font-size: 1.3rem;
    }
}



/* Referencia "última vez OK" en los faltantes del panel del administrador */
.ultima-ok {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.82rem;
    color: #2e7d32;
}

.ultima-ok.sin-registro {
    color: #b26a00;
}

/* Alerta de controles de retiro/devolución sin realizar */
/* --------------------------------------------------------------------------
   PANEL DE ALERTAS
   --------------------------------------------------------------------------
   Antes: borde rojo de 2px y encabezado rojo pleno, con veinte filas del mismo
   peso. Ocupaba la pantalla entera antes de que se viera una sola tarjeta del
   tablero, y como todo gritaba lo mismo, nada resaltaba.

   Ahora: superficie neutra, y el estado lo dice la franja de 3px al costado de
   cada fila. El rojo pleno es el recurso mas fuerte que tiene una interfaz;
   usado veinte veces seguidas deja de servir para ninguna.
   -------------------------------------------------------------------------- */

.alerta-controles {
    background: var(--u-superficie);
    border: 1px solid var(--u-borde);
    border-radius: var(--u-radio-md);
    box-shadow: var(--u-sombra-xs);
    margin-bottom: var(--u-esp-5);
    overflow: hidden;
}

.alerta-controles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--u-esp-3);
    padding: var(--u-esp-3) var(--u-esp-4);
    background: var(--u-neutro-50);
    border-bottom: 1px solid var(--u-borde);
    color: var(--u-texto);
    font-size: var(--u-txt-sm);
}
.alerta-controles-header > span {
    display: flex;
    align-items: center;
    gap: var(--u-esp-2);
}
.alerta-controles-header strong {
    font-weight: var(--u-peso-semi);
    letter-spacing: var(--u-track-titulo);
}
.alerta-controles-header .bi-bell-fill { color: var(--u-texto-suave); font-size: 0.9rem; }

/* El contador: chip neutro con la cifra en mono, no pastilla blanca sobre
   rojo. La cifra es un dato, no una alarma. */
.alerta-controles-header .badge {
    background: var(--u-neutro-200) !important;
    color: var(--u-texto) !important;
    font-family: var(--u-fuente-dato);
    font-variant-numeric: tabular-nums;
    font-size: var(--u-txt-2xs);
    font-weight: var(--u-peso-semi);
    padding: 2px 7px;
    border-radius: var(--u-radio-xs);
}

.btn-toggle-alertas {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    background: transparent;
    border: none;
    color: var(--u-texto-suave);
    border-radius: var(--u-radio-xs);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    transition: background-color var(--u-vel-rapida) var(--u-curva-suave),
                color var(--u-vel-rapida) var(--u-curva-suave),
                transform var(--u-vel-instante) var(--u-curva-suave);
}
.btn-toggle-alertas:hover { background: var(--u-neutro-200); color: var(--u-texto); }
.btn-toggle-alertas:active { transform: scale(0.92); }
/* La flecha gira: dice hacia donde va el panel, no solo que cambio. */
.btn-toggle-alertas i { transition: transform var(--u-vel-normal) var(--u-curva-salida); }
.btn-toggle-alertas.plegado i { transform: rotate(180deg); }

.alerta-controles-body {
    padding: 0;
    overflow-x: auto;
    /* Tope de alto: con veinte alertas, el tablero queda abajo de todo y nunca
       se ve. Con tope, las alertas scrollean adentro de su panel. */
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Plegado animado con max-height.
       El truco de grid-template-rows (1fr -> 0fr) necesita UN solo hijo, y
       este panel tiene una fila por alerta: aplicado aca creaba una fila de
       grilla por alerta y les cambiaba el alto. Con max-height funciona
       porque el alto abierto ya esta acotado en 46vh mas arriba, asi que no
       hay ningun "alto desconocido" que medir. */
    transition: max-height var(--u-vel-normal) var(--u-curva-salida),
                opacity var(--u-vel-rapida) var(--u-curva-suave);
}
.alerta-controles-body.plegado {
    max-height: 0;
    opacity: 0;
}
.alerta-controles-body::-webkit-scrollbar { width: 6px; }
.alerta-controles-body::-webkit-scrollbar-thumb {
    background: var(--u-neutro-300); border-radius: var(--u-radio-full);
}

.tabla-alertas {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.tabla-alertas th,
.tabla-alertas td {
    padding: 8px 16px;
    text-align: left;
    border-bottom: 1px solid var(--u-neutro-100);
}

.tabla-alertas th {
    background: #fafafa;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.tabla-alertas td small {
    display: block;
    font-size: 0.75rem;
}

/* ==========================================
   PANTALLA DE CONFIGURACIÓN
   ========================================== */
.config-container {
    padding-bottom: 40px;
}

.config-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
    border-bottom: 2px solid var(--u-neutro-100);
    padding-bottom: 10px;
}

.config-tab {
    background: var(--u-neutro-100);
    border: 1px solid var(--u-borde);
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--u-neutro-600);
    transition: background 0.15s, color 0.15s;
}

.config-tab:hover {
    background: var(--u-neutro-100);
}

.config-tab.activa {
    background: var(--u-acento);
    border-color: var(--u-acento);
    color: #fff;
}

.config-panel {
    display: none;
}

.form-inline-config {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.form-inline-config input,
.form-inline-config select {
    padding: 7px 10px;
    border: 1px solid var(--u-borde-fuerte);
    border-radius: 6px;
    font-size: 0.9rem;
}

.form-inline-config input[type="text"],
.form-inline-config input[type="password"] {
    min-width: 180px;
}

.tabla-config {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.88rem;
}

.tabla-config th,
.tabla-config td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--u-neutro-100);
    text-align: left;
    vertical-align: middle;
}

.tabla-config th {
    background: #fafafa;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.tabla-config input[type="text"],
.tabla-config select {
    padding: 5px 8px;
    border: 1px solid var(--u-borde-fuerte);
    border-radius: 5px;
    font-size: 0.85rem;
    max-width: 100%;
}

.tabla-config .form-linea {
    display: flex;
    gap: 6px;
    align-items: center;
}

.fila-inactiva {
    opacity: 0.55;
    background: #fafafa;
}

.acciones-usuario {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

@media (max-width: 768px) {
    .form-inline-config input[type="text"],
    .form-inline-config input[type="password"],
    .form-inline-config select {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================================
   DIÁLOGO DE ALTA DE REMITO
   ========================================== */
.dialogo-remito {
    border: none;
    border-radius: 10px;
    padding: 0;
    max-width: 480px;
    width: calc(100% - 32px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.dialogo-remito::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.dialogo-remito form {
    padding: 24px;
}

.dialogo-remito h3 {
    margin: 0 0 18px;
    font-size: 1.15rem;
    color: #1a1a2e;
}

.dialogo-remito label {
    display: block;
    margin-top: 12px;
    margin-bottom: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
}

.dialogo-remito input,
.dialogo-remito select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95rem;
}

.dialogo-remito input[readonly] {
    background: #f2f2f2;
    color: #666;
}

.dialogo-remito-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

/* ==========================================
   PANEL DE ALERTAS
   ========================================== */
/* --- Fila de alerta ------------------------------------------------------
   El estado lo dice la franja del costado. Sin franja de color, todas las
   filas pesaban igual: "devolucion vencida hace 3 horas" se veia igual que
   "VTV vencida hace 78 dias". */

.alerta-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--u-esp-3);
    padding: var(--u-esp-3) var(--u-esp-4);
    border-bottom: 1px solid var(--u-borde);
    border-left: 3px solid transparent;
    font-size: var(--u-txt-sm);
    transition: background-color var(--u-vel-rapida) var(--u-curva-suave);
}
.alerta-item:hover { background: var(--u-neutro-50); }
.alerta-item:last-child { border-bottom: none; }

/* Severidad. La pone el template segun el grupo del que viene la fila. */
.alerta-item.sev-riesgo { border-left-color: var(--u-riesgo); }
.alerta-item.sev-aviso  { border-left-color: var(--u-aviso); }
.alerta-item.sev-info   { border-left-color: var(--u-acento); }
.alerta-item.sev-parado { border-left-color: var(--u-parado); }

.alerta-item-texto {
    flex: 1;
    min-width: 0;
    line-height: var(--u-alto-normal);
}
.alerta-item-texto > i { color: var(--u-texto-tenue); margin-right: var(--u-esp-1); }
.alerta-item.sev-riesgo .alerta-item-texto > i { color: var(--u-riesgo); }
.alerta-item.sev-aviso  .alerta-item-texto > i { color: var(--u-aviso); }
.alerta-item.sev-parado .alerta-item-texto > i { color: var(--u-parado); }

/* Las patentes en mono: son el dato que el ojo busca al barrer la lista. */
.alerta-item-texto strong { font-weight: var(--u-peso-semi); }

.alerta-item-acciones {
    display: flex;
    align-items: center;
    gap: var(--u-esp-2);
    flex-shrink: 0;
}
/* Los botones de la lista, todos del mismo tamano y sin color propio: el color
   de la fila ya lo da la franja. Antes habia amarillo, blanco y dos azules
   distintos conviviendo en la misma lista. */
.alerta-item-acciones .btn {
    font-size: var(--u-txt-2xs);
    padding: var(--u-esp-1) var(--u-esp-3);
    border-radius: var(--u-radio-xs);
    white-space: nowrap;
}
.alerta-item-acciones .btn-warning {
    background: var(--u-superficie);
    border-color: var(--u-borde-fuerte);
    color: var(--u-texto);
}
.alerta-item-acciones .btn-warning:hover {
    background: var(--u-neutro-100);
    border-color: var(--u-neutro-400);
    color: var(--u-texto);
}

.alerta-cerrar {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    background: none;
    border: none;
    color: var(--u-texto-tenue);
    border-radius: var(--u-radio-xs);
    font-size: 1.15rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: background-color var(--u-vel-rapida) var(--u-curva-suave),
                color var(--u-vel-rapida) var(--u-curva-suave),
                transform var(--u-vel-instante) var(--u-curva-suave);
}
.alerta-cerrar:hover { background: var(--u-neutro-200); color: var(--u-texto); }
.alerta-cerrar:active { transform: scale(0.9); }

.alerta-trabada {
    opacity: 0.45;
    padding: 0 var(--u-esp-2);
    cursor: not-allowed;
}

/* ==========================================
   VISOR FLOTANTE DE REMITOS
   ========================================== */
.visor-remito {
    border: none;
    border-radius: 10px;
    padding: 0;
    width: min(900px, calc(100% - 32px));
    max-width: 900px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.visor-remito::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.visor-remito-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e3e3e3;
}

.visor-remito-cerrar {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: #666;
}

.visor-remito iframe {
    display: block;
    width: 100%;
    height: min(70vh, 640px);
    border: none;
    background: var(--u-neutro-50);
}

.visor-remito-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid #e3e3e3;
}

/* Remito mostrado dentro de la línea de tiempo de un elemento */
.remito-evento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border-left: 3px solid var(--u-acento);
    background: #f0f6ff;
    border-radius: 4px;
    font-size: 0.9rem;
}


/* ============================================
   TIEMPOS DE CONTROL
   ============================================ */

.leyenda-tiempos {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--u-neutro-100);
}

/* Un control resuelto en menos de dos minutos casi nunca es un control:
   se pinta la fila entera para que salte a la vista en la lista larga. */
.fila-rapida  { background-color: #fdf2f2 !important; }
.fila-justa   { background-color: #fffcf3 !important; }

/* ============================================
   TARJETAS DE CAMIONETA (REPORTES)
   ============================================ */

.tarjetas-patentes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 10px;
    margin: 12px 0 18px;
}

.tarjeta-patente {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    background: #fff;
    border: 2px solid #e3e6ea;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color .12s, box-shadow .12s, background .12s;
}

.tarjeta-patente:hover { border-color: var(--u-neutro-400); }

.tarjeta-patente .tp-patente {
    font-weight: 700;
    font-size: 15px;
    color: var(--u-texto);
    letter-spacing: 0.3px;
}

.tarjeta-patente .tp-estado {
    font-size: 12px;
    color: var(--u-texto-suave);
}

/* Con faltantes pendientes la tarjeta se tiñe: es lo que hace que no haya
   que entrar de a una para saber cuál necesita atención. */
.tarjeta-patente.con-faltantes {
    border-color: #f5c2c7;
    background: #fff8f8;
}
.tarjeta-patente.con-faltantes .tp-estado {
    color: var(--u-parado);
    font-weight: 600;
}

.tarjeta-patente.activa {
    border-color: #2a5298;
    box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.15);
}

@media (max-width: 480px) {
    .tarjetas-patentes { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
}

/* Las tarjetas de patente también se usan como enlaces (tiempos de control). */
a.tarjeta-patente { text-decoration: none; }
a.tarjeta-patente:hover .tp-patente { color: #2a5298; }

/* Una camioneta sin controles todavía no dice nada: se atenúa para que no
   compita con las que sí tienen números para mirar. */
.tarjeta-patente.sin-datos { opacity: 0.6; }

.tp-estado .t-rapido { color: var(--u-parado); }
.tp-estado .t-justo  { color: var(--u-aviso); }
.tp-estado .t-ok     { color: var(--u-ok); }

/* ============================================
   PANTALLA DE CONTROL
   ============================================ */

.aviso-control {
    border-radius: 12px;
    font-size: 0.9rem;
}

.aviso-control-chico {
    font-size: 0.85rem;
}

/* ============================================
   DISTRIBUCIÓN SEMANAL
   ============================================ */

.dist-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dist-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dist-selector label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.dist-selector select { width: auto; }

.dist-estado {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.dist-publicar { margin: 0; }

/* Mañana y tarde lado a lado; en pantalla chica se apilan solas. */
.dist-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.dist-columna {
    background: var(--u-neutro-50);
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    padding: 12px;
}

.dist-columna-titulo {
    font-weight: 700;
    color: #2a5298;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 2px solid #dfe4ea;
}

.dist-columna-titulo small {
    display: block;
    font-weight: 400;
    font-size: 11px;
    color: var(--u-texto-suave);
}

.dist-persona {
    background: #fff;
    border: 1px solid var(--u-neutro-100);
    border-radius: 6px;
    padding: 7px 10px;
    margin-bottom: 6px;
    font-size: 14px;
}

.dist-persona-vacia {
    color: var(--u-neutro-400);
    font-style: italic;
}

.dist-puesto-etiqueta {
    display: inline-block;
    background: #eef2f7;
    color: var(--u-neutro-600);
    border-radius: 4px;
    padding: 1px 7px;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 600;
}

/* Fila de puesto en edición: persona + nombre del puesto + quitar. */
.dist-puesto {
    display: grid;
    grid-template-columns: 1fr 110px auto;
    gap: 6px;
    margin-bottom: 6px;
}

.dist-puestos { margin-bottom: 8px; }

/* Las filas de tecnico no tienen campo de puesto: dos columnas, no tres. Con
   la grilla de soporte, el select quedaba 110px mas angosto de lo necesario. */
.dist-puestos-tecnicos .dist-puesto { grid-template-columns: 1fr auto; }

.dist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dist-acciones {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.dist-vacio { padding: 48px 16px; }

.dist-vacio i {
    font-size: 48px;
    color: var(--u-neutro-400);
}

@media (max-width: 576px) {
    .dist-estado { margin-left: 0; }
    .dist-puesto { grid-template-columns: 1fr 90px auto; }
}

/* ============================================
   ACTIVIDADES COORDINADAS
   ============================================ */

.reclamo-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Los campos del alta van en fila: en pantalla ancha se acomodan solos
   según el ancho disponible, y en celular se apilan de a uno. */
.reclamo-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    align-items: start;
}

.reclamo-campo {
    display: flex;
    flex-direction: column;
    min-width: 0;          /* permite que los hijos se achiquen bien en el grid */
}

.reclamo-campo label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--u-neutro-600);
}

/* Los inputs/selects/textarea ocupan todo el ancho de su columna y comparten
   el mismo aspecto en las tres pantallas de configuración. */
.reclamo-campo input,
.reclamo-campo select,
.reclamo-campo textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--u-borde-fuerte);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.reclamo-campo input:focus,
.reclamo-campo select:focus,
.reclamo-campo textarea:focus {
    outline: none;
    border-color: var(--u-acento);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12);
}

.reclamo-campo textarea {
    min-height: 90px;
    resize: vertical;
}

.reclamo-mensaje {
    white-space: pre-wrap;
    max-width: 520px;
    word-break: break-word;
}

.reclamo-vacio { padding: 24px; }

/* En celular apilamos todo y damos más aire entre campos. */
@media (max-width: 576px) {
    .reclamo-fila { grid-template-columns: 1fr; gap: 12px; }
    .reclamo-campo textarea { min-height: 110px; }
}

/* ============================================
   RETIRO DE URGENCIA (GUARDIA)
   ============================================ */

.urgencia-form {
    display: grid;
    grid-template-columns: 1fr 1.6fr auto;
    gap: 10px;
    align-items: end;
}

.urgencia-campo label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    .urgencia-form { grid-template-columns: 1fr; }
}

/* ============================================
   ASIGNACIÓN SEMANAL
   ============================================ */

.semana-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.semana-selector form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.semana-selector label {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

.semana-selector select { width: auto; }

.semana-bloqueada {
    color: var(--u-parado);
    font-weight: 600;
    font-size: 13px;
}

/* La jornada se elige dentro del cuadro de la planilla, no arriba de todo. */
.planilla-header-jornada {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.jornada-en-cuadro {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.jornada-en-cuadro label {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

.jornada-en-cuadro select { width: auto; }

/* Resumen de la distribución arriba de la planilla */
.distribucion-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    padding: 16px;
}

.dist-camioneta {
    display: inline-block;
    background: #e7f1ff;
    color: #0a4fa0;
    border-radius: 4px;
    padding: 1px 7px;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.dist-camioneta-falta {
    background: var(--u-neutro-100);
    color: #868e96;
    font-weight: 400;
    font-style: italic;
}

/* ============================================
   SELECTOR DE MODULOS (entre el login y el panel)
   ============================================ */
.modulos-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);
}

.modulos-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 16px 60px 16px;
}

.modulos-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.modulos-header h1 {
    margin: 0;
    color: #fff;
    font-size: 2rem;
    letter-spacing: -0.5px;
}

.modulos-header p {
    margin: 6px 0 0 0;
    color: rgba(255, 255, 255, 0.65);
}

.modulos-grilla {
    display: grid;
    /* auto-fit + minmax: 4 columnas en escritorio, 2 en tablet y 1 en celular,
       sin escribir un media query por cada corte. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.modulo-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px;
    border-radius: 14px;
    background: #fff;
    border-top: 4px solid var(--modulo-color, var(--u-acento));
    text-decoration: none;
    color: #222;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.modulo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    text-decoration: none;
    color: #222;
}

.modulo-icono {
    font-size: 2rem;
    line-height: 1;
    color: var(--modulo-color, var(--u-acento));
}

.modulo-nombre {
    font-size: 1.15rem;
    font-weight: 600;
}

.modulo-descripcion {
    font-size: 0.85rem;
    color: #666;
    flex: 1;  /* empuja el pie de la tarjeta abajo: todas quedan parejas */
}

.modulo-entrar {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--modulo-color, var(--u-acento));
}

/* Modulo sin desarrollar: se ve, pero se nota que no se entra. */
.modulo-card-inactivo {
    background: #ebebef;
    border-top-color: #b8b8c2;
    box-shadow: none;
    cursor: default;
}

.modulo-card-inactivo:hover {
    transform: none;
    box-shadow: none;
}

.modulo-card-inactivo .modulo-icono,
.modulo-card-inactivo .modulo-nombre {
    color: #8b8b96;
}

.modulo-card-inactivo .badge-proximamente {
    align-self: flex-start;
    background: var(--u-aviso);
    color: #000;
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 10px;
}

/* ============================================
   HISTORIAL - TARJETAS Y LISTA DE CONTROLES
   ============================================ */
.hist-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.hist-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 15px 16px;
    border: 1px solid #e3e3ea;
    border-left: 4px solid var(--u-acento);
    border-radius: 10px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.hist-tarjeta:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* La camioneta cuyo historial se esta mirando abajo. */
.hist-tarjeta.activa {
    border-color: var(--u-acento);
    border-left-width: 6px;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
}

.hist-tarjeta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.hist-patente {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.hist-tarjeta-dato {
    font-size: 0.83rem;
    color: #555;
}

.hist-tarjeta-pie {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f4;
    font-size: 0.78rem;
    color: #777;
}

/* ---------- Filtros ---------- */
.hist-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
}

.hist-filtro {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 130px;
    flex: 1 1 130px;
}

.hist-filtro label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    margin: 0;
}

.hist-filtro-accion {
    flex: 0 0 auto;
    min-width: 0;
}

/* ---------- Lista de controles ---------- */
.hist-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hist-item {
    border: 1px solid var(--u-borde);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.hist-item.abierto {
    border-color: var(--u-acento);
}

.hist-item-cabecera {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.hist-item-cabecera:hover {
    background: #f7f8fc;
}

.hist-item-fecha {
    font-weight: 600;
    min-width: 140px;
}

.hist-item-patente {
    font-weight: 700;
    letter-spacing: 0.4px;
}

.hist-item-tecnico {
    color: #666;
    font-size: 0.88rem;
}

.hist-item-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-left: auto;
    font-size: 0.8rem;
    color: #666;
}

.hist-chip-fotos {
    color: var(--u-acento);
}

.hist-item-flecha {
    transition: transform 0.2s ease;
    color: #999;
}

.hist-item.abierto .hist-item-flecha {
    transform: rotate(180deg);
}

.hist-item-detalle {
    padding: 4px 14px 14px 14px;
    border-top: 1px solid #f0f0f4;
    background: #fbfbfd;
}

.hist-observacion {
    font-size: 0.87rem;
    color: #444;
    background: #fff8e1;
    border-left: 3px solid var(--u-aviso);
    padding: 7px 10px;
    border-radius: 4px;
}

.hist-tabla {
    margin-bottom: 0;
}

.hist-pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.hist-cantidad {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 0.8rem;
    color: #666;
}

.hist-cantidad label {
    margin: 0;
    white-space: nowrap;
}

.hist-cantidad select {
    width: auto;
}

/* ---------- Carpeta de fotos del control ---------- */
.hist-fotos {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--u-borde);
}

.hist-fotos-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.hist-fotos-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

.hist-foto {
    margin: 0;
    border: 1px solid #e3e3ea;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.hist-foto img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.hist-foto figcaption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: 0.75rem;
    color: #555;
}

/* Posicion obligatoria que nunca se saco: se muestra igual para que se note
   el hueco, en vez de desaparecer de la carpeta. */
.hist-foto-falta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 132px;
    background: #f3f3f7;
    color: #a0a0ad;
    border-style: dashed;
}

.hist-foto-falta figcaption {
    justify-content: center;
}

/* ============================================
   ACTIVIDADES COORDINADAS - LISTADO DE SOPORTE
   ============================================ */
.act-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: #555;
}

.act-resumen-item strong {
    font-size: 1.2rem;
    color: #333;
}

.act-resumen-item.act-ok strong { color: var(--u-ok); }
.act-resumen-item.act-mal strong { color: var(--u-riesgo); }

.act-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.act-filtro {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 130px;
    flex: 1 1 130px;
}

.act-filtro label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    margin: 0;
}

.act-filtro-acciones {
    flex: 0 0 auto;
    min-width: 0;
    flex-direction: row;
    gap: 8px;
}

.act-item {
    padding: 12px 14px;
    border: 1px solid var(--u-borde);
    border-left: 4px solid var(--u-neutro-400);
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fff;
}

.act-item.act-resuelta { border-left-color: var(--u-ok); }
.act-item.act-no_resuelta { border-left-color: var(--u-riesgo); }
.act-item.act-pendiente { border-left-color: var(--u-acento); }

.act-item-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.act-fecha {
    font-weight: 600;
    font-size: 0.88rem;
}

.act-acciones {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.act-mensaje {
    white-space: pre-wrap;  /* respeta los saltos de linea que escribio soporte */
    font-size: 0.93rem;
    color: #222;
}

.act-meta {
    font-size: 0.76rem;
    color: #888;
    margin-top: 4px;
}

/* La respuesta del tecnico, para que se lea distinto del pedido original. */
.act-resolucion {
    margin-top: 10px;
    padding: 9px 12px;
    background: var(--u-ok-fondo);
    border-left: 3px solid var(--u-ok);
    border-radius: 4px;
    font-size: 0.88rem;
}

.act-item.act-no_resuelta .act-resolucion {
    background: var(--u-riesgo-fondo);
    border-left-color: var(--u-riesgo);
}

.act-editar {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--u-borde);
}

/* ============================================
   JUSTIFICAR UN CONTROL QUE NUNCA SE HIZO
   ============================================ */
.just-fondo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1060;
}

.just-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1070;
    width: min(440px, calc(100vw - 32px));
    max-height: 90dvh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.just-modal h5 {
    margin: 0 0 4px 0;
}

.just-lote {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.88rem;
    margin: 4px 0 12px 0;
    cursor: pointer;
}

.just-lote input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.just-aviso {
    background: #eef3ff;
    border-left: 3px solid var(--u-acento);
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 16px;
}

.just-botones {
    display: flex;
    gap: 8px;
}

/* ============================================
   INICIO DE SOPORTE
   ============================================ */
.inicio-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: var(--u-esp-4);
}

.inicio-tarjeta {
    display: flex;
    flex-direction: column;
    padding: var(--u-esp-4) var(--u-esp-5);
    background: var(--u-superficie);
    border: 1px solid var(--u-borde);
    /* La franja de estado al costado, del ancho del sistema. */
    border-left: 3px solid var(--u-neutro-300);
    border-radius: var(--u-radio-md);
    box-shadow: var(--u-sombra-xs);
    cursor: pointer;
    transition: transform var(--u-vel-rapida) var(--u-curva-suave),
                box-shadow var(--u-vel-rapida) var(--u-curva-suave),
                border-color var(--u-vel-rapida) var(--u-curva-suave);
}
.inicio-tarjeta:hover {
    transform: translateY(-1px);
    box-shadow: var(--u-sombra-md);
}
.inicio-tarjeta:active { transform: translateY(0) scale(0.995); }

/* Riesgo: traba la operacion ahora. Aviso: hay que resolverlo, no urge. */
.inicio-tarjeta.inicio-alerta { border-left-color: var(--u-riesgo); }
.inicio-tarjeta.inicio-aviso { border-left-color: var(--u-aviso); }

.inicio-tarjeta-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--u-esp-3);
    margin-bottom: var(--u-esp-3);
}

.inicio-titulo {
    font-weight: var(--u-peso-medio);
    font-size: var(--u-txt-sm);
    color: var(--u-texto);
    letter-spacing: var(--u-track-normal);
}

/* La cifra en mono y tabular: en un tablero que se auto-refresca, los numeros
   en fuente proporcional bailan cada vez que cambia un digito. */
.inicio-numero {
    font-family: var(--u-fuente-dato);
    font-variant-numeric: tabular-nums;
    font-size: var(--u-txt-4xl);
    font-weight: var(--u-peso-semi);
    line-height: var(--u-alto-apretado);
    letter-spacing: var(--u-track-display);
    color: var(--u-texto);
    flex: none;
}

.inicio-numero small {
    font-size: var(--u-txt-base);
    font-weight: var(--u-peso-normal);
    color: var(--u-texto-tenue);
    letter-spacing: var(--u-track-normal);
}

/* El color de la cifra lo da el estado, no la decoracion. */
.inicio-alerta .inicio-numero { color: var(--u-riesgo); }
.inicio-aviso .inicio-numero { color: var(--u-aviso); }

.inicio-lista {
    list-style: none;
    margin: 0 0 var(--u-esp-3) 0;
    padding: 0;
    font-size: var(--u-txt-xs);
    color: var(--u-texto-suave);
}

.inicio-lista li {
    padding: var(--u-esp-1) 0;
    border-bottom: 1px solid var(--u-neutro-100);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inicio-lista li:last-child { border-bottom: none; }
/* Las patentes, que es lo que el ojo busca al barrer la lista. */
.inicio-lista strong {
    font-family: var(--u-fuente-dato);
    font-weight: var(--u-peso-semi);
    color: var(--u-texto);
    letter-spacing: 0.02em;
}

.inicio-pie {
    font-size: var(--u-txt-xs);
    color: var(--u-texto-suave);
    margin: 0 0 var(--u-esp-3) 0;
}

.inicio-pie-alerta {
    color: var(--u-riesgo);
    font-weight: var(--u-peso-medio);
}

.inicio-vacio {
    font-size: var(--u-txt-xs);
    color: var(--u-ok);
    margin: 0 0 var(--u-esp-3) 0;
}

/* Empuja el "ir a" al pie: todas las tarjetas lo tienen a la misma altura,
   asi los enlaces forman una linea limpia aunque el contenido de arriba mida
   distinto en cada una. */
.inicio-ir {
    display: inline-flex;
    align-items: center;
    gap: var(--u-esp-1);
    margin-top: auto;
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: var(--u-txt-xs);
    font-weight: var(--u-peso-medio);
    color: var(--u-acento);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--u-vel-rapida) var(--u-curva-suave);
}
.inicio-ir:hover { color: var(--u-acento-fuerte); text-decoration: underline; }

/* Casillas de "que se cambio" en el service. */
.reg-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 6px 12px;
}

.reg-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    margin: 0;
    cursor: pointer;
}

.reg-item input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* Tu propia fila en la distribucion semanal. En una grilla con toda la gente
   de la semana, encontrarse a uno mismo lleva su tiempo. */
.dist-persona-vos {
    background: #eef3ff;
    border-color: var(--u-acento);
    border-left: 4px solid var(--u-acento);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dist-vos {
    background: var(--u-acento);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Actividad cancelada: se pidio, no se hizo, y quedo el motivo. */
.act-resumen-item.act-cancel strong { color: #343a40; }
.act-item.act-cancelada { border-left-color: #343a40; }

.act-item.act-cancelada .act-mensaje {
    /* Tachado suave: se lee, pero se nota que ya no hay que hacerlo. */
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.35);
    color: var(--u-texto-suave);
}

.act-item.act-cancelada .act-resolucion {
    background: #f1f1f4;
    border-left-color: #343a40;
}

/* Listado agrupado por estado: cada grupo se pliega por su cuenta. */
.act-grupo + .act-grupo { margin-top: 14px; }

.act-grupo > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #f3f5f9;
    border-left: 4px solid var(--u-acento);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.act-grupo > summary::-webkit-details-marker { display: none; }
.act-grupo > summary:hover { background: #eaeef5; }
.act-grupo-no_resuelta > summary { border-left-color: var(--u-riesgo); }
.act-grupo-resuelta > summary { border-left-color: var(--u-ok); }
.act-grupo-cancelada > summary { border-left-color: #343a40; }

.act-grupo-flecha { transition: transform 0.15s; color: var(--u-texto-suave); }
.act-grupo[open] .act-grupo-flecha { transform: rotate(90deg); }

.act-grupo-n {
    margin-left: auto;
    font-size: 0.78rem;
    background: #fff;
    border: 1px solid #dde1e8;
    border-radius: 12px;
    padding: 1px 9px;
    color: var(--u-neutro-600);
}

/* La que se abrio desde el Inicio: se marca un momento para ubicarla. */
.act-item { transition: box-shadow 0.4s; }
.act-item.act-resaltada { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35); }

/* Actividades pendientes en la tarjeta del Inicio: cada una lleva a la suya. */
.inicio-lista a.inicio-act {
    color: inherit;
    text-decoration: none;
    display: block;
}
.inicio-lista a.inicio-act:hover .inicio-act-msg { text-decoration: underline; }
.inicio-act-msg {
    display: block;
    color: var(--u-texto-suave);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.act-editar-aviso {
    font-size: 0.8rem;
    color: var(--u-texto-suave);
    background: #f6f7fb;
    border-left: 3px solid var(--u-neutro-400);
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 12px;
}

.act-cancelar {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--u-borde);
}

.act-cancelar label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}

.act-cancelar-botones {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* El boton de editar apagado al llegar al tope de ediciones. */
.act-acciones .btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================
   TURNOS JUSTIFICADOS
   ============================================ */
.just-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.just-item {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--u-borde);
    border-left: 4px solid var(--u-texto-suave);
    border-radius: 8px;
}

/* Deshecha: se ve, pero se nota que ya no cuenta. */
.just-item-anulado {
    background: #fafafc;
    border-left-color: #c8c8d0;
    opacity: 0.72;
}

.just-item-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
}

.just-patente {
    font-weight: 700;
    letter-spacing: 0.4px;
}

.just-turno {
    font-size: 0.88rem;
    color: #555;
}

.just-acciones {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.just-meta {
    font-size: 0.78rem;
    color: #888;
}

.just-comentario {
    margin-top: 7px;
    padding: 7px 10px;
    background: #f6f7fb;
    border-left: 3px solid var(--u-neutro-400);
    border-radius: 4px;
    font-size: 0.86rem;
    color: #444;
}

.just-editar {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--u-borde);
}

.just-ver-anuladas {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: #555;
    margin: 0;
    white-space: nowrap;
}

.just-ver-anuladas input[type="checkbox"] {
    width: 17px;
    height: 17px;
}

/* ============================================
   DETALLE DE UN REGISTRO DEL CALENDARIO
   ============================================ */
.det-datos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0 0 16px 0;
    font-size: 0.9rem;
}

.det-datos dt {
    color: #777;
    font-weight: 500;
}

.det-datos dd {
    margin: 0;
    font-weight: 600;
    color: #222;
}

.det-bloque {
    margin-top: 14px;
    padding: 12px 14px;
    background: #f7f8fc;
    border-radius: 8px;
    border-left: 3px solid var(--u-acento);
}

.det-bloque-titulo {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--u-acento);
    margin-bottom: 8px;
}

/* Cada cosa que se cambio, como etiqueta suelta: en un service son seis o
   siete y en una linea corrida no se leen. */
.det-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.det-item {
    background: #fff;
    border: 1px solid var(--u-borde);
    border-radius: 20px;
    padding: 4px 11px;
    font-size: 0.83rem;
    color: #333;
}

/* Fila del evento, al pie del detalle de cada camioneta. */
.venc-fila-evento {
    border-top: 1px dashed var(--u-borde);
    margin-top: 6px;
    padding-top: 10px;
}

/* ============================================
   BLOQUES DESPLEGABLES DEL HISTORIAL
   ============================================ */
.bloque-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    border: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.bloque-flecha {
    color: var(--u-texto-suave);
    margin-right: 6px;
}

/* ============================================
   RASTREAR ELEMENTO
   ============================================ */
.rastreo-buscador {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 380px;
    margin-bottom: 16px;
    padding: 0 12px;
    border: 1px solid var(--u-borde);
    border-radius: 8px;
    background: #fafafc;
}

.rastreo-buscador i {
    color: #999;
}

.rastreo-buscador input {
    border: none;
    background: none;
    box-shadow: none;
    padding: 9px 0;
}

.rastreo-buscador input:focus {
    outline: none;
    box-shadow: none;
}

.rastreo-categoria {
    margin-bottom: 20px;
}

.rastreo-categoria-titulo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    font-size: 0.92rem;
    color: #444;
    padding-bottom: 7px;
    margin-bottom: 9px;
    border-bottom: 2px solid var(--u-borde);
}

.rastreo-elemento {
    border: 1px solid #e9e9ef;
    border-radius: 8px;
    margin-bottom: 7px;
    background: #fff;
}

.rastreo-elemento-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding: 10px 13px;
    background: none;
    border: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.rastreo-elemento-cabecera:hover {
    background: #f7f8fc;
}

.rastreo-nombre {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rastreo-flecha {
    color: #999;
}

.rastreo-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
    font-size: 0.8rem;
}

.rastreo-ultimo {
    color: #777;
}

/* Estado del ultimo movimiento, para leerlo sin desplegar. */
.est-ok { color: var(--u-ok); font-weight: 600; }
.est-resuelto { color: var(--u-acento); font-weight: 600; }
.est-faltante { color: var(--u-riesgo); font-weight: 600; }
.est-observacion { color: var(--u-aviso); font-weight: 600; }

/* ---------- Linea de tiempo ---------- */
.rastreo-linea {
    padding: 4px 13px 13px 13px;
    border-top: 1px solid #f0f0f4;
    background: #fbfbfd;
}

.rastreo-evento {
    position: relative;
    padding: 9px 12px;
    margin-top: 8px;
    border-radius: 6px;
    background: #fff;
    border-left: 3px solid var(--u-neutro-400);
}

.rastreo-evento.ok { border-left-color: var(--u-ok); }
.rastreo-evento.resuelto { border-left-color: var(--u-acento); }
.rastreo-evento.faltante { border-left-color: var(--u-riesgo); }
.rastreo-evento.observacion { border-left-color: var(--u-aviso); }

.rastreo-evento-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 0.83rem;
}

.rastreo-fecha {
    font-weight: 600;
}

.rastreo-pat {
    background: #eceff6;
    border-radius: 4px;
    padding: 1px 7px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.rastreo-tecnico {
    color: #777;
    margin-left: auto;
}

.rastreo-texto {
    margin-top: 5px;
    font-size: 0.83rem;
    color: #555;
}

.rastreo-resuelto {
    color: #0a6e3d;
}

/* ============================================
   VISOR DE FOTOS
   ============================================ */
.hist-foto-abrir {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

.visor-fondo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 1080;
}

.visor {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    pointer-events: none;  /* el fondo sigue recibiendo el clic para cerrar */
}

.visor > * {
    pointer-events: auto;
}

.visor-barra {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px calc(14px + env(safe-area-inset-top)) 18px;
    color: #fff;
}

.visor-etiqueta {
    font-weight: 600;
}

.visor-contador {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    margin-right: auto;
}

.visor-accion {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    padding: 6px 10px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}

.visor-accion:hover {
    color: #fff;
    opacity: 0.75;
}

.visor-cuerpo {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 10px calc(20px + env(safe-area-inset-bottom)) 10px;
}

.visor-cuerpo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.visor-flecha {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visor-flecha:hover {
    background: rgba(255, 255, 255, 0.28);
}

@media (max-width: 576px) {
    .visor-flecha {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }
}

/* ============================================
   EVENTOS REPORTADOS (soporte)
   ============================================ */
.ev-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.ev-item {
    padding: 13px 15px;
    background: #fff;
    border: 1px solid var(--u-borde);
    border-left: 4px solid var(--u-texto-suave);
    border-radius: 8px;
}

/* El borde izquierdo dice de un vistazo que tan grave es. */
.ev-item.ev-baja { border-left-color: var(--u-ok); }
.ev-item.ev-media { border-left-color: var(--u-aviso); }
.ev-item.ev-alta { border-left-color: var(--u-aviso); }
.ev-item.ev-urgente { border-left-color: var(--u-riesgo); }

/* Cerrado: se distingue por el fondo y el borde, no apagando el texto.
   Con opacidad el mensaje quedaba ilegible, que es justo lo que uno viene a
   leer cuando mira un reporte viejo. */
.ev-item.ev-cerrado {
    background: #f7f7fa;
    border-left-color: var(--u-neutro-400);
}

.ev-item-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

.ev-patente {
    font-weight: 700;
    letter-spacing: 0.4px;
}

.ev-fecha {
    margin-left: auto;
    font-size: 0.78rem;
    color: #888;
}

.ev-mensaje {
    white-space: pre-wrap;
    font-size: 0.93rem;
    color: #222;
}

.ev-meta {
    margin-top: 5px;
    font-size: 0.76rem;
    color: #888;
}

.ev-respuesta {
    margin-top: 9px;
    padding: 8px 11px;
    background: var(--u-ok-fondo);
    border-left: 3px solid var(--u-ok);
    border-radius: 4px;
    font-size: 0.87rem;
}

.ev-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px dashed var(--u-borde);
}

.ev-acciones input[type="text"] {
    flex: 1 1 220px;
    min-width: 0;
}

.ev-botones {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ev-al-calendario {
    margin-top: 10px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--u-acento);
    cursor: pointer;
}

.ev-al-calendario:hover {
    text-decoration: underline;
}

/* Trabajo de la ventana del dia que se puede tocar para ver su detalle. */
.dia-evento-abrible {
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dia-evento-abrible:hover {
    background: #f2f3f9;
}

.dia-evento-flecha {
    margin-left: auto;
    color: var(--u-neutro-400);
}

/* Camioneta parada por un reporte grave. Era una pastilla negra en
   MAYUSCULAS: el unico elemento negro de la pantalla, gritando mas que la
   propia camioneta fuera de circulacion. */
.planilla-bloqueo {
    display: inline-flex;
    align-items: center;
    gap: var(--u-esp-1);
    margin-top: var(--u-esp-1);
    font-size: var(--u-txt-2xs);
    font-weight: var(--u-peso-medio);
    color: var(--u-parado);
    background: var(--u-parado-fondo);
    border: 1px solid var(--u-parado-borde);
    padding: 1px 7px;
    border-radius: var(--u-radio-xs);
    letter-spacing: var(--u-track-normal);
}

.ev-bloqueo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 9px 12px;
    background: #f1f1f4;
    border-left: 3px solid var(--u-texto);
    border-radius: 4px;
    font-size: 0.87rem;
}

.ev-bloqueo-ok {
    background: var(--u-ok-fondo);
    border-left-color: var(--u-ok);
}

.jefe-bloqueo {
    margin-top: 6px;
    padding: 6px 9px;
    background: rgba(0, 0, 0, 0.05);
    border-left: 3px solid var(--u-texto);
    border-radius: 4px;
    font-size: 0.78rem;
    color: #333;
}

/* Fila de control en la ventana del dia: lleva al historial. */
.dia-control {
    cursor: pointer;
}

.dia-control:hover {
    background: #f2f3f9;
}

/* El control al que llegaste desde el calendario, para no perderlo de vista
   entre los demas de la lista. */
.hist-item-resaltado {
    border-color: var(--u-acento);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25);
}

/* ============================================
   REPORTES: CARPETAS POR CAMIONETA Y SEGUIMIENTO
   ============================================ */

/* La regla global de .btn-danger.btn-sm (botón redondo de eliminar de la
   planilla) convertía cualquier botón rojo chico en un círculo de 28px:
   "Confirmo: fuera de servicio" se desbordaba. Acá los botones son normales. */
.ev-botones .btn,
.ev-botones .btn-danger.btn-sm {
    width: auto;
    height: auto;
    border-radius: 0.2rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.82rem;
    line-height: 1.4;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ev-botones .btn:hover { transform: none; }

.btn-ev-curso { background: var(--u-aviso); border-color: var(--u-aviso); color: #fff; }
.btn-ev-curso:hover { background: #e96b02; color: #fff; }
.btn-ev-pausa { background: var(--u-aviso); border-color: var(--u-aviso); color: var(--u-texto); }
.btn-ev-pausa:hover { background: #e0a800; color: var(--u-texto); }

.ev-retomar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: var(--u-texto-suave);
    font-size: 0.8rem;
}

.ev-retomar input { width: 150px; }

.ev-carpeta {
    border: 1px solid var(--u-borde);
    border-radius: 10px;
    background: #fff;
}

.ev-carpeta-fuera { border-color: var(--u-texto); }

.ev-carpeta-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 15px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.ev-carpeta-cabecera::-webkit-details-marker { display: none; }
.ev-carpeta-cabecera:hover { background: var(--u-neutro-50); border-radius: 10px; }
.ev-carpeta-icono { color: var(--u-acento); font-size: 1.15rem; }

.ev-carpeta-flecha {
    margin-left: auto;
    color: var(--u-neutro-400);
    transition: transform 0.15s;
}

.ev-carpeta[open] .ev-carpeta-flecha { transform: rotate(180deg); }

.ev-carpeta-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px 12px;
}

/* Paso a paso del reporte. */
.ev-seguimiento {
    list-style: none;
    margin: 10px 0 0;
    padding: 0 0 0 14px;
    border-left: 2px solid #e3e5ee;
}

.ev-seguimiento li {
    position: relative;
    padding: 4px 0 8px 10px;
}

.ev-seguimiento li::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 9px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--estado, var(--u-texto-suave));
    box-shadow: 0 0 0 2px #fff;
}

.ev-paso-top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    font-size: 0.78rem;
}

.ev-paso-estado { font-weight: 700; color: var(--estado, #333); }
.ev-paso-quien { color: #555; }
.ev-paso-fecha { color: #999; margin-left: auto; }
.ev-paso-texto { font-size: 0.88rem; white-space: pre-wrap; }
.ev-paso-retomar { font-size: 0.78rem; color: #8a6d00; }

.ev-bloqueo-decidir {
    background: #fdf1f1;
    border-left-color: var(--u-riesgo);
}

.ev-estado[data-estado="EN_PAUSA"] { color: var(--u-texto); }

/* Detalle de un control en el historial: un bloque por categoría. */
.hist-categoria {
    border: 1px solid var(--u-borde);
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fff;
}

.hist-categoria > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
}

.hist-categoria > summary::-webkit-details-marker { display: none; }
.hist-categoria > summary .bi-folder2 { color: var(--u-acento); }
.hist-categoria[open] > summary { border-bottom: 1px solid #eef0f4; }
.hist-fila-novedad td { background: #fffaf0; }

/* Botón rojo chico con texto ("Salir"): la regla de .btn-danger.btn-sm lo
   achicaba a un círculo de 28px pensado para el ícono de eliminar. */
.btn-danger.btn-sm.btn-texto {
    width: auto;
    height: auto;
    border-radius: 0.2rem;
    padding: 0.25rem 0.6rem;
}

/* Badges de importancia y estado de los reportes: el fondo viene inline,
   el texto tiene que ser blanco (salvo en pausa, que es amarillo). */
.ev-item .badge[style] { color: #fff; }
.ev-item .badge.ev-estado[data-estado="EN_PAUSA"] { color: var(--u-texto); }

/* ============================================
   TARJETA DE REPORTE (rediseño)
   ============================================ */
.rep {
    background: #fff;
    border: 1px solid #e3e5ee;
    border-left: 5px solid var(--u-texto-suave);
    border-radius: 10px;
    padding: 14px 16px;
}

.rep.rep-baja { border-left-color: var(--u-ok); }
.rep.rep-media { border-left-color: var(--u-aviso); }
.rep.rep-alta { border-left-color: var(--u-aviso); }
.rep.rep-urgente { border-left-color: var(--u-riesgo); }
.rep.rep-cerrado { background: var(--u-neutro-50); border-left-color: var(--u-neutro-400); padding: 10px 14px; margin-top: 8px; }

.rep-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rep .badge[style] { color: #fff; }
.rep .badge.ev-estado[data-estado="EN_PAUSA"] { color: var(--u-texto); }

.rep-circ {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 12px;
}

.rep-circ-ok { background: #e7f6ec; color: #146c43; }
.rep-circ-fuera { background: var(--u-texto); color: #fff; }
.rep-circ-decidir { background: #fdeaea; color: var(--u-parado); }

.rep-mensaje {
    margin: 10px 0 2px;
    font-size: 1rem;
    font-weight: 500;
    color: #1f2330;
    white-space: pre-wrap;
}

.rep-aviso-pausa {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fff8db;
    border-left: 3px solid var(--u-aviso);
    border-radius: 4px;
    font-size: 0.88rem;
}

.rep-historial {
    margin-top: 10px;
}

.rep-historial > summary,
.rep-cerrados > summary {
    cursor: pointer;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--u-acento);
    list-style: none;
}

.rep-historial > summary::-webkit-details-marker,
.rep-cerrados > summary::-webkit-details-marker { display: none; }

.rep-cerrados {
    margin-top: 4px;
    padding: 8px 4px 0;
    border-top: 1px dashed var(--u-borde);
}

.rep-mini {
    font-size: 0.7rem;
    padding: 0 7px;
    border-radius: 10px;
}

.rep-mini-fuera { background: var(--u-texto); color: #fff; }
.rep-mini-circula { background: #e7f6ec; color: #146c43; }

.rep-form {
    margin-top: 12px;
    padding: 12px;
    background: #f7f8fc;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rep-bloque-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
}

.rep-bloque-titulo span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--u-acento);
    color: #fff;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rep-pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.rep-paso,
.rep-circ-opcion {
    margin: 0;
    cursor: pointer;
}

.rep-paso input,
.rep-circ-opcion input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rep-paso > span {
    display: block;
    height: 100%;
    padding: 9px 11px;
    background: #fff;
    border: 2px solid #e0e3ec;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: border-color 0.12s, background 0.12s;
}

.rep-paso small {
    display: block;
    font-weight: 400;
    font-size: 0.75rem;
    color: #777;
}

.rep-paso:hover > span { border-color: #b9bfd3; }
.rep-paso-en_curso.activo > span { border-color: var(--u-aviso); background: #fff1e6; }
.rep-paso-en_pausa.activo > span { border-color: var(--u-aviso); background: #fff8db; }
.rep-paso-resuelto.activo > span { border-color: var(--u-ok); background: #e7f6ec; }
.rep-paso-descartado.activo > span { border-color: var(--u-texto-suave); background: #f1f2f4; }
.rep-paso input:focus-visible + span,
.rep-circ-opcion input:focus-visible + span { outline: 2px solid var(--u-acento); outline-offset: 2px; }

.rep-fecha {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: #8a6d00;
}

.rep-fecha[hidden] { display: none; }
.rep-fecha input { width: 170px; }

.rep-circ-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.rep-circ-opcion > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 2px solid #e0e3ec;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.88rem;
}

.rep-circ-opcion-ok.activo > span { border-color: var(--u-ok); background: #e7f6ec; color: #146c43; }
.rep-circ-opcion-fuera.activo > span { border-color: var(--u-texto); background: var(--u-texto); color: #fff; }

.rep-bloque-circ[hidden] { display: none; }

.rep-guardar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.rep-guardar .ev-al-calendario { margin-top: 0; }

/* Un estilo global de <header> le ponía borde y márgenes a la cabecera de
   la tarjeta, y el de textarea la dejaba angosta. */
header.rep-cabecera {
    border: 0;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
}

.rep-form textarea.form-control {
    display: block;
    width: 100%;
    min-height: 64px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.92rem;
    border: 1px solid var(--u-borde-fuerte);
    border-radius: 6px;
    background: #fff;
}

/* Último paso del reporte y formulario plegado. */
.rep-ultimo {
    margin-top: 10px;
    padding: 9px 12px;
    background: var(--u-neutro-50);
    border-left: 4px solid var(--estado, var(--u-texto-suave));
    border-radius: 6px;
    font-size: 0.9rem;
}

.rep-ultimo-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.rep-ultimo-top strong { color: var(--estado, #333); }
.rep-ultimo-top span { font-size: 0.78rem; color: #888; }

.rep-accion { margin-top: 12px; }

.rep-accion-boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--u-acento);
    border-radius: 6px;
    color: var(--u-acento);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.rep-accion-boton::-webkit-details-marker { display: none; }
.rep-accion-boton:hover { background: #f0f2fd; }
.rep-accion[open] > .rep-accion-boton { display: none; }
.rep-accion > .rep-form { margin-top: 0; }
.rep .ev-al-calendario { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }

/* Contenido de las pantallas que el jefe ve con su barra de arriba: no hay
   barra lateral que esquivar, asi que no se corre a la derecha. */
.jefe-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px 16px 40px 16px;
}

/* ============================================
   CAMIONETAS TRABADAS (Inicio)
   ============================================ */
.inicio-trabadas {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
    padding: 9px 11px;
    border: 1px solid #f0bcc2;
    border-radius: 8px;
    background: var(--u-riesgo-fondo);
    color: var(--u-parado);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.inicio-trabadas:hover {
    background: #fbe6e8;
}

.inicio-trabadas-ver {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: #c0392b;
    text-decoration: underline;
}

.trab-fondo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1060;
}

.trab-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1070;
    width: min(620px, calc(100vw - 28px));
    max-height: 88dvh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.trab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.trab-cerrar {
    background: none;
    border: none;
    font-size: 1.7rem;
    line-height: 1;
    color: #888;
    cursor: pointer;
}

.trab-item {
    border: 1px solid var(--u-borde);
    border-left: 4px solid var(--u-riesgo);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}

.trab-item-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.trab-item-top strong {
    font-size: 1.05rem;
    letter-spacing: 0.4px;
}

.trab-turno {
    font-size: 0.83rem;
    color: #555;
}

.trab-meta {
    font-size: 0.78rem;
    color: #888;
    margin-top: 2px;
}

/* Las dos salidas, una al lado de la otra: elegir mal deja el historial
   diciendo algo que no paso, asi que cada una explica cuando corresponde. */
.trab-salidas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    margin-top: 11px;
}

.trab-salida {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1.5px solid var(--u-borde);
    border-radius: 8px;
    background: #fff;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.trab-salida strong {
    font-size: 0.88rem;
}

.trab-salida small {
    font-size: 0.74rem;
    color: #777;
    line-height: 1.3;
}

.trab-salida-control:hover {
    border-color: var(--u-aviso);
    background: #fff8f1;
}

.trab-salida-justificar:hover {
    border-color: var(--u-acento);
    background: #f4f6ff;
}

/* --------------------------------------------------------------------------
   Cambio de seccion del panel
   --------------------------------------------------------------------------
   Las nueve secciones se intercambian con display:none/block, asi que el area
   de contenido entera teleporta. Un fundido corto lo vuelve un cambio en vez
   de un salto.

   Solo opacidad y 120ms, por debajo del presupuesto normal de 150-250ms: a
   esta frecuencia (soporte cambia de seccion decenas de veces por dia)
   cualquier desplazamiento se siente como demora. Si alguien agrega un
   transform aca, esta mal.
   -------------------------------------------------------------------------- */
.seccion-content {
    animation: u-aparecer 120ms var(--u-curva-suave) both;
}

/* Sólo las alertas que llegaron en este refresco. La lista entera no entra
   nunca: el panel se refresca cada 30 segundos y una cascada repetida ocho
   horas por día es ruido, no información. */
.alerta-item.alerta-nueva {
    animation: u-entrar-alerta var(--u-vel-normal) var(--u-curva-salida) both;
}
@keyframes u-entrar-alerta {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Quien quedó sin turno en la distribución. Con dieciséis técnicos, olvidarse
   de uno es fácil y antes no había forma de darse cuenta. */
.dist-sin-turno {
    margin: var(--u-esp-4) 0 0;
    padding: var(--u-esp-3) var(--u-esp-4);
    background: var(--u-aviso-fondo);
    border-left: 3px solid var(--u-aviso);
    border-radius: var(--u-radio-xs);
    font-size: var(--u-txt-xs);
    color: var(--u-texto);
}
.dist-sin-turno strong { color: var(--u-aviso); font-weight: var(--u-peso-semi); }

/* ==========================================================================
   REPORTES · lista de faltantes
   --------------------------------------------------------------------------
   Las tarjetas de patente quedan como estaban. Lo que cambia es esta lista,
   que era un <ul> con un emoji pegado adelante de cada elemento
   ("X DESTORNILLADOR PLANO: FALTANTE") y el estado escrito dos veces.
   ========================================================================== */

.reportes-ayuda {
    display: block;
    font-size: var(--u-txt-2xs);
    font-weight: var(--u-peso-medio);
    color: var(--u-texto-suave);
    margin-bottom: var(--u-esp-2);
}

/* Cuando no hay nada elegido o no hay faltantes. */
.rep-vacio {
    display: flex;
    flex-direction: column;
    gap: var(--u-esp-1);
    padding: var(--u-esp-5);
    background: var(--u-neutro-50);
    border: 1px dashed var(--u-borde-fuerte);
    border-radius: var(--u-radio-md);
    font-size: var(--u-txt-sm);
    color: var(--u-texto-suave);
    text-align: center;
}
.rep-vacio-ok {
    background: var(--u-ok-fondo);
    border-style: solid;
    border-color: var(--u-ok-borde);
}
.rep-vacio strong { color: var(--u-ok); font-weight: var(--u-peso-semi); }

.rep-titulo {
    margin: 0 0 var(--u-esp-3);
    font-size: var(--u-txt-base);
    font-weight: var(--u-peso-semi);
    letter-spacing: var(--u-track-titulo);
    color: var(--u-texto);
}

.rep-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--u-esp-2);
}

/* Cada faltante es su propia tarjeta con la franja de estado al costado. */
.rep-item {
    padding: var(--u-esp-3) var(--u-esp-4);
    background: var(--u-superficie);
    border: 1px solid var(--u-borde);
    border-left: 3px solid var(--u-neutro-300);
    border-radius: var(--u-radio-sm);
    box-shadow: var(--u-sombra-xs);
}
.rep-item-riesgo { border-left-color: var(--u-riesgo); }
.rep-item-parado { border-left-color: var(--u-parado); }
.rep-item-aviso  { border-left-color: var(--u-aviso); }

.rep-item-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--u-esp-3);
}

/* El nombre del elemento, limpio: sin emoji adelante y sin repetir el estado
   detras de los dos puntos. El estado lo dice el chip de la derecha. */
.rep-elemento {
    font-size: var(--u-txt-sm);
    font-weight: var(--u-peso-medio);
    color: var(--u-texto);
    min-width: 0;
}

.rep-descripcion {
    margin: var(--u-esp-2) 0 0;
    font-size: var(--u-txt-xs);
    color: var(--u-texto-suave);
    max-width: 78ch;
}

.rep-item-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--u-esp-2);
    margin-top: var(--u-esp-3);
    padding-top: var(--u-esp-2);
    border-top: 1px solid var(--u-neutro-100);
}

.rep-meta {
    font-size: var(--u-txt-2xs);
    color: var(--u-texto-tenue);
}
.rep-meta-sin { color: var(--u-aviso); }

/* Las dos acciones del bloque de reportes, con aire antes de la lista. */
.rep-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--u-esp-2);
    margin: var(--u-esp-4) 0 var(--u-esp-5);
}

/* --------------------------------------------------------------------------
   Distribución · quitar del turno
   --------------------------------------------------------------------------
   Eran dieciséis botones rojos en fila. Sacar a alguien de un turno no es una
   acción irreversible: se vuelve a agregar y listo. El rojo está reservado
   para lo que está mal, y esto no lo está.
   -------------------------------------------------------------------------- */
.dist-puesto .btn-danger {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--u-borde);
    color: var(--u-texto-tenue);
    border-radius: var(--u-radio-xs);
    font-size: var(--u-txt-2xs);
    transition: background-color var(--u-vel-rapida) var(--u-curva-suave),
                border-color var(--u-vel-rapida) var(--u-curva-suave),
                color var(--u-vel-rapida) var(--u-curva-suave),
                transform var(--u-vel-instante) var(--u-curva-suave);
}
/* Rojo sólo al apuntarlo: ahí sí comunica lo que va a pasar. */
.dist-puesto .btn-danger:hover {
    background: var(--u-riesgo-fondo);
    border-color: var(--u-riesgo-borde);
    color: var(--u-riesgo);
}
.dist-puesto .btn-danger:active { transform: scale(0.92); }

/* El de agregar es la acción, no un botón gris más. */
.dist-columna > .btn-secondary {
    background: transparent;
    border: 1px dashed var(--u-borde-fuerte);
    color: var(--u-acento);
    font-size: var(--u-txt-2xs);
    font-weight: var(--u-peso-medio);
    border-radius: var(--u-radio-sm);
    padding: var(--u-esp-2) var(--u-esp-3);
    margin-top: var(--u-esp-2);
    transition: background-color var(--u-vel-rapida) var(--u-curva-suave),
                border-color var(--u-vel-rapida) var(--u-curva-suave);
}
.dist-columna > .btn-secondary:hover {
    background: var(--u-acento-suave);
    border-color: var(--u-acento-borde);
    border-style: solid;
    color: var(--u-acento-fuerte);
}

/* Contador de técnicos por turno, arriba a la derecha de cada columna. */
.dist-columna-titulo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--u-esp-3);
}
.dist-contador {
    flex: none;
    min-width: 26px;
    padding: 1px 7px;
    background: var(--u-acento-suave);
    color: var(--u-acento);
    border: 1px solid var(--u-acento-borde);
    border-radius: var(--u-radio-xs);
    font-family: var(--u-fuente-dato);
    font-variant-numeric: tabular-nums;
    font-size: var(--u-txt-2xs);
    font-weight: var(--u-peso-semi);
    text-align: center;
    line-height: 1.5;
}
/* Un 0 en el color del acento parece un dato cargado; apagado se lee como
   "todavía no hay nadie". */
.dist-contador-vacio {
    background: var(--u-neutro-100);
    color: var(--u-texto-tenue);
    border-color: var(--u-borde);
}

/* Botón de WhatsApp, suelto al lado de la patente y no adentro del chip.
   Metido adentro, tocar la patente abría el chat sin que se notara que todo
   el chip era un enlace. Separado, se ve qué es cada cosa. */
.boton-wa {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: 4px;
    vertical-align: middle;
    background: var(--u-ok-fondo);
    border: 1px solid var(--u-ok-borde);
    border-radius: var(--u-radio-xs);
    color: var(--u-ok);
    font-size: 0.85rem;
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--u-vel-rapida) var(--u-curva-suave),
                border-color var(--u-vel-rapida) var(--u-curva-suave),
                transform var(--u-vel-instante) var(--u-curva-suave);
}
.boton-wa:hover {
    background: var(--u-ok);
    border-color: var(--u-ok);
    color: var(--u-texto-invertido);
}
.boton-wa:active { transform: scale(0.9); }

/* Control cerrado despues del plazo del turno. Va en ambar y no en rojo: el
   control se hizo, que es lo que importa; lo tarde es una observacion, no una
   falla. El rojo esta reservado para lo que no se hizo. */
.hist-tarde {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    background: var(--u-aviso-fondo);
    border: 1px solid var(--u-aviso-borde);
    border-radius: var(--u-radio-xs);
    color: var(--u-aviso);
    font-size: var(--u-txt-2xs);
    font-weight: var(--u-peso-medio);
    white-space: nowrap;
}
.hist-tarde i { font-size: 0.9em; }