/* ficha.css — La estética de la ficha del anuncio: una columna de TARJETAS.
   Va junta con `includes/listing/ficha.php`, que es quien mete los bloques de HivePress dentro de
   los contenedores que aquí se pintan.

   TODO se cuelga de `body.ctop-ficha` (la clase la pone ese módulo). No es manía: `.hp-listing__*`
   y `.hp-section` también existen en el buscador, en la página del profesional y en las páginas de
   cuenta, y sin el prefijo cualquier regla de aquí se les colaría encima. */

/* ============ Lienzo ============
   La ficha necesita más ancho que el resto del sitio: con los 1180px de `body .hp-page` y la barra
   lateral a 4/12, la columna de contacto se quedaba en poco más de 350px. `body.ctop-ficha` (0,2,1)
   gana a `body .hp-page` (0,1,1) sin `!important`. */
body.ctop-ficha .hp-page{ max-width:1380px; }

/* La columna principal deja de apilar por márgenes y pasa a una pila con separación uniforme: así
   una tarjeta que no se pinta (los contenedores son `optional`) no deja un hueco doble. */
/* `min-width:0` NO es decorativo: las dos columnas son ítems flex de `.hp-row` y su mínimo por
   defecto es `auto`, es decir, el ancho de contenido mínimo de lo que llevan dentro. Basta un
   dominio largo sin espacios o la tabla del horario para que la columna se niegue a encoger y la
   ficha se salga de la pantalla a lo ancho en móvil. */
body.ctop-ficha .hp-page__content,
body.ctop-ficha .hp-page__sidebar{ min-width:0; }
body.ctop-ficha .hp-page__content{ display:flex; flex-direction:column; gap:20px; }
body.ctop-ficha .hp-page__content > *{ margin-bottom:0; min-width:0; }

/* La BARRA LATERAL no puede usar `gap`: su componente `sticky` hace `wrapInner('<div/>')` a partir
   de 768px (`hivepress/assets/js/frontend.js:334`) y mete un envoltorio entre el `aside` y las
   tarjetas. Con flex+gap la separación desaparecía al hacerse pegajosa, y cualquier selector con
   `>` dejaba de encontrar sus hijos. Aquí se separa con margen, que sobrevive al envoltorio. */
body.ctop-ficha .hp-page__sidebar .ctop-card,
body.ctop-ficha .hp-page__sidebar .ctop-reserva,
body.ctop-ficha .hp-page__sidebar .ctop-follow-box,
body.ctop-ficha .hp-page__sidebar .hp-listing__actions--primary,
body.ctop-ficha .hp-page__sidebar .hp-vendor{ margin:0 0 16px; }
body.ctop-ficha .hp-page__sidebar .hp-vendor:last-child{ margin-bottom:0; }

/* ============ La tarjeta ============ */
body.ctop-ficha .ctop-card,
body.ctop-ficha .hp-page__content > .hp-section,
body.ctop-ficha .hp-page__content > .hp-listing__images,
body.ctop-ficha .hp-page__content > .hp-listing__description,
body.ctop-ficha .uv-extra-block,
body.ctop-ficha .uv-sched-view,
body.ctop-ficha .ctop-notas,
body.ctop-ficha .ctop-reserva,
body.ctop-ficha .ctop-follow-box,
body.ctop-ficha .hp-page__sidebar .hp-listing__actions--primary,
body.ctop-ficha .hp-page__sidebar .hp-vendor{
  background:#fff; border:1px solid #E9EEF5; border-radius:16px; padding:24px 26px;
  box-shadow:0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  margin:0; box-sizing:border-box;
}

/* Título de sección: 15px, no un titular. La ficha ya tiene un h1; estos son rótulos. */
body.ctop-ficha .ctop-card__titulo,
body.ctop-ficha .uv-extra-title,
body.ctop-ficha .uv-sched-title,
body.ctop-ficha .ctop-notas__titulo,
body.ctop-ficha .hp-page__content > .hp-listing__description::before{
  display:flex; align-items:center; gap:9px; margin:0 0 14px;
  font:800 15px/1.3 Montserrat,sans-serif; color:#0F172A; letter-spacing:0;
  text-transform:none;
}
body.ctop-ficha .ctop-card__titulo i,
body.ctop-ficha .uv-extra-title i,
body.ctop-ficha .uv-sched-title i{ color:#2563EB; font-size:14px; }

/* ============ Migas ============ */
body.ctop-ficha .ctop-migas{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font:600 13px/1.4 Inter,sans-serif; color:#64748B; padding:4px 2px 0;
}
body.ctop-ficha .ctop-migas a{ color:#2563EB; text-decoration:none; }
body.ctop-ficha .ctop-migas a:hover{ color:#1E3A8A; text-decoration:underline; }
body.ctop-ficha .ctop-migas [aria-current]{ color:#0F172A; }
body.ctop-ficha .ctop-migas__sep{ color:#CBD5E1; }

/* ============ Cabecera ============ */
body.ctop-ficha .ctop-card--cabecera{ padding:26px 28px 24px; }

/* La categoría deja de ser un enlace suelto y pasa a ser la etiqueta de gremio. */
body.ctop-ficha .ctop-card--cabecera .hp-listing__categories{ margin:0 0 12px; }
body.ctop-ficha .ctop-card--cabecera .hp-listing__categories a{
  display:inline-block; background:#EFF6FF; color:#1E3A8A; border-radius:999px;
  padding:5px 13px; font:700 13px/1.3 Inter,sans-serif; text-decoration:none;
  transition:background .15s,color .15s;
}
body.ctop-ficha .ctop-card--cabecera .hp-listing__categories a:hover{ background:#2563EB; color:#fff; }

body.ctop-ficha .ctop-card--cabecera .hp-listing__title{
  margin:0 0 12px; font:800 clamp(26px,3.4vw,34px)/1.15 Montserrat,sans-serif; color:#0F172A;
}

/* Valoración, fecha, ubicación y sello: UNA sola línea que envuelve.
   Los dos bloques que la componen (el de HivePress y el nuestro) se disuelven con `display:contents`
   para que sus hijos sean hijos directos de la fila; si no, se apilarían en dos renglones. */
body.ctop-ficha .ctop-row-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:0 0 16px;
}
body.ctop-ficha .ctop-row-meta .hp-listing__details--primary,
body.ctop-ficha .ctop-row-meta .ctop-ficha-meta{ display:contents; }
body.ctop-ficha .ctop-row-meta .hp-listing__rating{ display:flex; align-items:center; gap:8px; }
body.ctop-ficha .ctop-row-meta .hp-listing__date{ color:#94A3B8; font:600 13px Inter,sans-serif; }
/* Al disolver los dos bloques, sus hijos comparten flex y se pueden ordenar: primero lo que decide
   (nota, dónde, si está verificado) y al final la fecha de publicación, que es un dato de archivo. */
body.ctop-ficha .ctop-row-meta .hp-listing__rating{ order:1; }
body.ctop-ficha .ctop-row-meta .ctop-ficha-meta__item{ order:2; }
body.ctop-ficha .ctop-row-meta .ctop-pill{ order:3; }
body.ctop-ficha .ctop-row-meta .hp-listing__date{ order:4; }

body.ctop-ficha .ctop-ficha-meta__item{
  display:inline-flex; align-items:center; gap:7px;
  font:600 14px/1.3 Inter,sans-serif; color:#475569;
}
body.ctop-ficha .ctop-ficha-meta__item i{ color:#2563EB; font-size:13px; }

body.ctop-ficha .ctop-pill{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 12px;
  font:700 12.5px/1.3 Inter,sans-serif;
}
body.ctop-ficha .ctop-pill--ok{ background:#E7F6EC; color:#15803D; }

/* El dominio de la empresa: una línea discreta, no una rejilla de dos columnas. */
body.ctop-ficha .ctop-card--cabecera .hp-listing__attributes--secondary{ margin:0 0 14px; }
body.ctop-ficha .ctop-card--cabecera .hp-listing__attributes--secondary .hp-row{ margin:0; }
body.ctop-ficha .ctop-card--cabecera .hp-listing__attributes--secondary [class*="hp-col-"]{ padding:0; }
body.ctop-ficha .hp-listing__attribute--dominio{
  display:inline-flex; align-items:center; gap:8px; font:600 14px Inter,sans-serif; min-width:0;
}
body.ctop-ficha .hp-listing__attribute--dominio::before{
  content:"\f0ac"; font-family:"Font Awesome 5 Free"; font-weight:900; color:#2563EB; font-size:13px;
}
body.ctop-ficha .hp-listing__attribute--dominio a{ color:#2563EB; overflow-wrap:anywhere; }

/* «Por qué elegirnos»: la franja de confianza de la cabecera. */
body.ctop-ficha .ctop-card--cabecera .uv-why{
  margin:0; border-left-width:1px; border-radius:12px; background:#EFF6FF; border-color:#DBE7FB;
  font:600 14.5px/1.55 Inter,sans-serif; color:#1E3A8A; padding:14px 16px;
}
body.ctop-ficha .ctop-card--cabecera .uv-why i{ font-size:17px; }

/* Pestañas «Detalles / Valoraciones»: segmentadas, sin la línea de separación de HivePress. */
body.ctop-ficha .ctop-card--cabecera .hp-page__topbar{
  margin:16px 0 0; padding:14px 0 0; border-top:1px solid #F1F5F9;
}
body.ctop-ficha .hp-menu--listing-manage ul{
  display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; border:0;
}
body.ctop-ficha .hp-menu--listing-manage li{ margin:0; padding:0; border:0; }
body.ctop-ficha .hp-menu--listing-manage a{
  display:inline-block; border-radius:999px; padding:7px 15px; text-decoration:none;
  background:#F1F5F9; color:#475569; font:700 13.5px Inter,sans-serif; border:0;
  transition:background .15s,color .15s;
}
body.ctop-ficha .hp-menu--listing-manage a:hover{ background:#E2E8F0; color:#0F172A; }
body.ctop-ficha .hp-menu--listing-manage .hp-menu__item--current a,
body.ctop-ficha .hp-menu--listing-manage .current-menu-item a{ background:#2563EB; color:#fff; }

/* ============ Galería ============
   Se conserva el carrusel de HivePress (`data-component="carousel-slider"`, con su lightbox y su
   tira de miniaturas cuando hay más de una imagen): sustituirlo por un mosaico propio significaba
   reimplementar el zoom y el soporte de vídeo. Lo que cambia es el marco. */
body.ctop-ficha .hp-page__content > .hp-listing__images{ padding:14px; overflow:hidden; }
/* CON UNA SOLA IMAGEN no hay carrusel: HivePress deja el `<img>` a pelo y el anuncio quedaba con un
   retrato de 1.100px de alto empujando todo lo demás fuera de la primera pantalla. La proporción se
   fija solo para los hijos DIRECTOS, que es justamente el caso sin carrusel: en cuanto slick entra,
   envuelve cada imagen en un `<div>` y es él quien pone el `aspect-ratio` de las diapositivas. */
body.ctop-ficha .hp-page__content > .hp-listing__images > img,
body.ctop-ficha .hp-page__content > .hp-listing__images > video{
  /* `height:auto` es obligatorio, no un adorno: HivePress declara `height:100%` para estas imágenes
     (frontend.min.css) y con una altura declarada el navegador ignora `aspect-ratio`. */
  display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
}
body.ctop-ficha .hp-listing__images img,
body.ctop-ficha .hp-listing__images video{ border-radius:12px; }
body.ctop-ficha .hp-listing__images .slick-slide{ border-radius:12px; overflow:hidden; }
body.ctop-ficha .hp-listing__images .slick-slider + .slick-slider .slick-slide{ opacity:.6; cursor:pointer; }
body.ctop-ficha .hp-listing__images .slick-slider + .slick-slider .slick-current{ opacity:1; }

/* ============ Descripción ============ */
body.ctop-ficha .hp-page__content > .hp-listing__description::before{ content:"Sobre el profesional"; }
body.ctop-ficha .hp-page__content > .hp-listing__description{
  font:500 15.5px/1.7 Inter,sans-serif; color:#374151;
}
body.ctop-ficha .hp-listing__description p:last-child{ margin-bottom:0; }

/* ============ Chips (especialidades y zonas) ============ */
body.ctop-ficha .ctop-chips{ display:flex; flex-wrap:wrap; gap:9px; }
body.ctop-ficha .ctop-chip{
  display:inline-flex; align-items:center; background:#F1F5F9; color:#334155;
  border:1px solid #E2E8F0; border-radius:999px; padding:7px 14px;
  font:600 13.5px Inter,sans-serif; text-decoration:none; transition:background .15s,color .15s,border-color .15s;
}
body.ctop-ficha a.ctop-chip:hover{ background:#EFF6FF; border-color:#BFD3F5; color:#1E3A8A; }
/* La provincia y la comunidad cubren mucho más que un municipio: se leen distinto. */
body.ctop-ficha .ctop-chip--provincia,
body.ctop-ficha .ctop-chip--comunidad{ background:#EFF6FF; border-color:#DBE7FB; color:#1E3A8A; }
body.ctop-ficha .ctop-chip--resto{ background:transparent; border-style:dashed; color:#64748B; }

body.ctop-ficha .uv-spec-chip{
  background:#F1F5F9; border-color:#E2E8F0; color:#334155; padding:7px 14px;
}

/* ============ Horario ============
   El hueco lo reserva PHP y lo rellena `schedule.js`. Sin horario se queda vacío: no debe dejar
   una tarjeta en blanco ni un hueco en la pila. */
body.ctop-ficha .uv-sched-slot:empty{ display:none; }
body.ctop-ficha .uv-sched-view{ margin:0; }
body.ctop-ficha .uv-sched-wrap{ border-radius:10px; overflow:hidden; }
/* hello-elementor pinta un borde en cada celda: la tabla salía cuadriculada. Aquí las filas se
   distinguen por el fondo alterno, como en el resto de listas de la ficha. */
body.ctop-ficha .uv-sched-table th,
body.ctop-ficha .uv-sched-table td{ border:0; padding:11px 14px; }
body.ctop-ficha .uv-sched-table th{ width:45%; font:700 14px Inter,sans-serif; color:#0F172A; }
body.ctop-ficha .uv-sched-table td{ text-align:right; font:600 14px Inter,sans-serif; }
body.ctop-ficha .uv-sched-table tr:nth-child(odd) th,
body.ctop-ficha .uv-sched-table tr:nth-child(odd) td{ background:#F8FAFC; }

/* ============ Preguntas frecuentes ============
   Dentro de una tarjeta blanca, la pregunta en gris se leía como un campo desactivado. */
body.ctop-ficha .uv-faq-item{ border-color:#E6E9EF; border-radius:10px; }
body.ctop-ficha .uv-faq-q{ background:#fff; font:700 14.5px/1.35 Inter,sans-serif; padding:13px 16px; }
body.ctop-ficha .uv-faq-q:hover{ background:#F8FAFC; }
body.ctop-ficha .uv-faq-item.open .uv-faq-q{ background:#F8FAFC; }

/* ============ Las dos notas (nuestra y la de Google) ============ */
body.ctop-ficha .ctop-notas{ margin:0; }

/* ============ Valoraciones ============ */
body.ctop-ficha .hp-page__content > .hp-section > .hp-section__title{
  margin:0 0 16px; font:800 20px/1.2 Montserrat,sans-serif; color:#0F172A;
}
body.ctop-ficha .hp-page__content > .hp-section .hp-review{
  background:#F8FAFC; border:0; border-radius:12px; padding:16px 18px; box-shadow:none;
}
body.ctop-ficha .hp-page__content > .hp-section .hp-review__image img{
  width:40px; height:40px; border-radius:50%; object-fit:cover;
}
body.ctop-ficha .hp-page__content > .hp-section .hp-review__header{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
body.ctop-ficha .hp-page__content > .hp-section .hp-review__content{ margin:0; }
body.ctop-ficha .hp-page__content > .hp-section .hp-review__text{ margin-top:8px; }

/* ============ Barra lateral ============ */
body.ctop-ficha .hp-page__sidebar .ctop-card--contacto{ padding:20px; }

/* Teléfono y sello, en la misma línea y en lo alto de la tarjeta. */
body.ctop-ficha .ctop-card--contacto .hp-listing__attributes--primary{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 12px; padding:0; background:none; border:0; box-shadow:none;
}
body.ctop-ficha .ctop-card--contacto .hp-listing__attribute--telefono{ font-size:20px; }
body.ctop-ficha .ctop-card--contacto .ctop-open-badge{ margin:0 0 14px; }

/* El bloque de contacto ya no es una tarjeta: es el cuerpo de esta. */
body.ctop-ficha .ctop-card--contacto .uv-contact{
  background:none; border:0; border-radius:0; padding:0; margin:0; box-shadow:none;
}

body.ctop-ficha .hp-page__sidebar .hp-listing__actions--primary{
  display:flex; flex-direction:column; gap:12px; padding:18px 20px;
}
body.ctop-ficha .hp-listing__action{
  display:inline-flex; align-items:center; gap:9px; font:700 14px Inter,sans-serif; text-decoration:none;
}
body.ctop-ficha .hp-listing__action--review{ color:#2563EB; }
body.ctop-ficha .hp-listing__action--report{ color:#64748B; }
body.ctop-ficha .hp-listing__action:hover{ color:#0F172A; }

body.ctop-ficha .hp-page__sidebar .hp-vendor{ text-align:center; padding:22px 20px; }
body.ctop-ficha .hp-page__sidebar .hp-vendor .hp-vendor__image img{
  width:64px; height:64px; border-radius:50%; object-fit:cover; margin:0 auto 10px;
}
body.ctop-ficha .hp-page__sidebar .hp-vendor .hp-vendor__name{
  margin:0 0 4px; font:800 15px Montserrat,sans-serif;
}
body.ctop-ficha .hp-page__sidebar .hp-vendor .hp-vendor__name a{ color:#0F172A; }
body.ctop-ficha .hp-page__sidebar .hp-vendor .hp-vendor__name a:hover{ color:#2563EB; }
body.ctop-ficha .hp-page__sidebar .hp-vendor .hp-vendor__details{
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
body.ctop-ficha .hp-page__sidebar .hp-vendor .hp-vendor__date{
  color:#94A3B8; font:600 12.5px Inter,sans-serif;
}

/* ============ Profesionales relacionados ============
   Van fuera de `.hp-row`, en el pie de la página, así que no los alcanza `.hp-listing--view-page`.
   Aquí NO se pinta tarjeta: las tarjetas son los propios anuncios. */
body.ctop-ficha .hp-page__footer{ margin-top:32px; }
body.ctop-ficha .hp-page__footer .hp-section__title{
  margin:0 0 16px; font:800 20px/1.2 Montserrat,sans-serif; color:#0F172A;
}

/* ============ Móvil ============ */
@media (max-width:767px){
  body.ctop-ficha .hp-page__content{ gap:16px; }

  body.ctop-ficha .ctop-card,
  body.ctop-ficha .hp-page__content > .hp-section,
  body.ctop-ficha .hp-page__content > .hp-listing__description,
  body.ctop-ficha .uv-extra-block,
  body.ctop-ficha .uv-sched-view,
  body.ctop-ficha .ctop-notas,
  body.ctop-ficha .ctop-reserva,
  body.ctop-ficha .ctop-follow-box,
  body.ctop-ficha .hp-page__sidebar .hp-listing__actions--primary,
  body.ctop-ficha .hp-page__sidebar .hp-vendor{ padding:18px 16px; border-radius:14px; }

  body.ctop-ficha .ctop-card--cabecera{ padding:20px 16px; }
  body.ctop-ficha .hp-page__content > .hp-listing__images{ padding:10px; }

  /* La barra lateral cae debajo del contenido, como en cualquier otra plantilla de HivePress: se
     probó subirla (el botón de llamar es la acción principal) y lo que se ve primero pasa a ser un
     número de teléfono, antes incluso del nombre del negocio. La llamada ya está siempre a mano en
     la barra fija de móvil (`urgente-valencia-effects.php`), así que no hacía falta.
     Además: NO tocar `display` de `.hp-row` aquí. Ya es `flex-wrap:wrap` (grid.min.css) y ponerla en
     columna convierte el `flex-basis:100%` de las columnas en ALTO, no en ancho — la ficha se salía
     de la pantalla a lo ancho. Si algún día hay que reordenar, basta con `order`. */
  body.ctop-ficha .hp-page__sidebar{ margin-top:16px; }
}