/* ServiHogar V8: avisos esenciales, bienvenida cálida y recorridos más guiados. */
:root{
  --v8-blue:#064aa8;
  --v8-blue-deep:#042f73;
  --v8-sky:#e9f3ff;
  --v8-orange:#f87524;
  --v8-orange-soft:#fff1e7;
  --v8-ink:#0b2347;
}

html{scroll-behavior:smooth}
body{min-height:100dvh}
.site-main{min-height:52dvh}

/* La bienvenida explica primero y deja el buscador en la primera pantalla. */
.home-search-first{
  background:
    radial-gradient(circle at 90% 14%,rgba(248,117,36,.2),transparent 24%),
    radial-gradient(circle at 6% 88%,rgba(16,117,215,.15),transparent 29%),
    linear-gradient(150deg,#eaf3ff 0,#f7fbff 54%,#fff7f1 100%);
}
.home-welcome{max-width:840px}
.home-welcome .eyebrow{color:#074a9e;background:rgba(255,255,255,.7);border:1px solid #c9ddf7}
.home-welcome h1{max-width:820px;margin-inline:auto}
.home-welcome p{max-width:720px;margin-inline:auto;line-height:1.65}
.home-search-primary{position:relative;border-color:#c4d8f0;box-shadow:0 22px 60px rgba(11,48,101,.14)}
.home-search-primary::before{
  content:"";position:absolute;inset:0 auto 0 0;width:5px;border-radius:24px 0 0 24px;
  background:linear-gradient(180deg,var(--v8-orange),var(--v8-blue));
}
.home-search-prompt{grid-column:1/-1;text-align:left}
.home-search-prompt h2{margin:0;color:var(--v8-ink);font-size:clamp(1.2rem,3vw,1.55rem)}
.home-search-prompt p{margin:4px 0 0;color:var(--muted)}
.home-search-trust span{padding:7px 11px;border:1px solid rgba(6,74,168,.12);border-radius:999px;background:rgba(255,255,255,.68)}

/* Notificaciones visibles tanto en la barra horizontal como en el menú. */
.notification-link-prominent,.top-notification-link{position:relative}
.notification-link-prominent{
  border:1px solid #c7daf2;background:linear-gradient(110deg,#edf5ff,#fff);color:var(--v8-blue-deep)!important;
}
.notification-link-prominent>.icon{color:var(--v8-blue)}
.notification-link-prominent.has-unread,.top-notification-link.has-unread{
  border-color:#f0a16c!important;background:linear-gradient(110deg,#fff1e8,#fff8f3)!important;color:#8b3307!important;
}
.notification-link-prominent.has-unread>.icon,.top-notification-link.has-unread>.icon{color:#b34108}
.notification-link-prominent.has-unread::after,.top-notification-link.has-unread::after{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#e24e16;box-shadow:0 0 0 4px rgba(226,78,22,.14)
}
.notification-link-prominent.has-unread::after{top:9px;left:36px}
.top-notification-link.has-unread::after{top:5px;left:24px}
.notification-link-prominent.is-notice-ready,.top-notification-link.is-notice-ready{animation:v8-notice-attention .72s ease-out both}
.notifications-header{padding:22px;border:1px solid #cbdcf0;border-radius:22px;background:linear-gradient(125deg,#edf5ff,#fff 66%,#fff1e8)}
.notification-item{overflow:hidden}
.notification-item.unread{box-shadow:0 12px 28px rgba(6,74,168,.09)}
.notification-type{color:var(--v8-blue);box-shadow:inset 0 0 0 1px #c7dcf5}
.notification-delivery-note{display:flex;align-items:flex-start;gap:11px;margin:13px 0 20px;padding:13px 15px;border:1px solid #c8dcf4;border-radius:15px;background:#f1f7ff;color:var(--v8-blue-deep)}
.notification-delivery-note>.icon{flex:0 0 auto;margin-top:2px}
.notification-delivery-note p,.notification-delivery-note span{margin:0}
.notification-delivery-note span{display:block;color:var(--muted);font-size:.8rem}
.notification-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:9px}
.notification-meta form{margin:0}
.notification-meta .link-button{min-height:40px;padding:7px 3px;border:0;background:transparent;cursor:pointer}

/* La decisión principal de la solicitud aparece antes que cualquier ayuda lateral. */
.client-identity-card{
  display:flex;align-items:center;gap:15px;margin:16px 0;padding:16px;
  border:1px solid #c9daef;border-radius:18px;background:linear-gradient(115deg,#edf5ff,#fff 70%);
}
.client-identity-card h2{margin:3px 0;color:var(--v8-ink);font-size:1.25rem}
.client-identity-card p{margin:0;color:var(--muted)}
.client-avatar{width:68px;height:68px;background:linear-gradient(145deg,#0d69d0,#064096);border:3px solid #fff;color:#fff;box-shadow:0 8px 20px rgba(6,74,168,.22)}
.request-accept-panel{border:1px solid #bad3f2;background:linear-gradient(130deg,#f1f7ff,#fff 62%,#fff4eb)}
.accept-request-button{position:relative;overflow:hidden;box-shadow:0 13px 28px rgba(6,74,168,.22)}
.accept-request-button:active{transform:translateY(1px) scale(.985)}
form.is-submitting .accept-request-button{pointer-events:none;opacity:.92}
form.is-submitting .accept-request-button .icon,form.is-submitting .accept-request-button span{opacity:0}
form.is-submitting .accept-request-button::after{
  content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:v8-spin .65s linear infinite
}

/* Alta corta: tres pasos, con fallback completo cuando JavaScript no está. */
.register-progress{display:grid;gap:11px;margin-bottom:4px;padding:15px;border:1px solid #cbdcf1;border-radius:17px;background:linear-gradient(125deg,#edf5ff,#fff)}
.register-progress>div:first-child{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.78rem}
.register-progress strong{color:var(--v8-blue-deep);font-size:.86rem}
.register-progress-track{height:7px;overflow:hidden;border-radius:999px;background:#dce8f7}
.register-progress-track span{display:block;width:33.333%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--v8-blue),#1778d8,var(--v8-orange));transition:width .24s ease}
.register-progress ol{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:0;list-style:none;color:#63748b;font-size:.68rem;font-weight:760;text-align:center}
.register-progress li{padding:5px;border-radius:999px}
.register-progress li.is-active{background:#e2efff;color:var(--v8-blue-deep)}
.register-progress li.is-complete{color:#176845}
.register-step{display:grid;gap:15px;padding-block:6px}
.register-step+.register-step{margin-top:18px;padding-top:20px;border-top:1px solid var(--line)}
.register-wizard.wizard-ready .register-step{margin:0;padding:5px 0;border:0}
.register-step-heading{display:flex;align-items:flex-start;gap:12px}
.register-step-heading>span{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,var(--v8-blue),#0d6fd5);color:#fff;font-weight:850;box-shadow:0 7px 16px rgba(6,74,168,.18)}
.register-step-heading h2{margin:0;color:var(--v8-ink);font-size:1.22rem}
.register-step-heading p{margin:3px 0 0;color:var(--muted);font-size:.85rem}
.register-navigation{align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.register-navigation:not([hidden]){display:flex}
.register-navigation p{margin:0;color:var(--danger);font-size:.78rem;text-align:center}
.register-navigation .button{min-width:110px}
.identity-visibility-note .icon{width:20px;height:20px}

/* Pie completo sin perder legibilidad. */
.footer-grid-complete{position:relative;grid-template-columns:1fr;gap:28px}
.footer-brand>p{max-width:420px;font-size:.92rem}
.footer-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.footer-trust span{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#e6effb;font-size:.75rem}
.footer-trust .icon{width:16px;height:16px;color:#ff9b59}
.site-footer .footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.site-footer .footer-column strong{margin-bottom:3px;color:#fff;font-size:.9rem}
.site-footer .footer-column a,.site-footer .footer-install{color:#d5e3f5;text-decoration:none;font-size:.84rem}
.site-footer .footer-column a:hover,.site-footer .footer-install:hover{color:#fff;text-decoration:underline}
.footer-bottom{display:flex;flex-direction:column;gap:4px;padding-top:19px;border-top:1px solid rgba(255,255,255,.13)}
.footer-bottom p{margin:0!important;font-size:.74rem!important}

/* Microinteracciones breves: comunican estado, no bloquean la interfaz. */
.button,.category-card,.professional-card,.service-card,.request-row,.notification-item{will-change:transform}
.button:active,.category-card:active,.professional-card:active,.service-card:active,.request-row:active,.notification-item:active{transform:scale(.988)}
.app-motion-ready{opacity:.01;transform:translateY(10px)}
.app-motion-ready.is-app-visible{opacity:1;transform:none;transition:opacity .28s ease,transform .28s ease}

@keyframes v8-notice-attention{0%{transform:scale(.96)}45%{transform:scale(1.035)}100%{transform:none}}
@keyframes v8-spin{to{transform:rotate(360deg)}}

@media (min-width:700px){
  .footer-grid-complete{grid-template-columns:minmax(260px,1.45fr) repeat(3,minmax(125px,.75fr))}
  .footer-bottom{grid-column:1/-1;flex-direction:row;justify-content:space-between;gap:20px}
}

@media (max-width:599px){
  .home-search-first{padding-top:24px}
  .home-welcome .eyebrow{font-size:.67rem}
  .home-welcome h1{font-size:clamp(2rem,10.7vw,2.75rem);line-height:1.02}
  .home-welcome p{font-size:.96rem;line-height:1.5}
  .home-search-primary{padding:18px 16px}
  .home-search-primary::before{width:4px}
  .client-identity-card{align-items:flex-start;padding:14px}
  .client-avatar{width:58px;height:58px}
  .request-detail-simple .request-data-primary{grid-template-columns:1fr 1fr}
  .register-progress>div:first-child{align-items:flex-start;flex-direction:column;gap:2px}
  .register-navigation{position:sticky;z-index:12;bottom:calc(74px + env(safe-area-inset-bottom));margin-inline:-8px;padding:10px 8px;background:rgba(255,255,255,.96);box-shadow:0 -8px 22px rgba(11,35,71,.08);backdrop-filter:blur(12px)}
  .register-navigation p{display:none}
  .footer-grid-complete{gap:24px}
  .site-footer .footer-column{padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .notification-link-prominent.is-notice-ready,.top-notification-link.is-notice-ready,.app-motion-ready,.app-motion-ready.is-app-visible{animation:none;transition:none;transform:none;opacity:1}
  form.is-submitting .accept-request-button::after{animation:none}
  .register-progress-track span{transition:none}
}