/* Herramientas Lean — historial de proyectos y auditoría 5S.
 *
 * Todo acotado a .mod-lean. Los CSS de los módulos del portal ya chocaron una
 * vez entre sí (OTD alineaba las tablas a la izquierda y Despacho a la derecha);
 * desde entonces cada módulo se encierra en su clase.
 *
 * Monocromo estricto, estilo IKIGAI. El rojo es --alarma y está reservado a lo
 * vencido, lo reprobado y lo que no tiene responsable. No es color de acento.
 */

.mod-lean .barra{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;
}
.mod-lean .barra.pie{margin-top:28px;border-top:1px solid var(--rule);padding-top:20px}
/* Borrar va aparte y abajo, no junto a Guardar: el clic de al lado no puede ser
   el que no se deshace. Monocromo, como todo: el rojo sigue siendo de lo vencido. */
.mod-lean .barra.zona-borrar{margin-top:34px;border-top:1px solid var(--rule);padding-top:16px}
.mod-lean .btn.chico{padding:6px 11px;font-size:12px}

.mod-lean .aviso{
  margin-top:16px;padding:11px 13px;border-left:2px solid var(--ink);
  font-size:13px;line-height:1.5;color:var(--meta);
}
.mod-lean .aviso b{color:var(--ink);font-weight:600}

/* ---- filtros ---- */
.mod-lean .filtros{
  display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 4px;
}
.mod-lean .filtros input,
.mod-lean .filtros select{
  font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--rule);
  border-radius:0;background:var(--paper);color:var(--ink);
}
.mod-lean .filtros input{flex:1 1 240px;min-width:0}
.mod-lean .filtros input:focus,
.mod-lean .filtros select:focus{outline:0;border-color:var(--ink)}

/* ---- tablas ---- */
/* El scroll vive en un contenedor propio: sin esto, en teléfono la tabla empuja
 * el ancho del body y la página entera se desplaza de lado. */
.mod-lean .tabla-scroll{overflow-x:auto;margin-top:14px}
.mod-lean table{width:100%;border-collapse:collapse;font-size:13px}
.mod-lean th{
  text-align:left;font-weight:500;font-size:10px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--meta);padding:0 12px 8px 0;
  border-bottom:1px solid var(--ink);white-space:nowrap;
}
.mod-lean td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.mod-lean td.der,.mod-lean th.der{text-align:right;padding-right:0}
.mod-lean td.tit{font-weight:500;min-width:180px}
.mod-lean .historial tbody tr{cursor:pointer}
.mod-lean .historial tbody tr:hover td{background:#fafafa}
.mod-lean .historial tbody tr:hover td.tit{text-decoration:underline;text-underline-offset:4px}
.mod-lean tr.vencida td.tit{font-weight:600}

.mod-lean .chip{
  display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:500;padding:3px 7px;border:1px solid var(--rule);white-space:nowrap;
}
.mod-lean .chip-proceso{border-color:var(--ink)}
.mod-lean .chip-cerrado{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mod-lean .chip-cancelado{color:var(--meta);text-decoration:line-through}

.mod-lean .vacio{margin-top:22px;color:var(--meta);font-size:14px;line-height:1.6}
.mod-lean .err{margin-top:14px;font-size:13px;color:var(--alarma)}

/* ---- el proyecto ---- */
.mod-lean .volver{
  font:inherit;font-size:13px;background:none;border:0;padding:14px 0 0;
  color:var(--meta);cursor:pointer;
}
.mod-lean .volver:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

.mod-lean .cabecera{
  display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;
  margin-top:18px;padding-bottom:18px;border-bottom:1px solid var(--rule);
}
.mod-lean .cabecera dd{font-size:14px;margin-top:3px}

.mod-lean h3.s{
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--rule);
}

/* ---- la auditoría ---- */
.mod-lean .criterio{padding:14px 0;border-bottom:1px solid var(--rule)}
.mod-lean .criterio .txt{font-size:14px;line-height:1.5;display:flex;gap:10px;align-items:baseline}
.mod-lean .num-c{
  flex:0 0 auto;font-size:10px;font-weight:600;color:var(--meta);
  border:1px solid var(--rule);padding:1px 6px;font-variant-numeric:tabular-nums;
}
.mod-lean .criterio.reprobado .txt{font-weight:500}

/* Cinco botones grandes, uno por grado. Se califica caminando por la planta con
 * el pulgar, no con el ratón: por eso el objetivo táctil no baja de 44px. */
.mod-lean .escala{display:flex;gap:6px;margin-top:11px}
.mod-lean .grado{
  flex:1 1 0;min-width:0;min-height:52px;font:inherit;cursor:pointer;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:6px 2px;
}
.mod-lean .grado b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.mod-lean .grado span{
  font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--meta);
  text-align:center;line-height:1.2;
}
.mod-lean .grado:hover:not([disabled]){border-color:var(--ink)}
.mod-lean .grado.puesto{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.mod-lean .grado.puesto span{color:var(--paper)}
.mod-lean .grado[disabled]{cursor:default;opacity:.55}

.mod-lean .pide-accion{
  margin-top:10px;font-size:12px;color:var(--alarma);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
}

.mod-lean .notas{display:block;margin-top:24px;font-size:13px;color:var(--meta)}
.mod-lean .notas textarea,
.mod-lean .ficha-otro input{
  display:block;width:100%;margin-top:7px;font:inherit;font-size:14px;color:var(--ink);
  padding:10px 11px;border:1px solid var(--rule);border-radius:0;background:var(--paper);
  resize:vertical;
}
.mod-lean .notas textarea:focus,
.mod-lean .ficha-otro input:focus{outline:0;border-color:var(--ink)}
.mod-lean .ficha-otro label{display:block;margin-top:18px;font-size:13px;color:var(--meta)}

.mod-lean .fotos{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
.mod-lean .fotos img{width:104px;height:104px;object-fit:cover;border:1px solid var(--rule);display:block}
.mod-lean .subir{cursor:pointer}
.mod-lean .subir .btn{display:inline-block}

.mod-lean .acc-proy .acc{
  font-size:13px;line-height:1.6;padding:9px 0;border-bottom:1px solid var(--rule);
  display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;
}

/* ---- diálogos ---- */
.mod-lean .dialogo{
  position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;
  padding:20px;z-index:50;
}
.mod-lean .dialogo .caja{
  background:var(--paper);border:1px solid var(--ink);padding:24px;
  width:100%;max-width:420px;max-height:90vh;overflow-y:auto;
}
.mod-lean .dialogo h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.mod-lean .dialogo label{display:block;margin-top:16px;font-size:13px;color:var(--meta)}
.mod-lean .dialogo input,
.mod-lean .dialogo select{
  display:block;width:100%;margin-top:6px;font:inherit;font-size:14px;color:var(--ink);
  padding:10px 11px;border:1px solid var(--rule);border-radius:0;background:var(--paper);
}
.mod-lean .dialogo input:focus,
.mod-lean .dialogo select:focus{outline:0;border-color:var(--ink)}
.mod-lean .dialogo .nota{margin-top:12px;font-size:12px;line-height:1.5}
.mod-lean .dialogo .acciones{display:flex;gap:10px;margin-top:24px}

/* ---- teléfono ---- */
/* La auditoría se levanta caminando el área. Aquí la tabla del historial deja de
 * ser tabla y cada proyecto se vuelve un bloque legible sin zoom. */
@media (max-width:640px){
  .mod-lean .historial thead{display:none}
  .mod-lean .historial,
  .mod-lean .historial tbody,
  .mod-lean .historial tr,
  .mod-lean .historial td{display:block;width:auto}
  .mod-lean .historial tr{padding:14px 0;border-bottom:1px solid var(--rule)}
  .mod-lean .historial td{border:0;padding:1px 0}
  .mod-lean .historial td.tit{font-size:15px;min-width:0;margin-bottom:4px}
  .mod-lean .historial td.der{text-align:left;margin-top:6px}
  .mod-lean .tabla-scroll{overflow-x:visible}
  .mod-lean .grado span{display:none}
  .mod-lean .grado{min-height:54px}
  .mod-lean .grado b{font-size:18px}
  .mod-lean .barra .btn{flex:1 1 140px}
}

/* La leyenda de la escala. En escritorio es un recordatorio; en teléfono, donde
 * el botón solo muestra el número, es la ÚNICA forma de saber qué es un 3. */
.mod-lean .leyenda{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:18px;padding-bottom:12px;
  border-bottom:1px solid var(--rule);font-size:11px;color:var(--meta);
}
.mod-lean .leyenda b{
  color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;margin-right:3px;
}

/* ================================================== formatos por pasos == */

/* El resumen calculado encabeza el formato. Es lo que el Excel no puede dar:
 * totales que no se rompen al insertar un renglón. Va arriba porque es la
 * razón de capturar, no el premio del final. */
.mod-lean .calc{margin-top:18px;padding:16px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.mod-lean .cifras{display:flex;gap:clamp(16px,3vw,40px);flex-wrap:wrap}
.mod-lean .cifra{display:flex;flex-direction:column;gap:2px;min-width:0}
.mod-lean .cifra b{font-size:clamp(19px,2vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.mod-lean .cifra .pie{font-size:11px;color:var(--meta)}
.mod-lean .alerta-calc{margin-top:14px;font-size:13px;color:var(--alarma)}
.mod-lean .oee{margin-top:10px;font-size:12px}

/* Las pestañas de paso. Un punto marca el paso ya capturado: en un 8D de ocho
 * disciplinas, saber cuáles faltan sin abrirlas es la mitad del valor. */
.mod-lean nav.pasos{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:22px;
  padding-bottom:14px;border-bottom:1px solid var(--rule);
}
.mod-lean .paso{
  font:inherit;font-size:12px;font-weight:500;cursor:pointer;
  background:var(--paper);color:var(--meta);border:1px solid var(--rule);border-radius:0;
  padding:8px 12px;display:flex;align-items:center;gap:7px;
}
.mod-lean .paso:hover:not([disabled]){border-color:var(--ink);color:var(--ink)}
.mod-lean .paso.aqui{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.mod-lean .paso.listo::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--ink);flex:0 0 auto;
}
.mod-lean .paso.aqui.listo::before{background:var(--paper)}
.mod-lean .paso[disabled]{cursor:default;opacity:.5}

.mod-lean .paso-cuerpo{margin-top:20px}
.mod-lean .campos-f{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.mod-lean .campo-f{display:flex;flex-direction:column;gap:5px}
.mod-lean .campo-f .nom{font-size:13px;font-weight:500}
.mod-lean .campo-f .ayuda{font-size:11px;color:var(--meta);line-height:1.4}
.mod-lean .campo-f input,
.mod-lean .campo-f textarea,
.mod-lean .campo-f select{
  font:inherit;font-size:14px;color:var(--ink);background:var(--paper);
  padding:9px 10px;border:1px solid var(--rule);border-radius:0;width:100%;resize:vertical;
}
.mod-lean .campo-f input:focus,
.mod-lean .campo-f textarea:focus,
.mod-lean .campo-f select:focus{outline:0;border-color:var(--ink)}
/* Un campo de párrafo ocupa el ancho completo: partir una causa raíz en una
 * columna de 240px la vuelve ilegible justo donde hay que pensar. */
.mod-lean .campo-f:has(textarea){grid-column:1/-1}

/* ---- tabla editable ---- */
.mod-lean .tabla-paso{margin-top:26px}
.mod-lean .cab-t{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:8px;border-bottom:1px solid var(--ink);
}
.mod-lean .cab-t h4{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.09em}
.mod-lean table.editable td{padding:5px 6px 5px 0;vertical-align:middle}
.mod-lean table.editable input,
.mod-lean table.editable select{
  font:inherit;font-size:13px;color:var(--ink);background:var(--paper);
  padding:7px 8px;border:1px solid var(--rule);border-radius:0;width:100%;min-width:110px;
}
.mod-lean table.editable input:focus,
.mod-lean table.editable select:focus{outline:0;border-color:var(--ink)}
.mod-lean table.editable input[type=number]{min-width:78px;text-align:right;font-variant-numeric:tabular-nums}
.mod-lean td.quitar{width:32px;padding-right:0}
.mod-lean .x{
  font:inherit;font-size:17px;line-height:1;color:var(--meta);cursor:pointer;
  background:none;border:0;padding:4px 6px;
}
.mod-lean .x:hover{color:var(--alarma)}

/* El titular del historial: cada método dice lo suyo. */
.mod-lean .dato{font-size:13px;font-weight:500}

@media (max-width:640px){
  .mod-lean .campos-f{grid-template-columns:1fr}
  .mod-lean nav.pasos{gap:5px}
  .mod-lean .paso{font-size:11px;padding:7px 10px}
  .mod-lean .cifras{gap:18px}
  /* La tabla editable SÍ conserva scroll horizontal: un cursograma tiene cuatro
   * columnas que se leen juntas, y desarmarlo en bloques pierde la relación. */
  .mod-lean .tabla-paso .tabla-scroll{overflow-x:auto}
}

/* ================================================ documento imprimible == */

/* En pantalla no se ve: existe solo para el PDF. Se arma siempre —no al apretar
 * el botón— para que imprimir sea instantáneo y para que el navegador ya tenga
 * las fotos cargadas cuando abra el diálogo. */
.mod-lean .documento{display:none}

@media print{
  /* Solo cuando se imprime DESDE Lean. Sin el :has, estas reglas esconderían la
   * navegación de cualquier otro módulo que alguien intente imprimir. */
  body:has(.mod-lean .documento) nav,
  body:has(.mod-lean .documento) main > header,
  body:has(.mod-lean .documento) main > hr{display:none !important}
  body:has(.mod-lean .documento) main{padding:0 !important}
  body:has(.mod-lean) #marco{display:block !important}

  /* De la pestaña se imprime el documento y nada más: ni pestañas de paso, ni
   * botones, ni campos editables vacíos. */
  .mod-lean > *:not(.documento){display:none !important}
  .mod-lean .documento{display:block}

  @page{size:letter;margin:14mm}
  body{font-size:10pt}
}

/* El documento se maqueta igual en pantalla y en papel: así se puede revisar en
 * la vista previa sin sorpresas. */
.mod-lean .doc-cab{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding-bottom:9px;border-bottom:1.5px solid var(--ink);
}
.mod-lean .doc-marca b{display:block;font-size:13pt;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.mod-lean .doc-marca span,
.mod-lean .doc-cod span{
  display:block;font-size:8pt;text-transform:uppercase;letter-spacing:.09em;color:var(--meta);
}
.mod-lean .doc-cod{text-align:right}
.mod-lean .doc-cod .folio{font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}

.mod-lean .doc-tit{font-size:15pt;font-weight:600;letter-spacing:-.01em;margin-top:14px}

.mod-lean .doc-ficha{
  display:flex;gap:24px;flex-wrap:wrap;margin-top:10px;
  padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.mod-lean .doc-ficha dt{
  font-size:7.5pt;text-transform:uppercase;letter-spacing:.09em;color:var(--meta);font-weight:500;
}
.mod-lean .doc-ficha dd{font-size:10pt;margin-top:1px}

/* Un paso nunca se parte a la mitad entre dos hojas: leer un AMFE con el
 * encabezado en una página y los renglones en otra es inservible. */
.mod-lean .doc-paso{margin-top:16px;break-inside:avoid}
.mod-lean .doc-paso h3{
  font-size:8.5pt;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  padding-bottom:4px;border-bottom:1px solid var(--ink);
}
.mod-lean .doc-paso > p{font-size:9.5pt;margin-top:7px;line-height:1.5}
.mod-lean .doc-paso .sin{color:var(--meta);font-style:italic}

.mod-lean .doc-campos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:9px 22px;margin-top:9px;
}
.mod-lean .doc-campos dt{
  font-size:7.5pt;text-transform:uppercase;letter-spacing:.08em;color:var(--meta);font-weight:500;
}
.mod-lean .doc-campos dd{font-size:9.5pt;line-height:1.45;margin-top:1px;white-space:pre-wrap}

.mod-lean .doc-tabla{width:100%;border-collapse:collapse;margin-top:10px;font-size:8.5pt}
.mod-lean .doc-tabla th{
  text-align:left;font-weight:600;font-size:7.5pt;text-transform:uppercase;letter-spacing:.07em;
  color:var(--meta);padding:0 8px 4px 0;border-bottom:1px solid var(--ink);
}
.mod-lean .doc-tabla td{padding:5px 8px 5px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.mod-lean .doc-tabla tr.mal td{font-weight:600}
.mod-lean .doc-total{margin-top:9px;font-size:10pt}

.mod-lean .doc-fotos div{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.mod-lean .doc-fotos img{width:118px;height:118px;object-fit:cover;border:1px solid var(--rule)}

/* Tres firmas. Un formato de calidad que no se puede firmar no cierra nada. */
.mod-lean .doc-firmas{
  display:flex;gap:26px;margin-top:38px;break-inside:avoid;
}
.mod-lean .doc-firmas div{
  flex:1;font-size:7.5pt;text-transform:uppercase;letter-spacing:.09em;color:var(--meta);text-align:center;
}
.mod-lean .doc-firmas span{
  display:block;border-top:1px solid var(--ink);margin-bottom:5px;height:34px;
}

.mod-lean .doc-pie{
  margin-top:22px;padding-top:7px;border-top:1px solid var(--rule);
  font-size:7.5pt;color:var(--meta);
}

.mod-lean .barra-sup{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
.mod-lean .barra-sup .volver{padding-top:0}

/* Columna derivada de una tabla editable (hoy: el NPR del AMFE). Se ve distinta
 * porque NO se escribe: se calcula del renglón mientras se teclea. */
.mod-lean td.der-col,.mod-lean th.der-col{
  text-align:right;font-weight:600;font-variant-numeric:tabular-nums;
  padding-right:10px;white-space:nowrap;
}
.mod-lean td.der-col{color:var(--ink);font-size:13px}