/* === CPM alegre (verano) === */
:root{
  --cpm-navy:#0b2239;
  --cpm-cream:#fffdf7;
  --cpm-sand:#fff2dd;
  --cpm-coral:#ff5a7a;     /* rosa-coral */
  --cpm-sun:#ffb703;       /* amarillo sol */
  --cpm-aqua:#22c1c3;      /* turquesa */
  --cpm-leaf:#2fbf71;      /* verde */
  --cpm-radius:18px;
}

.py-6{ padding-top:4rem!important; padding-bottom:4rem!important; }
.py-7{ padding-top:5rem!important; padding-bottom:5rem!important; }

.cpm-soft{
  background:
    radial-gradient(700px 280px at 15% 20%, rgba(34,193,195,.18), transparent 70%),
    radial-gradient(600px 260px at 85% 30%, rgba(255,183,3,.22), transparent 70%),
    linear-gradient(180deg, var(--cpm-sand), #fff);
}

.cpm-hero{
  padding:70px 0 58px;
  background:
    radial-gradient(820px 300px at 10% 20%, rgba(34,193,195,.22), transparent 70%),
    radial-gradient(720px 300px at 75% 10%, rgba(255,183,3,.24), transparent 70%),
    radial-gradient(620px 300px at 88% 62%, rgba(255,90,122,.18), transparent 70%),
    linear-gradient(180deg, var(--cpm-cream), #fff);
}

.cpm-hero-badge{
  display:inline-block;
  padding:.38rem .65rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(11,34,57,.10);
  box-shadow:0 10px 26px rgba(2,6,23,.06);
  font-weight:700;
  color:var(--cpm-navy);
}

.cpm-hero-media img{
  border-radius: 28px;
  box-shadow: 0 22px 60px rgba(11,34,57,.18);
}

/* Chips (menos iconos, más orden) */
.cpm-chips{
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
  margin-top:1.35rem;
}

.cpm-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.48rem .8rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(11,34,57,.10);
  box-shadow:0 12px 28px rgba(2,6,23,.06);
  font-weight:700;
  color:var(--cpm-navy);
}

.cpm-chip i{ font-size:18px; }
.cpm-chip--aqua i{ color:var(--cpm-aqua); }
.cpm-chip--sun  i{ color:var(--cpm-sun); }
.cpm-chip--leaf i{ color:var(--cpm-leaf); }

/* Cards */
.cpm-card{
  border-radius: var(--cpm-radius);
  border: 1px solid rgba(11,34,57,.08);
  box-shadow: 0 18px 50px rgba(2,6,23,.06);
}
.cpm-card:hover{ transform: translateY(-2px); transition: transform .15s ease; }

/* Offer cards (1 icono por card) */
.cpm-offer-card{
  background:#fff;
  padding:34px;
  border-radius:24px;
  border:1px solid rgba(11,34,57,.10);
  box-shadow:0 22px 60px rgba(2,6,23,.06);
}

.cpm-offer-icon{
  width:56px; height:56px;
  border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:28px;
  margin-bottom:14px;
  color:var(--cpm-navy);
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.85), transparent 60%),
    linear-gradient(135deg, rgba(34,193,195,.28), rgba(255,183,3,.30));
}

/* CTA */
.cpm-cta{
  background:
    radial-gradient(560px 280px at 10% 50%, rgba(255,90,122,.18), transparent 70%),
    radial-gradient(560px 280px at 90% 40%, rgba(34,193,195,.20), transparent 70%),
    linear-gradient(180deg, #fff, var(--cpm-cream));
}

.cpm-cta-card{
  border-radius:28px;
  border:1px solid rgba(11,34,57,.10);
  box-shadow:0 22px 60px rgba(2,6,23,.08);
}

.btn-primary{
  background:#f25f5c;   /* más cálido, menos chicle */
  border:0;
  color:#fff;
  box-shadow:0 10px 22px rgba(242,95,92,.22);
  font-weight:700;
}

.btn-primary:hover{
  background:#e94f4c;
  transform: translateY(-1px);
}
/* Outline que encaje con el “navy” */
.btn-outline-primary{
  border:2px solid rgba(11,34,57,.35);
  color:var(--cpm-navy);
  font-weight:600;
  background:#fff;
  transition: all .15s ease;
}

.btn-outline-primary:hover{
  background:#fff;
  border-color:#f25f5c;
  color:#f25f5c;
}

/* Botón Reservar del navbar más fino y elegante */
.navbar .btn-outline-primary{
  border-width:1.5px;
  padding:.45rem .9rem;
  font-weight:600;
  border-radius:14px;
  background:#fff;
  box-shadow:none;
}

.navbar .btn-outline-primary:hover{
  border-color:#f25f5c;
  color:#f25f5c;
  background:#fff;
}
.cpm-hero .btn-lg{
  padding:.7rem 1.2rem;
  font-size:1rem;
}

.cpm-hero .d-flex{
  margin-top:1.2rem;
}

.cpm-hero .btn + .btn{
  margin-left:.4rem;
}

.cpm-notice{
  pointer-events: auto;
  border-radius: 16px;
  border: 1px solid rgba(11,34,57,.10);
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.92);
}

.cpm-notice .btn-close{ opacity:.7; }
.cpm-notice .btn-close:hover{ opacity:1; }


/* === Aviso activo: sólido + limpio + chips === */
.cpm-notice-wrap{
  position: fixed;
  top: 64px; /* debajo topbar/navbar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10060;
  width: min(980px, calc(100% - 24px));
  pointer-events: none;
}

.cpm-notice{
  pointer-events: auto;
  display:flex;
  align-items:stretch;
  border-radius: 18px;
  border: 1px solid rgba(11,34,57,.14);
  box-shadow: 0 18px 50px rgba(2,6,23,.10);
  overflow:hidden;
  background:#fff;          /* sólido, sin “suciedad” */
}

.cpm-notice-bar{
  width: 8px;
  flex: 0 0 8px;
}

.cpm-notice-body{
  padding: 14px 16px;
  width: 100%;
}

.cpm-notice-top{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.25rem;
}

.cpm-notice-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .55rem;
  border-radius:999px;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.2px;
  text-transform:uppercase;
  border:1px solid rgba(11,34,57,.10);
  background:#fff;
}

.cpm-notice-title{
  font-weight:800;
  color:var(--cpm-navy);
}

.cpm-notice-text{
  color:#334155;
}

.cpm-notice-meta{
  color:#64748b;
  font-size:.85rem;
  margin-top:.35rem;
}

.cpm-notice .btn-close{
  opacity:.65;
}
.cpm-notice .btn-close:hover{
  opacity:1;
}

/* Colores por tipo (bs: danger/warning/info) */
.cpm-notice--danger .cpm-notice-bar{ background:#ef4444; }
.cpm-notice--warning .cpm-notice-bar{ background:#f59e0b; }
.cpm-notice--info .cpm-notice-bar{ background:#22c1c3; }

.cpm-notice--danger .cpm-notice-chip{ color:#b91c1c; border-color:rgba(239,68,68,.25); background:rgba(239,68,68,.06); }
.cpm-notice--warning .cpm-notice-chip{ color:#b45309; border-color:rgba(245,158,11,.28); background:rgba(245,158,11,.08); }
.cpm-notice--info .cpm-notice-chip{ color:#0f766e; border-color:rgba(34,193,195,.30); background:rgba(34,193,195,.08); }







/* === Banner de aviso (fijo arriba del contenido) === */
.cpm-aviso{
  width:100%;
  border-bottom:1px solid rgba(255,255,255,.25);
  position: sticky;
  top: 0;
  z-index: 1055;  
}

.cpm-aviso-inner{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 0;
}

.cpm-aviso-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.28rem .55rem;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.25px;
  font-size:.78rem;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.18);
  color:#fff;
  white-space:nowrap;
}

.cpm-aviso-text{ flex:1; min-width:0; color:#fff; }
.cpm-aviso-title{ font-weight:800; line-height:1.2; }
.cpm-aviso-msg{ opacity:.95; }
.cpm-aviso-meta{ opacity:.85; font-size:.85rem; margin-top:2px; }

.cpm-aviso-close{
  border:0;
  background:transparent;
  color:#fff;
  opacity:.85;
  padding:6px;
  border-radius:10px;
}
.cpm-aviso-close:hover{
  opacity:1;
  background: rgba(255,255,255,.14);
}

/* Colores sólidos (pero bonitos) */
.cpm-aviso--cierre{
  background: linear-gradient(90deg, #b91c1c, #ef4444);
}
.cpm-aviso--horario{
  background: linear-gradient(90deg, #b45309, #f59e0b);
}
.cpm-aviso--evento{
  background: linear-gradient(90deg, #0f766e, #22c1c3);
}

/* Responsive: apila un poco */
@media (max-width: 768px){
  .cpm-aviso-inner{
    align-items:flex-start;
    gap:10px;
  }
  .cpm-aviso-chip{ margin-top:1px; }
}


.cpm-slot-list{
  display:flex;
  flex-direction:column;
}

.cpm-slot-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items:center;
  padding: 14px 12px;
  border-radius: 16px;
}

.cpm-slot-row + .cpm-slot-row{
  border-top: 1px solid rgba(11,34,57,.08);
  border-radius: 0;
  padding-top: 16px;
}

.cpm-slot-info{
  min-width:0;
}

.cpm-slot-title{
  font-weight: 700;
}

.cpm-slot-meta{
  font-size: .875rem;
  color: #64748b;
}

.cpm-slot-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap:wrap;
}

.cpm-badge{
  display:inline-flex;
  align-items:center;
  height: 28px;
  padding: 0 10px;
}

/* cuando está seleccionada */
.cpm-slot-row--active{
  background: rgba(34,193,195,.10);
}

/* móvil: acciones debajo */
@media (max-width: 576px){
  .cpm-slot-row{
    grid-template-columns: 1fr;
    align-items:start;
  }
  .cpm-slot-actions{
    justify-content:flex-start;
  }
}

/* Alineación badge en "Franja seleccionada" */
#selAlert .d-flex{
  align-items: center !important;
}

#selBadge{
  display:inline-flex;
  align-items:center;
  height: 28px;
  padding: 0 10px;
  transform: translateY(-1px); /* micro-ajuste visual */
}

.cpm-badge-selected{
  background: linear-gradient(135deg, #ff7a59, #ff9966);
  color: #fff;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .8rem;
  letter-spacing: .3px;
  box-shadow: 0 6px 18px rgba(255,122,89,.25);
  display: inline-flex;
  align-items: center;
}

.cpm-badge.bg-success {
    color: #fff !important;
}

.cpm-badge.bg-secondary {
    color: #fff !important;
}

/* Badge base */
.cpm-badge {
    font-weight: 600;
    letter-spacing: .03em;
    padding: .55em .9em;
    font-size: .85rem;
}

/* Animación suave para última plaza */
@keyframes cpmPulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.6); }
    70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

.cpm-badge-pulse {
    animation: cpmPulse 1.8s infinite;
}

/* Lightbox: imagen centrada, sin deformar */
#cpmLightbox .carousel-item {
  text-align: center;
}

#cpmLightbox .carousel-item img {
  max-height: 80vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: inline-block;
}

/* Que el modal no tenga bordes feos */
#cpmLightbox .modal-content {
  border: 0;
  border-radius: 12px;
}

/* Overlay/backdrop más oscuro (destaca más la foto) */
.cpm-lightbox + .modal-backdrop.show,
.modal-backdrop.show {
  opacity: .88; /* sube/baja a gusto */
}

/* Un “velo” interior para separar la imagen del fondo */
#cpmLightbox .modal-content {
  background: rgba(10, 12, 16, .92) !important;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
}

/* Header limpio y botón de cerrar visible */
#cpmLightbox .modal-header {
  padding: .75rem 1rem;
}

/* Forzamos el color del icono de cerrar (bootstrap usa mask) */
#cpmLightbox .btn-close.btn-close-white {
  filter: none !important;
  opacity: .95;
  transform: scale(1.1);
}

#cpmLightbox .btn-close.btn-close-white:hover {
  opacity: 1;
  transform: scale(1.18);
}

/* Opcional: mejor contraste del “título” */
#cpmLightboxTitle {
  color: rgba(255,255,255,.9);
}

.modal-backdrop.cpm-lightbox-backdrop {
  opacity: .88 !important;
}

/* === Header sticky limpio y sin “suciedad” === */
.cpm-sticky{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #fff;
  isolation: isolate;
}
#main{
  padding-top: var(--cpm-sticky-h, 185px);
}

/* importante para dropdowns */
.cpm-header,
.cpm-header .navbar,
.cpm-header .container-xl {
  overflow: visible;
}

/* sombra suave al hacer scroll (opcional) */
.cpm-header.is-scrolled {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}