/*
 * SalonCita Core 11.0.9 · Ancho de página unificado. 11.0.10 · Rejillas de tarjetas (panel Pro, Mi cuenta, marketplace). 11.0.11 · Panel Pro sin alturas estiradas + accesos VIP agrupados.
 * Un solo marco para todo el sitio: contenido de 1240px (igual que el header) + margen lateral fluido.
 * Solo toca ancho máximo y márgenes laterales; no cambia rellenos verticales, colores ni componentes internos.
 * Rollback: borrar este archivo o desactivar con el filtro `saloncita_unified_layout` (false).
 */
:root{--sc-page-max:1240px;--sc-page-gutter:24px;--sc-reading-max:980px}
@media (max-width:640px){:root{--sc-page-gutter:16px}}

/* 1 · Páginas con plantilla por defecto (Hello Elementor): sustituye los escalones 500/600/800/1140px. */
body:not([class*=elementor-page-]) .site-main,
body.woocommerce-cart #content.site-main,
body.woocommerce-checkout #content.site-main,
body.single-product #content.site-main,
.page-header .entry-title,
.woocommerce-cart .page-header,
.woocommerce-checkout .page-header{
  max-width:calc(var(--sc-page-max) + 2 * var(--sc-page-gutter))!important;
  width:100%;
  margin-inline:auto!important;
  padding-inline:var(--sc-page-gutter)!important;
  box-sizing:border-box;
}

/* 2 · Contenedores principales de SalonCita (listados, flujos y paneles): mismo marco. */
.sc-salons-shell,.sc-booking-shell,.sc-products-shell,.sc-reg-shell,.sc-stores-shell,.sc-storefront-shell,
.sc-pack-shell,.sc-combo-shell,.sc-wp-shell,.sc-ac-shell,.sc-aa-shell,.sc-aff-dashboard,.sc-aff-auth-shell,
.sc-pro-app,.sc-admin-dashboard{
  max-width:calc(var(--sc-page-max) + 2 * var(--sc-page-gutter))!important;
  width:100%!important;
  margin-inline:auto!important;
  padding-inline:var(--sc-page-gutter)!important;
  box-sizing:border-box;
}
/* Dentro de .site-main el margen lateral ya lo pone la página: evitar doble margen. */
.site-main .sc-salons-shell,.site-main .sc-booking-shell,.site-main .sc-products-shell,.site-main .sc-reg-shell,
.site-main .sc-stores-shell,.site-main .sc-storefront-shell,.site-main .sc-pack-shell,.site-main .sc-combo-shell,
.site-main .sc-wp-shell,.site-main .sc-ac-shell,.site-main .sc-aa-shell,.site-main .sc-aff-dashboard,
.site-main .sc-aff-auth-shell,.site-main .sc-pro-app,.site-main .sc-admin-dashboard{padding-inline:0!important}

/* 3 · Textos y formularios cortos: dentro del marco, tarjeta centrada con ancho de lectura. */
.sc-legal-wrap,.sc-review-shell,.sc-contact-shell,.sc-support-panel{
  width:100%!important;
  max-width:var(--sc-reading-max)!important;
  margin-inline:auto!important;
  box-sizing:border-box;
}
.sc-qr-shell{width:100%!important;margin-inline:auto!important;box-sizing:border-box}

/* 4 · Secciones Elementor (inicio, mi cuenta, header, footer): mismo ancho y mismos márgenes laterales.
 *     Contenedor exterior (ancho completo) = margen lateral del sitio; contenedor interior encajonado = 1240px sin relleno lateral extra. */
.elementor-element-nh000002,.elementor-element-nh100002,.elementor-element-nh200003,.elementor-element-nh300003,
.elementor-element-nh400002,.elementor-element-nh600002,.elementor-element-ma100002,
.elementor-element-rf000002,.elementor-element-rf000016,.elementor-element-rh000002{
  --content-width:var(--sc-page-max)!important;
  --container-max-width:var(--sc-page-max)!important;
}
.elementor-element-nh000002,.elementor-element-nh100002,.elementor-element-nh200003,.elementor-element-nh300003,
.elementor-element-nh400002,.elementor-element-ma100002,.elementor-element-rf000002,.elementor-element-rf000016,
.elementor-element-rh000002{
  --padding-left:0px!important;--padding-right:0px!important;
}
.elementor-element-nh000001,.elementor-element-nh100001,.elementor-element-nh200001,.elementor-element-nh300001,
.elementor-element-nh400001,.elementor-element-nh600001,.elementor-element-ma100001,.elementor-element-rf000001,
.elementor-element-rh000001{
  --padding-left:var(--sc-page-gutter)!important;--padding-right:var(--sc-page-gutter)!important;
}


/* ===================================================================================================
 * 11.0.10 · Rejillas de tarjetas: bloques parecidos uno al lado del otro en vez de una fila cada uno.
 * Solo layout (display, columnas, orden, márgenes). Sin :has() o sin container queries → se queda como antes.
 * =================================================================================================== */

/* 6 · Panel profesional (11.0.11): los módulos OBS que se añaden DESPUÉS de .sc-pro-app se ordenan en una rejilla
 *     de 4 columnas (≥1200px), 2 (900–1199px) o 1 (<900px). Cada tarjeta mide lo que su contenido necesita
 *     (sin estirar alturas) y las tarjetas de contenido largo ocupan 2 columnas:
 *       fila 1  · Buscar reservas (barra, ancho completo)
 *       fila 2  · Hoy (2) · Resumen mensual · Asistencia (2)
 *       fila 3  · Calendario semanal (ancho completo)
 *       fila 4  · Escanear QR (1) · ¿Necesitas ayuda? (1) · Solicitudes de reembolso (2)
 *       fila 5  · Cierres excepcionales (2) · Notificaciones WhatsApp (2)                                   */
:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app){
  --sc-pro-cols:1;
  display:grid;
  grid-template-columns:repeat(var(--sc-pro-cols),minmax(0,1fr));
  gap:20px;
  align-items:start;
  max-width:calc(var(--sc-page-max) + 2 * var(--sc-page-gutter));
  margin-inline:auto;
  padding-inline:var(--sc-page-gutter);
  box-sizing:border-box;
}
@media (min-width:900px){:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app){--sc-pro-cols:2}}
@media (min-width:1200px){:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app){--sc-pro-cols:4}}
:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app) > .sc-pro-app{grid-column:1 / -1;padding-inline:0!important;order:-10}
:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app) > :not(.sc-pro-app):not(script):not(style){
  margin:0!important;
  max-width:none!important;
  min-width:0;
  box-sizing:border-box;
}
:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app) > .obs-archive-search{order:-9;grid-column:1 / -1}
:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app) > .obs-daily-overview{order:-8}
:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app) > .obs-attendance-report{order:-7}
:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app) > .obs-booking-week{order:-6;grid-column:1 / -1;overflow-x:auto}
:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app) > .obs-qr-reader{order:-5}
:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app) > section[class="sc-pro-panel"]:has(> a.sc-pro-btn){order:-4}
:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app) > section[class="sc-pro-panel"]:not([aria-label]):not(:has(> a.sc-pro-btn)){order:-3}
:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app) > section[aria-label="Cierres excepcionales"]{order:-2}
:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app) > .obs-whatsapp-settings{order:-1}
/* Tarjetas de contenido largo: 2 columnas (con 2 columnas = fila completa; en móvil, 1). */
@media (min-width:900px){
  :is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app) > :is(.obs-daily-overview,.obs-attendance-report,.obs-whatsapp-settings,section[aria-label="Cierres excepcionales"],section[class="sc-pro-panel"]:not([aria-label]):not(:has(> a.sc-pro-btn))){grid-column:span 2}
}
/* Campos de formulario de las tarjetas: nunca más anchos que la tarjeta. */
:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app) > :not(.sc-pro-app) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){max-width:100%!important;box-sizing:border-box}
:is(.elementor-shortcode,.elementor-widget-container):has(> .sc-pro-app) > .obs-whatsapp-settings input[type=tel]{width:min(100%,320px)!important}

/* 6b · Accesos VIP del panel (Bonos, Combos, Promoción de bienvenida, Herramientas avanzadas, Agenda avanzada):
 *      se añaden tras el contenido de la página. SalonCita_Core_Layout los agrupa en .sc-pro-entries. */
.sc-pro-entries{
  display:flex;flex-wrap:wrap;gap:16px;
  max-width:calc(var(--sc-page-max) + 2 * var(--sc-page-gutter));
  margin:8px auto 48px;
  padding-inline:var(--sc-page-gutter);
  box-sizing:border-box;
}
.sc-pro-entries > [class*="-panel-entry"]{
  flex:1 1 360px;
  min-width:0;
  max-width:none!important;
  margin:0!important;
  box-sizing:border-box;
  flex-wrap:wrap;
  row-gap:12px;
}
/* Sin agrupar (p. ej. si cambia el marcado): al menos dentro del marco de 1240px. */
body > [class*="-panel-entry"]{
  width:min(100% - 2 * var(--sc-page-gutter), var(--sc-page-max));
  max-width:none!important;
  margin-inline:auto!important;
  box-sizing:border-box;
}

/* 7 · Mi cuenta: tarjetas de cuenta (Pro, código VIP, estrellas) comparten fila si caben; si están solas, ancho completo. */
.woocommerce-account .woocommerce-MyAccount-content{display:flex;flex-wrap:wrap;column-gap:20px;align-content:flex-start}
.woocommerce-account .woocommerce-MyAccount-content > *{flex:1 1 100%;min-width:0}
.woocommerce-account .woocommerce-MyAccount-content > :is(.sc-account-pro-entry,.sc-vip-code-box,.sc-loyalty-dashboard-card){
  flex:1 1 420px;
  max-width:none!important;
  container-type:inline-size;
}
@container (max-width:640px){
  .sc-account-pro-entry{flex-direction:column;align-items:flex-start}
  .sc-vip-code-box{grid-template-columns:1fr!important}
  .sc-loyalty-dashboard-card{grid-template-columns:1fr auto!important}
}
@container (max-width:460px){
  .sc-loyalty-dashboard-card{grid-template-columns:1fr!important}
}

/* 8 · Inicio · marketplace: texto (1/3) y carrusel de productos (2/3) en la misma fila en pantallas grandes. */
@media (min-width:1100px){
  .elementor-element-nh400002{flex-wrap:nowrap!important;align-items:center}
  .elementor-element-nh400002 > .e-con-inner{flex-wrap:nowrap!important;align-items:center}
  .elementor-element-nh400003{flex:0 0 32%!important;width:32%!important;max-width:32%!important}
  .elementor-element-nh400008{flex:1 1 0!important;width:auto!important;min-width:0!important}
  .elementor-element-nh400008 .sc-featured-product-track .sc-product-card{flex-basis:calc((100% - 20px)/2)!important}
}

/* 5 · Red de seguridad: nada provoca scroll horizontal en móvil. */
@media (max-width:640px){html,body{overflow-x:hidden}}