:root {
    --marron: #1866CA;
    --marron-oscuro: #11478D;
    --gris-fondo: #f4f6f8;
    --gris-borde: #d7dde3;
    --texto: #1f2933;
    --texto-suave: #5a6b7a;
    --rojo: #b3261e;
    --verde: #1e7a3c;
    --amarillo: #fff3b0;
    --naranja: #b8720a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background: var(--gris-fondo);
    color: var(--texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    background: var(--marron-oscuro);
    color: white;
}

.topbar-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
}

.logo-topbar {
    height: 32px;
    width: auto;
    border-radius: 4px;
    background: white;
    padding: 2px 4px;
}

.topbar nav a {
    color: white;
    text-decoration: none;
    margin-left: 20px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.95rem;
}

.topbar nav a:hover {
    background: rgba(255, 255, 255, 0.15);
}

.usuario-conectado {
    color: rgba(255, 255, 255, 0.75);
    margin-left: 20px;
    font-size: 0.9rem;
}

/* En pantallas angostas (celular) el menú de arriba se ve mejor apilado
   en una sola columna, con todas las opciones alineadas al mismo margen
   izquierdo, en vez de ir en línea y acomodarse como alcance en cada
   fila (que es lo que se veía desordenado). */
@media (max-width: 700px) {
    .topbar nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 2px;
        margin-top: 6px;
    }

    .topbar nav a,
    .topbar .usuario-conectado {
        margin-left: 0;
        width: 100%;
        padding: 8px 10px;
    }
}

.contenido {
    flex: 1;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

h1 {
    font-size: 1.5rem;
    margin-bottom: 4px;
    color: var(--marron-oscuro);
}

.subtitulo {
    color: var(--texto-suave);
    margin-top: 0;
    margin-bottom: 20px;
}

.tarjeta {
    background: white;
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.formulario .fila {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.campo {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
}

.campo-ancho {
    margin-bottom: 20px;
}

label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: var(--texto);
}

input, select, textarea {
    padding: 10px 12px;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    background: white;
    color: var(--texto);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--marron);
    outline-offset: 1px;
    border-color: var(--marron);
}

/* Campo "Solicitante" del formulario de nueva solicitud: ya no se escribe
   a mano, se llena solo con el nombre de la cuenta que inició sesión. */
input[readonly] {
    background: var(--gris-fondo);
    color: var(--texto-suave);
    cursor: not-allowed;
}

textarea {
    resize: vertical;
}

.acciones {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.boton {
    display: inline-block;
    padding: 11px 20px;
    border-radius: 6px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.boton-primario {
    background: var(--marron);
    color: white;
}

.boton-primario:hover {
    background: var(--marron-oscuro);
}

.boton-secundario {
    background: white;
    color: var(--marron);
    border: 1px solid var(--marron);
}

.boton-secundario:hover {
    background: #f2e7d8;
}

.mensajes {
    margin-bottom: 18px;
}

.mensaje {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.mensaje-error {
    background: #fdecea;
    color: var(--rojo);
    border: 1px solid #f5c2bd;
}

.mensaje-exito {
    background: #e5f6ea;
    color: var(--verde);
    border: 1px solid #b7e3c3;
}

.mensaje-aviso {
    background: #fdf1d6;
    color: var(--naranja);
    border: 1px solid #f3dba4;
}

/* Confirmación */
.confirmacion {
    text-align: center;
}

.check {
    width: 56px;
    height: 56px;
    line-height: 56px;
    border-radius: 50%;
    background: #e5f6ea;
    color: var(--verde);
    font-size: 1.6rem;
    margin: 0 auto 12px;
}

.numero-om {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--marron-oscuro);
    margin-bottom: 20px;
}

.tabla-resumen {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin-bottom: 24px;
}

.tabla-resumen th, .tabla-resumen td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--gris-borde);
    vertical-align: top;
}

.tabla-resumen th {
    width: 160px;
    color: var(--texto-suave);
    font-weight: 600;
}

.confirmacion .acciones {
    justify-content: center;
}

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

.campo-buscar {
    flex: 2;
    min-width: 260px;
}

.campo-boton {
    flex: 0;
}

.tabla-contenedor {
    padding: 0;
    overflow-x: scroll;
    overflow-y: auto;
    max-height: 68vh;
}

.tabla-listado {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

/* Tablas con columnas de ancho fijo (listados largos): evita que una
   celda con texto muy largo "invada" visualmente la columna de al lado.
   El ancho de cada columna se define con un <colgroup> en la plantilla. */
.tabla-fija {
    table-layout: fixed;
    min-width: 1180px;
}

.tabla-listado th, .tabla-listado td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--gris-borde);
    text-align: left;
    white-space: nowrap;
}

/* Solo en las tablas de ancho fijo: si una celda no cabe en su columna,
   se recorta con "…" en vez de desbordarse sobre la columna vecina. */
.tabla-fija th, .tabla-fija td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabla-listado th {
    background: #eef2f6;
    color: var(--texto-suave);
    position: sticky;
    top: 0;
    z-index: 1;
}

.col-descripcion {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* La regla anterior por sí sola no le gana en especificidad a
   ".tabla-fija th, .tabla-fija td" (que trae "white-space: nowrap" y
   "text-overflow: ellipsis" desde una tabla de ancho fijo), así que en esas
   tablas hacía falta reforzarla para que el texto realmente se muestre
   completo (en varias líneas) en vez de recortarse con "…". */
.tabla-fija th.col-descripcion, .tabla-fija td.col-descripcion {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.sin-datos {
    text-align: center;
    color: var(--texto-suave);
    padding: 30px;
}

.etiqueta {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.8rem;
}

.etiqueta-a { background: #fdecea; color: var(--rojo); }
.etiqueta-m { background: var(--amarillo); color: #7a5c00; }
.etiqueta-b { background: #e5f6ea; color: var(--verde); }

.enlace-pdf {
    color: var(--marron);
    font-weight: 600;
    text-decoration: none;
}

.enlace-pdf:hover {
    text-decoration: underline;
}

.pie {
    text-align: center;
    color: var(--texto-suave);
    font-size: 0.85rem;
    padding: 16px;
}

@media (max-width: 600px) {
    .tabla-listado th, .tabla-listado td {
        white-space: normal;
    }
}

/* ------------------------------------------------------------------ */
/* Ventana principal (portada)                                        */
/* ------------------------------------------------------------------ */

.portada {
    text-align: center;
    padding: 20px 0 40px;
}

.logo-portada {
    max-width: 260px;
    width: 70%;
    height: auto;
    margin-bottom: 20px;
}

.titulo-portada {
    color: var(--marron-oscuro);
    font-size: 1.6rem;
    letter-spacing: 0.03em;
    margin-bottom: 36px;
}

.botones-portada {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.tarjeta-boton {
    background: white;
    border: 1px solid var(--gris-borde);
    border-radius: 12px;
    padding: 28px 22px;
    width: 230px;
    text-decoration: none;
    color: var(--texto);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tarjeta-boton:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(20, 62, 92, 0.12);
    border-color: var(--marron);
}

.icono-boton {
    font-size: 2.2rem;
}

.texto-boton {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--marron-oscuro);
    line-height: 1.3;
}

.detalle-boton {
    font-size: 0.82rem;
    color: var(--texto-suave);
}

.tarjeta-boton-proximamente {
    opacity: 0.75;
}

.tarjeta-boton-ajustes {
    border-style: dashed;
}

/* ------------------------------------------------------------------ */
/* Login administrador                                                */
/* ------------------------------------------------------------------ */

.tarjeta-login {
    max-width: 380px;
    margin: 0 auto;
}

/* ------------------------------------------------------------------ */
/* Formularios: ayuda, fotos                                          */
/* ------------------------------------------------------------------ */

.ayuda-campo {
    font-size: 0.82rem;
    color: var(--texto-suave);
    margin: 4px 0 0;
}

.miniatura-foto {
    max-width: 160px;
    border-radius: 6px;
    border: 1px solid var(--gris-borde);
}

.miniatura-foto-grande {
    max-width: 320px;
    border-radius: 8px;
    border: 1px solid var(--gris-borde);
    margin-top: 8px;
}

.galeria-fotos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

/* Casilla de una foto en el formulario de "Nueva solicitud": el input de
   archivo, su vista previa (si ya se eligió algo) y el botón de quitar. */
.fotos-contenedor {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 10px;
}

/* El campo que envuelve las fotos (.campo) es un flex-column y por defecto
   estira a sus hijos directos a todo el ancho — sin esto el botón "+
   Agregar foto" quedaría como una barra enorme de lado a lado. */
.boton-agregar-foto {
    align-self: flex-start;
}

/* Los dos botones de cada casilla de foto (Cámara / Archivos): se ofrecen
   por separado, en vez de un único selector de archivo, porque en varios
   celulares (sobre todo Android) el selector nativo no siempre muestra la
   opción de cámara de forma visible cuando se deja elegir "cualquier
   imagen" — con dos botones queda explícito y funciona igual en todos. */
.foto-botones {
    display: flex;
    gap: 8px;
    width: 100%;
}

.foto-botones .boton {
    flex: 1;
}

.foto-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    align-self: flex-start;
    width: 220px;
    padding: 10px;
    border: 1px dashed var(--gris-borde);
    border-radius: 8px;
    background: var(--gris-fondo);
}

.foto-item .foto-input {
    width: 100%;
    font-size: 0.8rem;
}

.foto-vista-previa {
    width: 100%;
    max-height: 140px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--gris-borde);
}

.foto-quitar {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--rojo);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.foto-quitar:hover {
    opacity: 0.85;
}

.boton-pequeno {
    padding: 7px 14px;
    font-size: 0.88rem;
}

/* ------------------------------------------------------------------ */
/* Estatus de OM                                                      */
/* ------------------------------------------------------------------ */

.etiqueta-estatus {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.etiqueta-estatus-pendiente { background: #eef2f6; color: var(--texto-suave); }
.etiqueta-estatus-abierta { background: #fdf1d6; color: var(--naranja); }
.etiqueta-estatus-cerrada { background: #e5f6ea; color: var(--verde); }
/* Color del rol Supervisor en Ajustes → Usuarios del sistema (9ª ronda). */
.etiqueta-estatus-supervisor { background: #e3ecfa; color: #2154a6; }
.etiqueta-estatus-abierta-superada { background: #fdecea; color: var(--rojo); font-weight: 700; }

/* Historial de ejecuciones: el número de OM se resalta en rojo cuando esa
   misma OM tiene más de una intervención registrada (5ª ronda) — solo el
   valor numérico, para que el administrador note de un vistazo que esa OM
   se ejecutó más de una vez. */
.om-repetida { color: var(--rojo); font-weight: 700; }

/* Etiqueta de dos líneas: "ABIERTA" y, debajo, en letra más pequeña y del
   mismo color, "PENDIENTE" (sigue abierta) o "CERRADA" (ya se resolvió en
   una intervención posterior). El color de fondo/texto lo sigue dando la
   clase de color combinada (etiqueta-estatus-abierta / -abierta-superada),
   sin cambiarlo. */
.etiqueta-estatus-doble {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3px 10px 4px;
    border-radius: 10px;
    line-height: 1.15;
}

.etiqueta-estatus-doble .et-principal {
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.etiqueta-estatus-doble .et-secundaria {
    font-weight: 600;
    font-size: 0.62rem;
    text-transform: uppercase;
}

.om-repetida {
    color: var(--rojo);
    font-weight: 700;
}

.aviso-repetida {
    font-size: 0.78rem;
    color: var(--rojo);
}

/* Historial de ejecuciones: además del número en rojo, las filas de
   intervenciones de una misma OM repetida comparten un tinte de fondo muy
   suave para que se vean como un solo grupo al recorrer la tabla, y cada
   grupo nuevo empieza con una línea divisoria por encima (pedido de
   Jesús). */
.fila-om-repetida td {
    background: rgba(139, 90, 43, 0.05);
}

.fila-om-separador td {
    border-top: 2px solid var(--gris-borde);
}

.badge-intervenciones {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--marron);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

/* Formulario de Ejecución: observaciones de intervenciones anteriores de
   la misma OM, mostradas de solo lectura justo antes de que el técnico
   escriba las suyas, para que sepa cómo quedó la intervención anterior. */
.historial-observaciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}

.historial-observacion-item {
    background: #f8fafc;
    border: 1px solid var(--gris-borde);
    border-left: 4px solid var(--marron);
    border-radius: 6px;
    padding: 10px 14px;
}

.historial-observacion-fecha {
    display: block;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--texto-suave);
    margin-bottom: 4px;
}

.historial-observacion-texto {
    margin: 0;
    white-space: pre-wrap;
    color: var(--texto);
}

/* ------------------------------------------------------------------ */
/* Módulo de ejecución                                                */
/* ------------------------------------------------------------------ */

.tarjeta-solo-lectura {
    background: #f8fafc;
    margin-bottom: 20px;
}

.grid-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px 20px;
    margin-bottom: 12px;
    font-size: 0.92rem;
}

.tabla-repuestos {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.tabla-repuestos th {
    text-align: left;
    font-size: 0.82rem;
    color: var(--texto-suave);
    padding: 4px 6px;
}

.tabla-repuestos td {
    padding: 4px 6px;
}

.tabla-repuestos input {
    width: 100%;
}

.boton-quitar-fila {
    background: none;
    border: none;
    color: var(--rojo);
    cursor: pointer;
    font-size: 1rem;
}

/* ------------------------------------------------------------------ */
/* Checklist de seguridad                                              */
/* ------------------------------------------------------------------ */

.separador-seccion {
    border-top: 3px solid var(--marron);
    margin: 30px 0 18px;
    padding-top: 14px;
}

.separador-seccion h2 {
    margin-bottom: 2px;
}

.grid-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 16px;
    margin-bottom: 10px;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 0.92rem;
}

.check-item input {
    width: auto;
}

.campo-otros {
    margin-top: 4px;
}

.tabla-inocuidad {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.tabla-inocuidad td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--gris-borde);
    vertical-align: middle;
}

.pregunta-inocuidad {
    font-size: 0.92rem;
}

.tabla-inocuidad select {
    width: 90px;
}

.firma-bloque {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.etiqueta-firma {
    font-weight: 600;
    font-size: 0.9rem;
}

.lienzo-firma {
    width: 100%;
    max-width: 400px;
    height: 140px;
    border: 1px dashed var(--gris-borde);
    border-radius: 6px;
    background: #fbfcfd;
    touch-action: none;
    cursor: crosshair;
}

.obligatorio {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--rojo);
    text-transform: none;
}

/* Botones SI/NO de un clic (checklist) */
.tabla-checklist {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.tabla-checklist td {
    padding: 7px 6px;
    border-bottom: 1px solid var(--gris-borde);
    vertical-align: middle;
}

.tabla-checklist td:last-child {
    width: 110px;
}

.toggle-sino {
    display: inline-flex;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    overflow: hidden;
}

.toggle-opcion {
    border: none;
    background: white;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--texto-suave);
}

.toggle-opcion.toggle-no {
    border-left: 1px solid var(--gris-borde);
}

.toggle-opcion.toggle-si.activo {
    background: var(--verde);
    color: white;
}

.toggle-opcion.toggle-no.activo {
    background: var(--rojo);
    color: white;
}

/* ------------------------------------------------------------------ */
/* Ajustes y configuración                                            */
/* ------------------------------------------------------------------ */

.fila-ajustes {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.fila-ajustes > div {
    flex: 1;
    min-width: 220px;
}

.fila-ajustes h3 {
    margin-bottom: 4px;
}

.fila-importar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.fila-importar input[type="file"] {
    flex: 1;
    min-width: 220px;
    padding: 8px;
}

.fila-agregar-area {
    display: flex;
    gap: 10px;
    max-width: 420px;
    margin: 14px 0 20px;
}

.fila-agregar-area input {
    flex: 1;
}

.lista-areas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.tarjeta-area {
    border: 1px solid var(--gris-borde);
    border-radius: 8px;
    padding: 14px 16px;
    background: #fbfcfd;
}

/* Usuarios del sistema: una cuenta desactivada se ve atenuada, para
   distinguirla de un vistazo sin tener que leer la etiqueta. */
.tarjeta-area-inactiva {
    opacity: 0.55;
}

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

.tarjeta-area-encabezado h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--marron-oscuro);
}

.lista-maquinas {
    list-style: none;
    margin: 10px 0;
    padding: 0;
}

.lista-maquinas li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--gris-borde);
    font-size: 0.9rem;
}

.lista-maquinas li:last-child {
    border-bottom: none;
}

.sin-maquinas {
    color: var(--texto-suave);
    font-style: italic;
}

.fila-agregar-maquina {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.fila-agregar-maquina input {
    flex: 1;
    min-width: 120px;
}

.fila-agregar-maquina button {
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Planificación de Mtto. Preventivo (Cronograma + catálogo)           */
/* ------------------------------------------------------------------ */

.tabla-listado details summary {
    cursor: pointer;
    color: var(--marron);
    font-weight: 600;
    font-size: 0.85rem;
}

.tabla-listado details ul {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 0.85rem;
    white-space: normal;
}

.tabla-listado details[open] {
    white-space: normal;
}

.formulario-tarea-inline {
    margin-top: 10px;
    padding: 12px;
    background: #fbfcfd;
    border: 1px solid var(--gris-borde);
    border-radius: 8px;
    white-space: normal;
}

.formulario-tarea-inline .campo {
    margin-bottom: 10px;
    min-width: 0;
}

/* Fila "Editar" de ancho completo (una por tarea del catálogo): reemplaza
   el panel angosto que antes quedaba metido en la última columna de la
   tabla, para que el administrador edite más cómodo. */
.fila-editar-tarea > td {
    background: #fbfcfd;
    padding: 16px;
    white-space: normal;
}

.formulario-tarea-inline-ancho {
    max-width: 980px;
    margin: 0 auto;
}

.formulario-tarea-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px 18px;
    align-items: end;
}

.formulario-tarea-grid .campo-ancho {
    grid-column: 1 / -1;
}

.acciones-secundarias-tarea {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gris-borde);
}

.boton-editar-fila[aria-expanded="true"] {
    background: var(--marron);
    color: #fff;
}

.celda-tarea {
    cursor: pointer;
}

.tabla-fija td.celda-tarea.expandida {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}

/* ------------------------------------------------------------------ */
/* Tareas de mantenimiento preventivo dentro de Ejecutar OM            */
/* ------------------------------------------------------------------ */

.titulo-subseccion {
    margin: 26px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--gris-borde);
    font-size: 1.05rem;
    color: var(--marron-oscuro);
}

.tabla-tareas-plan td {
    vertical-align: middle;
}

.tabla-tareas-plan input[type="text"] {
    width: 100%;
    min-width: 160px;
}

.toggle-triple .toggle-opcion {
    padding: 6px 10px;
    font-size: 0.8rem;
}

.toggle-triple .toggle-bien.activo { background: var(--verde); color: white; }
.toggle-triple .toggle-precaucion.activo { background: var(--naranja); color: white; }
.toggle-triple .toggle-mal.activo { background: var(--rojo); color: white; }
.toggle-triple .toggle-precaucion, .toggle-triple .toggle-mal {
    border-left: 1px solid var(--gris-borde);
}

/* Tareas ya fijadas en una intervención anterior (multi-día): solo lectura */
.fila-tarea-fijada {
    background: #fafaf8;
}

.etiqueta-resultado-fijado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
    margin-right: 6px;
}

.etiqueta-resultado-bien { background: var(--verde); }
.etiqueta-resultado-precaucion { background: var(--naranja); }
.etiqueta-resultado-mal { background: var(--rojo); }
.etiqueta-resultado-fijado:not(.etiqueta-resultado-bien):not(.etiqueta-resultado-precaucion):not(.etiqueta-resultado-mal) {
    background: var(--texto-suave);
}

.indicador-cumplimiento {
    margin-top: 10px;
    padding: 10px 14px;
    background: #f4f6f8;
    border-radius: 8px;
    font-size: 0.95rem;
}

.indicador-cumplimiento strong {
    color: var(--marron-oscuro);
    font-size: 1.1rem;
}

/* ------------------------------------------------------------------ */
/* Menú superior: resaltar la ventana activa                           */
/* ------------------------------------------------------------------ */

.topbar nav a.activo {
    background: rgba(255, 255, 255, 0.22);
    font-weight: 700;
}