/* ════════════════════════════════════════════════════════════════
   HandyTask — ht-base.css v2 · el espacio de la bottom nav (D118)
   Doble mecanismo: padding + spacer físico. Con aire real (+24px).
   ════════════════════════════════════════════════════════════════ */
:root { --ht-bottomspace: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* capa 1: páginas que scrollean por el body */
body { padding-bottom: calc(var(--ht-bottomspace) + 24px) !important; }

/* capa 2: spacer físico al final del flujo — funciona aunque el body
   tenga height/overflow propios o el padding sea absorbido */
body::after { content: ''; display: block; height: calc(var(--ht-bottomspace) + 24px); flex-shrink: 0; }

/* capa 3: contenedores de scroll internos típicos (Bootstrap) */
.container:last-child, .container-fluid:last-child { margin-bottom: calc(var(--ht-bottomspace) + 24px) !important; }

/* overlays: terminan ENCIMA de la nav (los de iframe lo resuelven por dentro) */
.modal:not(:has(iframe)) { bottom: var(--ht-bottomspace) !important; height: auto !important; }
.offcanvas { bottom: var(--ht-bottomspace) !important; }
.modal-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

/* elementos sticky/fixed al fondo declarados por páginas legacy */
.ht-respect-nav { margin-bottom: var(--ht-bottomspace) !important; }

/* HT-TAPAREA: area de accion ampliada en botones de cerrar (target ~64px) */
/* HT-TAPAREA: area de accion ampliada en botones de cerrar */
.btn-close,.modal-nav-btn{position:relative;}
.ht-modal-x::after,.btn-close::after,.modal-nav-btn::after{content:"";position:absolute;inset:-14px;border-radius:50%;}

/* HT-IMGSKEL: shimmer mientras cargan las fotos de perfil */
.handyman-img, .hg-item img, .ht-header-avatar{
  background:linear-gradient(100deg,#e9e9ee 40%,#f7f7fa 50%,#e9e9ee 60%);
  background-size:200% 100%;
  animation:htshimmer 1.1s linear 10;
}
@keyframes htshimmer{ to{ background-position:-200% 0; } }
/* ═══ HT-SELFCHROME — contenido con chrome propio: el padre cede franja y X ═══ */
#fullscreenModal.ht-selfchrome .modal-content::before{ display: none !important; }
#fullscreenModal.ht-selfchrome .modal-body{ padding-top: 0 !important; }
#fullscreenModal.ht-selfchrome .ht-modal-x{ display: none !important; }

/* ════ HT-RRHH-APPBAR — appbar unica de Recursos Humanos (patron visita-sucursal) ════ */
.rrhh-appbar { position:sticky; top:0; z-index:1030; background:linear-gradient(135deg,#E8222A,#C41920); color:#fff; padding:max(12px,env(safe-area-inset-top,0px)) 14px 12px; display:flex; align-items:center; gap:12px; box-shadow:0 4px 14px rgba(196,25,32,.30); }
.rrhh-back { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto; cursor:pointer; -webkit-tap-highlight-color:transparent; padding:0; }
.rrhh-back:active { transform:scale(.9); background:rgba(255,255,255,.28); }
.rrhh-back svg { width:20px; height:20px; }
.rrhh-appbar-tt { min-width:0; }
.rrhh-appbar h1 { font-family:'Barlow Condensed',sans-serif; font-size:21px; font-weight:700; letter-spacing:.4px; margin:0; line-height:1.05; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rrhh-appbar small { font-size:12px; opacity:.85; display:block; }
/* ════ /HT-RRHH-APPBAR ════ */

/* ════ HT-RRHH-APPBAR-ACT — slot de accion + flex del titulo ════ */
.rrhh-appbar-tt { flex:1 1 auto; }
.rrhh-appbar-act { flex:0 0 auto; margin-left:auto; }
.rrhh-appbar-btn { background:#fff; color:#C41920; border:none; border-radius:10px; padding:9px 14px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.rrhh-appbar-btn:active { transform:scale(.96); }
/* ════ /HT-RRHH-APPBAR-ACT ════ */

/* ════ HT-RRHH-PREMIUM — CTA premium + press spring + skeleton (modulo RRHH) ════ */
/* CTA principal: mismo lenguaje que .btn-action-primary de la plataforma */
.rrhh-cta { width:100%; display:flex; align-items:center; justify-content:center; gap:9px; background:linear-gradient(135deg,#E8222A,#C41920); color:#fff; border:none; border-radius:14px; padding:15px 18px; font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; box-shadow:0 8px 24px rgba(232,34,42,.35); position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; transition:transform .14s cubic-bezier(.34,1.56,.64,1), filter .2s ease; }
.rrhh-cta::after { content:''; position:absolute; top:0; left:0; right:0; height:45%; background:linear-gradient(rgba(255,255,255,.18), transparent); pointer-events:none; }
.rrhh-cta:active { transform:scale(.975); filter:brightness(.97); }
.rrhh-cta svg { width:22px; height:22px; flex:0 0 auto; }

/* press spring para los interactivos del modulo (el iframe NO hereda el del shell) */
.tile, .ecard, .srow, .rrhh-back, .rrhh-appbar-btn { transition:transform .14s cubic-bezier(.34,1.56,.64,1), filter .15s ease, box-shadow .15s ease; }
.srow:active { background:#f6f7f9; }

/* skeleton shimmer (mismo lenguaje que el ht-skel del shell) */
@keyframes rrhhShimmer { 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }
.rrhh-sk { background:linear-gradient(90deg,#eef0f2 25%,#e2e5e9 37%,#eef0f2 63%); background-size:400% 100%; animation:rrhhShimmer 1.25s ease infinite; border-radius:12px; }
.rrhh-sk-card { height:78px; border-radius:16px; margin-bottom:10px; background:linear-gradient(90deg,#eef0f2 25%,#e2e5e9 37%,#eef0f2 63%); background-size:400% 100%; animation:rrhhShimmer 1.25s ease infinite; }
@media (prefers-reduced-motion: reduce){ .rrhh-cta,.tile,.ecard,.srow,.rrhh-back,.rrhh-appbar-btn{ transition:none !important; } .rrhh-sk,.rrhh-sk-card{ animation:none !important; } }
/* ════ /HT-RRHH-PREMIUM ════ */

/* HT-RRHH-BACKPRESS — press del back y botones de la appbar */
.rrhh-back:active { transform:scale(.9); filter:brightness(.95); }
.rrhh-appbar-btn:active { transform:scale(.92); }
/* /HT-RRHH-BACKPRESS */

/* HT-RRHH-ENTRANCE — aparicion suave de cards en listas RRHH (server-side y post-render) */
#list > .card, #results > .ecard { animation:fadeInUp .34s cubic-bezier(.4,0,.2,1) both; }
#list > .card:nth-child(2), #results > .ecard:nth-child(2) { animation-delay:.05s; }
#list > .card:nth-child(3), #results > .ecard:nth-child(3) { animation-delay:.10s; }
#list > .card:nth-child(n+4), #results > .ecard:nth-child(n+4) { animation-delay:.14s; }
@media (prefers-reduced-motion:reduce){ #list > .card, #results > .ecard { animation:none !important; } }
/* /HT-RRHH-ENTRANCE */

/* HT-RRHH-PRESS2 — press tactil notable en botones del header (back + acciones) */
.rrhh-back { transition: transform .14s cubic-bezier(.34,1.56,.64,1), background .12s ease, box-shadow .15s ease; }
.rrhh-back:active { transform:scale(.86); background:rgba(255,255,255,.45); box-shadow:0 0 0 4px rgba(255,255,255,.12); filter:none; }
.rrhh-appbar-btn:active { transform:scale(.91); filter:brightness(.90); }
/* /HT-RRHH-PRESS2 */

/* HT-RRHH-HAPTIC — press JS-driven (corre completo aunque el tap sea corto) */
@keyframes rrhhPress { 0%{transform:scale(1);} 38%{transform:scale(.82);} 100%{transform:scale(1);} }
.rrhh-back.rrhh-pressing, .rrhh-appbar-btn.rrhh-pressing, .rrhh-cta.rrhh-pressing { animation:rrhhPress .2s ease; }
@media (prefers-reduced-motion:reduce){ .rrhh-pressing{ animation:none !important; } }