/* 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; }