/* Buzón+ Home, páginas de la app (Pages/Home/Q, Panel, Alta). Va después de buz.css y claro-app.css; usa sus tokens,
   así que funciona en claro y en oscuro. */
.hm{max-width:640px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.hm-panel{max-width:760px}
.hm h1{margin:0}
.hm h2{margin:0 0 8px}
.hm-etq{margin:0;font-size:.8rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--laguna)}
.hm-aviso{margin:0;padding:12px 14px;border-radius:12px;background:var(--e2-f);color:var(--e2-t);font-weight:650}
.hm-caja{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra)}
.hm-acceso{max-width:440px;margin:24px auto}
.hm-oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* La dirección, grande, para el repartidor */
.hm-direccion{display:grid;gap:6px;padding:22px 20px;border-radius:var(--radio);background:var(--laguna-t)}
.hm-direccion h1{font-size:clamp(1.9rem,8vw,2.6rem);line-height:1.1;letter-spacing:-.02em;color:var(--tinta)}
.hm-linea2{margin:0;font-size:1.08rem;font-weight:600;color:var(--tinta)}
.hm-ref{margin:0;color:var(--suave)}
.hm-nombre{margin:4px 0 0;font-size:1.1rem;font-weight:800;color:var(--laguna)}
.hm-direccion .boton{justify-self:start;margin-top:6px}
.hm-instr p{margin:0;font-size:1.05rem}
.hm-privado{text-align:center}

/* Chat */
.hm-mensajes{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px}
.hm-mensajes li{max-width:85%;padding:9px 12px;border-radius:14px;display:grid;gap:2px}
.hm-mensajes li small{font-size:.74rem;opacity:.75}
.hm-mensajes li.visita{justify-self:start;background:var(--relleno);border-bottom-left-radius:4px}
.hm-mensajes li.hogar{justify-self:end;background:var(--laguna);color:#fff;border-bottom-right-radius:4px}
.hm-escribir{display:flex;gap:8px;align-items:center;margin-top:8px}
.hm-escribir input{flex:1;min-width:0}
.hm-escribir button{flex:none}

/* Panel */
.hm-cab{display:grid;gap:4px}
.hm-plan{margin:6px 0 0;justify-self:start;padding:4px 12px;border-radius:999px;background:var(--e2-f);color:var(--e2-t);font-weight:700;font-size:.86rem}
.hm-plan.vencido{background:var(--e0-f);color:var(--e0-t)}
.hm-push h2{margin-bottom:4px}
.hm-fila-bot{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.hm-fila-bot form{margin:0}
.hm-dispositivos{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.hm-dispositivos li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--linea)}
.hm-dispositivos form{margin:0}
.hm-visita{display:grid;gap:4px;border-left:5px solid var(--linea)}
.hm-visita.e-nueva{border-left-color:var(--acento)}
.hm-visita.e-vista{border-left-color:var(--laguna)}
.hm-visita-cab{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.hm-visita-cab b{font-size:1.1rem}
.hm-visita-cab span{color:var(--suave);font-size:.88rem}
.hm-visita-cab em{font-style:normal;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--acento) 16%,transparent);color:var(--acento);font-size:.76rem;font-weight:800}
.hm-rapidas{display:flex;flex-wrap:wrap;gap:6px}
.hm-rapidas form{margin:0}
.hm-visita details{margin:2px 0}
.hm-fotos{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.hm-fotos img{width:120px;height:96px;object-fit:cover;border-radius:10px}

/* Alta */
.hm-alta h2{margin:18px 0 4px;font-size:1.1rem}
.hm-alta h2:first-child{margin-top:0}
.hm-fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.hm-fila{grid-template-columns:1fr}}
.hm-planes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
@media(max-width:520px){.hm-planes{grid-template-columns:1fr}}
.hm-plan-op{display:flex;gap:10px;align-items:flex-start;margin:0;padding:14px;border-radius:14px;border:1.5px solid var(--linea);cursor:pointer;font-weight:500}
.hm-plan-op:has(input:checked){border-color:var(--laguna);background:var(--laguna-t)}
.hm-plan-op input{width:20px;height:20px;min-height:0;margin-top:2px;accent-color:var(--laguna)}
.hm-plan-op span{display:grid;gap:2px}
.hm-plan-op strong{font-size:1.5rem;font-weight:800}
.hm-plan-op strong small{font-size:.8rem;font-weight:600;color:var(--suave)}
.hm-plan-op em{font-style:normal;font-size:.86rem;color:var(--suave)}

/* Pago pendiente o renovación */
.hm-pagar{border:2px solid var(--acento)}
.hm-monto{font-size:1.05rem}
.hm-monto b{font-size:1.3rem}
.hm-datos-pago{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0}
.hm-datos-pago dt{color:var(--suave);font-size:.88rem}
.hm-datos-pago dd{margin:0;font-weight:700;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.hm-inactivo h1{font-size:1.5rem;margin:6px 0}
.hm-pagar.prueba{border-color:var(--laguna)}
.hm-plan-op em+em{margin-top:2px}
.hm-desglose dd{text-align:right}
.hm-legal{margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--relleno);border:1px solid var(--linea)}
.hm-legal p{margin:0 0 8px;font-size:.9rem;color:var(--suave)}
.hm-legal .check{margin:0;font-weight:600;align-items:flex-start}
.hm-legal .check input{margin-top:2px}

/* Registro de visitas (Pages/Home/Registro) */
.hm-periodo{display:flex;flex-wrap:wrap;gap:8px}
.hm-periodo a{padding:7px 14px;border-radius:999px;border:1.5px solid var(--linea);background:var(--tarjeta);color:var(--tinta);text-decoration:none;font-weight:700;font-size:.9rem}
.hm-periodo a[aria-current]{background:var(--pestana-activa);border-color:var(--pestana-activa);color:var(--pestana-activa-t)}
.hm-cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hm-cifras div{padding:14px;border-radius:14px;background:var(--tarjeta);border:1px solid var(--linea)}
.hm-cifras b{display:block;font-size:1.5rem;font-weight:800;color:var(--laguna);line-height:1.15;font-variant-numeric:tabular-nums}
.hm-cifras span{font-size:.84rem;color:var(--suave)}
@media(max-width:640px){.hm-cifras{grid-template-columns:1fr 1fr}}
.hm-barras{display:flex;align-items:flex-end;gap:2px;height:140px;padding-top:8px;border-bottom:1px solid var(--linea)}
.hm-barra{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;outline:none;cursor:default}
.hm-barra i{display:block;width:100%;height:var(--h);min-height:0;border-radius:4px 4px 0 0;background:var(--laguna)}
.hm-barra:hover i,.hm-barra:focus i{background:var(--tinta)}
.hm-barra:hover::after,.hm-barra:focus::after{content:attr(data-tip);position:absolute;bottom:calc(var(--h) + 8px);left:50%;transform:translateX(-50%);z-index:2;white-space:nowrap;padding:6px 10px;border-radius:10px;background:var(--tarjeta);color:var(--tinta);border:1px solid var(--linea);box-shadow:var(--sombra);font-size:.8rem;font-weight:600;pointer-events:none}
.hm-barras .hm-barra:first-child:hover::after,.hm-barras .hm-barra:first-child:focus::after{left:0;transform:none}
.hm-barras .hm-barra:last-child:hover::after,.hm-barras .hm-barra:last-child:focus::after{left:auto;right:0;transform:none}
.hm-barra:focus-visible{outline:2px solid var(--laguna);outline-offset:2px;border-radius:4px}
.hm-horas{height:110px}
.hm-eje{display:flex;justify-content:space-between;margin-top:6px;font-size:.76rem;color:var(--suave);font-variant-numeric:tabular-nums}
.hm-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:start}
.hm-dos .hm-caja{min-width:0}
.hm-hbarras{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hm-hbarras li{display:grid;grid-template-columns:minmax(0,9em) 1fr 2.2em;gap:10px;align-items:center;font-size:.9rem}
.hm-hbarras span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-hbarras div{height:12px}
.hm-hbarras i{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--laguna);min-width:2px}
.hm-hbarras b{text-align:right;font-variant-numeric:tabular-nums}
.hm-tabla-cab{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;margin-bottom:8px}
.hm-tabla-cab h2{margin:0}
.hm-tabla{overflow:auto;max-height:520px}
.hm-tabla table{width:100%;border-collapse:collapse;font-size:.9rem}
.hm-tabla th,.hm-tabla td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--linea);white-space:nowrap}
.hm-tabla th{position:sticky;top:0;background:var(--tarjeta);font-size:.78rem;color:var(--suave)}
.hm-tabla td:nth-child(-n+2),.hm-tabla td:nth-child(4){font-variant-numeric:tabular-nums}
/* Voice notes */
.hm-voz{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 12px}
.hm-voz.grabando{flex:1;background:var(--laguna);border-color:var(--laguna);color:#fff;font-variant-numeric:tabular-nums}
.hm-voz-punto{width:10px;height:10px;border-radius:50%;background:#ff5a4f;animation:hm-latido 1s ease-in-out infinite}
@keyframes hm-latido{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.hm-voz-punto{animation:none}}
.hm-voz-cancelar{min-width:44px;min-height:44px;padding:0;font-size:1.3rem;line-height:1}
.hm-voz-aviso{margin:6px 0 0}
.hm-mensajes li audio{width:min(260px,62vw);height:40px;display:block}
/* Doorbell mode and volume help */
.hm-volumen{margin-top:14px;font-size:.92rem}
.hm-volumen summary{cursor:pointer;font-weight:700;color:var(--laguna)}
.hm-volumen ul{margin:6px 0;padding-left:20px;display:grid;gap:6px}
.hm-volumen p{margin:8px 0}
.hm-timbre{margin-top:16px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--linea);background:var(--relleno)}
.hm-timbre h3{margin:0 0 4px;font-size:1rem}
.hm-timbre.activo{border-color:var(--laguna)}
.hm-timbre.falta-toque [data-hm-timbre-estado]{color:var(--tinta);font-weight:700}
/* Pause and quiet schedule */
.hm-plan.pausa{background:var(--e1-f);color:var(--e1-t)}
.hm-plan.pausa a{color:inherit;text-decoration:none}
.hm-pausa h3{margin:18px 0 4px;font-size:1rem}
.hm-pausa-estado{margin:0 0 10px;font-weight:700;color:var(--e1-t)}
.hm-dias{border:0;margin:6px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.hm-dias label{cursor:pointer}
.hm-dias input{position:absolute;opacity:0;width:1px;height:1px}
.hm-dias span{display:inline-block;min-width:48px;padding:8px 10px;border-radius:999px;border:1.5px solid var(--linea);background:var(--tarjeta);text-align:center;font-weight:700;font-size:.88rem}
.hm-dias input:checked+span{background:var(--laguna);border-color:var(--laguna);color:#fff}
.hm-dias input:focus-visible+span{outline:2px solid var(--laguna);outline-offset:2px}
.hm-pausado h2{margin-bottom:4px}
.hm-pausado p{margin:0}
.hm-dist{font-size:.8rem;color:var(--suave)}
.hm-puerta form{margin:0}
.hm-ubicar-estado{margin:8px 0 0}