/* HormitecFoto — estilos autocontenidos (prefijo hf-) */
html.hf-open, html.hf-open body { overflow: hidden !important; }
/* Visor a pantalla completa: ocupa todo el celular (dvh = alto real con barras del navegador) */
.hf-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; width: 100dvw; height: 100dvh; margin: 0; padding: 0; border: 0; overflow: hidden; z-index: 2147483000; background: #000; color: #fff; font-family: system-ui, Roboto, Arial, sans-serif; -webkit-tap-highlight-color: transparent; }
.hf-overlay * { box-sizing: border-box; }
.hf-overlay:fullscreen { width: 100vw; height: 100vh; background: #000; }
.hf-overlay::backdrop { background: #000; }
.hf-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
.hf-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: rgba(0,0,0,.42); }
.hf-title { flex: 1; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.hf-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 20px; cursor: pointer; }
.hf-status { position: absolute; top: calc(72px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.hf-status span { background: rgba(0,0,0,.55); padding: 6px 10px; border-radius: 999px; font-size: 13px; }
.hf-status .hf-gps.ok { background: rgba(4,120,87,.85); }
.hf-hint { position: absolute; top: calc(112px + env(safe-area-inset-top)); left: 12px; right: 12px; background: rgba(180,83,9,.9); padding: 8px 12px; border-radius: 10px; font-size: 13px; }
.hf-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 12px; background: rgba(0,0,0,.42); }
.hf-nota { width: 100%; max-width: 520px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.45); color: #fff; font-size: 16px; }
.hf-nota::placeholder { color: rgba(255,255,255,.7); }
/* blindaje: que los estilos generales de inputs de la app anfitriona no pinten la nota de blanco */
.hf-overlay input.hf-nota { width: 100%; max-width: 520px; min-height: 0; margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.45) !important; color: #fff !important; font-size: 16px; box-shadow: none; -webkit-text-fill-color: #fff; }
.hf-overlay input.hf-nota:focus { outline: 2px solid rgba(255,255,255,.7); outline-offset: 0; border-color: #fff; }
.hf-overlay input.hf-nota::placeholder { color: rgba(255,255,255,.7) !important; -webkit-text-fill-color: rgba(255,255,255,.7); }
.hf-shutter { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: #D2222A; cursor: pointer; box-shadow: 0 0 0 3px rgba(0,0,0,.25); }
.hf-shutter:disabled { background: #52525b; opacity: .7; cursor: not-allowed; }
.hf-msg { position: absolute; left: 16px; right: 16px; top: 40%; transform: translateY(-50%); background: rgba(24,24,27,.95); border: 1px solid #D2222A; padding: 16px; border-radius: 14px; font-size: 15px; line-height: 1.45; text-align: center; }
.hf-busy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0,0,0,.6); font-weight: 600; }
.hf-spin { width: 42px; height: 42px; border: 4px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: hfspin 1s linear infinite; }
@keyframes hfspin { to { transform: rotate(360deg); } }
/* Vista previa a pantalla completa: la foto entera (con su sello) sin recortar; botones encima */
.hf-preview { position: absolute; inset: 0; background: #000; }
.hf-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hf-actions { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.5); }
.hf-btn2 { flex: 1; min-height: 50px; border-radius: 12px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
.hf-ok { background: #D2222A; border-color: #D2222A; }
[hidden].hf-hint, .hf-overlay [hidden] { display: none !important; }

/* ———— galería, antes/después y mapa (1.1) ———— */
.hf-fase { display: inline-block; padding: 1px 7px; border-radius: 999px; font: 700 11px/1.5 system-ui, sans-serif; letter-spacing: .06em; color: #fff; background: #52525b; vertical-align: middle; }
.hf-fase-antes { background: #b45309; }
.hf-fase-despues { background: #047857; }
.hf-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.hf-gal-vacia { grid-column: 1 / -1; margin: 0; font-size: .9rem; opacity: .7; }
.hf-gal-item { margin: 0; cursor: pointer; border-radius: 10px; overflow: hidden; background: rgba(127,127,127,.08); border: 1px solid rgba(127,127,127,.22); display: flex; flex-direction: column; }
.hf-gal-item:focus-visible { outline: 2px solid #D2222A; outline-offset: 2px; }
.hf-gal-par { grid-column: span 2; }
.hf-gal-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.hf-gal-img { position: relative; aspect-ratio: 9 / 14; background: #111; overflow: hidden; }
.hf-gal-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.hf-gal-img .hf-fase { position: absolute; left: 5px; top: 5px; }
.hf-gal-item figcaption { padding: 6px 7px 7px; font-size: 11.5px; line-height: 1.35; display: flex; flex-direction: column; gap: 1px; word-break: break-word; }
.hf-gal-item figcaption b { font-size: 12px; }
.hf-gal-links { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 2px; }
.hf-gal-links a, .hf-capa-links a { color: #D2222A; text-decoration: none; font-weight: 600; white-space: nowrap; }
.hf-gal-cmp { font-weight: 600; opacity: .75; }

.hf-capa { position: fixed; inset: 0; z-index: 2147483000; background: #000; color: #fff; display: flex; flex-direction: column; font-family: system-ui, Roboto, Arial, sans-serif; touch-action: manipulation; }
.hf-capa-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; background: rgba(0,0,0,.42); z-index: 3; }
.hf-capa-top .hf-title { font-weight: 600; font-size: 15px; }
.hf-visor > img { flex: 1; width: 100%; min-height: 0; object-fit: contain; }
.hf-capa-pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.55); font-size: 13.5px; line-height: 1.45; z-index: 3; }
.hf-capa-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.hf-capa-links a { color: #fca5a5; }
.hf-cmp-caja { position: relative; flex: 1; min-height: 0; overflow: hidden; user-select: none; touch-action: none; cursor: ew-resize; }
.hf-cmp-caja img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.hf-cmp-linea { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.6); pointer-events: none; }
.hf-cmp-linea::after { content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #111; font: 700 18px/34px system-ui; text-align: center; }
.hf-cmp-ta, .hf-cmp-td { position: absolute; top: calc(60px + env(safe-area-inset-top)); z-index: 2; }
.hf-cmp-ta { left: 10px; } .hf-cmp-td { right: 10px; }
.hf-cmp-ctrl { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: #111; font-size: 13px; }
.hf-cmp-ctrl input[type=range] { width: 100%; accent-color: #D2222A; height: 28px; margin: 0 0 4px; }
.hf-cmp-txt { margin-top: 4px; opacity: .85; }

.hf-mapa { min-height: 320px; border-radius: 12px; overflow: hidden; z-index: 0; }
.hf-mapa-pop { display: flex; flex-direction: column; gap: 8px; font: 12.5px/1.35 system-ui, sans-serif; }
.hf-mapa-it { display: flex; gap: 8px; align-items: flex-start; }
.hf-mapa-it img { width: 64px; height: 100px; object-fit: cover; border-radius: 6px; cursor: zoom-in; flex-shrink: 0; background: #ddd; }
.hf-mapa-it span { opacity: .8; }
.leaflet-tooltip.hf-mapa-n { background: transparent; border: 0; box-shadow: none; color: #fff; font: 700 11px system-ui; padding: 0; }
.leaflet-tooltip.hf-mapa-n::before { display: none; }

.leaflet-container .hf-mapa-pop a { color: #D2222A; font-weight: 600; }

/* checklist con fotos obligatorias (1.3) */
.hf-ck { border: 1.5px solid #d9a400; border-radius: 12px; padding: 10px; background: rgba(217,164,0,.06); }
.hf-ck.hf-ck-ok { border-color: #1E8E3E; background: rgba(30,142,62,.07); }
.hf-ck-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.hf-ck-cab span { font-size: .8rem; opacity: .8; }
.hf-ck-ok .hf-ck-cab span { color: #1E8E3E; opacity: 1; font-weight: 700; }
.hf-ck-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hf-ck-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; background: rgba(127,127,127,.08); min-height: 52px; }
.hf-ck-check { flex: 0 0 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; opacity: .45; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; }
.hf-ck-item.ok .hf-ck-check { background: #1E8E3E; border-color: #1E8E3E; color: #fff; opacity: 1; }
.hf-ck-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .9rem; line-height: 1.25; }
.hf-ck-txt em { font-style: normal; font-size: .72rem; opacity: .7; }
.hf-ck-txt em.hf-ck-ob { color: #b3261e; opacity: 1; font-weight: 700; }
.hf-ck-item.ok .hf-ck-ob { display: none; }
.hf-ck-txt small { font-size: .74rem; opacity: .7; }
.hf-ck-txt .hf-ck-cod { font-weight: 700; opacity: .9; }
.hf-ck-item img { width: 40px; height: 52px; object-fit: cover; border-radius: 6px; }
.hf-ck-btn { flex: 0 0 auto; border: 0; border-radius: 9px; background: #D2222A; color: #fff; font: inherit; font-weight: 700; font-size: .85rem; padding: 8px 12px; cursor: pointer; min-height: 40px; }
.hf-ck-quitar { flex: 0 0 auto; border: 0; background: transparent; color: inherit; font-size: 1rem; opacity: .6; cursor: pointer; padding: 6px; }
.hf-title-ck { font-weight: 600; opacity: .9; }

/* «⚠️ Reportar problema» en la vista previa (1.3) */
.hf-reportar { position: absolute; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.62); color: #fff; font-weight: 700; font-size: 14px; }
.hf-reportar span { flex: 1 1 100%; }
.hf-rep { flex: 1; min-height: 44px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.55); background: transparent; color: #fff; font: inherit; cursor: pointer; }
.hf-rep[data-rep=Problema].on { background: #d9822b; border-color: #d9822b; }
.hf-rep[data-rep=Seguridad].on { background: #D2222A; border-color: #D2222A; }
.hf-rep-txt { position: absolute; left: 12px; right: 12px; bottom: calc(176px + env(safe-area-inset-bottom)); margin: 0; padding: 6px 10px; border-radius: 10px; background: rgba(210,34,42,.9); color: #fff; font-size: 13px; }

/* Guía de encuadre: foto anterior semitransparente sobre la cámara (chequeo con IA) */
.hf-guia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; pointer-events: none; transition: opacity .15s; }
.hf-guia-btn.off { opacity: .45; }
.hf-guia-txt { position: absolute; left: 12px; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom)); text-align: center; font-size: 13px; background: rgba(0,0,0,.5); padding: 6px 10px; border-radius: 999px; pointer-events: none; }
.hf-ck-ant { display: flex; flex-direction: column; align-items: center; gap: 1px; opacity: .8; }
.hf-ck-ant img { width: 34px !important; height: 44px !important; filter: grayscale(.35); }
.hf-ck-ant small { font-size: 9px; line-height: 1; }