/* ============================================================
   CRL PARTS · PUNTOS DE VENTA · v3 CONSOLIDADO
   ------------------------------------------------------------
   El HTML va en Code Block. Este snippet trae TODO el CSS.
   Reemplaza por completo la version anterior.
   Cada selector aparece UNA sola vez.
   ============================================================ */

/* --- Contenedor a ancho completo --- */
html body .crl-pdv {
  max-width: 1440px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 8px 40px 40px 40px !important;
  box-sizing: border-box !important;
  font-family: 'Roboto', sans-serif !important;
}

/* --- Encabezado --- */
html body .crl-pdv-head {
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto 36px auto !important;
}

html body .crl-pdv-eyebrow {
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #075DA7 !important;
  margin-bottom: 10px !important;
}

html body .crl-pdv-title {
  font-size: 36px !important;
  font-weight: 900 !important;
  color: #05080D !important;
  letter-spacing: -1px !important;
  line-height: 1.15 !important;
  margin: 0 0 12px 0 !important;
}

html body .crl-pdv-sub {
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #6B7280 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* --- Grid 2x2 --- */
html body .crl-pdv-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Oculta los parrafos vacios que inyecta Avada */
html body .crl-pdv > p,
html body .crl-pdv-grid > p,
html body .crl-pdv p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* --- Tarjeta --- */
html body .crl-pdv-grid > .crl-pdv-card {
  grid-column: auto !important;
}

html body .crl-pdv-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

html body .crl-pdv-card:hover {
  border-color: #075DA7 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 34px rgba(7, 93, 167, 0.14) !important;
}

/* --- Mapa --- */
html body .crl-pdv-map {
  position: relative !important;
  width: 100% !important;
  height: 260px !important;
  background: #F5F7FA !important;
  overflow: hidden !important;
}

html body .crl-pdv-map iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  filter: grayscale(0.2) !important;
  transition: filter 0.3s ease !important;
}

html body .crl-pdv-card:hover .crl-pdv-map iframe {
  filter: grayscale(0) !important;
}

/* --- Cuerpo · padding y margenes comprimidos --- */
/* Oculta parrafo fantasma entre mapa y cuerpo */
html body .crl-pdv-map + p,
html body .crl-pdv-card > p:empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .crl-pdv-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 16px 26px 18px 26px !important;
}

html body .crl-pdv-badge {
  display: inline-block !important;
  align-self: flex-start !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: #075DA7 !important;
  background: #F0F6FC !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  margin: 0 0 4px 0 !important;
}

html body .crl-pdv-city {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #05080D !important;
  letter-spacing: -0.6px !important;
  line-height: 1.1 !important;
  margin: 0 0 3px 0 !important;
}

html body .crl-pdv-addr {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #4B5563 !important;
  line-height: 1.45 !important;
  margin: 0 0 2px 0 !important;
}

html body .crl-pdv-hours {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #05080D !important;
  line-height: 1.4 !important;
  margin: 0 0 8px 0 !important;
}

/* --- Botones --- */
html body .crl-pdv-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: auto !important;
}

html body .crl-pdv-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0 !important;
  padding: 11px 16px !important;
  border-radius: 7px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

html body .crl-pdv-btn-primary {
  background: #075DA7 !important;
  color: #FFFFFF !important;
}

html body .crl-pdv-btn-primary:hover {
  background: #05080D !important;
  color: #FFFFFF !important;
}

html body .crl-pdv-btn-wa {
  background: #E7F7EE !important;
  color: #12894C !important;
}

html body .crl-pdv-btn-wa:hover {
  background: #12894C !important;
  color: #FFFFFF !important;
}

/* --- Responsive --- */
@media only screen and (max-width: 1024px) {
  html body .crl-pdv {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  html body .crl-pdv-title {
    font-size: 30px !important;
  }
}

@media only screen and (max-width: 768px) {
  html body .crl-pdv-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  html body .crl-pdv-title {
    font-size: 26px !important;
  }

  html body .crl-pdv-sub {
    font-size: 16px !important;
  }
}

@media only screen and (max-width: 420px) {
  html body .crl-pdv {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html body .crl-pdv-btn {
    flex: 1 1 100% !important;
  }
}

html body .crl-pdv-body br,
html body .crl-pdv-card br,
html body .crl-pdv-grid br {
  display: none !important;
}

/* ============================================================
   HORARIO DINAMICO EN TARJETA DE SEDE
   ============================================================ */

html body .crl-horario {
  width: 100% !important;
  margin: 0 0 14px 0 !important;
  font-family: 'Roboto', sans-serif !important;
}

html body .crl-horario .crl-hr-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  background: #F5F7FA !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: border-color 0.2s ease !important;
}

html body .crl-horario .crl-hr-head:hover {
  border-color: #075DA7 !important;
}

html body .crl-horario .crl-hr-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

html body .crl-horario .crl-hr-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

html body .crl-horario.crl-abierto .crl-hr-dot {
  background: #12894C !important;
  box-shadow: 0 0 0 3px rgba(18, 137, 76, 0.18) !important;
}

html body .crl-horario.crl-cerrado .crl-hr-dot {
  background: #B91C1C !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15) !important;
}

html body .crl-horario .crl-hr-badge {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html body .crl-horario.crl-abierto .crl-hr-badge {
  color: #12894C !important;
}

html body .crl-horario.crl-cerrado .crl-hr-badge {
  color: #B91C1C !important;
}

html body .crl-horario .crl-hr-today {
  flex: 1 1 auto !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #4B5563 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

html body .crl-horario .crl-hr-arrow {
  flex-shrink: 0 !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid #6B7280 !important;
  border-bottom: 2px solid #6B7280 !important;
  transform: rotate(45deg) !important;
  transition: transform 0.25s ease !important;
  margin-top: -3px !important;
}

html body .crl-horario.crl-hr-open .crl-hr-arrow {
  transform: rotate(-135deg) !important;
  margin-top: 2px !important;
}

html body .crl-horario .crl-hr-list {
  margin: 6px 0 0 0 !important;
  padding: 6px 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
}

html body .crl-horario .crl-hr-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid #F0F2F5 !important;
}

html body .crl-horario .crl-hr-row:last-child {
  border-bottom: none !important;
}

html body .crl-horario .crl-hr-dia {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #6B7280 !important;
}

html body .crl-horario .crl-hr-val{
  font-size: 14px !important;
  text-align: right !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

html body .crl-horario .crl-hr-row.crl-hr-esHoy .crl-hr-dia,
html body .crl-horario .crl-hr-row.crl-hr-esHoy .crl-hr-val {
  color: #075DA7 !important;
  font-weight: 700 !important;
}

html body .crl-horario .crl-hr-row.crl-hr-cerrado .crl-hr-val{
  opacity: 0.6 !important;
}

@media only screen and (max-width: 800px){
  html body .crl-horario .crl-hr-val. crl-hr-dia{
    font-size: 12px !important;
  }
}


/* ============================================================
   CRL PARTS · PUNTOS DE VENTA · SEDE DESHABILITADA
   Snippet: CRL - Puntos de venta  (anadir al final)
   ------------------------------------------------------------
   Se activa con 'deshabilitado' => true en crl_sedes_config().
   Sin SVG en el CSS: apto para FluentSnippets.
   ------------------------------------------------------------
   IMPORTANTE
   filter: blur() afecta a todos los descendientes, por eso el
   aviso NO puede vivir dentro de .crl-pdv-off-wrap. Van como
   hermanos dentro de .crl-pdv-card--off.
   ============================================================ */

/* ---- 1. La tarjeta pasa a ser contexto de posicionamiento ---- */
html body .crl-pdv-card--off{
  position: relative !important;
  overflow: hidden !important;
}

/* ---- 2. Contenido desenfocado y sin interaccion ---- */
html body .crl-pdv-card--off .crl-pdv-off-wrap{
  filter: blur(4px) grayscale(0.55) !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: filter 0.3s ease, opacity 0.3s ease !important;
}

/* Refuerzo: el iframe ignora clics y rueda del raton */
html body .crl-pdv-card--off .crl-pdv-map,
html body .crl-pdv-card--off .crl-pdv-map iframe{
  pointer-events: none !important;
}

/* ---- 3. Botones inertes: ya son span, aqui solo el aspecto ---- */
html body .crl-pdv-card--off .crl-pdv-btn{
  cursor: default !important;
  pointer-events: none !important;
}

/* ---- 4. Capa del aviso, nitida sobre la tarjeta ---- */
html body .crl-pdv-card--off .crl-pdv-aviso{
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  background: rgba(245, 247, 250, 0.55) !important;
}

/* ---- 5. Caja del mensaje ---- */
html body .crl-pdv-card--off .crl-pdv-aviso-box{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 320px !important;
  padding: 26px 22px !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-top: 3px solid #075DA7 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(5, 8, 13, 0.16) !important;
  text-align: center !important;
}

/* ---- 6. Icono ---- */
html body .crl-pdv-card--off .crl-pdv-aviso-ico{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  flex-shrink: 0 !important;
  background: rgba(7, 93, 167, 0.10) !important;
  border-radius: 50% !important;
  color: #075DA7 !important;
}

html body .crl-pdv-card--off .crl-pdv-aviso-ico svg{
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

/* ---- 7. Texto ---- */
html body .crl-pdv-card--off .crl-pdv-aviso-txt{
  margin: 0 !important;
  padding: 0 !important;
  color: #05080D !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.1px !important;
  text-wrap: balance !important;
}

/* ---- 8. Sin lift ni sombra al pasar el cursor ---- */
html body .crl-pdv-card--off:hover{
  transform: none !important;
  box-shadow: none !important;
  border-color: #E5E7EB !important;
}

/* ---- 9. Movil ---- */
@media only screen and (max-width: 800px){

  html body .crl-pdv-card--off .crl-pdv-aviso{
    padding: 18px !important;
  }

  html body .crl-pdv-card--off .crl-pdv-aviso-box{
    max-width: 280px !important;
    padding: 22px 18px !important;
    gap: 12px !important;
  }

  html body .crl-pdv-card--off .crl-pdv-aviso-txt{
    font-size: 14px !important;
  }

  html body .crl-pdv-card--off .crl-pdv-aviso-ico{
    width: 40px !important;
    height: 40px !important;
  }

  html body .crl-pdv-card--off .crl-pdv-aviso-ico svg{
    width: 21px !important;
    height: 21px !important;
  }
}

/* ---- 10. Movimiento reducido: sin transiciones ---- */
@media (prefers-reduced-motion: reduce){

  html body .crl-pdv-card--off .crl-pdv-off-wrap{
    transition: none !important;
  }
}