/* responsive.css — Adaptación a portátil/tablet/móvil de los componentes propios y las páginas de HivePress.
   Breakpoints: ≤1024 (tablet/portátil), ≤767 (móvil grande), ≤480 (móvil). */

/* ============ CABECERA responsive ============ */
/* El botón hamburguesa propio solo existe en MÓVIL (lo crea assets/js/mobile-menu.js). */
.uv-burger{display:none;}

/* TABLET (768–1024): se MANTIENE el menú horizontal completo (SIN hamburguesa), compactado para que quepa. */
@media (max-width:1024px) and (min-width:768px){
  [data-elementor-type="header"] .elementor-menu-toggle{display:none!important;}       /* nada de hamburguesa de Elementor */
  [data-elementor-type="header"] .elementor-nav-menu--main{display:flex!important;}
  [data-elementor-type="header"] .uv-burger{display:none!important;}
  [data-elementor-type="header"] .e-con-inner,[data-elementor-type="header"] .e-con{gap:4px!important;flex-wrap:nowrap!important;}
  /* Menú en una sola línea, ítems compactos */
  [data-elementor-type="header"] .elementor-nav-menu,[data-elementor-type="header"] .elementor-nav-menu--main{flex-wrap:nowrap!important;}
  [data-elementor-type="header"] .elementor-nav-menu--main .elementor-item{padding:0 7px!important;font-size:12.5px!important;white-space:nowrap!important;}
  /* Logo más pequeño */
  [data-elementor-type="header"] .elementor-widget-theme-site-logo img,
  [data-elementor-type="header"] .elementor-widget-image img{max-height:42px!important;width:auto!important;}
  [data-elementor-type="header"] .uv-acc-btn{display:none!important;}
  [data-elementor-type="header"] .uv-account-btn .elementor-button,
  [data-elementor-type="header"] .uv-alta-btn .elementor-button{white-space:nowrap!important;padding:8px 11px!important;font-size:12px!important;line-height:1.1!important;}
  [data-elementor-type="header"] .uv-account-btn,[data-elementor-type="header"] .uv-alta-btn{flex:0 0 auto!important;width:auto!important;}
}

/* MÓVIL (≤767): el header solo lleva logo + botón hamburguesa. El menú y los botones van a un POPUP propio. */
@media (max-width:767px){
  [data-elementor-type="header"] .elementor-nav-menu--main,
  [data-elementor-type="header"] .elementor-menu-toggle,
  [data-elementor-type="header"] .elementor-nav-menu--dropdown,
  [data-elementor-type="header"] .uv-account-btn,
  [data-elementor-type="header"] .uv-alta-btn,
  [data-elementor-type="header"] .uv-acc-btn{display:none!important;}
  .uv-burger{display:inline-flex!important;align-items:center;justify-content:center;width:46px;height:46px;border:0;
    background:#EFF6FF;color:#2563EB;border-radius:12px;font-size:20px;cursor:pointer;margin-left:auto;flex:0 0 auto;}
  [data-elementor-type="header"] .e-con-inner,[data-elementor-type="header"] .e-con{
    flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;}
}

/* Popup del menú móvil (panel deslizante con el menú + los botones) */
.uv-mpop{position:fixed;inset:0;z-index:100001;background:rgba(15,23,42,.5);opacity:0;visibility:hidden;transition:opacity .2s;}
.uv-mpop.open{opacity:1;visibility:visible;}
.uv-mpop-panel{position:absolute;top:0;right:0;height:100%;width:min(330px,88%);background:#fff;box-shadow:-12px 0 44px rgba(0,0,0,.22);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:16px 18px;overflow:auto;}
.uv-mpop.open .uv-mpop-panel{transform:none;}
.uv-mpop-close{align-self:flex-end;border:0;background:#F1F5F9;width:42px;height:42px;border-radius:12px;font-size:22px;cursor:pointer;color:#334155;
  display:inline-flex;align-items:center;justify-content:center;}
.uv-mpop-nav{display:flex;flex-direction:column;margin:6px 0 18px;}
.uv-mpop-nav a{padding:14px 6px;border-bottom:1px solid #F1F5F9;font:700 16px Inter,sans-serif;color:#0F172A;text-decoration:none;}
.uv-mpop-nav a:hover,.uv-mpop-nav a:focus{color:#2563EB;}
.uv-mpop-btns{display:flex;flex-direction:column;gap:10px;margin-top:auto;}
.uv-mpop-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:12px;font:800 15px Montserrat,sans-serif;text-decoration:none;}
.uv-mpop-btn--acc{background:#EFF6FF;color:#2563EB!important;border:1.5px solid #2563EB;}
.uv-mpop-btn--alta{background:#F59E0B;color:#3d2a00!important;}
body.uv-mpop-open{overflow:hidden;}

/* --- Submenú de la cuenta dentro del pop-up ---
   En móvil el desplegable "Mi cuenta" del header no existe (el botón está oculto), así que las
   secciones de la cuenta se navegan desde aquí. */
.uv-mpop-acc{display:flex;flex-direction:column;}
.uv-mpop-acctoggle{width:100%;cursor:pointer;position:relative;font-family:Montserrat,sans-serif;}
.uv-mpop-caret{margin-left:auto;font-size:12px;transition:transform .2s;}
.uv-mpop-acc.open .uv-mpop-caret{transform:rotate(180deg);}
.uv-mpop-submenu{display:none;flex-direction:column;margin:8px 0 2px;padding:6px 0;
  border-left:2px solid #DBEAFE;}
.uv-mpop-acc.open .uv-mpop-submenu{display:flex;}
.uv-mpop-sub{display:flex;align-items:center;gap:10px;padding:12px 14px;text-decoration:none;
  color:#334155;font:700 14.5px Inter,sans-serif;border-radius:8px;}
.uv-mpop-sub i{width:18px;text-align:center;color:#2563EB;font-size:14px;}
.uv-mpop-sub:hover,.uv-mpop-sub:focus{background:#F1F5F9;color:#0F172A;}
.uv-mpop-sub.is-active{background:#EFF6FF;color:#1D4ED8;}

/* ============ ≤1024px — tablet / portátil pequeño ============ */
@media (max-width:1024px){
  /* 20px, igual que las secciones de Elementor en tablet (antes 18 → se veía un escalón
     entre la cabecera y el contenido). */
  body .hp-page{
    padding-left:20px; padding-right:20px;
  }
  /* Buscador del hero: que quepa sin comprimir en exceso */
  .uv-search{flex-wrap:wrap;}
  .uv-search .uv-field{flex:1 1 200px;}
}

/* ============ ≤767px — móvil ============ */
@media (max-width:767px){
  /* 16px, el mismo margen lateral que usan las secciones de la home en móvil (antes 14). */
  body .hp-page{
    padding-top:76px; padding-bottom:40px; padding-left:16px; padding-right:16px;
  }

  /* Buscador del hero apilado a ancho completo */
  .uv-search{flex-direction:column;align-items:stretch;gap:10px;padding:14px;}
  .uv-search .uv-field,.uv-search .uv-field--loc,.uv-search .uv-search-btn{width:100%;flex:1 1 auto;}
  .uv-search .uv-search-btn{justify-content:center;padding:14px;}

  /* Ficha: el contenido y la barra lateral se apilan (contacto debajo) */
  .hp-listing--view-page .hp-row,.hp-page .hp-row{flex-direction:column;}
  .hp-page__sidebar,.hp-page__content{width:100%!important;max-width:100%!important;flex:0 0 100%!important;}

  /* Tarjetas de estadísticas: dos por fila / una por fila */
  .uv-stats-cards{gap:12px;}
  .uv-stat{min-width:calc(50% - 6px);padding:16px;}
  .uv-stat-n{font-size:28px;}

  /* Tablas: el apilado en tarjetas lo hace mobile.css (plugin), que se carga después. */
  .uv-table-wrap{-webkit-overflow-scrolling:touch;}

  /* Modal del explorador de localidades casi a pantalla completa */
  .uv-loc-modal{padding:0;align-items:flex-end;}
  .uv-loc-box{width:100%;max-height:92vh;border-radius:18px 18px 0 0;}

  /* Formularios de HivePress con menos padding */
  .hp-form--user-login,.hp-form--user-register,.hp-form--user-password-request,.hp-form--user-password-reset,
  .hp-listing-submit__form .hp-form,[data-model="listing"] .hp-form,.hp-form--listing-update{
    padding:22px 18px;border-radius:16px;
  }

  /* Sección "Sobre este profesional" y contacto: padding menor */
  .uv-extra-block,.uv-contact,.uv-verify-card{padding:16px;}
  .uv-why{padding:14px;font-size:15px;}

  /* Editor de horario: cada día en bloque vertical */
  .uv-sched-row{grid-template-columns:1fr!important;gap:6px;}
  .uv-sched-hours{flex-wrap:wrap;}

  /* Menú desplegable "Mi cuenta" a ancho cómodo */
  .uv-acc-menu{min-width:200px;}
}

/* ============ ≤480px — móvil pequeño ============ */
@media (max-width:480px){
  .uv-stat{min-width:100%;}
  .uv-loc-chip{font-size:12.5px;}
  .uv-spec-chip{font-size:12.5px;padding:6px 12px;}
  .uv-faq-q{font-size:14px;padding:12px 14px;}
  .hp-page__title,h1.hp-page__title{font-size:26px!important;}
  .uv-call-btn{font-size:16px;padding:13px 16px;}
}
