/* ServiHogar V5: navegación móvil clara y recorridos más cortos. */
:root{
  --v5-blue:#064aa8;
  --v5-navy:#062556;
  --v5-sky:#eaf3ff;
  --v5-orange:#f87524;
}

body.nav-open{overflow:hidden}
.nav-drawer-head,.nav-drawer-footer{display:none}
.nav-drawer-links{display:contents}
.nav-link>.icon,.professional-nav-link>.icon{width:22px;height:22px}
.notification-label{font-size:inherit}
.nav-backdrop{position:fixed;z-index:104;inset:0;border:0;background:rgba(3,21,51,.5);backdrop-filter:blur(3px)}

.notifications-page{min-height:70vh;padding:34px 0 64px;background:linear-gradient(180deg,#f4f8ff,#fff 520px)}
.notifications-header{margin-bottom:22px;padding:24px;border:1px solid #cbdcf1;border-radius:24px;background:linear-gradient(135deg,#fff,#eef5ff);box-shadow:var(--shadow)}
.notification-list{gap:12px}
.notification-item{grid-template-columns:auto minmax(0,1fr) auto;align-items:start;padding:18px;border:1px solid #d2deed;background:#fff}
.notification-item.unread{border-left:5px solid var(--v5-blue);background:linear-gradient(100deg,#eef6ff,#fff 42%)}
.notification-type{width:48px;height:48px;background:var(--v5-sky);color:var(--v5-blue)}
.notification-type .icon{width:24px;height:24px}
.notification-content{min-width:0}
.notification-title{align-items:center}
.notification-title h2{margin:0;font-size:1.05rem}
.notification-title span{padding:4px 8px;border-radius:999px;background:#dcecff;color:#06438f}
.notification-content>p{margin:7px 0;color:var(--ink-soft)}
.notification-meta{display:flex;align-items:center;gap:14px}
.notification-read{width:44px;height:44px;border:1px solid #b9cce3;border-radius:13px;background:#fff;color:var(--v5-blue);font-size:1rem;font-weight:900}
.notification-read:hover{background:var(--v5-sky)}
.notification-empty{padding:42px 22px}
.notification-empty>.icon{width:54px;height:54px;color:var(--v5-blue)}

.professional-join-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}
.professional-join-benefits>span{display:flex;align-items:center;gap:10px;min-height:66px;padding:13px 15px;border:1px solid #cbdcf0;border-radius:17px;background:linear-gradient(135deg,#fff,#f2f7ff);box-shadow:var(--shadow-xs);color:var(--v5-navy)}
.professional-join-benefits .icon{width:25px;height:25px;color:var(--v5-blue)}
.profile-edit-simple{max-width:840px;margin-inline:auto}
.profile-edit-simple .profile-wizard-progress,.profile-edit-simple .form-main{grid-column:1/-1}
.profile-edit-simple .profile-wizard-markers{grid-template-columns:repeat(3,minmax(0,1fr))}
.profile-form-section{padding:clamp(19px,4vw,30px)}
.profile-form-section .form-section-heading>span{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:14px;background:linear-gradient(145deg,var(--v5-blue),#1c70d2);color:#fff;font-weight:900;box-shadow:0 8px 18px rgba(6,74,168,.2)}
.identity-profile-block{display:grid;gap:16px;margin-bottom:18px}
.identity-readonly{padding:16px;border:1px solid #cfdeef;border-radius:16px;background:#f5f9ff}
.identity-readonly>*{display:block}
.identity-readonly .identity-label{color:var(--muted);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.identity-readonly strong{margin:4px 0;font-size:1.08rem}
.identity-readonly p{margin:0 0 5px;color:var(--ink-soft);font-size:.86rem}
.publish-confirmations{display:grid;gap:9px;margin:18px 0}
.field-error{display:block;min-height:1.15em;color:var(--danger);font-weight:700}
.request-date-field input{min-height:58px;font-size:1.05rem}
.account-professional-cta{padding:22px;background:linear-gradient(145deg,#062f70,#0756ba);color:#fff}
.account-professional-cta h2,.account-professional-cta p{color:#fff}
.account-professional-cta .eyebrow{color:#cfe3ff}
.account-professional-cta .button{background:#fff;color:var(--v5-blue);border-color:#fff}

.demo-control-panel{position:relative;overflow:hidden;margin:0 0 20px;padding:22px;border:1px solid #bcd3ef;border-radius:22px;background:linear-gradient(130deg,#edf6ff,#fff 55%,#fff3e9);box-shadow:var(--shadow)}
.demo-control-panel::after{content:"";position:absolute;right:-35px;bottom:-45px;width:130px;height:130px;border:24px solid rgba(248,117,36,.11);border-radius:50%;pointer-events:none}
.demo-control-panel .panel-heading,.demo-control-panel .button-row{position:relative;z-index:1}
.demo-count{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:#fff;color:var(--v5-blue);font-size:.82rem;font-weight:850;box-shadow:var(--shadow-xs)}

@media (max-width:859px){
  .site-header{padding-top:env(safe-area-inset-top)}
  .header-inner{height:72px}
  .brand-logo-header{width:108px;height:60px}
  .main-nav{
    display:flex;position:fixed;z-index:105;inset:0 0 0 auto;width:min(92vw,390px);height:100vh;height:100dvh;
    padding:0;border:0;border-radius:28px 0 0 28px;background:#fff;box-shadow:-24px 0 65px rgba(3,31,77,.24);
    transform:translateX(105%);opacity:0;visibility:hidden;transition:transform .28s var(--ease),opacity .2s ease,visibility .28s;
    overflow:auto;overscroll-behavior:contain;
  }
  .main-nav.open{display:flex;transform:none;opacity:1;visibility:visible}
  .nav-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(20px + env(safe-area-inset-top)) 20px 18px;background:linear-gradient(145deg,#073b86,#062556);color:#fff}
  .nav-drawer-head>div{display:flex;flex-direction:column}
  .nav-drawer-head span{color:#cfe2ff;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
  .nav-drawer-head strong{font-size:1.65rem;letter-spacing:-.035em}
  .nav-drawer-close{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:15px;background:rgba(255,255,255,.1);color:#fff}
  .nav-drawer-close .icon{width:24px;height:24px}
  .nav-drawer-links{display:flex;flex:1;flex-direction:column;gap:5px;padding:16px}
  .main-nav .nav-link,.main-nav .notification-link{justify-content:flex-start;gap:13px;min-height:54px;padding:12px 14px;border-radius:15px;color:#183455;font-size:.98rem;font-weight:780}
  .main-nav .nav-link>.icon,.main-nav .notification-link>.icon{width:24px;height:24px;color:var(--v5-blue)}
  .main-nav .nav-link.is-active,.main-nav .notification-link.is-active{background:linear-gradient(100deg,#e8f2ff,#f5f9ff);color:var(--v5-navy)}
  .main-nav .nav-link.is-active::after{inset:10px auto 10px 0;width:4px;height:auto}
  .main-nav .notification-count{position:static;margin-left:auto;border:0}
  .main-nav>.button{margin:5px 16px}
  .nav-drawer-footer{display:grid;gap:8px;padding:14px 16px calc(18px + env(safe-area-inset-bottom));border-top:1px solid #d9e3ef;background:#f7faff}
  .nav-install,.nav-logout{width:100%;min-height:50px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #b9cce4;border-radius:14px;background:#fff;color:var(--v5-blue);font-weight:800}
  .nav-install .icon{width:21px;height:21px}
  .nav-logout{color:#8e2c39}
  .mobile-nav a{font-size:.62rem;line-height:1.08;text-align:center}
  .mobile-nav a:nth-child(4){font-size:.58rem}
  .notifications-header{padding:19px}
  .notifications-header .button{width:100%}
  .notification-item{grid-template-columns:auto minmax(0,1fr);padding:15px}
  .notification-item>form{grid-column:2}
  .notification-read{width:auto;padding:0 13px}
  .professional-join-benefits{grid-template-columns:1fr}
  .professional-join-benefits>span{min-height:54px}
  .profile-edit-heading h1{font-size:clamp(2rem,10vw,3rem)}
  .identity-profile-block .photo-field{align-items:flex-start}
  .profile-wizard-markers small{font-size:.64rem}
  .profile-wizard-navigation{position:sticky;z-index:12;bottom:calc(76px + env(safe-area-inset-bottom));box-shadow:0 12px 34px rgba(3,31,77,.18)}
}

@media (min-width:600px){.identity-profile-block{grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);align-items:center}}

@media (min-width:860px){
  .nav-backdrop{display:none!important}
  .nav-link>.icon,.professional-nav-link>.icon,.notification-label{display:none}
  .notification-link{justify-content:center}
  .profile-edit-simple{display:block}
}

@media (prefers-reduced-motion:reduce){
  .main-nav{transition:none!important}
}