/* ============================================================
   I-SERV SST — Estilos compartidos
   Usado por: InformesSST.html y todos los módulos en /Modulos/
   ============================================================ */

:root {
    --verde:    #469646;
    --verde-dk: #2e6b2e;
    --gris-bg:  #f0f2f0;
    --gris-brd: #ddd;
    --texto:    #222;
    --rojo:     #d32f2f;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--gris-bg);
    color: var(--texto);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── HEADER ── */
header {
    width: 100%; background: var(--verde); color: white;
    padding: 8px 16px; display: flex; align-items: center;
    justify-content: space-between; min-height: 64px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.header-logo {
    height: 44px; max-width: 130px; width: auto;
    object-fit: contain; flex-shrink: 0; align-self: center; display: block;
}
.header-title {
    flex: 1;
    font-size: 20px; font-weight: 800; letter-spacing: 1px;
    white-space: normal; text-align: center;
    padding: 0 12px; line-height: 1.3;
    pointer-events: none;
}
.header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── BOTONES ICONO (header) ── */
.btn-icon {
    width: 40px; height: 40px; border: none; border-radius: 6px;
    cursor: pointer; font-size: 18px; display: flex;
    align-items: center; justify-content: center;
    transition: opacity 0.15s, transform 0.1s;
}
.btn-icon:active   { opacity: 0.75; transform: scale(0.93); }
.btn-fullscreen    { background: rgba(255,255,255,0.2); color: white; }
.btn-inicio        { background: var(--verde-dk); color: white; }
.btn-salir         { background: var(--rojo); color: white; }

/* ── ÁREA PRINCIPAL ── */
main { width: 100%; max-width: 960px; padding: 28px 20px 48px; }

/* ── MENÚ (index) ── */
.grupo-modulos { margin-bottom: 32px; }
.grupo-titulo {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; color: #888;
    border-bottom: 1px solid var(--gris-brd);
    padding-bottom: 8px; margin-bottom: 16px;
}
.grid-modulos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.tarjeta-modulo {
    background: white; border-radius: 12px; padding: 20px 16px;
    border: 1px solid var(--gris-brd);
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; text-decoration: none; color: inherit; gap: 12px;
}
.tarjeta-modulo:hover  { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.09); }
.tarjeta-modulo:active { transform: scale(0.97); }
.modulo-icono  { font-size: 36px; line-height: 1; }
.modulo-nombre { font-size: 14px; font-weight: 700; color: var(--verde-dk); line-height: 1.3; }

/* ── ÁREA PDF (módulos) ── */
#area-pdf {
    width: 100%; max-width: 794px; background: white;
    padding: 20px 24px; border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); box-sizing: border-box;
}
.contenido-principal { width: 100%; max-width: 794px; padding: 20px 0 0; box-sizing: border-box; }
.acciones-pdf        { width: 100%; max-width: 794px; margin-top: 20px; padding: 0 0 40px; box-sizing: border-box; }

/* ── SECCIONES ── */
.seccion-titulo {
    background: var(--verde); color: white;
    padding: 8px 12px; font-weight: bold; font-size: 14px;
    border-radius: 4px; margin: 20px 0 15px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }

label { display: block; font-size: 12px; font-weight: bold; margin-bottom: 5px; color: #555; }

select, input[type="text"], input[type="date"] {
    width: 100%; padding: 10px; border: 1px solid var(--gris-brd);
    border-radius: 4px; font-size: 13px; box-sizing: border-box;
    background-color: #ffffff; color: #222222; appearance: auto;
}

/* ── FILAS COLABORADORES ── */
.fila-colab {
    display: grid;
    grid-template-columns: 0.4fr 3.5fr 1.4fr 2fr 2fr 0.5fr;
    gap: 8px; align-items: center; background: #fafafa;
    padding: 8px 10px; border-radius: 0; margin-bottom: 0;
    border: none; border-bottom: 1px solid #eeeeee;
}
.fila-colab.pdf-export { grid-template-columns: 0.4fr 4.5fr 1.4fr 2fr 2.5fr; }
.num-colab { font-size: 11px; font-weight: 700; color: #469646; text-align: center; }

/* ── BOTONES ── */
.btn {
    background: var(--verde); color: white; border: none;
    padding: 10px 15px; border-radius: 4px; cursor: pointer;
    font-weight: bold; font-size: 13px;
}
.btn:disabled { background: #aaa; cursor: not-allowed; }
.btn-rojo     { background: var(--rojo); }
.btn-agregar  {
    width: 100%; margin-top: 10px;
    background: #fff; color: var(--verde);
    border: 2px dashed var(--verde);
}

/* ── FIRMA ── */
.img-firma {
    width: 100%; height: 34px; object-fit: contain;
    border: 1px solid #ddd; background: white; display: none;
}

/* ── MODAL FIRMA ── */
#modal-firma {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: none;
    justify-content: center; align-items: center; z-index: 1000;
}
.modal-content {
    background: white; padding: 20px; border-radius: 12px;
    width: 90%; max-width: 400px; text-align: center;
}
canvas {
    border: 2px dashed var(--verde); background: #fafafa;
    border-radius: 8px; width: 100%; height: 150px; touch-action: none;
}

/* ── MODAL ALERTA ── */
#modal-alerta {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); display: none;
    justify-content: center; align-items: center; z-index: 9999;
}
#modal-alerta.visible { display: flex; }
.modal-alerta-box {
    background: white; border-radius: 12px; padding: 28px 24px 20px;
    width: 90%; max-width: 380px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25); text-align: center;
}
.modal-alerta-msg  { font-size: 15px; color: #222; line-height: 1.6; margin-bottom: 20px; white-space: pre-line; }
.modal-alerta-btns { display: flex; gap: 10px; justify-content: center; }
.modal-alerta-btn  {
    background: var(--verde); color: white; border: none;
    padding: 10px 32px; border-radius: 6px; font-size: 14px; font-weight: bold; cursor: pointer;
}
.modal-alerta-btn:active     { background: var(--verde-dk); }
.modal-alerta-btn.btn-cancel { background: #888; }
.modal-alerta-btn.btn-danger { background: var(--rojo); }

/* ── MODAL CONFIRMACIÓN (uso específico para eliminar inspector) ── */
#modal-confirmar {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); display: none;
    justify-content: center; align-items: center; z-index: 9998;
}
#modal-confirmar.visible { display: flex; }
.modal-confirmar-box {
    background: white; border-radius: 12px; padding: 28px 24px 20px;
    width: 90%; max-width: 380px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25); text-align: center;
}
.modal-confirmar-msg  { font-size: 15px; color: #222; line-height: 1.6; margin-bottom: 20px; white-space: pre-line; }
.modal-confirmar-btns { display: flex; gap: 10px; justify-content: center; }

/* ── HEADER PDF (dentro del área imprimible) ── */
.pdf-header {
    display: flex; align-items: center; background: var(--verde);
    border-radius: 6px; padding: 8px 16px; margin-bottom: 20px; gap: 14px;
}
.pdf-header-logo     { height: 40px; max-width: 110px; width: auto; object-fit: contain; flex-shrink: 0; display: block; }
.pdf-header-titulo   { color: white; font-size: 14px; font-weight: 800; letter-spacing: 0.3px; flex: 1; text-align: center; margin: 0; line-height: 1.3; word-break: break-word; white-space: normal; padding: 0 6px; }
.pdf-header-meta     { width: 110px; flex-shrink: 0; display: grid; grid-template-columns: max-content max-content; column-gap: 3px; row-gap: 1px; align-content: center; justify-content: end; }
.pdf-header-meta .m-k { font-size: 9px; color: rgba(255,255,255,0.92); line-height: 1.5; white-space: nowrap; text-align: right; font-weight: 700; }
.pdf-header-meta .m-v { font-size: 9px; color: rgba(255,255,255,0.92); line-height: 1.5; white-space: nowrap; text-align: left; }

/* ── EXPORT HELPERS ── */
.textarea-contenido {
    width: 100%; padding: 10px; border: 1px solid var(--gris-brd);
    border-radius: 4px; font-size: 13px; font-family: inherit;
    resize: vertical; min-height: 80px; box-sizing: border-box; background: #fff; color: #222;
}
.export-span {
    display: inline-block; font-size: 11px; text-align: center;
    padding: 10px; background: #fff; border: 1px solid #ccc;
    border-radius: 4px; width: 100%; box-sizing: border-box; color: #222;
}

/* ── ÍTEMS DE VERIFICACIÓN ── */
.tabla-items           { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 13px; border: none; }
.tabla-items th        { background: var(--verde); color: white; padding: 8px 10px; text-align: left; font-size: 12px; border: none; }
.tabla-items td        { padding: 8px 10px; border-bottom: 1px solid #eeeeee; border-left: none; border-right: none; vertical-align: middle; }
.tabla-items tr:last-child td { border-bottom: none; }
.tabla-items .item-num { color: #888; font-size: 11px; min-width: 24px; }
.radio-group           { display: flex; gap: 16px; white-space: nowrap; }
.radio-group label     { font-size: 12px; font-weight: normal; color: #333; display: flex; align-items: center; gap: 4px; margin: 0; cursor: pointer; }
.radio-group input[type=radio] { width: auto; padding: 0; border: none; margin: 0; cursor: pointer; }

/* ── INSPECTOR ── */
.fila-inspector {
    display: grid; grid-template-columns: 3.5fr 1.4fr 2fr 2fr 0.5fr;
    gap: 8px; align-items: center; background: #fafafa;
    padding: 7px 10px; border-radius: 6px; margin-bottom: 5px; border: 1px solid #eee;
}
.fila-inspector.pdf-export { grid-template-columns: 4.5fr 1.4fr 2fr 2.5fr; }

/* ── INPUT READONLY (cédula / cargo) ── */
.input-readonly {
    font-size: 11px; text-align: center; padding: 7px 10px;
    background: #fff; border: 1px solid #ccc; border-radius: 4px;
    cursor: default; width: 100%; box-sizing: border-box; color: #222;
    font-family: inherit;
}

/* ── VISOR DE ARCHIVOS PDF (módulo Mis Registros) ── */
.registros-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.registros-toolbar input[type=text] { flex:1; min-width:180px; }
.registros-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px; }
.registro-card {
    background:white; border-radius:10px; border:1px solid var(--gris-brd);
    padding:14px 16px; display:flex; flex-direction:column; gap:8px;
    transition: box-shadow 0.15s;
}
.registro-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
.registro-nombre { font-size:13px; font-weight:700; color:var(--verde-dk); line-height:1.4; word-break:break-word; }
.registro-meta   { font-size:11px; color:#888; }
.registro-btn    { background:var(--verde); color:white; border:none; border-radius:5px; padding:7px 0; font-size:13px; font-weight:bold; cursor:pointer; width:100%; }
.registro-btn:active { background:var(--verde-dk); }
.registros-empty { text-align:center; color:#aaa; font-size:14px; padding:40px 0; }

/* ── REGISTRO FOTOGRÁFICO ─────────────────────────────────────────────────── */

/* Botón de cámara (fuera del área PDF, encima del bloque inspector) */
.btn-camara {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: var(--verde);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 8px;
}
.btn-camara:active { background: var(--verde-dk); }
.btn-camara:disabled { background: #aaa; cursor: not-allowed; }
.btn-camara-contador {
    font-size: 12px;
    font-weight: normal;
    opacity: 0.85;
}

/* Input de cámara oculto */
#input-camara-foto { display: none; }

/* Sección de registro fotográfico en el PDF */
.seccion-fotos-pdf {
    margin-top: 14px;
}

/* Retícula de fotos: 4 por fila */
.reticula-fotos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 8px;
    page-break-inside: avoid;
}

/* Fila de fotos indivisible (no se parte entre páginas) */
.fila-fotos-pdf {
    display: contents; /* cada fila de 4 fotos es una sub-grilla natural */
}

/* Cada celda de foto */
.celda-foto {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid var(--gris-brd);
    background: #f5f5f5;
}
.celda-foto img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}

/* Número de foto — badge en esquina inferior izquierda, siempre visible */
.foto-numero {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(0,0,0,0.72);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 5;
}

/* Botón eliminar foto (solo visible en pantalla, no en PDF) */
.btn-eliminar-foto {
    position: absolute;
    top: 3px;
    right: 3px;
    background: rgba(180,0,0,0.75);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-eliminar-foto:active { background: rgba(140,0,0,0.9); }

/* Ocultar botones eliminar en exportación PDF */
@media print {
    .btn-eliminar-foto,
    .btn-camara { display: none !important; }
}

/* ── CONTENEDOR ACCIONES FOTOGRÁFICAS ── */
/* max-width igual al área del formulario para que el botón no se extienda
   más allá del formulario en pantallas anchas (desktop/tablet landscape) */
.acciones-fotos {
    background: #f9f9f9;
    border-top: 1px solid var(--gris-brd);
    padding: 10px 12px 6px 12px;
    width: 100%;
    max-width: 794px;
    box-sizing: border-box;
}

/* ── PREVISUALIZACIÓN DE FOTOS (UI — fuera del area-pdf) ── */
/* Las .celda-foto se insertan DIRECTAMENTE aquí — sin rows intermedios.
   grid-template-columns: repeat(4,1fr) las distribuye automáticamente.
   width: 100% + box-sizing son esenciales para que el grid resuelva
   el ancho de las celdas antes de aplicar aspect-ratio (Chrome Android). */
#previsualizacion-fotos-ui,
.reticula-fotos-ui {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 6px;
    width: 100%;
    box-sizing: border-box;
}

/* .celda-foto dentro del contenedor UI:
   min-height: 0 fuerza al grid a recalcular antes de aplicar aspect-ratio.
   Esto corrige el bug de Chrome Android donde las celdas colapsan a 0px
   cuando el contenedor padre no tiene un ancho explícito resuelto. */
#previsualizacion-fotos-ui .celda-foto,
.reticula-fotos-ui .celda-foto {
    aspect-ratio: 1 / 1;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    border: 1px solid var(--gris-brd);
    background: #f0f0f0;
    box-sizing: border-box;
}
#previsualizacion-fotos-ui .celda-foto img,
.reticula-fotos-ui .celda-foto img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Unificar estética HTML ↔ PDF: contenedor de módulo flat, sin border-radius excesivo */
.contenido-principal > .bloque-seccion,
.contenido-principal > div > .bloque-seccion {
    border-radius: 4px;
}
/* Fila colaboradores: diseño flat para paridad con el PDF */
.fila-inspector {
    display: grid;
    grid-template-columns: 3.5fr 1.4fr 2fr 2fr 0.5fr;
    gap: 8px; align-items: center; background: #fafafa;
    padding: 8px 10px; border-radius: 0; margin-bottom: 0;
    border: none; border-bottom: 1px solid #dddddd;
}

/* ── BÚSQUEDA DE COLABORADORES ── */
.colab-campo-select {
    position: relative;
    min-width: 0;
}
.colab-buscar {
    padding: 5px 8px;
    font-size: 11px;
    border: 1px solid var(--gris-brd);
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    color: #555;
}
.colab-buscar::placeholder { color: #aaa; }
.colab-buscar:disabled { background: #f5f5f5; color: #999; cursor: not-allowed; }
.colab-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--gris-brd);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 500;
    max-height: 180px;
    overflow-y: auto;
}
.colab-dropdown-item {
    padding: 7px 10px;
    font-size: 11px;
    cursor: pointer;
    color: #333;
}
.colab-dropdown-item:hover { background: #eef4ff; }

/* ── SUB-ENCABEZADOS DE SECCIÓN DENTRO DE TABLA ── */
.tabla-items .fila-grupo td {
    background: var(--verde-lt, #e8f5e9);
    color: var(--verde-dk, #1b5e20);
    font-weight: 600;
    font-size: 12px;
    padding: 6px 10px;
    border-bottom: 1px solid #c8e6c9;
}

/* ─── SECCIÓN EPP (Elementos de Protección Personal) ─── */
.seccion-epp {
    margin: 10px 0 8px 0;
}

.epp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 8px 4px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

/* Cada columna EPP: flex-start para que las opciones queden
   alineadas al borde izquierdo de la celda (no centradas bajo el ícono) */
.epp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* El ícono tiene su propio wrapper que lo centra dentro de la columna */
.epp-icono-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.epp-item img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #e8e8e8;
    padding: 2px;
}

/* width: max-content → el contenedor mide exactamente lo que ocupa el texto
   más ancho (N/A), y .epp-item (align-items:center) lo centra debajo del ícono */
.epp-opciones {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: max-content;
}

.epp-opciones label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    cursor: pointer;
    padding: 1px 0;
    border-radius: 3px;
    transition: background 0.15s;
    line-height: 1.3;
    color: #444;
    white-space: nowrap;
}

.epp-opciones label:hover {
    background: #e8f5e9;
}

.epp-opciones input[type="radio"] {
    width: 13px;
    height: 13px;
    accent-color: var(--verde, #469646);
    flex-shrink: 0;
    margin: 0;
}

/* Estado activo de cada opción */
.epp-opciones input[type="radio"]:checked + span {
    color: #1b5e20;
    font-weight: 600;
}

@media (max-width: 600px) {
    .epp-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
        padding: 5px 2px;
    }
    .epp-item img {
        width: 38px;
        height: 38px;
    }
    .epp-opciones label {
        font-size: 9px;
        padding: 1px 0;
    }
}