/*
    hallazgo.css — el expediente en el teléfono (octubre de 2026): la captura de
    un hallazgo (/activo/hallazgo/…), la búsqueda a mano (/activos/buscar), la
    bandeja de hallazgos y reglas por uso (/activos/aprobaciones) y las piezas del
    expediente que las enseñan (hallazgos, reglas, equipo y pruebas técnicas).

    Sobre expediente.css (exp-*, vg-*) y pantalla.css (--pan-*): mismas medidas,
    mismos colores. Nada que se toque baja de 40 px en el teléfono.
      · hz-*   lo nuevo: chips de lo encontrado, tarjetas de hallazgo y de regla,
               el conflicto con la ficha, la búsqueda.
*/

.hz { max-width: 860px; }

/* ═══════════════════ De dónde salen la ficha y los catálogos ═══════════════════ */
.hz-contexto {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin: 10px 0 12px; padding: 8px 12px;
    border-radius: 8px; border: 1px solid var(--pan-linea); background: var(--pan-papel);
    font-size: 12.5px; color: #33475b; line-height: 1.45;
}
.hz-contexto .rzi { font-size: 18px; color: var(--pan-verde); }
.hz-contexto-memoria, .hz-contexto-nada { border-color: rgba(184, 84, 27, .35); background: rgba(184, 84, 27, .05); }
.hz-contexto-memoria .rzi, .hz-contexto-nada .rzi { color: var(--pan-ambar); }
.hz-contexto-sesion { border-color: rgba(211, 47, 20, .3); background: rgba(211, 47, 20, .04); }
.hz-contexto-sesion .rzi { color: var(--pan-rojo); }
.hz-contexto > span { flex: 1 1 220px; min-width: 0; }
.hz-enlace {
    min-height: 40px; padding: 0 10px; border: 1px solid var(--pan-linea); border-radius: 999px;
    background: var(--pan-papel); color: var(--pan-azul); font-size: 12px; font-weight: 700; cursor: pointer;
}
.hz-enlace:disabled { opacity: .55; cursor: default; }

.hz-correccion { align-items: flex-start; margin-bottom: 12px; }
.hz-correccion > div { display: flex; flex-direction: column; gap: 2px; }

/* ═══════════════════ Lo encontrado: chips de pulgar ═══════════════════ */
.hz-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
@media (min-width: 640px) { .hz-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Rejilla y no flex: el icono, el texto y la marca en un renglón aunque el texto
   ocupe dos (con flex, «Lo tiene otra persona» bajaba el texto bajo el icono). */
.hz-chip {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; min-width: 0;
    min-height: 52px; padding: 8px 12px;
    border: 1.5px solid var(--pan-linea); border-radius: 10px; background: var(--pan-papel);
    color: var(--pan-tinta); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer;
}
.hz-chip .rzi { font-size: 20px; color: var(--pan-apagado); }
.hz-chip > span:not(.hz-chip-nota) { min-width: 0; overflow-wrap: anywhere; }
.hz-chip:hover { border-color: var(--pan-azul); }
.hz-chip:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }
.hz-chip-marcado { border-color: var(--pan-azul); background: rgba(24, 95, 165, .07); box-shadow: 0 0 0 2px rgba(24, 95, 165, .16); }
.hz-chip-marcado .rzi { color: var(--pan-azul); }
.hz-chip-marcado::after { content: "✓"; grid-column: 3; grid-row: 1; color: var(--pan-azul); font-weight: 700; }
.hz-chip-nota { grid-column: 1 / -1; font-size: 11px; font-weight: 500; color: var(--pan-ambar); }
.hz-opciones { margin-top: 8px; }
.hz-casilla {
    display: flex; align-items: flex-start; gap: 8px; min-height: 40px; padding: 8px 0 0;
    font-size: 13px; color: #33475b; line-height: 1.4; cursor: pointer;
}
.hz-casilla input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--pan-azul); }
.hz-texto { min-height: 84px; resize: vertical; }
.hz-rotulo { display: block; margin: 8px 0 4px; font-size: 12px; font-weight: 700; color: var(--pan-tinta); }
.hz-numero { max-width: 160px; }
.hz-fila-campos { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.hz-toma { margin-top: 10px; }

/* ═══════════════════ Revisión y guardar ═══════════════════ */
.hz-problemas {
    margin: 8px 0 0; padding: 8px 12px 8px 28px;
    border-radius: 8px; background: rgba(184, 84, 27, .07); border: 1px solid rgba(184, 84, 27, .25);
}
.hz-problemas li { font-size: 12.5px; color: #5c2a0d; line-height: 1.45; }
.hz-almacen { margin-top: 10px; }
.hz-guardar { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
/* En el teléfono el botón principal queda a la vista, sobre la barra inferior. */
@media (max-width: 760px) {
    .hz-guardar {
        position: sticky; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 5;
        padding: 8px; margin: 8px -8px 0; border-radius: 12px;
        background: rgba(255, 255, 255, .96); box-shadow: 0 -6px 18px -12px rgba(12, 39, 64, .45);
    }
}
.hz-hecho .exp-titulo { display: flex; align-items: center; gap: 6px; }
.hz-hecho .exp-titulo .rzi { color: var(--pan-verde); }
.hz-texto-envio { margin-top: 6px; }

.hz-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }

/* ═══════════════════ Tarjetas: hallazgos y reglas ═══════════════════ */
.hz-bandeja { display: flex; flex-direction: column; gap: 10px; }
.hz-tarjeta, .hz-regla {
    padding: 10px 12px 12px; min-width: 0;
    border: 1px solid var(--pan-linea); border-left: 4px solid var(--pan-ambar); border-radius: 10px;
    background: var(--pan-papel); box-shadow: var(--pan-sombra-tarjeta);
}
.hz-tarjeta-aplicado, .hz-tarjeta-atendido, .hz-regla-aprobada { border-left-color: var(--pan-verde); }
.hz-tarjeta-descartado, .hz-regla-reemplazada, .hz-regla-retirada { border-left-color: var(--pan-tenue); }
.hz-regla-rechazada { border-left-color: var(--pan-rojo); }
.hz-tarjeta-conflicto { border-left-color: var(--pan-rojo); }
.hz-reglas .hz-regla { margin-top: 8px; box-shadow: none; background: var(--pan-fondo); }
.hz-tarjeta-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.hz-tarjeta-cab a { color: var(--pan-azul); text-decoration: none; }

.hz-cambios { width: 100%; margin: 8px 0 4px; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.hz-cambios th, .hz-cambios td { padding: 5px 6px; border-bottom: 1px solid var(--pan-linea); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.hz-cambios thead th { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pan-apagado); }
.hz-cambios tbody th { font-weight: 700; color: var(--pan-tinta); width: 22%; }
.hz-cambio-conflicto td:nth-of-type(2) { color: var(--pan-rojo); font-weight: 700; }
/* Angosto: cuatro columnas partían las palabras («ENCONTRA-DO», «Hernánde-z»). Cada
   renglón se apila: el dato arriba y cada valor con su rótulo a la izquierda. */
@media (max-width: 479px) {
    .hz-cambios, .hz-cambios tbody, .hz-cambios tr, .hz-cambios th, .hz-cambios td { display: block; width: auto; }
    .hz-cambios thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .hz-cambios tr { padding: 6px 0; border-bottom: 1px solid var(--pan-linea); }
    .hz-cambios tbody th { width: auto; padding: 0 0 2px; border: 0; }
    .hz-cambios td { display: flex; gap: 8px; padding: 1px 0; border: 0; overflow-wrap: break-word; }
    .hz-cambios td::before {
        content: attr(data-rotulo); flex: none; width: 104px; padding-top: 1px;
        font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pan-apagado);
    }
}
.hz-encontrado { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; color: var(--pan-tinta); }
.hz-encontrado .rzi { font-size: 18px; color: var(--pan-apagado); }
.hz-encontrado-alerta, .hz-encontrado-alerta .rzi { color: var(--pan-rojo); }
.hz-alertas {
    margin: 8px 0 0; padding: 7px 10px 7px 26px; border-radius: 8px;
    background: rgba(211, 47, 20, .05); border: 1px solid rgba(211, 47, 20, .2);
}
.hz-alertas li { font-size: 12.5px; color: #6b1b0b; line-height: 1.45; }
.hz-resolucion { margin: 8px 0 0; font-size: 12.5px; color: #33475b; line-height: 1.45; }
.hz-decidir { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--pan-linea); }
.hz-campos { margin: 0; padding: 0; border: 0; }
.hz-regla-uso { font-weight: 600; }
.hz-regla-toca { color: var(--pan-rojo); }
.hz-historia { margin-top: 8px; }
.hz-historia summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--pan-azul); }

/* ═══════════════════ El conflicto con la ficha ═══════════════════ */
.hz-conflicto {
    margin-top: 10px; padding: 10px 12px;
    border-radius: 10px; border: 1.5px solid rgba(211, 47, 20, .45); background: rgba(211, 47, 20, .04);
}
.hz-conflicto-cab { display: flex; align-items: center; gap: 6px; color: var(--pan-rojo); font-size: 14px; }
.hz-conflicto-texto { margin: 6px 0 0; font-size: 13px; color: #33475b; line-height: 1.45; }
.hz-conflicto-detalles { margin: 6px 0 0; padding-left: 18px; }
.hz-conflicto-detalles li { font-size: 12.5px; color: var(--pan-tinta); line-height: 1.45; }

/* ═══════════════════ Equipo, vínculos y pruebas ═══════════════════ */
.hz-equipo { margin-bottom: 10px; }
.hz-mano { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--pan-fondo); }
.hz-mano select { min-height: 40px; }

/* ═══════════════════ Búsqueda ═══════════════════ */
.hz-buscar label.exp-titulo { display: block; }
.hz-buscar-caja { min-height: 48px; font-size: 16px; }
.hz-resultado-exacto { box-shadow: inset 0 0 0 2px var(--pan-verde); background: rgba(28, 138, 90, .05); }
.hz-cuenta-resultados { margin: 4px 2px 8px; }

/* ═══════════════════ Pestañas de la bandeja ═══════════════════ */
.hz-pestanas button.hz-pestana-activa { border-color: var(--pan-tinta); background: var(--pan-tinta); color: #fff; }

/* ═══════════════════ Objetivos de toque ═══════════════════ */
@media (max-width: 1100px), (pointer: coarse) {
    .hz-enlace, .hz-casilla, .hz-historia summary { min-height: 40px; }
    .hz .form-control, .hz select { min-height: 44px; }
    .hz .rz-dropdown { min-height: 44px; }
}