/* public/css/inicio.css — vistas del técnico (inspección e historial). Usa las variables de app.css (tema claro/oscuro). */
body.app-campo { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* .campo usa display:flex en app.css; sin esto el atributo hidden no ocultaría el hallazgo. */
.app-campo [hidden] { display: none !important; }

.barra-app {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .7rem 1rem; padding-top: calc(.7rem + env(safe-area-inset-top, 0px));
  background: var(--superficie); border-bottom: 1px solid var(--borde); box-shadow: var(--sombra);
}
.barra-app h1 { margin: 0; font-size: 1.25rem; }
.barra-app .sub { margin: 0; font-size: .85rem; }
.barra-estado { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.btn-chico { padding: .35rem .7rem; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; }

.conexion { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; padding: .25rem .65rem; border-radius: 999px; background: var(--aviso-fondo); color: var(--aviso-texto); }
.conexion::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.conexion.en-linea { background: var(--ok-fondo); color: var(--ok-texto); }
.conexion.sin-conexion { background: var(--error-fondo); color: var(--error-texto); }
.contador { min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--aviso-texto); color: var(--superficie); font-size: .78rem; text-align: center; }

.tarjeta h2 { margin: 0; }
/* Que el foco y los desplazamientos no queden ocultos bajo la barra fija. */
.app-campo .tarjeta, .app-campo .punto, .app-campo .campo, .app-campo #resumen-validacion { scroll-margin-top: 6rem; }
.alerta ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* Checklist */
.punto { border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.punto legend { font-weight: 700; padding: 0 .3rem; }
.punto.evaluado { border-color: color-mix(in srgb, var(--primario) 45%, var(--borde)); }
.punto.invalido, .lienzo-firma.invalido { border-color: var(--error-texto); box-shadow: 0 0 0 2px var(--error-fondo); }
.segmentado { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.opcion { position: relative; display: block; cursor: pointer; font-weight: 600; font-size: .9rem; }
.opcion input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 2.9rem; padding: .4rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); line-height: 1.2; }
.opcion input:focus-visible + span { outline: 2px solid var(--primario); outline-offset: 2px; }
.opcion.conforme input:checked + span { background: var(--ok-fondo); color: var(--ok-texto); border-color: var(--ok-texto); }
.opcion.no_conforme input:checked + span { background: var(--error-fondo); color: var(--error-texto); border-color: var(--error-texto); }
.opcion.no_aplica input:checked + span { background: var(--borde); color: var(--texto); border-color: var(--suave); }
textarea[aria-invalid="true"], input[aria-invalid="true"] { border-color: var(--error-texto); }

/* Firma */
.declaracion { margin: 0; font-size: .88rem; }
.lienzo-firma { position: relative; border: 2px dashed var(--borde); border-radius: var(--radio); background: #ffffff; overflow: hidden; }
.lienzo-firma.con-firma { border-style: solid; }
.lienzo-firma canvas { display: block; touch-action: none; cursor: crosshair; }
.firma-guia { position: absolute; left: 1rem; bottom: .8rem; color: #9aa4b2; font-size: .9rem; pointer-events: none; border-top: 1px solid #c8ced6; padding-top: .2rem; min-width: 45%; }
.fila-botones.izquierda { justify-content: flex-start; flex-wrap: wrap; margin-top: 0; }

.btn-grande { width: 100%; padding: .95rem 1rem; font-size: 1.05rem; }
.btn:disabled, .btn-sec:disabled { opacity: .6; cursor: progress; }
.centrado-texto { text-align: center; margin: 0; }

/* Historial */
.filtros { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.filtros .campo { flex: 1 1 200px; }
#resumen { margin: 0; font-size: .9rem; }
.lista-inspecciones { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: .7rem; }
.item-inspeccion { padding: 0; overflow: hidden; }
.item-boton { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: .35rem; width: 100%; padding: .9rem 1rem; cursor: pointer; }
.item-boton:focus-visible { outline: 2px solid var(--primario); outline-offset: -2px; }
.item-boton:hover { background: var(--fondo); }
.item-fila { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.error-linea { margin: 0; padding: .5rem 1rem; background: var(--error-fondo); color: var(--error-texto); font-size: .88rem; }

.insignia { display: inline-block; font-size: .78rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.insignia.conforme, .insignia.sincronizada { background: var(--ok-fondo); color: var(--ok-texto); }
.insignia.no_conforme, .insignia.error { background: var(--error-fondo); color: var(--error-texto); }
.insignia.pendiente { background: var(--aviso-fondo); color: var(--aviso-texto); }
.insignia.no_aplica { background: var(--fondo); color: var(--suave); border-color: var(--borde); }

.datos { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; font-size: .93rem; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; word-break: break-word; }
#detalle h3 { font-size: 1rem; margin: .6rem 0 0; }
.checklist-detalle { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.checklist-detalle li { border-bottom: 1px solid var(--borde); padding-bottom: .5rem; }
.hallazgo-texto, .texto-largo { margin: .2rem 0 0; white-space: pre-wrap; font-size: .92rem; }
.firma-imagen { display: block; max-width: 100%; background: #ffffff; border: 1px solid var(--borde); border-radius: 8px; }
#detalle .cabecera h2 { margin: 0; }

@media (max-width: 420px) {
  .segmentado { gap: .3rem; }
  .opcion span { font-size: .82rem; }
  .datos { grid-template-columns: 1fr; }
  .datos dt { margin-top: .3rem; }
}