/* mobile.css — Ajustes finales de móvil y tablet.
   Se encola EL ÚLTIMO a propósito: el responsive.css del tema se carga antes que todo el CSS del
   plugin, así que sus reglas perdían los empates de especificidad contra los módulos de aquí.
   Este archivo es el único sitio donde tocar el comportamiento móvil de los componentes del plugin. */

/* ============ Lienzo de página: mismo margen lateral que la home ============
   Se repite aquí (y con !important) porque otra hoja acaba imponiendo un padding menor en móvil
   pese a que la regla del tema declara 16px. Este archivo se carga el último, así que es el sitio
   fiable para fijar el margen del contenedor de las páginas de HivePress. */
body .hp-page{padding-left:20px!important;padding-right:20px!important;}
@media (max-width:767px){
  body .hp-page{padding-left:16px!important;padding-right:16px!important;}
}

/* ============ Tablas en tarjetas (≤767px) ============
   Las tablas de la cuenta tienen hasta 6 columnas (una de ellas, el mensaje, es texto libre).
   En móvil se convierten en tarjetas: cada fila un bloque y cada celda con su etiqueta delante,
   tomada de data-label. Antes se forzaba un min-width de 560px y todo quedaba en columnas ilegibles
   dentro de un scroll horizontal. */
@media (max-width:767px){
  .uv-table-wrap{overflow:visible;}
  .uv-table{min-width:0;width:100%;border:0;background:transparent;}
  /* La cabecera sobra: cada celda ya lleva su etiqueta en data-label. Se oculta del todo
     (con `clip` los <th> seguían midiendo su ancho real y desbordaban la caja). */
  .uv-table thead{display:none;}
  .uv-table tbody,.uv-table tr,.uv-table td{display:block;width:100%;}
  .uv-table tr{background:#fff;border:1px solid #E9EEF5;border-radius:12px;margin-bottom:12px;padding:6px 4px;}
  .uv-table td{border:0;border-top:1px solid #F1F5F9;padding:9px 12px;
    display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
    overflow-wrap:anywhere;}
  .uv-table tr td:first-child{border-top:0;}
  .uv-table td::before{content:attr(data-label);flex:0 0 40%;font:700 12.5px Inter,sans-serif;
    color:#0F172A;text-transform:uppercase;letter-spacing:.3px;}
  .uv-table td:empty{display:none;}

  /* Horario de la ficha: la columna del día deja de tener ancho fijo */
  .uv-sched-wrap{overflow-x:auto;}
  .uv-sched-table th{width:auto;padding-right:12px;}
}

/* ============ Nada se sale de su caja en móvil ============ */
@media (max-width:767px){
  /* En móvil las columnas se apilan, así que la canaleta de la rejilla (margen negativo en .hp-row
     compensado con padding en la columna) ya no pinta nada y además desplazaba el contenido unos
     píxeles respecto al margen de la página. Se anula para que el borde coincida exactamente con
     el de las secciones de la home. */
  .hp-page > .hp-row{margin-left:0;margin-right:0;}
  .hp-page > .hp-row > .hp-page__content,
  .hp-page > .hp-row > .hp-page__sidebar{padding-left:0;padding-right:0;}

  /* Filas flex que no envolvían: cada bloque a su propia línea. */
  .uv-why,
  .uv-extra-title,
  .uv-lead-title,
  .uv-faq-q,
  .ctop-review-legend,
  .ctop-free-notice,
  .ctop-blocked-box,
  .ctop-limit-box,
  .uv-verify-reminder,
  .uv-loc-head,
  .uv-loc-searchbar,
  .uv-loc-foot,
  .ctop-mod-actions{flex-wrap:wrap;}

  /* Reseñas por criterios: la etiqueta y las estrellas se pisaban en pantallas estrechas. */
  .hp-form--review-submit .hp-field--rating{flex-direction:column;align-items:flex-start;gap:6px;}

  /* Textos largos: que partan en vez de desbordar. */
  .uv-why,.uv-extra-block,.uv-verify-card,.uv-contact,
  .hp-listing__description,.hp-page__content{overflow-wrap:anywhere;}

  /* El explorador de localidades anida 30px por nivel: en móvil se reduce para no comerse el texto. */
  .uv-loc-children{margin-left:14px;}
  .uv-loc-exp,.uv-loc-exp-none{width:26px;flex:0 0 26px;}
  .uv-loc-node{flex-wrap:nowrap;min-width:0;}
  .uv-loc-check{min-width:0;overflow-wrap:anywhere;}
}

/* La URL de verificación (https://dominio/trabajourgente-verify-<token>.txt) es la cadena más larga
   del sitio y no tiene espacios: sin esto empuja la tarjeta y provoca scroll horizontal. */
.uv-verify-steps code,.uv-verify-hint code,.uv-token{
  display:inline-block;max-width:100%;overflow-wrap:anywhere;word-break:break-word;}
.uv-verify-steps{overflow-wrap:anywhere;}

/* Localidades en la tarjeta del listado: es una lista de municipios separados por comas.
   Un hijo flex no baja de la anchura de su palabra más larga salvo que se le fije min-width:0. */
.hp-listing--view-block .hp-listing__attribute--zona{min-width:0;overflow-wrap:anywhere;}
.hp-listing--view-block .hp-listing__attribute--zona > *{min-width:0;}
@media (max-width:767px){
  .hp-listing--view-block .hp-listing__attribute--verificado{min-width:0;}
}

/* ============ Contraste del botón "Mi cuenta" del menú móvil ============
   base.css aplica `button:hover{background:#2563EB;color:#fff}` a cualquier botón y gana por
   especificidad (0,1,1) a .uv-mpop-btn--acc (0,1,0); pero el color del texto está fijado con
   !important en azul, así que al pasar el ratón (y al TOCAR en móvil, que también dispara :focus)
   quedaba azul sobre azul: ilegible. Fijamos aquí los tres estados. */
.uv-mpop-btn--acc:hover,
.uv-mpop-btn--acc:focus,
.uv-mpop-btn--acc:active,
.uv-mpop-acctoggle:hover,
.uv-mpop-acctoggle:focus,
.uv-mpop-acctoggle:active{
  background:#2563EB!important;color:#FFFFFF!important;border-color:#2563EB!important;}
.uv-mpop-btn--acc:hover i,.uv-mpop-btn--acc:focus i,
.uv-mpop-acctoggle:hover i,.uv-mpop-acctoggle:focus i{color:#FFFFFF!important;}

/* Mismo salto de color en el botón hamburguesa y en la × del panel. */
.uv-burger:hover,.uv-burger:focus{background:#2563EB!important;color:#FFFFFF!important;}
.uv-burger:hover i,.uv-burger:focus i{color:#FFFFFF!important;}
.uv-mpop-close:hover,.uv-mpop-close:focus{background:#E2E8F0!important;color:#0F172A!important;}