:root {
    --marron: #8B5A2B;
    --marron-oscuro: #5F3E23;
    --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;
}

.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;
}

.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);
}

/* ------------------------------------------------------------------ */
/* 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;
}