/* HagoElTrabajo v1775 — brand layer, loaded after styles.css on every page.
   Font: Archivo (wide and heavy for headings, normal width for reading).
   Logo: roof + yellow check mark. Colors are only added here (--hx-*), the existing
   --het-* color variables in styles.css are left unchanged. */
:root{
  --het-font:'Archivo',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --hx-green:#0C4A7D;
  --hx-forest:#093960;
  --hx-yellow:#F5B800;
  --hx-ink:#131C24;
  --hx-muted:#3F4850;
  --hx-bg:#F4F7F3;
  --hx-line:#DDE1E5;
  --hx-mint:#E6EDF2;
}
body{font-family:var(--het-font)}
button,input,select,textarea{font-family:inherit}
h1,h2,h3{font-stretch:110%;letter-spacing:-.012em}

/* Logo, same on every page */
.het-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--hx-ink)}
.het-brand .het-mark{width:38px;height:38px;flex:none;display:block}
.het-brand .het-word{font-weight:800;font-stretch:112%;font-size:20px;letter-spacing:-.01em;line-height:1;color:var(--hx-ink);white-space:nowrap}
@media (max-width:420px){
  .het-brand .het-mark{width:32px;height:32px}
  .het-brand .het-word{font-size:17px}
}

/* Line icons */
.het-ico{width:1em;height:1em;display:block}

/* Account button: line icon; on wider screens a pill with icon and label side by side, so the label is never cut off */
.account-avatar-icon svg{display:block;width:20px;height:20px}
@media (min-width:761px){
  .account-menu-wrap .account-avatar{width:auto!important;min-width:0!important;height:44px!important;padding:0 16px 0 12px!important;flex-direction:row!important;gap:8px!important;border-radius:999px!important;overflow:visible!important}
  .account-avatar-label{font-size:.88rem!important;width:auto!important}
}

/* Area picker: extra service areas chosen from the official geography (registration and provider panel) */
.het-area-field{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--hx-line);border-radius:14px;background:#FBFCFB}
.het-area-field .hap-title{font-weight:700}
.het-area-field .hap-title small{font-weight:500;color:var(--hx-muted)}
.het-area-picker .hap-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:end}
.het-area-picker .hap-row label{display:flex;flex-direction:column;gap:4px;font-size:14px;margin:0}
.het-area-picker .hap-add{min-height:44px;padding:0 16px;border:1.5px solid var(--hx-green);border-radius:10px;background:#fff;color:var(--hx-green);font-weight:700;cursor:pointer;white-space:nowrap}
.het-area-picker .hap-add:hover{background:var(--hx-mint)}
.het-area-picker .hap-hint{margin:6px 0 0;font-size:13px;color:var(--hx-muted)}
.het-area-picker .hap-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.het-area-picker .hap-list:empty{display:none}
.het-area-picker .hap-list li{display:inline-flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border:1px solid var(--hx-line);border-radius:999px;background:var(--hx-mint);font-size:14px}
.het-area-picker .hap-list button{min-height:32px;padding:0 10px;border:0;border-radius:999px;background:#fff;color:#8A2D1B;font-weight:700;font-size:13px;cursor:pointer}
.het-area-picker .hap-msg{margin:6px 0 0;font-size:14px;color:#8A2D1B}
.het-area-picker .hap-msg.hap-ok{color:var(--hx-forest)}
.het-area-picker .hap-msg:empty{display:none}
.het-area-picker .hap-legacy{margin-top:8px;padding:10px 12px;border:1px solid #F1DE9C;border-radius:10px;background:#FFF7DB;color:#4A3F17;font-size:14px}
@media (max-width:620px){.het-area-picker .hap-row{grid-template-columns:1fr}.het-area-picker .hap-add{width:100%}}

/* Links styled as brand elements keep their own color after being visited */
.het-brand:visited,.het-brand:visited .het-word{color:var(--hx-ink)}

/* v1784: "Mis solicitudes" in the provider panel */
.req-panel h2{margin-bottom:6px}
.req-stats{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.req-stats:empty{display:none}
.req-alert{padding:12px 16px;border-radius:12px;border:1px solid #F1DE9C;background:#FFF7DB;color:#4A3F17;font-size:15px;line-height:1.45}
.req-alert.is-late{border-color:#EBB9A9;background:#FDEEE9;color:#7A2814}
.req-alert.is-ok{border-color:#BECFDD;background:var(--hx-mint);color:var(--hx-forest)}
.req-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.req-stat{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--hx-line);border-radius:14px;background:#fff}
.req-stat span{font-size:13px;font-weight:600;color:var(--hx-muted)}
.req-stat strong{font-size:28px;line-height:1.1;font-weight:800;font-stretch:112%;color:var(--hx-ink)}
.req-stat small{font-size:12px;color:var(--hx-muted)}
.req-tip{margin:0;font-size:14px;color:var(--hx-muted)}
.req-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px;border-bottom:1px solid var(--hx-line)}
.req-tabs:empty{display:none}
.req-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--hx-muted);font-weight:700;font-size:15px;cursor:pointer;margin-bottom:-1px}
.req-tab.is-active{color:var(--hx-forest);border-bottom-color:var(--hx-green)}
.req-tab:focus-visible{outline:3px solid var(--hx-yellow);outline-offset:2px}
.req-count{min-width:24px;padding:2px 8px;border-radius:999px;background:#EEF2EF;color:var(--hx-ink);font-size:13px;text-align:center}
.req-tab.is-active .req-count{background:var(--hx-green);color:#fff}
.req-list{display:flex;flex-direction:column;gap:12px}
.req-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--hx-line);border-left:4px solid var(--hx-line);border-radius:14px;background:#fff}
.req-card.req-pending_provider{border-left-color:var(--hx-yellow)}
.req-card.req-provider_interested,.req-card.req-needs_information{border-left-color:var(--hx-green)}
.req-card.req-hired{border-left-color:var(--hx-forest)}
.req-card.req-just-updated{box-shadow:0 0 0 3px rgba(12,74,125,.25)}
.req-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.req-when{font-size:13px;color:var(--hx-muted)}
.req-card h3{margin:2px 0 0;font-size:19px}
.req-service{margin:0;color:var(--hx-ink)}
.req-repeat{font-size:13px;color:var(--hx-forest);font-weight:700}
.req-message{margin:4px 0;padding:10px 14px;border-left:3px solid var(--hx-line);background:#F7F9F7;border-radius:0 10px 10px 0;color:var(--hx-ink);white-space:pre-line}
.req-next{margin:4px 0 0;font-size:14px;color:var(--hx-muted)}
.req-card .request-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* The old .provider-response rule gave every answer button a pale background, which hid the white text
   of "Me interesa". These buttons set their own colors. */
.req-card .req-btn.provider-response{min-height:44px;padding:0 16px;border-radius:10px;border:1.5px solid var(--hx-green);background:#fff;color:var(--hx-green);font-weight:700;font-size:15px;cursor:pointer}
.req-card .req-btn.req-btn-yes.provider-response{background:var(--hx-green);border-color:var(--hx-green);color:#fff}
.req-card .req-btn.req-btn-yes.provider-response:hover{background:var(--hx-forest);color:#fff}
.req-card .req-btn.req-btn-no.provider-response{border-color:#C9CFD3;color:#5A2B1F}
.req-card .req-btn.provider-response:disabled{opacity:.6;cursor:wait}
.req-card .req-btn:focus-visible{outline:3px solid var(--hx-yellow);outline-offset:2px}
@media (max-width:760px){.req-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.req-card .request-actions{flex-direction:column}.req-card .req-btn.provider-response{width:100%}}
.req-tab,.req-card .req-btn.provider-response{box-shadow:none}

/* v1785: demand in your area + profile score */
.demand-card{padding:16px 18px;border:1px solid var(--hx-line);border-radius:14px;background:#fff;margin-top:12px}
.demand-card h3{margin:0 0 10px;font-size:18px}
.demand-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.demand-figures>div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:#F6F9F7}
.demand-figures strong{font-size:28px;line-height:1.1;font-weight:800;font-stretch:112%;color:var(--hx-ink)}
.demand-figures span{font-size:13px;color:var(--hx-muted)}
.demand-figures small{font-size:12px;font-weight:700;color:var(--hx-muted)}
.demand-figures small.is-up{color:var(--hx-forest)}
.demand-figures small.is-down{color:#8A2D1B}
.demand-line{margin:10px 0 0;font-size:14px}
.demand-tip{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:#FFF7DB;border:1px solid #F1DE9C;color:#4A3F17;font-size:14px}
.score-head{display:flex;align-items:center;gap:14px;margin:8px 0 14px}
.score-value{font-size:32px;font-weight:800;font-stretch:112%;color:var(--hx-ink);min-width:80px}
.score-bar{flex:1;height:12px;border-radius:999px;background:#E6E9EC;overflow:hidden}
.score-bar span{display:block;height:100%;border-radius:999px;background:var(--hx-green)}
.score-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.score-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.score-list li small{display:block;color:var(--hx-muted);font-weight:400;margin-top:2px}
.score-list li.is-done strong{color:var(--hx-muted);font-weight:600}
.score-mark{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:#EEF2EF;color:var(--hx-muted)}
.score-list li.is-done .score-mark{background:var(--hx-green);color:#fff}
@media (max-width:760px){.demand-figures,.score-list{grid-template-columns:1fr}}

/* v1787 — Mensajes unificados (ui.js asigna data-tone). Rojo = error, verde = éxito, neutro = en proceso/informativo. */
.het-msg:empty{display:none!important}
.het-msg[data-tone]{display:block;margin:4px 0 0!important;padding:10px 12px!important;border-radius:10px!important;border:1px solid transparent!important;font-size:14px!important;font-weight:650!important;line-height:1.4!important;text-align:left}
.het-msg[data-tone="error"]{background:#fff1f0!important;border-color:#f4c7c3!important;color:#b42318!important}
.het-msg[data-tone="success"]{background:#EAF1F7!important;border-color:#BED3E4!important;color:#05365E!important}
.het-msg[data-tone="info"]{background:#f3f6f4!important;border-color:#DFE4E8!important;color:#3D454B!important}
.het-msg[data-tone="error"]::before{content:"⚠ ";font-weight:800}

/* v1787 — Acceso de clientes compacto: formulario, botón y mensaje visibles sin desplazarse. */
.het-compact-auth{padding:22px 24px!important;margin-top:0!important}
.het-compact-auth>h1{font-size:clamp(24px,3vw,32px)!important;line-height:1.15!important;margin:4px 0 6px!important}
.het-compact-auth>p{margin:0!important;font-size:14px!important;line-height:1.45!important}
.het-compact-auth .customer-auth-grid{margin-top:16px!important;gap:18px!important;align-items:start}
.het-compact-auth .customer-auth-card{padding:18px 20px!important}
.het-compact-auth .customer-auth-card h2{margin:0 0 4px!important;font-size:20px!important}
.het-compact-auth .vendor-login-form{gap:10px!important;margin-top:12px!important}
.het-compact-auth .vendor-login-form label{gap:5px!important}
.het-compact-auth .vendor-login-form input{height:44px!important;min-height:44px!important;margin-top:0!important}
.het-compact-auth .phone-otp-test{gap:6px!important;margin-top:4px}
.het-compact-auth .phone-otp-test small{font-size:12px;line-height:1.4}
.het-compact-auth .auth-method-row{margin:2px 0!important;font-size:14px!important}
.customer-dashboard:has(#customerLogin:not([hidden])){padding-top:18px!important}
@media (max-width:720px){.het-compact-auth{padding:16px!important}.het-compact-auth .customer-auth-card{padding:16px!important}}
.het-compact-auth .marketing-consent{display:flex!important;align-items:flex-start;gap:10px!important;font-weight:500!important;font-size:14px;line-height:1.4}
.het-compact-auth .marketing-consent input[type="checkbox"]{width:20px!important;height:20px!important;min-height:0!important;flex:0 0 20px;margin:1px 0 0!important;padding:0!important;accent-color:#05477D}

/* v1789 — Nombre de la empresa en su propia línea bajo «Patrocinado». */
.commercial-ad-company{display:block;margin:2px 0 4px;font-size:1rem;font-weight:800;line-height:1.25;color:#05365E}
.commercial-all-list .commercial-ad-company{margin-bottom:2px}
.commercial-ad-place{margin:4px 0 0;font-size:.85rem;color:#616970}
.commercial-ad-copy p{margin:4px 0 0}

/* v1791 — Tarjeta del banner completa como enlace al sitio del anunciante. */
a.commercial-ad-link{color:inherit;text-decoration:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}
a.commercial-ad-link:hover{border-color:#05477D;box-shadow:0 8px 24px rgba(5,71,125,.14)}
a.commercial-ad-link:hover .commercial-ad-cta{text-decoration:underline}
a.commercial-ad-link:focus-visible{outline:3px solid #05477D;outline-offset:3px}
a.commercial-ad-link .commercial-ad-cta{pointer-events:none}
@media (prefers-reduced-motion:reduce){a.commercial-ad-link{transition:none}}

/* v1792 — Descripción del anunciante limitada a 2 líneas (texto completo al pasar el cursor). */
.commercial-ad-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis}

/* v1797 — Columna derecha del perfil: tienda recomendada y ofertas */
.profile-page.has-sidebar{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,780px) minmax(280px,340px);gap:24px;justify-content:center;align-items:start}
.profile-page.has-sidebar .profile-page-card{margin:0;max-width:none}
.profile-page.has-sidebar .profile-report{grid-column:1}
.profile-sidebar{position:static;display:flex;flex-direction:column;gap:16px}
.sponsor-card,.sidebar-offers{background:#fff;border:1px solid #DFE4E8;border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(20,28,35,.06)}
.sponsor-card{border-color:#BED3E4;background:linear-gradient(180deg,#F2F6FA 0,#fff 120px)}
.sponsor-eyebrow{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#05477D;margin-bottom:12px}
.sponsor-head{display:flex;gap:12px;align-items:center}
.sponsor-head img{width:56px;height:56px;border-radius:12px;object-fit:cover;border:1px solid #E1E5E8;flex:none}
.sponsor-head h3{margin:0;font-size:18px;line-height:1.2}
.sponsor-head small{color:#5D656B}
.sponsor-desc{margin:12px 0 0;font-size:14px;line-height:1.45;color:#3D454B;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.sponsor-badges{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.sponsor-badges li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650;color:#141C23}
.sponsor-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.sponsor-actions a{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px;font-weight:700;text-decoration:none;text-align:center}
.sponsor-note{display:block;margin-top:10px;font-size:11px;color:#7a8781;text-align:right}
.sidebar-offers h3{margin:0 0 10px;font-size:16px}
.sidebar-offers ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sidebar-offers li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#f6f8f7}
.sidebar-offers li strong{display:block;font-size:14px}
.sidebar-offers li span{display:block;font-size:13px;color:#5D656B}
.sidebar-discount{flex:none;padding:4px 8px;border-radius:8px;background:#fff6e5;color:#7a4a05;font-size:13px}
.sidebar-offers-note{margin:12px 0 8px;font-size:13px;color:#3D454B}
.sidebar-offers-go{width:100%;min-height:42px}
@media (max-width:1060px){.profile-page.has-sidebar{grid-template-columns:minmax(0,780px)}.profile-sidebar{position:static}}
@media (min-width:1061px) and (min-height:820px){.profile-sidebar{position:sticky;top:96px}}

/* v1800 — Quiénes somos: encabezados más moderados */
.info-page .info-hero h1{font-size:clamp(30px,3.6vw,46px)!important;line-height:1.08!important;letter-spacing:-.03em!important;margin:8px 0 14px!important}
.info-page .about-values h2{font-size:clamp(22px,2.2vw,30px)!important}
.info-page .audience-card h2{font-size:clamp(20px,1.9vw,26px)!important}
.info-page .info-cta h2{font-size:clamp(19px,1.8vw,24px)!important}

/* v1800 — «Ofrecemos servicios adicionales»: al pasar el cursor se resaltan los servicios de la tienda */
.sponsor-card{transition:border-color .2s,box-shadow .2s}
.sponsor-badges li{padding:6px 10px;border-radius:10px;border:1px solid transparent;transition:background .25s,border-color .25s,transform .25s,color .25s;transition-delay:calc(var(--i,0)*40ms)}
.sponsor-card:hover,.sponsor-card:focus-within{border-color:#e0b25a;box-shadow:0 14px 34px rgba(168,101,10,.16)}
.sponsor-card:hover .sponsor-badges li,.sponsor-card:focus-within .sponsor-badges li{background:#fff4dc;border-color:#f1d29a;color:#5f3b03;transform:translateX(4px)}
.sponsor-card:focus-visible{outline:3px solid #05477D;outline-offset:3px}
@media (hover:none){.sponsor-badges li{background:#fff8ea;border-color:#f6e2b8}}
@media (prefers-reduced-motion:reduce){.sponsor-card,.sponsor-badges li{transition:none}.sponsor-card:hover .sponsor-badges li{transform:none}}

/* v1801 — Tarjeta de servicios adicionales más compacta (servicios en etiquetas en línea) */
.sponsor-card{padding:16px!important}
.sponsor-eyebrow{margin-bottom:10px!important}
.sponsor-head img{width:44px!important;height:44px!important;border-radius:10px!important}
.sponsor-head h3{font-size:17px!important}
.sponsor-desc{margin-top:8px!important;font-size:13.5px!important;-webkit-line-clamp:2!important;line-clamp:2!important}
.sponsor-badges{flex-direction:row!important;flex-wrap:wrap;gap:6px!important;margin-top:10px!important}
.sponsor-badges li{padding:4px 9px!important;border-radius:999px!important;font-size:12.5px!important;font-weight:650!important;line-height:1.3;background:#f4f7f5;border-color:#E2E6EA!important;gap:5px!important}
.sponsor-card:hover .sponsor-badges li,.sponsor-card:focus-within .sponsor-badges li{transform:translateY(-1px)!important;background:#fff4dc!important;border-color:#f1d29a!important}
.sponsor-actions{flex-direction:row!important;margin-top:12px!important}
.sponsor-actions a{flex:1 1 0;min-height:40px!important;font-size:14px;padding:0 10px}
@media (hover:none){.sponsor-badges li{background:#fff8ea!important;border-color:#f6e2b8!important}}

/* v1801 — Cupón con diseño de boleto */
.coupon-existing{margin:12px 0 6px;font-weight:700;color:#3D454B}
.coupon-ticket{--c-ink:#141C23;--c-green:#05477D;position:relative;display:grid;grid-template-columns:1fr minmax(150px,190px);margin-top:14px;border-radius:16px;background:#fff;box-shadow:0 12px 32px rgba(20,28,35,.12);border:1px solid #DFE4E8;overflow:hidden;color:var(--c-ink)}
.coupon-main{padding:18px 20px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(135deg,#F3F7FA 0,#fff 55%)}
.coupon-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.coupon-brand{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-green)}
.coupon-for{font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:999px;background:#E7EEF4;color:#05365E}
.coupon-store{display:flex;gap:12px;align-items:center}
.coupon-store img{width:46px;height:46px;border-radius:10px;object-fit:cover;border:1px solid #E1E5E8;flex:none}
.coupon-store strong{display:block;font-size:17px;line-height:1.2}
.coupon-store span{display:block;font-size:14px;color:#3D454B;margin-top:2px}
.coupon-value{display:flex;align-items:baseline;gap:8px}
.coupon-value b{font-size:40px;line-height:1;letter-spacing:-.03em;color:var(--c-green);font-variant-numeric:tabular-nums}
.coupon-value span{font-size:15px;font-weight:700;color:#3D454B}
.coupon-extras>span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#7a4a05;margin-bottom:6px}
.coupon-extras ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.coupon-extras li{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:#fff6e5;border:1px solid #f1d29a;font-size:12.5px;font-weight:650;color:#5f3b03}
.coupon-extras li i{font-style:normal}
.coupon-stub{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:18px 14px;text-align:center;background:#093961;color:#fff;border-left:2px dashed rgba(255,255,255,.55)}
.coupon-stub::before,.coupon-stub::after{content:"";position:absolute;left:-11px;width:20px;height:20px;border-radius:50%;background:#f5f7f6}
.coupon-stub::before{top:-10px}.coupon-stub::after{bottom:-10px}
.coupon-stub span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.coupon-code{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:20px;letter-spacing:.08em;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.14);margin-bottom:8px;word-break:break-all}
.coupon-stub em{font-style:normal;font-weight:700;font-size:14px}
.coupon-terms{grid-column:1/-1;margin:0;padding:10px 20px;font-size:12px;color:#5D656B;border-top:1px solid #edf2ef;background:#fbfcfb}
.coupon-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.coupon-actions>*{min-height:42px}
@media (max-width:560px){.coupon-ticket{grid-template-columns:1fr}.coupon-stub{border-left:0;border-top:2px dashed rgba(255,255,255,.55)}.coupon-stub::before,.coupon-stub::after{display:none}}
@media print{body *{visibility:hidden}.coupon-ticket,.coupon-ticket *{visibility:visible}.coupon-ticket{position:absolute;left:0;top:0;width:100%;box-shadow:none}}
@media (min-width:561px){.coupon-ticket{grid-template-columns:1fr minmax(180px,220px)!important}}
.coupon-code{font-size:16px!important;letter-spacing:.05em!important;white-space:nowrap;word-break:normal!important}
.coupon-stub::before,.coupon-stub::after{display:none!important}
.coupon-stub em{white-space:nowrap}
.coupon-for{white-space:nowrap;flex:none}
@media (max-width:560px){.coupon-top{flex-wrap:wrap}.coupon-main{padding:16px}.coupon-value b{font-size:34px}}

/* ===================== v1802 — Revisión móvil (Panamá: celular primero) ===================== */
/* 1. iPhone hace zoom al escribir si el texto del campo es menor a 16px. */
@media (max-width:900px){input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}}
/* 2. Textos mínimos legibles: etiquetas pequeñas y filtros nunca por debajo de 12px. */
.eyebrow,.sponsored-badge,.sponsor-eyebrow,.coupon-brand{font-size:max(12px,.72rem)!important}
.filterpill{font-size:13px!important;min-height:40px;padding:8px 14px!important}
footer .footer-links a,footer a{display:inline-block;padding:8px 4px;min-height:36px}
.back-link{display:inline-flex;align-items:center;min-height:40px}
.text-link{display:inline-flex;align-items:center;min-height:40px}
/* 4. Encabezado igual en todas las páginas: en celular solo logo + cuenta (la navegación pasa a la barra inferior) */
@media (max-width:760px){header nav>a.nav-about,header nav>a.nav-advertise,header nav>a.top-nav-link{display:none!important}header{min-height:62px}}
/* 5. Barra de navegación inferior (estilo app) */
.het-bottom-nav{display:none}
@media (max-width:760px){
 .het-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid #DFE4E8;padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(20,28,35,.06)}
 .het-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:12px;color:#5D656B;text-decoration:none;font-size:12px;font-weight:700}
 .het-bottom-nav a svg{width:22px;height:22px}
 .het-bottom-nav a[aria-current="page"]{color:#05477D;background:#EEF3F7}
 body.has-bottom-nav{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
 body.has-bottom-nav .pwa-install,body.has-bottom-nav [class*="install-banner"]{bottom:calc(72px + env(safe-area-inset-bottom,0px))!important}
}
/* 6. Banner de anunciantes en celular: carrusel horizontal (una tarjeta a la vez, se desliza con el dedo) */
@media (max-width:760px){
 .commercial-ad-grid{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important;padding:2px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .commercial-ad-grid::-webkit-scrollbar{display:none}
 .commercial-ad-grid>.commercial-ad{flex:0 0 86%;scroll-snap-align:start;min-width:0}
 .commercial-rotation-controls{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;justify-content:space-between!important}
 .commercial-rotation-controls span{font-size:13px;flex:1 1 auto;min-width:0}
 .commercial-rotation-controls button{min-height:40px;padding:0 12px;font-size:13px;white-space:nowrap}
 .commercial-rotation-controls #commercialPrev,.commercial-rotation-controls #commercialNext{display:none}
}
/* 7. Vista Lista en celular: el sello «Verificado» ya no se corta y la tarjeta usa el ancho completo */

/* 8. Botón «Ver los N servicios» con márgenes iguales */
@media (max-width:760px){#categoriesToggle{display:block;margin:12px auto 0!important;width:calc(100% - 32px)!important;max-width:420px;min-height:48px}}
/* 9. Perfil en celular: menos relleno doble, botón de contacto a lo ancho */
@media (max-width:760px){
 .profile-page{padding-left:10px!important;padding-right:10px!important}
 .profile-page-card{padding:18px 16px!important;border-radius:18px}
 #contactGate .primary,#contactGate button.primary{width:100%;min-height:48px}
}
/* 10. Barra fija «Solicitar contacto» en el perfil (celular) */
.het-sticky-cta{display:none}
@media (max-width:760px){
 .het-sticky-cta{position:fixed;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:59;display:flex;gap:8px;padding:8px;border-radius:16px;background:#fff;border:1px solid #DFE4E8;box-shadow:0 10px 28px rgba(20,28,35,.18);transition:transform .2s,opacity .2s}
 .het-sticky-cta[hidden]{display:none}
 .het-sticky-cta.is-away{transform:translateY(140%);opacity:0;pointer-events:none}
 .het-sticky-cta button{flex:1;min-height:48px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){.het-sticky-cta{transition:none}}
.optional-tag{font-weight:500;color:#6B737A;font-size:.9em}
.profile-report .report-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:#5D656B;font-size:14px}
.profile-button,a.profile-button{min-height:44px!important;display:inline-flex!important;align-items:center;justify-content:center}
@media (max-width:760px){.commercial-ad-grid{align-items:flex-start!important}}

/* v1803 — Filtro de tipo de proveedor junto a «Servicios más buscados» (filtra las categorías de abajo) */
.hx-head-with-filter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.hx-head-with-filter h2{margin:0}
.hx-type-filter.l2-type-filter-row{max-width:none!important;margin:0!important;padding:0!important;background:transparent!important;position:static!important}
.hx-type-filter .filterpill{min-height:40px}
@media (max-width:760px){
 .hx-head-with-filter{flex-direction:column;align-items:stretch;gap:10px}
 .hx-type-filter .l2-type-filter{display:grid!important;grid-template-columns:.7fr 1fr 1.1fr;gap:6px;min-width:0!important;padding:4px;border-radius:14px;background:#f1f5f3;margin-bottom:12px!important}
 .hx-type-filter .filterpill{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:4px 6px!important;border-radius:10px!important;border:0!important;background:transparent!important;font-size:12.5px!important;line-height:1.2;white-space:normal;transform:none!important;box-shadow:none!important}
 .hx-type-filter .filterpill.active{background:#fff!important;color:#054375;box-shadow:0 2px 8px rgba(20,28,35,.1)!important}
}

.hx-head-with-filter{margin-bottom:14px}

/* v1804: keyboard accessibility and reduced-motion support; scoped, additive. */
.hx-type-filter .filterpill:focus-visible,.hx-cats-toggle:focus-visible,.hx-go:focus-visible,.hx-voice:focus-visible,.hx-btn:focus-visible{outline:3px solid #f5b800!important;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.hx-type-filter .filterpill,.hx-cats-toggle,.hx-go,.hx-voice,.hx-btn{transition:none!important;animation:none!important}}

/* v1825: botón y enlace del Manual del proveedor */
.het-manual-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.het-manual-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.het-manual-tip{margin:8px 0 0;font-size:.9rem;color:#4B535A}.het-manual-link{display:inline-block;margin-top:8px;font-weight:700;color:#0C4A7D;text-decoration:underline}

/* v1858: logo HagoElTrabajo con KaizanTech. Español / inglés según el idioma elegido (sin parpadeo: i18n.js fija
   <html lang> antes de que se pinte la página). Colores tomados del logo; el celeste del texto es un poco más
   profundo que el del dibujo para que se lea bien sobre blanco. */
.het-brand{gap:8px}
.het-brand .het-logo-mark{width:auto;height:44px}
.het-brand .het-word{display:flex;flex-direction:column;gap:3px;font-stretch:100%;letter-spacing:0}
.het-brand .het-name{font-size:19px;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.01em;color:#044291}
.het-brand .het-name b,.het-brand .het-k b{font-weight:inherit;color:#0B86BE}
.het-brand .het-tag{font-size:10.5px;font-weight:600;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#5C646B}
.het-brand .het-k{font-weight:800;color:#044291;letter-spacing:.06em}
html[lang^="en"] .het-brand .het-es,html:not([lang^="en"]) .het-brand .het-en{display:none}
@media (max-width:1240px){.het-brand .het-logo-mark{height:40px}.het-brand .het-name{font-size:17px}}
@media (max-width:420px){
  .het-brand{gap:6px}
  .het-brand .het-logo-mark{height:32px}
  .het-brand .het-name{font-size:14.5px}
  .het-brand .het-tag{font-size:9px;letter-spacing:.1em}
}
@media (min-width:761px) and (max-width:860px){.het-brand .het-logo-mark{height:34px}.het-brand .het-name{font-size:15px}.het-brand .het-tag{font-size:9px}}
@media (max-width:370px){.het-brand .het-logo-mark{height:28px}.het-brand .het-name{font-size:13px;letter-spacing:0}.het-brand{gap:5px}}
@media (max-width:345px){.het-brand .het-logo-mark{height:24px}.het-brand .het-name{font-size:12px}.het-brand{gap:4px}}

/* v1864: logo HagoElTrabajo 24/7 en Azul Océano. El logo es un SVG con el texto convertido en trazos,
   así se ve idéntico en cualquier teléfono sin depender de la fuente. En teléfonos (hasta 480 px) y en tabletas de
   761 a 900 px, donde el menú ocupa casi toda la barra) se usa la versión sin el sello 24/7.
   El nombre no se traduce: es el mismo en español e inglés. */
.het-brand:has(.het24){min-width:0;flex-shrink:0;text-decoration:none;gap:0}
.het24{display:inline-flex;align-items:center;min-width:0;line-height:0}
.het24 picture{display:block}
/* v1868: logo Uno 7/24. Una versión por idioma (español, inglés, portugués): i18n.js cambia la imagen al cambiar
   de idioma. El logo lleva el ícono del reloj, «Uno 7/24» y debajo el lema traducido. */
.het24-logo{display:block;height:46px;width:auto;max-width:none}
@media (min-width:761px) and (max-width:1240px){.het24-logo{height:42px}}
@media (max-width:760px){.het24-logo{height:42px}}
@media (max-width:400px){.het24-logo{height:38px}}
@media (max-width:345px){.het24-logo{height:34px}}
.het24-footer-logo{display:block;height:44px;width:auto;margin-bottom:10px}

/* v1866: en escritorio las opciones del menú no se parten en dos líneas («Buscar / servicios»). */
@media (min-width:761px){header nav>a,header nav>button{white-space:nowrap}}
/* Páginas internas: «Quiénes somos» y «Buscar servicios» siguen en el pie y en el logo; en pantallas medianas se ocultan
   del menú superior para que todo quepa en una línea sin salirse de la pantalla. */
@media (min-width:761px) and (max-width:1480px){header nav>a.nav-about{display:none}}
@media (min-width:761px) and (max-width:1366px){header nav>a[href$="#buscar"]{display:none}}

/* v1873: textos de formularios y botones más limpios.
   Los campos heredaban de su etiqueta 13 px en negrita extra (800): el texto escrito se veía pesado y pequeño.
   Ahora: lo escrito en 16 px normal (16 px evita que el iPhone haga zoom), etiquetas en 14 px seminegrita. */
.formgrid label{font-size:14px;font-weight:700}
.formgrid :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){font-size:16px;font-weight:500;color:#153453}
.formgrid :is(input,textarea)::placeholder{font-weight:400;color:#7B8FA3}
.formgrid .optional-tag{font-weight:500}
/* Botones: menos pesados (antes 800) */
:is(button,a).primary,:is(button,a).secondary,.button-link{font-weight:700}
/* v1873: en el teléfono, con sesión iniciada, «Cerrar sesión» + cuenta + banderas no cabían y las banderas bajaban a
   otra línea. «Cerrar sesión» ya está en el menú de la cuenta: en el teléfono no se repite en la barra. */
@media (max-width:760px){header nav:has(#accountMenuWrap) #logoutBtn{display:none!important}}
/* v1873: «Otras áreas que atiendes»: con el selector de país eran 4 listas en 3 columnas y el corregimiento quedaba
   solo en otra fila. Ahora 2 × 2 (una columna en el teléfono). */
.het-area-picker .hap-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.het-area-picker .hap-row .hap-add{grid-column:1/-1;justify-self:start}
@media (max-width:560px){.het-area-picker .hap-row{grid-template-columns:1fr!important}}
.het-multi select.het-multi-add{font-weight:600!important}

/* v1886: tarjeta de solicitud del proveedor — más descriptiva y con letra más pequeña */
.provider-request-card{padding:14px 16px!important}
.provider-request-card .req-card-head{font-size:13px}
.provider-request-card .req-card-head .status{font-size:13px;font-weight:700}
.provider-request-card .req-when{font-size:12px}
.provider-request-card h3.req-who{font-size:17px;margin:6px 0 8px;line-height:1.25}
.req-facts{margin:0 0 10px;display:grid;gap:6px}
.req-facts>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:baseline}
.req-facts dt{font-size:12px;font-weight:700;color:#526C85;text-transform:uppercase;letter-spacing:.03em}
.req-facts dd{margin:0;font-size:14px;line-height:1.45;color:#153453;overflow-wrap:anywhere}
.req-facts .req-message{white-space:pre-line}
.req-facts .req-address{font-weight:600}
.req-muted{color:#7B8FA3}
.provider-request-card .req-next{font-size:13px;color:#526C85;margin:6px 0 10px}
.provider-request-card .req-btn{font-size:14px;min-height:38px;padding:0 14px}
@media (max-width:560px){.req-facts>div{grid-template-columns:1fr;gap:2px}}
.req-facts .req-message{background:none!important;border:0!important;padding:0!important;margin:0!important;font-size:14px!important}
.provider-request-card .request-actions .req-btn{font-size:14px!important;min-height:38px!important;padding:0 14px!important;border-radius:10px}

/* v1887: confirmar un trabajo que el proveedor marcó como terminado (Mi Cuenta) */
.customer-request-card .job-confirm{grid-column:1/-1;flex-basis:100%;width:100%;box-sizing:border-box;margin-top:12px;padding:12px 14px;border-radius:12px;background:#EAF4FD;border:1px solid #BFD9F0}
.customer-request-card .job-confirm p{margin:0 0 6px;font-size:15px;color:#153453}
.customer-request-card .job-confirm .muted-note{font-size:13px;color:#526C85}
.customer-request-card .job-confirm .request-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.customer-request-card .job-confirm .request-actions button{min-height:40px;font-size:14px;padding:0 14px}
.customer-request-card>.request-action-feedback{grid-column:1/-1;flex-basis:100%}
.customer-request-card:has(.job-confirm){flex-wrap:wrap}