/* ---------------------------------------------------------------------
   style.css

   Estilos minimos para que la app no se vea "pelada" mientras la vamos
   construyendo. Nada de esto es definitivo: se puede cambiar en cualquier
   momento sin afectar el funcionamiento de la aplicacion.
--------------------------------------------------------------------- */

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    background-color: #f4f6f8;
    color: #1f2933;
}

.encabezado {
    background-color: #1f3a5f;
    color: white;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    /* Franja azul fija arriba (pedido del usuario: que no se oculte al
       bajar en la pagina, "Cerrar sesión" siempre visible). */
    position: sticky;
    top: 0;
    z-index: 200;
}

.encabezado h1 {
    margin: 0;
    font-size: 1.4rem;
}

.subtitulo {
    margin: 4px 0 0 0;
    font-size: 0.9rem;
    color: #cbd5e1;
}

.encabezado-derecha {
    display: flex;
    align-items: center;
    gap: 18px;
}

.logo-encabezado {
    /* Wordmark completo (icono + "SCARDOZO" + lema), no un icono suelto
       -- mejora agosto 2026, logo nuevo. Se fija el alto y se deja el
       ancho automatico para no deformar las proporciones de la imagen;
       ya NO se voltea horizontalmente (el logo anterior era solo una
       silueta y por eso se podia espejar sin problema, pero este trae
       texto real que tiene que leerse de izquierda a derecha). */
    height: 44px;
    width: auto;
    flex-shrink: 0;
}

.sesion-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
}

.sesion-info a {
    color: #cbd5e1;
}

/* Boton "« Inicio" en el encabezado de las pantallas de administracion/
   catalogos (base.html), presente en TODAS las ventanas que extienden
   base.html -- mejora pedida por el usuario: volver a la ventana
   principal desde cualquiera de ellas. Reutiliza ".boton-tablero" pero
   con mas especificidad que ".sesion-info a" de arriba. Estilo
   "fantasma" (transparente, solo un borde suave) en vez de la caja
   blanca solida de antes -- pedido del usuario: "no me gusta el fondo
   blanco que tiene el cuadro, resalta demasiado, lo quiero mas
   discreto". */
.sesion-info .boton-tablero {
    color: white;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.sesion-info .boton-tablero:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.55);
}

.formulario-login {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 300px;
}

.formulario-login label {
    font-weight: bold;
    margin-top: 10px;
}

.formulario-login input {
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

.formulario-login button {
    margin-top: 15px;
    padding: 10px;
    font-size: 1rem;
    background-color: #1f3a5f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.formulario-login button:hover {
    background-color: #16283f;
}

/* Campo de clave con boton "Mostrar/Ocultar" (mejora de seguridad
   pedida por el usuario: "cualquiera la mira" -- por defecto el campo
   sigue oculto como una clave normal; el boton solo la revela si el
   propio usuario lo pide, y hay que volver a pedirlo cada vez que se
   carga la pagina). Reutilizable en cualquier formulario que tenga un
   campo de clave envuelto en ".campo-clave" (ver login.html y
   usuarios.html); el JS que lo activa vive en base.html. */
.campo-clave {
    position: relative;
}

.campo-clave input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 66px;
}

.boton-mostrar-clave {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #1f3a5f;
    font-size: 0.78rem;
    font-weight: bold;
    cursor: pointer;
    padding: 4px 6px;
}

.boton-mostrar-clave:hover {
    text-decoration: underline;
}

.mensajes-flash {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.mensaje-error {
    background-color: #fee2e2;
    color: #b91c1c;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.mensaje-aviso {
    background-color: #e0f2fe;
    color: #075985;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.seccion-admin {
    margin-top: 30px;
    padding: 15px;
    background-color: #eef2f6;
    border-left: 4px solid #1f3a5f;
    border-radius: 4px;
}

.tarjeta-carga {
    margin-bottom: 20px;
    padding: 15px 20px;
    background-color: white;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

/* Pantalla de bloqueo por vencimiento de la instalacion (ver
   licencia.py y templates/bloqueada.html). */
.pantalla-bloqueada {
    max-width: 520px;
    margin: 60px auto;
    text-align: center;
}

.tarjeta-carga h3 {
    margin-top: 0;
}

.tarjeta-carga input[type="file"] {
    display: block;
    margin: 10px 0;
}

.tarjeta-carga button {
    padding: 8px 16px;
    background-color: #1f3a5f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.tarjeta-carga button:hover {
    background-color: #16283f;
}

/* Campos de los formularios dentro de una tarjeta (gestion de orden,
   legalizacion, etc.): mismo estilo simple del formulario de login, pero
   reutilizable en cualquier tarjeta-carga con label + input/select/
   textarea sueltos (sin envoltorio .formulario-login). */
.tarjeta-carga form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 500px;
}

.tarjeta-carga form label {
    font-weight: bold;
    margin-top: 10px;
}

.tarjeta-carga form input,
.tarjeta-carga form select,
.tarjeta-carga form textarea {
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-family: inherit;
}

.tarjeta-carga form button {
    margin-top: 15px;
    align-self: flex-start;
}

/* Selector de formato Excel/PDF en Reportes (mejora agosto 2026, septima
   ronda, pedida por el usuario: "primero ver, decidir si guardo en excel
   o pdf y luego de ultimo decidir si exporto"): fieldset simple, sin el
   borde/relleno por defecto del navegador, con las dos opciones en una
   fila -- coherente con el resto de ".tarjeta-carga form" (mismo
   espaciado que un label+input mas). Reportes no tiene modo oscuro (el
   boton de tema solo existe en index.html), asi que no hace falta CSS
   de tema-oscuro aqui. */
.grupo-formato-reporte {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
    padding: 0;
    border: none;
}

.grupo-formato-reporte legend {
    font-weight: bold;
    padding: 0;
    margin-right: 4px;
}

.grupo-formato-reporte label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: normal;
    margin-top: 0;
}

.grupo-formato-reporte input[type="radio"] {
    width: auto;
}

/* Menu lateral de la pantalla de Reportes (mejora agosto 2026, pedida
   por el usuario: "generar un menu... a la izquierda... y esa ventana
   para generar el reporte se muestre en la misma ventana a la derecha
   del panel"). ".reportes-menu" es la columna angosta de botones;
   ".reportes-contenido" es donde viven los formularios de cada reporte
   (".panel-reporte"), uno a la vez -- el JS de reportes.html alterna
   cual tiene ".panel-reporte-activo". */
.reportes-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.reportes-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
    flex-shrink: 0;
    background-color: white;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 10px;
}

.boton-menu-reporte {
    text-align: left;
    background: none;
    border: none;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 0.95rem;
    color: #334155;
    cursor: pointer;
}

.boton-menu-reporte:hover {
    background-color: #eef2f6;
}

.boton-menu-reporte-activo,
.boton-menu-reporte-activo:hover {
    background-color: #1f3a5f;
    color: white;
    font-weight: bold;
}

.reportes-contenido {
    flex: 1;
    min-width: 0;
}

.panel-reporte {
    display: none;
}

.panel-reporte-activo {
    display: block;
}

/* Formularios/celdas "en linea" dentro de una tabla (select + boton de
   guardar de una fila, o enlace "Editar" + boton "Eliminar" juntos):
   anula el "flex-direction: column" de ".tarjeta-carga form" de arriba,
   pensado para formularios largos, no para una fila de tabla. */
.forma-linea {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tarjeta-carga form.forma-linea {
    flex-direction: row;
    max-width: none;
}

.forma-linea button,
.tarjeta-carga form.forma-linea button {
    margin-top: 0;
}

.resumen-carga {
    margin-top: 20px;
    padding: 15px 20px;
    background-color: #f0fdf4;
    border-left: 4px solid #166534;
    border-radius: 4px;
}

.lista-errores {
    max-height: 300px;
    overflow-y: auto;
    background-color: #fffbeb;
    padding: 10px 25px;
    border-radius: 4px;
}

.contenido {
    padding: 30px;
    max-width: 1200px;
}

/* Tableros de ordenes (Gestion y las 3 consultas historicas): pidio el
   usuario mas espacio horizontal para mostrar mas columnas de la tabla
   (fechas, etc.), asi que estas pantallas usan casi todo el ancho de la
   pantalla en vez del limite de 1200px del resto de la aplicacion (que
   se deja igual, para que formularios angostos como el login no se vean
   raros en monitores anchos). */
.contenido-ancho {
    max-width: 98vw;
}

.pie {
    padding: 15px 30px;
    font-size: 0.8rem;
    color: #6b7280;
}

.error {
    color: #b91c1c;
    font-weight: bold;
}

.error-detalle {
    background-color: #fee2e2;
    padding: 10px;
    border-radius: 4px;
    white-space: pre-wrap;
}

.exito {
    color: #166534;
    font-weight: bold;
}

/* ---------------------------------------------------------------------
   Listado y detalle de ordenes (Fase 6)
--------------------------------------------------------------------- */

.filtros-ordenes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 10px 0;
    /* Sin relleno a los lados (pedido del usuario): que el primer control
       (Proceso) quede alineado con el margen izquierdo de "Órdenes" y del
       menu de tableros, en vez de quedar corrido por el relleno de una
       caja. Solo una linea inferior separa los filtros de lo de abajo. */
    padding: 8px 0;
    border-bottom: 1px solid #cbd5e1;
}

.filtros-ordenes label {
    font-weight: bold;
}

.filtros-ordenes select {
    padding: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

/* Localidad/Alerta/Tipo de trabajo: desplegables con casillas de
   verificacion (mejora agosto 2026, sexta ronda, pedida por el usuario:
   primero "deben poder permitir seleccionar uno o mas elementos", luego
   "no me gustan estos tipos de filtro [un <select multiple> normal]...
   prefiero que sean desplegables con casilla de verificacion... asi
   ocupan demaciado espacio" -- el <select multiple> ocupaba mucho
   espacio vertical en la fila de filtros). ".filtro-multiple-desplegable"
   es el contenedor (boton + panel); el boton muestra "-- Todas --" o
   "-- Todos --" cuando no hay nada marcado, el valor si es uno solo, o
   "N seleccionadas" si son varios (ver el script en ordenes.html). */
.filtro-multiple-desplegable {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Especificidad ".filtro-multiple-desplegable .boton-filtro-multiple"
   a proposito (no solo ".boton-filtro-multiple"): la regla generica
   ".filtros-ordenes button" (mas abajo, para el boton "Filtrar") tiene
   la misma especificidad que un solo selector de clase, y por orden en
   la hoja de estilos le ganaria a un ".boton-filtro-multiple" suelto,
   dejando el boton azul en vez de blanco. Con el selector compuesto,
   este SI gana. */
.filtro-multiple-desplegable .boton-filtro-multiple {
    padding: 6px 24px 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background-color: white;
    color: #1e293b;
    cursor: pointer;
    min-width: 150px;
    max-width: 210px;
    text-align: left;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

.boton-filtro-multiple::after {
    content: "▾";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}

.panel-filtro-multiple {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    margin-top: 2px;
    min-width: 190px;
    max-height: 220px;
    overflow-y: auto;
    background-color: white;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
    padding: 4px 0;
}

.filtro-multiple-abierto .panel-filtro-multiple {
    display: block;
}

.opcion-filtro-multiple {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-weight: normal;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

.opcion-filtro-multiple:hover {
    background-color: #f1f5f9;
}

.filtros-ordenes button {
    padding: 6px 14px;
    background-color: #1f3a5f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.enlace-limpiar {
    font-size: 0.9rem;
}

.boton-secundario {
    background-color: white !important;
    color: #1f3a5f !important;
    border: 1px solid #1f3a5f !important;
}

/* Reorganización de la barra de filtros (agosto 2026, pedido del usuario:
   "ya hay muchos filtros... quisiera organizar mejor la visual"). Antes
   ".filtros-ordenes" tenia ~13 controles sueltos en una sola fila que se
   volvia muy densa; ahora se dividen en dos partes -- ver el comentario
   en ordenes.html donde se arma el HTML.
   ".fila-filtros-esencial" agrupa los 5 filtros de uso mas frecuente (se
   comporta igual que ".filtros-ordenes" se comportaba antes: fila con
   ajuste automatico). */
.fila-filtros-esencial {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

/* Envuelve un <label>+<select> simple (Proceso, Acción, Construcción
   desde/hasta) para que quede alineado en columna igual que los
   desplegables de casilla multiple (".filtro-multiple-desplegable" ya
   es "flex-direction: column" -- este imita esa misma forma). */
.campo-filtro-esencial {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.grupo-botones-filtros {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* Boton "Más filtros": secundario (blanco), no el azul de "Filtrar" --
   misma logica de especificidad que ".boton-filtro-multiple" (ver
   comentario mas arriba), por eso el selector compuesto. */
.grupo-botones-filtros .boton-mas-filtros {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background-color: white;
    color: #1f3a5f;
    border: 1px solid #1f3a5f;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.92rem;
}

.badge-filtros-activos {
    background-color: #1f3a5f;
    color: white;
    font-size: 0.72rem;
    font-weight: bold;
    border-radius: 999px;
    padding: 1px 7px;
    line-height: 1.4;
}

.flecha-mas-filtros {
    font-size: 0.7rem;
    color: #64748b;
}

/* Panel de filtros avanzados: oculto por defecto, se despliega con el
   boton "Más filtros" (o arranca abierto si el servidor ya trae algun
   filtro avanzado activo -- ver "panel-filtros-avanzados-abierto" puesto
   desde la plantilla). */
.panel-filtros-avanzados {
    display: none;
    width: 100%;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 12px;
    background-color: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
}

.panel-filtros-avanzados-abierto {
    display: flex;
}

.fila-casillas-avanzadas {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.fila-casillas-avanzadas .casilla-linea {
    margin-top: 0;
}

.total-ordenes {
    font-size: 0.9rem;
    color: #52606d;
}

/* ---------------------------------------------------------------------
   Reporte en PDF / impresión (mejora pedida por el usuario): boton
   "Imprimir / Guardar como PDF" en el tablero de gestion. Usa
   window.print() del navegador (no una libreria externa, por si el
   servidor no tiene internet confiable). Al imprimir se oculta todo lo
   que no aporta al reporte (menus, filtros, casillas, botones de accion)
   y se muestra un encabezado propio del reporte con los filtros
   aplicados.
--------------------------------------------------------------------- */
.solo-al-imprimir {
    display: none;
}

@media print {
    .oculto-al-imprimir,
    header.encabezado,
    footer.pie,
    .mensajes-flash {
        display: none !important;
    }

    .solo-al-imprimir {
        display: block !important;
    }

    .encabezado-impresion {
        margin-bottom: 15px;
    }

    .encabezado-impresion h2 {
        margin-bottom: 4px;
    }

    .encabezado-impresion p {
        font-size: 0.85rem;
        color: #333;
        margin: 2px 0;
    }

    /* Nombre del trabajador en el encabezado del reporte (mejora agosto
       2026), bien visible -- se muestra solo cuando el reporte se
       imprime filtrado por un tecnico puntual (ver ordenes.html). */
    .nombre-tecnico-impresion {
        font-size: 1.05rem !important;
        font-weight: bold;
        color: #1f3a5f !important;
        margin: 2px 0 6px 0 !important;
    }

    .panel-scroll {
        overflow: visible !important;
        white-space: normal !important;
    }

    .tabla-ordenes {
        width: 100%;
        font-size: 0.75rem;
    }

    /* La tabla del reporte de impresión (mejora agosto 2026) trae 13
       columnas -- un poco mas chica que la tabla de gestion normal, y
       con menos relleno, para que quepa mejor en una hoja A4. */
    .solo-al-imprimir .tabla-ordenes th,
    .solo-al-imprimir .tabla-ordenes td {
        padding: 4px 5px;
        font-size: 0.68rem;
    }
}

.tabla-ordenes,
.tabla-detalle {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    margin-bottom: 15px;
}

.tabla-ordenes th,
.tabla-ordenes td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #e4e7eb;
    font-size: 0.9rem;
}

.tabla-ordenes thead {
    background-color: #eef2f6;
}

/* Fila resaltada cuando su casilla queda pre-marcada al cargar la
   página (ver "ids_control_seleccionados" en _tabla_ordenes.html):
   confirma a simple vista cuáles órdenes se acaban de guardar en una
   asignación en lote, o cuáles siguen activas para "Gestionar
   seleccionadas" -- pedido del usuario (agosto 2026): que la casilla
   "se ponga verde o azul" en vez de quedar igual que las demás. */
.fila-seleccionada-lote {
    background-color: #d1fae5;
}

.fila-seleccionada-lote:hover {
    background-color: #bbf7d0;
}

.tabla-detalle th {
    text-align: left;
    padding: 6px 10px;
    width: 260px;
    color: #52606d;
    vertical-align: top;
}

.tabla-detalle td {
    padding: 6px 10px;
}

.etiqueta-vencida {
    background-color: #fee2e2;
    color: #b91c1c;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
}

.etiqueta-proxima {
    background-color: #fef3c7;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* "Vencida con justificación": vencida por un motivo externo, ya anotado
   por el Administrador. Se distingue de "Vencida" (rojo) con un morado,
   para que se pueda filtrar/reconocer aparte en el tablero. */
.etiqueta-vencida-justificada {
    background-color: #ede9fe;
    color: #5b21b6;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
}

.ayuda-campo {
    margin: -6px 0 10px 0;
    font-size: 0.8rem;
    color: #52606d;
}

/* Gestion de campo de varias ordenes en la misma pantalla (consulta por
   contrato/solicitud/orden de trabajo, mejora pedida por el usuario):
   una tarjeta por orden encontrada, para poder gestionarlas todas sin
   entrar a cada una por separado. */
.titulo-gestion-multiple {
    margin-top: 24px;
}

.ayuda-gestion-multiple {
    margin: -4px 0 16px 0;
    font-size: 0.85rem;
    color: #52606d;
    max-width: 700px;
}

.tarjeta-gestion-multiple {
    margin-bottom: 16px;
}

.tarjeta-gestion-multiple h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px 0;
    font-size: 1rem;
}

.enlace-detalle-completo {
    font-size: 0.8rem;
    font-weight: normal;
}

/* Clasificacion GESTION del catalogo de causales (migracion 008):
   EFECTIVA = orden legalizada cumplida, INCUMP = incumplida. */
.etiqueta-efectiva {
    background-color: #dcfce7;
    color: #166534;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
}

.etiqueta-incump {
    background-color: #fee2e2;
    color: #b91c1c;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Aviso de "posible reincidencia" (TV): junto al Contrato, cuando ese
   mismo contrato ya tiene otra orden Cerrada y Efectiva reciente (ver
   JOIN_REINCIDENCIA_TV en ordenes.py). Color distinto al de "Vencida"/
   "Próxima a vencer" a proposito, para no confundirlo con esas alertas
   de vencimiento -- este es un aviso informativo, no de plazo. */
.etiqueta-reincidencia {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
    color: #ea580c;
    cursor: help;
}

.etiqueta-reincidencia svg {
    width: 16px;
    height: 16px;
}

/* Boton "Descartar" junto al aviso de reincidencia (ver comentario en
   _tabla_ordenes.html): discreto, texto pequeno subrayado, para no
   competir visualmente con el triangulo naranja. */
.boton-descartar-reincidencia {
    margin-left: 4px;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    text-decoration: underline;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0.75;
}

.boton-descartar-reincidencia:hover {
    opacity: 1;
}

.etiqueta-sin-clasificar {
    background-color: #f3f4f6;
    color: #6b7280;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
}

.paginacion {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

/* ---------------------------------------------------------------------
   Mejoras al tablero de ordenes: nav de 4 botones, panel de resumen,
   tabla con barra de desplazamiento tipo Excel, catalogos (tecnicos y
   motivos de incumplimiento).
--------------------------------------------------------------------- */

.nav-tableros {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
}

.boton-tablero,
.boton-tablero-activo {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 0.9rem;
    text-decoration: none;
    border: 1px solid #1f3a5f;
}

/* Fila superior del tablero de gestion (mejora pedida por el usuario):
   titulo + los 4 segmentadores a la izquierda, Volver + Imprimir a la
   derecha, todo en UNA sola fila a 5mm de la franja azul, para dejar el
   maximo espacio libre para la tabla de abajo. */
.barra-superior-tablero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 5mm 0 10px 0;
}

.grupo-titulo-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.barra-acciones-tablero {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* Ampliados un 40% (pedido del usuario), conservando la misma posicion
   -- siguen alineados a la derecha de la franja azul dentro de
   ".barra-acciones-tablero", solo crecen de tamaño. */
.boton-chico {
    padding: 6.72px 11.76px !important;
    font-size: 0.756rem !important;
}

.titulo-tablero {
    margin: 0;
    font-size: 1.1rem;
    white-space: nowrap;
}

.boton-tablero {
    background-color: white;
    color: #1f3a5f;
}

.boton-tablero:hover {
    background-color: #eef2f6;
}

.boton-tablero-activo {
    background-color: #1f3a5f;
    color: white;
    font-weight: bold;
}

/* Panel de resumen: franja horizontal (pedido del usuario: "lineal y
   arriba"), no una columna al lado de la tabla. */
.franja-resumen {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.franja-resumen .tarjeta-resumen {
    flex: 1;
    min-width: 130px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.panel-scroll {
    /* Ampliado (antes 65vh): al comprimir botones, filtros y notas de
       arriba, queda mas alto disponible para mostrar mas filas de la
       tabla sin desplazar la pagina completa. */
    max-height: 74vh;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

.panel-scroll .tabla-ordenes {
    margin-bottom: 0;
    white-space: nowrap;
}

.panel-scroll thead th {
    position: sticky;
    top: 0;
    background-color: #eef2f6;
    z-index: 1;
}

.tarjeta-resumen {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    background-color: #eef2f6;
}

.tarjeta-resumen .tarjeta-numero {
    font-size: 1.3rem;
    font-weight: bold;
}

.tarjeta-resumen .tarjeta-etiqueta {
    font-size: 0.85rem;
    color: #52606d;
}

.tarjeta-total {
    background-color: #eef2f6;
}

.tarjeta-vencida {
    background-color: #fee2e2;
}

.tarjeta-vencida .tarjeta-numero {
    color: #b91c1c;
}

.tarjeta-proxima {
    background-color: #fef3c7;
}

.tarjeta-proxima .tarjeta-numero {
    color: #92400e;
}

.tarjeta-proceso {
    background-color: #e0f2fe;
}

.tarjeta-proceso .tarjeta-numero {
    color: #075985;
}

.tarjeta-contratos {
    background-color: #ecfdf5;
}

.tarjeta-contratos .tarjeta-numero {
    color: #047857;
}

/* Formularios cortos que van dentro de una fila de tabla (activar /
   desactivar tecnicos y motivos): no deben heredar el estilo de columna
   ancha de ".tarjeta-carga form". */
.tabla-ordenes form {
    display: inline;
    max-width: none;
}

.tabla-ordenes form button {
    margin-top: 0;
    padding: 4px 10px;
    font-size: 0.8rem;
}

/* Casillas de verificacion sueltas dentro de un formulario de
   ".tarjeta-carga" (proceso que administra un usuario, en el alta y en
   la lista de /usuarios): no deben heredar el ancho/negrita de los
   demas campos del formulario. */
.tarjeta-carga form input[type="checkbox"] {
    width: auto;
    padding: 0;
}

.casilla-linea {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    margin-top: 6px;
}

/* Tabla de /tecnicos (migracion 013, ajustada agosto 2026 a pedido del
   usuario: la version anterior, con las casillas de rol siempre
   abiertas dentro de una celda angosta, se veia amontonada). La pantalla
   completa usa ".contenido-ancho" (ver clase_contenido en tecnicos.html)
   para tener mas espacio horizontal, y la tabla en si reparte ese
   espacio con columnas mas anchas en vez de dejarlo vacio a los lados. */
.tarjeta-ancha {
    max-width: none;
}

.tabla-tecnicos {
    width: 100%;
}

.tabla-tecnicos th,
.tabla-tecnicos td {
    padding: 10px 14px;
}

/* Gestor de campo / Certificador: en modo lectura (por defecto) solo se
   ve el texto Sí/No; ".valor-rol-edicion" (la casilla real, ver
   tecnicos.html) queda oculta hasta que la fila entra en modo edicion. */
.celda-rol-tecnico {
    text-align: center;
}

.celda-rol-tecnico .valor-rol-edicion {
    display: none;
}

tr.fila-editando-roles .celda-rol-tecnico .valor-rol-vista {
    display: none;
}

tr.fila-editando-roles .celda-rol-tecnico .valor-rol-edicion {
    display: inline-block;
}

/* Columna de acciones: "Editar roles" en modo lectura; "Guardar"/
   "Cancelar" solo mientras la fila esta en modo edicion (ver script en
   tecnicos.html). El formulario de Activar/Desactivar siempre visible,
   independiente del modo de edicion de roles. */
.celda-acciones-tecnico {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.boton-guardar-roles,
.boton-cancelar-roles {
    display: none;
}

tr.fila-editando-roles .boton-editar-roles {
    display: none;
}

tr.fila-editando-roles .boton-guardar-roles,
tr.fila-editando-roles .boton-cancelar-roles {
    display: inline-block;
}

/* Caja de tipos de trabajo medibles, dentro del formulario de
   crear/editar meta (migracion 011, mejora pedida por el usuario: "una
   caja que contenga todos los tipos de trabajo por proceso con una
   casilla de verificacion que yo pueda marcar para efectos de medicion
   de la meta"). Con scroll propio para no alargar demasiado la pantalla
   cuando el proceso tiene muchos tipos de trabajo (TV, por ejemplo). */
.caja-tipos-trabajo {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 8px 12px;
    margin: 4px 0 10px 0;
    background-color: #f8fafc;
}

.caja-tipos-trabajo .casilla-linea {
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Casillas Conexiones/TV en fila, boton "Guardar" debajo (agosto 2026,
   reorganizacion de /usuarios: antes las dos casillas y el boton
   compartian una sola fila flex que se envolvia en 3 lineas dentro de
   una columna angosta -- se veia amontonado). Ver ".fila-casillas-
   procesos" mas abajo para las casillas en si. */
.form-procesos {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.fila-casillas-procesos {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Columna "Restablecer clave" de la pantalla Usuarios (mejora agosto
   2026, pedida por el usuario: herramienta para que el Administrador le
   ponga una clave nueva a alguien que la olvido). Se apila en columna,
   con un ancho minimo para que el boton "Mostrar/Ocultar" del campo de
   clave (".campo-clave", ver arriba) tenga espacio dentro de la celda
   de la tabla. */
.form-restablecer-clave {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 200px;
}

/* Tabla de /usuarios (agosto 2026, pedido del usuario: "todo se ve muy
   amontonado... algo mas organizado y proporcionalmente repartido en
   pantalla") -- mismo espiritu que ".tabla-tecnicos" mas abajo: mas
   relleno por celda, y la pantalla usa ".contenido-ancho"/".tarjeta-
   ancha" (ver clase_contenido en usuarios.html) para que el <colgroup>
   de la tabla (ver usuarios.html) tenga espacio de sobra para repartir
   proporcionalmente en vez de apretarse. */
.tabla-usuarios {
    width: 100%;
}

.tabla-usuarios th,
.tabla-usuarios td {
    padding: 14px 16px;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------
   Pagina de inicio (rediseño a pedido del usuario, a partir de un modelo
   visual que trajo): menu lateral, tarjetas de resumen, grafico de dona
   con CSS puro y pestañas de administracion. Todas las clases nuevas
   quedan bajo ".cuerpo-inicio"/".layout-inicio" para no afectar el
   estilo de ninguna otra pantalla (esas siguen usando ".encabezado"/
   ".contenido" de base.html, sin cambios).
--------------------------------------------------------------------- */

.cuerpo-inicio {
    margin: 0;
    background-color: #eef1f5;
    font-family: Arial, Helvetica, sans-serif;
    color: #1f2933;
}

.layout-inicio {
    display: flex;
    min-height: 100vh;
}

.barra-lateral {
    width: 240px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #1f3a5f 0%, #14273f 100%);
    color: white;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Logo de la empresa, arriba del todo en el menu lateral (pedido del
   usuario, agosto 2026: logotipo oficial "Scardozo Data Engineering
   Solutions"). El PNG ya viene procesado con fondo transparente para
   que se vea limpio sobre el degradado oscuro de la barra lateral --
   el wordmark trae el nombre incluido, ya no hace falta un texto
   aparte debajo del logo. */
.logo-empresa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.imagen-logo-empresa {
    width: 190px;
    height: auto;
}

.separador-logo-empresa {
    width: 70%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.14);
    border: none;
    margin: 12px 0 0 0;
}

.marca-lateral {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icono-marca {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icono-marca svg {
    width: 20px;
    height: 20px;
}

.marca-titulo {
    margin: 0;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.2;
}

.marca-subtitulo {
    margin: 0;
    font-size: 0.8rem;
    color: #b9c6d6;
}

.nav-lateral {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-nav-lateral {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    color: #dbe4ef;
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
    list-style: none;
}

.item-nav-lateral svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.item-nav-lateral:hover,
summary.item-nav-lateral:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.item-nav-lateral-expandible summary::-webkit-details-marker {
    display: none;
}

.item-nav-lateral-expandible summary {
    list-style: none;
}

.submenu-lateral {
    display: flex;
    flex-direction: column;
    padding-left: 30px;
    margin-top: 2px;
    gap: 2px;
}

.submenu-lateral a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    color: #b9c6d6;
    text-decoration: none;
    font-size: 0.85rem;
}

.submenu-lateral a svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.submenu-lateral a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: white;
}

.panel-principal {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.encabezado-inicio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    /* 6mm del borde superior (pedido del usuario: "titulos y tarjetas
       mas arriba"), en vez del relleno mas grande de antes. */
    padding: 6mm 30px 0 30px;
    flex-wrap: wrap;
}

.tarjeta-saludo {
    background-color: white;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    padding: 12px 18px;
}

.saludo-nombre {
    margin: 0;
    font-weight: bold;
}

.saludo-rol {
    margin: 0;
    font-size: 0.85rem;
    color: #52606d;
}

.tarjeta-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: white;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    padding: 8px 14px;
}

.avatar-usuario {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #1f3a5f;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.usuario-nombre {
    margin: 0;
    font-size: 0.9rem;
    font-weight: bold;
}

.usuario-rol {
    margin: 0;
    font-size: 0.8rem;
    color: #52606d;
}

.boton-salir {
    color: #52606d;
    display: flex;
    align-items: center;
    margin-left: 4px;
}

.boton-salir svg {
    width: 20px;
    height: 20px;
}

.boton-salir:hover {
    color: #b91c1c;
}

/* Mismo icono de "Cerrar sesion" (puerta) que ".boton-salir" de arriba,
   pero con los colores del encabezado azul de base.html (mejora agosto
   2026, pedida por el usuario: reemplazar el texto "Cerrar sesión" por
   un simbolo en TODA la app -- este es el que faltaba, ya que
   index.html tenia el suyo desde antes). */
.boton-salir-encabezado {
    display: flex;
    align-items: center;
    color: #cbd5e1;
}

.boton-salir-encabezado svg {
    width: 20px;
    height: 20px;
}

.boton-salir-encabezado:hover {
    color: #fca5a5;
}

/* Campos ya diligenciados del formulario "Gestion de campo" (mejora
   agosto 2026, pedida por el usuario: "los campos que ya esten
   diligenciados se identifiquen con un fondo gris o azul y los que no,
   sigan igual"). La clase la pone/quita JS en vivo, ver base.html --
   tanto al cargar la pagina (segun el dato que ya tenga la orden) como
   mientras se va editando el formulario. */
.formulario-gestion-campo .campo-diligenciado {
    background-color: #dbeafe;
    border-color: #93c5fd;
}

/* Envoltorio de "Fecha de certificación" + "Certificador" dentro del
   formulario "Gestion de campo" (mejora agosto 2026, solo para Trabajos
   Varios: "NO todas las ordenes necesitan ser certificadas... un
   selector para escoger no aplica o diligenciar si aplica"). Mismo
   layout en columna que el formulario que lo contiene
   (".tarjeta-carga form"), para que estos dos campos se vean apilados
   exactamente igual que antes tanto en TV como en Conexiones -- el
   selector "Diligenciar/No aplica" solo aparece para TV (ver
   _form_gestion_campo.html), este envoltorio de por si no cambia nada
   visualmente en ningun proceso. Se oculta con JS (ver base.html)
   cuando se elige "No aplica". */
.grupo-certificacion-campos {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contenido-inicio {
    /* Relleno superior reducido (antes 20px): el encabezado ya trae su
       propio espacio de 6mm arriba, asi que aca no hace falta otro
       relleno grande -- mejora pedida por el usuario para que el
       contenido (segmentos y tarjetas) quede mas arriba, sin el doble
       espacio en blanco de antes. */
    padding: 10px 30px 20px 30px;
    flex: 1;
}

.tarjeta-inicio {
    background-color: white;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    padding: 16px 18px;
}

.tarjeta-inicio h3 {
    margin-top: 0;
}

.tarjetas-resumen-inicio {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.tarjeta-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Tarjetas mas pequeñas (pedido del usuario), para aprovechar mejor
       el espacio: relleno reducido en vez del de ".tarjeta-inicio". */
    padding: 10px 12px;
}

.stat-icono {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icono svg {
    width: 15px;
    height: 15px;
}

.stat-icono-total {
    background-color: #eef2f6;
    color: #1f3a5f;
}

.stat-icono-vencida {
    background-color: #fee2e2;
    color: #b91c1c;
}

.stat-icono-proxima {
    background-color: #fef3c7;
    color: #92400e;
}

.stat-icono-cerrada {
    background-color: #dcfce7;
    color: #166534;
}

.stat-numero {
    margin: 0;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.2;
}

.stat-etiqueta {
    margin: 0;
    font-size: 0.68rem;
    color: #52606d;
    line-height: 1.2;
}

.fila-inicio {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
    align-items: start;
}

.dona-envoltorio {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.dona-grafico {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dona-centro {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dona-numero {
    font-size: 1.3rem;
    font-weight: bold;
}

.dona-etiqueta {
    font-size: 0.75rem;
    color: #52606d;
}

.leyenda-dona {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
}

.punto-leyenda {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.sin-datos-grafico {
    color: #52606d;
}

.tarjeta-acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.boton-accion-rapida {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background-color: #1f3a5f;
    color: white;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.boton-accion-rapida svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.boton-accion-rapida:hover {
    background-color: #16283f;
}

.boton-deshabilitado {
    background-color: #cbd5e1;
    color: #52606d;
    cursor: not-allowed;
    position: relative;
}

.boton-deshabilitado:hover {
    background-color: #cbd5e1;
}

.etiqueta-proximamente {
    margin-left: auto;
    font-size: 0.7rem;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 2px 6px;
    border-radius: 10px;
}

.tarjeta-admin-detalle {
    margin-bottom: 16px;
}

/* Meta de legalización (migración 008, mejora pedida por el usuario):
   barra de progreso + cifras + ranking cumplidas/incumplidas del mes en
   curso, en la página de inicio. */
.tarjeta-meta {
    margin-bottom: 16px;
}

/* Selector de historial de metas, junto al título, a la derecha (pedido
   del usuario, agosto 2026, segunda ronda). */
.encabezado-tarjeta-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 4px;
}

.encabezado-tarjeta-meta h3 {
    margin: 0;
}

/* Nombre del proceso dentro del título de la tarjeta "Meta de
   legalización" (pedido del usuario, agosto 2026: la tarjeta no dejaba
   claro a simple vista a qué proceso pertenecía). */
.etiqueta-proceso-meta {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 0.03em;
    background-color: #1f3a5f;
    color: #ffffff;
    vertical-align: middle;
}

.cuerpo-inicio.tema-oscuro .etiqueta-proceso-meta {
    background-color: #7dd3fc;
    color: #14273f;
}

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

.selector-historial-metas label {
    font-size: 0.8rem;
    font-weight: bold;
    color: #52606d;
    white-space: nowrap;
}

.selector-historial-metas select {
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.85rem;
    max-width: 280px;
}

.meta-periodo {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    color: #52606d;
}

.meta-barra-progreso {
    height: 10px;
    background-color: #eef2f6;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.meta-barra-relleno {
    height: 100%;
    background-color: #166534;
    border-radius: 6px;
}

.meta-cifras {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
}

.enlace-ver-todas {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.85rem;
}

.pestanas-admin {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #dde3ea;
    margin-bottom: 12px;
}

.boton-pestana {
    padding: 8px 14px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.9rem;
    color: #52606d;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.boton-pestana.pestana-activa {
    color: #1f3a5f;
    font-weight: bold;
    border-bottom: 2px solid #1f3a5f;
}

.panel-pestana {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.panel-pestana-oculto {
    display: none;
}

.fila-admin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: #1f2933;
    font-size: 0.9rem;
}

.fila-admin:hover {
    background-color: #eef2f6;
}

.fila-admin svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #52606d;
}

.fila-admin strong {
    color: #1f3a5f;
}

/* ---------------------------------------------------------------------
   Asignacion en lote (mejora pedida por el usuario): casillas de
   verificacion en la tabla del tablero de gestion + barra flotante
   abajo con el tecnico, la fecha y el boton de guardar.
--------------------------------------------------------------------- */

.tabla-ordenes input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.barra-flotante-lote {
    /* Reorganizada en filas (agosto 2026, pedido del usuario): antes era
       un unico flex-row con "flex-wrap", que en pantallas angostas
       amontonaba/superponía el grupo de Técnico con el de Certificador.
       Ahora es una columna ("flex-direction: column"), con cada grupo
       (Técnico y Certificador) en su propia fila -- ver
       ".fila-barra-flotante"/".grupo-campo-barra" mas abajo. */
    display: none;
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    background-color: #1f3a5f;
    color: white;
    padding: 16px 22px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    gap: 12px;
    z-index: 20;
    max-width: 90vw;
    max-height: 82vh;
    overflow-y: auto;
    /* Respaldo si una fila no alcanza a caber en el ancho disponible
       (ver ".fila-barra-flotante" mas abajo, que ya no envuelve su
       contenido): en vez de partirse en dos lineas, se puede desplazar
       hacia los lados sin desarmar el grupo de campos + boton. */
    overflow-x: auto;
}

.barra-flotante-visible {
    display: flex;
}

.barra-flotante-lote #contador-seleccion {
    font-weight: bold;
    white-space: nowrap;
    text-align: center;
}

/* Cada grupo de asignación (Técnico, Certificador) vive en su propia
   fila, separada de la siguiente por una línea tenue -- así no se
   confunden los campos de un grupo con los del otro. Sin "flex-wrap"
   (agosto 2026, pedido del usuario): la fila de Certificador es mas
   larga que la de Técnico (nombres mas largos en el desplegable y en el
   boton), y con "wrap" el boton "Guardar certificador" se caía a una
   segunda línea en vez de quedar al lado de "Fecha de certificación".
   Ahora la fila nunca se parte -- si no cabe, se desplaza hacia los
   lados (ver "overflow-x" en ".barra-flotante-lote") en vez de
   envolver. */
.fila-barra-flotante {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.fila-barra-flotante + .fila-barra-flotante {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.fila-gestionar-seleccionadas {
    justify-content: center;
}

/* Botón "Gestionar seleccionadas" + su texto de ayuda, apilados y
   centrados (agosto 2026, pedido del usuario: dejar claro qué hace este
   botón, que antes no se entendía). */
.grupo-gestionar-seleccionadas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ayuda-barra-flotante {
    margin: 0;
    font-size: 0.78rem;
    color: #cbd5e1;
    text-align: center;
    max-width: 480px;
    line-height: 1.3;
}

/* Cada etiqueta con su campo (select o fecha) agrupados, para que el
   texto "Técnico"/"Fecha de asignación" quede pegado a su propio campo
   y no al de al lado. */
.grupo-campo-barra {
    display: flex;
    align-items: center;
    gap: 6px;
    /* No se encoge (ver "flex-wrap: nowrap" en ".fila-barra-flotante"):
       si la fila no cabe, se prefiere el desplazamiento horizontal a
       que el select/fecha se compriman y queden ilegibles. */
    flex-shrink: 0;
}

.barra-flotante-lote .etiqueta-barra {
    font-size: 0.85rem;
    color: #cbd5e1;
    margin: 0;
    white-space: nowrap;
}

.barra-flotante-lote select,
.barra-flotante-lote input[type="date"] {
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #52606d;
    font-family: inherit;
}

.barra-flotante-lote button {
    padding: 8px 16px;
    background-color: white;
    color: #1f3a5f;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.barra-flotante-lote button:hover {
    background-color: #dbe4ef;
}

/* "Gestionar seleccionadas" es una acción secundaria (no guarda nada
   por sí sola, solo despliega los formularios de abajo) -- se distingue
   visualmente del resto con un estilo más discreto (fondo transparente,
   solo borde) en vez del mismo blanco sólido de "Guardar". */
.barra-flotante-lote .boton-secundario {
    background-color: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.barra-flotante-lote .boton-secundario:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
    .layout-inicio {
        flex-direction: column;
    }
    .barra-lateral {
        width: auto;
    }
    .tarjetas-resumen-inicio {
        grid-template-columns: repeat(2, 1fr);
    }
    .fila-inicio {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
   Pantalla de inicio -- rediseño agosto 2026 (mejora pedida por el
   usuario): segmentacion por proceso (Conexiones/TV, nunca mezclados),
   tarjetas dinamicas segun el proceso activo, dashboard de legalizadas
   cumplidas/incumplidas por periodo, mapa de calor de localidad x tipo
   de trabajo, tema oscuro/claro y franja de derechos de autor.
--------------------------------------------------------------------- */

/* La grilla de tarjetas de resumen se adapta a la cantidad de tarjetas
   que trae cada proceso (9 para Conexiones, 7 para TV), en vez de un
   numero fijo de columnas. El minimo se redujo (antes 150px) junto con
   el tamaño de las tarjetas (pedido del usuario), para que las 9 de
   Conexiones entren en una sola fila en vez de dejar una sola tarjeta
   suelta en la fila de abajo. */
.tarjetas-resumen-inicio {
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.titulo-bienvenida {
    text-align: center;
    font-size: 1.05rem;
    color: var(--color-texto-secundario-inicio, #52606d);
    margin: 4px 0 14px;
}

.titulo-bienvenida strong {
    color: var(--color-texto-inicio, #1f2933);
}

.barra-segmentos {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.grupo-segmentos {
    display: flex;
    gap: 8px;
}

.etiqueta-segmentos {
    font-size: 0.85rem;
    color: var(--color-texto-secundario-inicio, #52606d);
    font-weight: bold;
}

.stat-icono-oia {
    background-color: #ede9fe;
    color: #5b21b6;
}

.stat-icono-contratos {
    background-color: #ecfdf5;
    color: #047857;
}

/* ---------------------------------------------------------------------
   Panorama nuevo de inicio, EXCLUSIVO de Conexiones (mejora pedida por
   el usuario, agosto 2026): tarjetas 12150/12152 en Estado 5 y Estado 7
   con su desglose de Accion 10500/12162, mas el semaforo de Estado 5.
--------------------------------------------------------------------- */
.fila-panorama-conexiones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.tarjeta-grupo-oia,
.tarjeta-semaforo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.grupo-oia-numero {
    margin: 0;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.1;
}

.grupo-oia-etiqueta {
    margin: 0;
    font-size: 0.78rem;
    color: #52606d;
}

.grupo-oia-desglose {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.chip-oia {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
}

.chip-oia strong {
    font-size: 0.85rem;
}

.chip-oia-10500 {
    background-color: #ffedd5;
    color: #9a3412;
}

.chip-oia-12162 {
    background-color: #dbeafe;
    color: #1e3a8a;
}

.chip-oia-sin-accion {
    background-color: #eef2f6;
    color: #52606d;
}

/* Semaforo de Estado 5: barra segmentada verde/amarillo/rojo (misma
   paleta ya reservada en el resto de la pantalla para vencida/proxima),
   mas la leyenda con las cifras exactas debajo. */
.barra-semaforo {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background-color: #eef2f6;
}

.segmento-semaforo {
    height: 100%;
    transition: width 0.2s ease;
}

.segmento-verde {
    background-color: #16a34a;
}

.segmento-amarillo {
    background-color: #f59e0b;
}

.segmento-rojo {
    background-color: #dc2626;
}

.leyenda-semaforo {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: #52606d;
}

.punto-semaforo {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 4px;
}

.punto-verde {
    background-color: #16a34a;
}

.punto-amarillo {
    background-color: #f59e0b;
}

.punto-rojo {
    background-color: #dc2626;
}

/* ---------------------------------------------------------------------
   Top localidades (Estado 5) -- reemplaza el mapa de calor localidad x
   tipo de trabajo anterior por una lista compacta de barras, mismo
   patron visual que la barra de progreso de "Meta de legalizacion"
   (CSS puro, sin ninguna libreria externa).
--------------------------------------------------------------------- */
.lista-top-localidades {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.fila-top-localidad {
    display: grid;
    grid-template-columns: 110px 1fr 34px;
    align-items: center;
    gap: 10px;
}

.nombre-top-localidad {
    font-size: 0.78rem;
    color: #33414f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

.barra-top-localidad-fondo {
    height: 9px;
    background-color: #eef2f6;
    border-radius: 5px;
    overflow: hidden;
}

.barra-top-localidad-relleno {
    height: 100%;
    background-color: #1f3a5f;
    border-radius: 5px;
}

.valor-top-localidad {
    font-size: 0.78rem;
    font-weight: bold;
    text-align: right;
}

/* Boton "Ver todas / Top 10": las filas mas alla de la decima ya vienen
   en el HTML, ocultas con "display: none" hasta que se pulsa el boton
   (ver el script al final de index.html). Sin ninguna consulta nueva al
   servidor. */
.fila-top-localidad-oculta {
    display: none;
}

.lista-top-localidades-expandida .fila-top-localidad-oculta {
    display: grid;
}

.boton-ver-todas-localidades {
    display: inline-block;
    margin-top: 8px;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    color: #1f3a5f;
    cursor: pointer;
    text-decoration: underline;
}

.cuerpo-inicio.tema-oscuro .boton-ver-todas-localidades {
    color: #7dd3fc;
}

/* Version CONEXIONES: dos paneles (Estado 5 / Estado 7) lado a lado,
   cada barra segmentada por Accion (10500 / 12162 / sin accion) en
   lugar de un relleno de un solo color. Mismo alto y radio que la
   barra simple para que ambas versiones luzcan consistentes. */
.fila-top-localidades-conexiones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.leyenda-localidades-oia {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.74rem;
    color: #52606d;
    margin-bottom: 8px;
}

.punto-localidad {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 4px;
}

.punto-localidad-10500 {
    background-color: #ea580c;
}

.punto-localidad-12162 {
    background-color: #2563eb;
}

.punto-localidad-sin-accion {
    background-color: #b8c2cc;
}

.barra-top-localidad-relleno-oia {
    display: flex;
    height: 100%;
}

.segmento-localidad-10500 {
    height: 100%;
    background-color: #ea580c;
}

.segmento-localidad-12162 {
    height: 100%;
    background-color: #2563eb;
}

.segmento-localidad-sin-accion {
    height: 100%;
    background-color: #b8c2cc;
}

@media (max-width: 560px) {
    .fila-top-localidad {
        grid-template-columns: 84px 1fr 30px;
    }

    .fila-top-localidades-conexiones {
        grid-template-columns: 1fr;
    }
}

/* Tres graficas de Estado 5 para TV, distribuidas en el mismo espacio
   (pedido del usuario, agosto 2026): dispersion por localidad,
   dispersion por tipo de trabajo y "zoom" al tipo 12137 por localidad.
   Clase NUEVA e independiente de ".fila-top-localidades-conexiones"
   (exclusiva de Conexiones) para no acoplar el layout de TV con el de
   Conexiones. */
.fila-top-localidades-tv {
    display: grid;
    /* La tarjeta del medio (Top tipos de trabajo) necesita mas ancho
       para el codigo + descripcion de cada tipo (mejora agosto 2026,
       sexta ronda, pedida por el usuario: "demosle prioridad a la
       informacion" -- da igual que las otras dos tarjetas de localidad
       queden un poco mas angostas). */
    grid-template-columns: 0.85fr 1.3fr 0.85fr;
    gap: 16px;
}

@media (max-width: 1100px) {
    .fila-top-localidades-tv {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .fila-top-localidades-tv {
        grid-template-columns: 1fr;
    }
}

/* Fila de "Top tipos de trabajo" (TV): columna de nombre mas ancha para
   que quepa "codigo — descripcion" (mejora agosto 2026, sexta ronda,
   pedida por el usuario). Solo afecta esta lista puntual -- NO cambia
   ".fila-top-localidad" en general, que tambien usan las otras dos
   graficas de TV y las tarjetas de Conexiones. */
.lista-top-tipos-trabajo .fila-top-localidad {
    grid-template-columns: 168px 1fr 26px;
    gap: 8px;
}

.lista-top-tipos-trabajo .nombre-top-localidad {
    font-size: 0.72rem;
}

/* Boton de tema oscuro/claro, junto a la tarjeta de usuario. */
.boton-tema {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #dde3ea;
    background-color: white;
    color: #52606d;
    cursor: pointer;
    flex-shrink: 0;
}

.boton-tema:hover {
    background-color: #eef2f6;
}

.boton-tema svg {
    width: 18px;
    height: 18px;
}

.boton-tema .icono-luna {
    display: none;
}

.tema-oscuro .boton-tema .icono-sol {
    display: none;
}

.tema-oscuro .boton-tema .icono-luna {
    display: block;
}

/* Dashboard de legalizadas por periodo. */
.formulario-periodo {
    margin-bottom: 14px;
}

.formulario-periodo input[type="date"] {
    padding: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

/* Boton "Aplicar" corrido al extremo derecho de la fila (agosto 2026,
   pedido del usuario al mover aqui el filtro de "Unidad operativa"). Se
   escoge a proposito el selector ".formulario-periodo button[type=submit]"
   -- no ".filtros-ordenes button" -- para que NO afecte los otros
   formularios que comparten la clase ".filtros-ordenes" (Ordenes activas,
   Consulta de ordenes), donde "Aplicar" debe seguir junto al ultimo
   filtro, como siempre. */
.formulario-periodo button[type="submit"] {
    margin-left: auto;
}

/* Mapa de calor de localidad x tipo de trabajo. */
.tarjeta-mapa-calor {
    margin-bottom: 16px;
}

.callout-localidad-principal {
    background-color: #eef2f6;
    border-left: 4px solid #1f3a5f;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.9rem;
}

.callout-localidad-principal strong {
    color: #1f3a5f;
}

.envoltorio-mapa-calor {
    overflow-x: auto;
}

.tabla-mapa-calor {
    border-collapse: collapse;
    font-size: 0.8rem;
    min-width: 100%;
}

.tabla-mapa-calor th,
.tabla-mapa-calor td {
    padding: 8px 10px;
    text-align: center;
    border: 1px solid #eef2f6;
    white-space: nowrap;
}

.tabla-mapa-calor th.encabezado-localidad,
.tabla-mapa-calor td.encabezado-localidad {
    text-align: left;
    font-weight: bold;
    background-color: #f8fafc;
}

.celda-calor-0 { background-color: #f8fafc; color: #9ca3af; }
.celda-calor-1 { background-color: #dbeafe; color: #1e3a8a; }
.celda-calor-2 { background-color: #93c5fd; color: #1e3a8a; }
.celda-calor-3 { background-color: #3b82f6; color: white; }
.celda-calor-4 { background-color: #1e3a8a; color: white; font-weight: bold; }

/* Franja de derechos de autor, al pie de la pantalla de inicio. */
.pie-derechos {
    padding: 14px 30px;
    font-size: 0.78rem;
    color: var(--color-texto-secundario-inicio, #8b95a1);
    border-top: 1px solid var(--color-borde-inicio, #dde3ea);
    text-align: center;
}

/* ---------------------------------------------------------------------
   Tema oscuro (boton en el encabezado, guardado en localStorage) --
   mejora pedida por el usuario. Solo cubre la pantalla de inicio (las
   demas pantallas siguen usando "base.html" tal como estan).
--------------------------------------------------------------------- */
.cuerpo-inicio {
    --color-fondo-inicio: #eef1f5;
    --color-texto-inicio: #1f2933;
    --color-texto-secundario-inicio: #52606d;
    --color-tarjeta-inicio: #ffffff;
    --color-borde-inicio: #dde3ea;
    --color-fila-hover-inicio: #eef2f6;
    background-color: var(--color-fondo-inicio);
    color: var(--color-texto-inicio);
}

.cuerpo-inicio.tema-oscuro {
    --color-fondo-inicio: #0f172a;
    --color-texto-inicio: #e2e8f0;
    --color-texto-secundario-inicio: #94a3b8;
    --color-tarjeta-inicio: #1e293b;
    --color-borde-inicio: #334155;
    --color-fila-hover-inicio: #273449;
}

.cuerpo-inicio .tarjeta-inicio,
.cuerpo-inicio .tarjeta-usuario,
.cuerpo-inicio .boton-tema {
    background-color: var(--color-tarjeta-inicio);
    border-color: var(--color-borde-inicio);
    color: var(--color-texto-inicio);
}

.cuerpo-inicio.tema-oscuro .tabla-mapa-calor th.encabezado-localidad,
.cuerpo-inicio.tema-oscuro .tabla-mapa-calor td.encabezado-localidad {
    background-color: var(--color-tarjeta-inicio);
    color: var(--color-texto-inicio);
}

.cuerpo-inicio.tema-oscuro .stat-etiqueta,
.cuerpo-inicio.tema-oscuro .usuario-rol,
.cuerpo-inicio.tema-oscuro .dona-etiqueta,
.cuerpo-inicio.tema-oscuro .sin-datos-grafico,
.cuerpo-inicio.tema-oscuro .meta-periodo,
.cuerpo-inicio.tema-oscuro .selector-historial-metas label,
.cuerpo-inicio.tema-oscuro .callout-localidad-principal,
.cuerpo-inicio.tema-oscuro .grupo-oia-etiqueta,
.cuerpo-inicio.tema-oscuro .leyenda-semaforo,
.cuerpo-inicio.tema-oscuro .leyenda-localidades-oia,
.cuerpo-inicio.tema-oscuro .nombre-top-localidad {
    color: var(--color-texto-secundario-inicio);
}

.cuerpo-inicio.tema-oscuro .barra-semaforo,
.cuerpo-inicio.tema-oscuro .barra-top-localidad-fondo {
    background-color: var(--color-borde-inicio);
}

/* Barra de "Meta de legalización" en modo oscuro (mejora agosto 2026,
   septima ronda, pedida por el usuario: "la grafica de meta, al
   seleccionar modo oscuro, se ven muy oscuras, mejorar color de la
   grafica o del fondo. para los dos procesos"). Se le habia quedado sin
   este mismo ajuste que ya tenian el semaforo y el top de localidades de
   arriba (".barra-semaforo"/".barra-top-localidad-fondo"): el fondo
   claro (#eef2f6) se oscurece igual que esos dos, y el relleno verde
   oscuro (#166534, pensado para fondo claro) pasa a un verde mas vivo
   (#16a34a -- el MISMO verde que ya usa el semaforo de Estado 5 en esta
   pantalla, para no inventar un color nuevo), porque el verde oscuro
   original casi no se distinguia contra un fondo tambien oscuro. Aplica
   para los dos procesos por igual: esta tarjeta es la misma para
   Conexiones y TV, solo cambia el dato, nunca el CSS. */
.cuerpo-inicio.tema-oscuro .meta-barra-progreso {
    background-color: var(--color-borde-inicio);
}

.cuerpo-inicio.tema-oscuro .meta-barra-relleno {
    background-color: #16a34a;
}

/* Relleno de las tres graficas "Top" de TV (Top localidades, Top tipos
   de trabajo, Top localidades · Tipo 12137 -- ver index.html, todas
   comparten ".barra-top-localidad-relleno") en modo oscuro (mejora
   agosto 2026, octava ronda, pedida por el usuario: "aprovecha y mejora
   visualizacion para las tres graficas que muestra el top, tambien se
   pierden en el tema oscuro"). El fondo de la barra (".barra-top-localidad-fondo")
   ya se oscurecia (ver arriba), pero el RELLENO se habia quedado con el
   mismo azul marino de marca (#1f3a5f) que usa en modo claro -- ese azul
   es casi identico al fondo oscuro de la tarjeta (#1e293b), asi que la
   barra practicamente desaparecia. Pasa al mismo celeste claro que ya
   usan los numeros de las tarjetas KPI en modo oscuro (#7dd3fc, ver
   ".tarjeta-kpi .kpi-numero" mas abajo), para no inventar un color nuevo
   y mantener la misma familia de acento que el resto de la pantalla en
   oscuro. Exclusivo de TV -- Conexiones usa un componente aparte
   (".barra-top-localidad-relleno-oia", segmentada por Accion), que esta
   clase no toca. */
.cuerpo-inicio.tema-oscuro .barra-top-localidad-relleno {
    background-color: #7dd3fc;
}

/* Grafico de lineas "Ordenes legalizadas por dia" en modo oscuro (mejora
   agosto 2026, octava ronda -- este es el que en verdad motivo el pedido
   original del usuario: "la grafica de meta, al seleccionar modo
   oscuro, se ven muy oscuras"; las lineas/puntos de Cumplidas e
   Incumplidas (".linea-cumplidas"/".punto-cumplidas" en verde oscuro
   #166534, ".linea-incumplidas"/".punto-incumplidas" en rojo oscuro
   #b91c1c) son casi el mismo tono que el fondo oscuro de la tarjeta
   (#1e293b) -- la grilla, el eje y las etiquetas de cantidad YA se
   ajustaban en oscuro, pero las lineas y puntos en si (el dato) se
   habian quedado sin ajustar, igual que paso con la barra de Meta y las
   tres graficas de Top de arriba. Mismo verde que ya se reutiliza en
   esta hoja (#16a34a); rojo mas vivo (#ef4444) para que la linea
   punteada (mas delgada) tambien se distinga bien. La leyenda de abajo
   del grafico usa las mismas clases, para que el color de la muestra
   siempre coincida con el de la linea. */
.cuerpo-inicio.tema-oscuro .linea-cumplidas,
.cuerpo-inicio.tema-oscuro .linea-muestra-cumplidas {
    stroke: #16a34a;
    background-color: #16a34a;
}

.cuerpo-inicio.tema-oscuro .punto-cumplidas {
    fill: #16a34a;
}

.cuerpo-inicio.tema-oscuro .linea-incumplidas,
.cuerpo-inicio.tema-oscuro .linea-muestra-incumplidas {
    stroke: #ef4444;
    background-color: #ef4444;
}

.cuerpo-inicio.tema-oscuro .punto-incumplidas {
    fill: #ef4444;
}

.cuerpo-inicio.tema-oscuro .dona-centro {
    background-color: var(--color-tarjeta-inicio);
}

.cuerpo-inicio.tema-oscuro .fila-admin {
    color: var(--color-texto-inicio);
}

.cuerpo-inicio.tema-oscuro .fila-admin:hover {
    background-color: var(--color-fila-hover-inicio);
}

.cuerpo-inicio.tema-oscuro .stat-icono-total,
.cuerpo-inicio.tema-oscuro .callout-localidad-principal {
    background-color: #1e293b;
}

.cuerpo-inicio.tema-oscuro .boton-secundario,
.cuerpo-inicio.tema-oscuro .boton-tablero {
    background-color: var(--color-tarjeta-inicio) !important;
    color: var(--color-texto-inicio) !important;
}

.cuerpo-inicio.tema-oscuro .tabla-mapa-calor td,
.cuerpo-inicio.tema-oscuro .tabla-mapa-calor th {
    border-color: var(--color-borde-inicio);
}

.cuerpo-inicio.tema-oscuro .panel-pestana-oculto {
    display: none;
}

@media (max-width: 700px) {
    .barra-segmentos {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------------------------------------------------------------------
   Dashboard de legalizadas por dia (rehecho a pedido del usuario, a
   partir de un ejemplo que trajo de un dashboard hecho en Excel):
   tarjetas KPI + grafico de lineas en SVG puro, sin ninguna libreria
   externa.
--------------------------------------------------------------------- */
.grid-kpis-legalizadas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 4px 0 16px 0;
}

/* Un tanto mas oscuro que el celeste original #e0f2fe (pedido del
   usuario, agosto 2026: "el color de fondo es muy claro") -- mismo tono,
   con mas cuerpo para que la tarjeta no se vea "lavada". */
.tarjeta-kpi {
    background-color: #bae6fd;
    border-radius: 6px;
    padding: 10px 12px;
    text-align: center;
}

.tarjeta-kpi .kpi-numero {
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    color: #075985;
}

.tarjeta-kpi .kpi-etiqueta {
    display: block;
    font-size: 0.72rem;
    color: #52606d;
    margin-top: 2px;
}

.grafico-lineas-envoltorio {
    overflow-x: auto;
}

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

.linea-cumplidas {
    fill: none;
    stroke: #166534;
    stroke-width: 3;
}

.linea-incumplidas {
    fill: none;
    stroke: #b91c1c;
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.punto-cumplidas {
    fill: #166534;
}

.punto-incumplidas {
    fill: #b91c1c;
}

.linea-grid {
    stroke: #e4e7eb;
    stroke-width: 1;
}

.texto-eje {
    font-size: 9px;
    fill: #52606d;
    font-family: Arial, Helvetica, sans-serif;
}

/* Etiqueta con la cantidad de "Cumplidas (EFECTIVA)" encima de cada
   punto del grafico de legalizadas por dia (mejora pedida por el
   usuario: "quiero que se vean las cantidades"). En tinta neutra (no en
   el verde de la linea): el color queda reservado para identificar la
   serie, el numero se lee igual de bien sobre cualquier fondo. */
.etiqueta-punto-cumplidas {
    font-size: 9px;
    font-weight: 700;
    fill: #33414f;
    font-family: Arial, Helvetica, sans-serif;
}

/* Misma idea que ".etiqueta-punto-cumplidas", para la linea de
   Incumplidas (mejora pedida por el usuario: "coloca la etiqueta de
   cantidad a la incumplida"). Va DEBAJO de cada punto (en vez de
   encima) para no chocar con la etiqueta de Cumplidas cuando las dos
   lineas se cruzan. */
.etiqueta-punto-incumplidas {
    font-size: 9px;
    font-weight: 700;
    fill: #33414f;
    font-family: Arial, Helvetica, sans-serif;
}

.leyenda-linea {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.leyenda-linea .linea-muestra {
    display: inline-block;
    width: 14px;
    height: 3px;
    margin-right: 6px;
    vertical-align: middle;
}

/* Colores de la leyenda del grafico de lineas (antes venian como estilo
   en linea en index.html -- mejora agosto 2026, octava ronda: se pasan a
   clases para poder ajustarlos en modo oscuro, ver mas abajo, mismo
   criterio que el resto de esta hoja de estilos). Mismos colores que
   ".linea-cumplidas"/".linea-incumplidas" en modo claro -- sin cambio de
   color aqui, solo de donde vive el valor. */
.linea-muestra-cumplidas {
    background-color: #166534;
}

.linea-muestra-incumplidas {
    background-color: #b91c1c;
}

/* ---------------------------------------------------------------------
   Mapa de calor compacto (mejora pedida por el usuario: "los campos son
   muy anchos... prefiero que la tabla sea muy compacta, esos titulos
   son demasiado largos"). Los encabezados de tipo de trabajo se truncan
   con puntos suspensivos; el nombre completo aparece al pasar el mouse
   (atributo title, ya presente en el <th>).
--------------------------------------------------------------------- */
.tabla-mapa-calor {
    font-size: 0.72rem;
}

.tabla-mapa-calor th,
.tabla-mapa-calor td {
    padding: 5px 6px;
}

.tabla-mapa-calor th.encabezado-tipo {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

.cuerpo-inicio.tema-oscuro .tarjeta-kpi {
    background-color: #1e3a5f;
}

/* El azul oscuro original (#075985) casi no se leia sobre la tarjeta
   oscura (#1e3a5f) -- muy poco contraste (pedido del usuario, agosto
   2026: "los valores... casi no se identifican"). Un celeste claro
   sí contrasta bien manteniendo la misma familia de color. */
.cuerpo-inicio.tema-oscuro .tarjeta-kpi .kpi-numero {
    color: #7dd3fc;
}

.cuerpo-inicio.tema-oscuro .tarjeta-kpi .kpi-etiqueta {
    color: var(--color-texto-secundario-inicio);
}

.cuerpo-inicio.tema-oscuro .linea-grid {
    stroke: var(--color-borde-inicio);
}

.cuerpo-inicio.tema-oscuro .texto-eje {
    fill: var(--color-texto-secundario-inicio);
}

.cuerpo-inicio.tema-oscuro .etiqueta-punto-cumplidas,
.cuerpo-inicio.tema-oscuro .etiqueta-punto-incumplidas {
    fill: var(--color-texto-inicio);
}

/* ---------------------------------------------------------------------
   Aviso emergente propio (agosto 2026, pedido del usuario): reemplaza
   window.alert() -- que oscurece TODA la pantalla en negro sin poder
   ajustarse -- en las pantallas que lo usan para confirmar resultados de
   guardar/asignar (ver ordenes.html). El fondo aqui es apenas
   semitransparente (no negro) y la caja queda centrada, chica y liviana:
   mismo mensaje que antes daba el servidor, sin bloquear visualmente
   toda la pantalla ni parecer que se salió a otra ventana. Se cierra con
   "Aceptar", haciendo clic afuera de la caja, o con la tecla Escape --
   nunca navega ni recarga nada, es 100% del lado del navegador.
--------------------------------------------------------------------- */
.aviso-modal-fondo {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.35);
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 20px;
}

.aviso-modal-fondo.aviso-modal-visible {
    display: flex;
}

.aviso-modal-caja {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 20px 24px;
    max-width: 420px;
    width: 100%;
    text-align: center;
}

.aviso-modal-mensaje {
    margin: 0 0 16px 0;
    color: #1f2933;
    font-size: 0.95rem;
    line-height: 1.4;
    white-space: pre-line;
}

.aviso-modal-boton {
    background-color: #1f3a5f;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 24px;
    font-size: 0.9rem;
    cursor: pointer;
}

.aviso-modal-boton:hover {
    background-color: #16304d;
}

/* Confirmación con dos botones (ej. "¿Reasignar de todas formas?", ver
   ordenes.html): fila con los dos botones lado a lado, y el secundario
   ("Cancelar") en un tono neutro para no competir visualmente con la
   acción principal. */
.aviso-modal-botones {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.aviso-modal-boton-secundario {
    background-color: #e2e8f0;
    color: #1f2933;
}

.aviso-modal-boton-secundario:hover {
    background-color: #cbd5e1;
}