/* ==========================================================================
   El Pasatiempo Mini Ranch · Boletos · pt-boletos.css  (v1.2 · 2026-09-30)
   --------------------------------------------------------------------------
   UNA sola fuente para dos lugares:
     - el sitio informativo (WordPress) -> elpasatiempominiranch.com/boletos/
     - el sistema de boletaje (Blazor)  -> boletos.elpasatiempominiranch.com
   Todo vive bajo .bt (raíz del componente) y trae sus propios tokens, así que
   no depende de WordPress, de Divi ni de pt-shell.css.
   Regla de marca: el amarillo es SOLO para acciones de compra
   (Elegir horario, Agregar, Continuar al pago).
   ========================================================================== */

.bt{
  --bt-cream:#FBF8EF; --bt-sunken:#F1EADB; --bt-ink:#2B1A0D; --bt-ink-body:#3B2314; --bt-muted:#7A6857;
  --bt-yellow:#F5B300; --bt-yellow-edge:#D99000;
  --bt-red:#C8372D; --bt-red-edge:#8E2119;
  --bt-deep:#05301A; --bt-deep-2:#0A4424; --bt-deep-3:#0F5A30; --bt-night:#03200F;
  --bt-mint:#8FD19E; --bt-mute:#C9DECF; --bt-sky-soft:#DCF1FA; --bt-sky-deep:#3D8FBE;
  --bt-glass:rgba(255,255,255,.07); --bt-glass-2:rgba(255,255,255,.12); --bt-edge:rgba(255,255,255,.16);
  --bt-display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --bt-body:"Nunito","Trebuchet MS",system-ui,sans-serif;
  --bt-sh:0 18px 40px rgba(0,0,0,.28);
  position:relative;color:var(--bt-mute);font-family:var(--bt-body);font-size:16px;line-height:1.5}
.bt *,.bt *:before,.bt *:after{box-sizing:border-box}
.bt button{font:inherit;cursor:pointer}
.bt svg{flex:0 0 auto}
.bt :focus-visible{outline:3px solid var(--bt-sky-soft);outline-offset:3px}
.bt [hidden]{display:none!important}
.bt-sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0);white-space:nowrap}

/* --- ¿Qué día? ----------------------------------------------------------- */
.bt-when{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.bt-when-label{margin:0!important;font-size:15px!important;color:var(--bt-mute)!important}
.bt-when-label b{display:block;font-family:var(--bt-display);font-weight:800;font-size:20px;line-height:1.15;color:var(--bt-cream)}
.bt-month{position:relative;display:inline-flex;align-items:center;gap:8px;color:var(--bt-cream);font-weight:800}
.bt-month svg{width:18px;height:18px;color:var(--bt-mint)}
.bt-month select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:var(--bt-cream);
  font:800 16px var(--bt-body);padding:6px 26px 6px 0;cursor:pointer;text-transform:capitalize}
.bt-month select option{color:var(--bt-ink)}
.bt-month:after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;margin-top:-6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);pointer-events:none}

.bt-days{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:12px;align-items:stretch;margin:0 0 22px}
.bt-days-arrow{display:grid;place-items:center;border:1px solid var(--bt-edge);border-radius:16px;background:var(--bt-glass);
  color:var(--bt-cream);transition:background-color .15s ease}
.bt-days-arrow:hover{background:var(--bt-glass-2)}
.bt-days-arrow svg{width:22px;height:22px}
.bt-days-arrow:disabled{opacity:.35;cursor:default}
.bt-days-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding:2px}
.bt-days-track::-webkit-scrollbar{display:none}
.bt-day{flex:0 0 auto;width:112px;min-height:88px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;border:1px solid var(--bt-edge);border-radius:16px;background:var(--bt-glass);color:var(--bt-cream);
  transition:background-color .15s ease,transform .15s ease}
.bt-day:hover{background:var(--bt-glass-2)}
.bt-day small{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--bt-mute)}
.bt-day b{font-family:var(--bt-display);font-weight:800;font-size:30px;line-height:1}
.bt-day[aria-pressed="true"]{background:var(--bt-yellow);border-color:var(--bt-yellow-edge);color:var(--bt-ink);
  box-shadow:0 4px 0 var(--bt-yellow-edge)}
.bt-day[aria-pressed="true"] small{color:var(--bt-ink)}
.bt-day:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
@media (max-width:640px){
  .bt-days{grid-template-columns:minmax(0,1fr);gap:0}
  .bt-days-arrow{display:none}
  .bt-day{width:78px;min-height:76px;border-radius:14px}
  .bt-day b{font-size:24px}
}

/* --- Pestañas (Entrada / Experiencias) ----------------------------------- */
.bt-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px}
.bt-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid var(--bt-edge);background:var(--bt-glass);color:var(--bt-cream);font-weight:800;font-size:15px}
.bt-tab svg{width:18px;height:18px;color:var(--bt-mint)}
.bt-tab span{font-weight:700;color:var(--bt-mute)}
.bt-tab[aria-selected="true"]{background:rgba(143,209,158,.2);border-color:var(--bt-mint)}
.bt-note{margin:0 0 22px!important;font-size:14.5px!important;color:var(--bt-mute)!important}
/* Aviso temporal del sitio mientras la compra en línea no está abierta (v1.1) */
.bt-aviso{margin:0 0 18px!important;padding:12px 16px;border-radius:14px;border:1px solid rgba(143,209,158,.45);
  background:rgba(143,209,158,.12);color:var(--bt-cream)!important;font-size:15px!important}
.bt-aviso b{color:var(--bt-mint)}

/* Las experiencias NO incluyen la entrada al rancho (v1.2): aviso en la pestaña, etiqueta en cada boleto,
   aviso en la ventana y alerta en el carrito si falta la entrada. */
.bt-req-aviso{display:flex;gap:14px;align-items:flex-start;margin:0 0 22px;padding:16px 18px;border-radius:16px;
  background:var(--bt-cream);color:var(--bt-ink-body);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.bt-req-aviso>svg{width:28px;height:28px;color:var(--bt-red);margin-top:2px}
.bt-req-aviso p{margin:0 0 8px!important;color:var(--bt-ink-body)!important;font-size:15px!important;line-height:1.5!important}
.bt-req-aviso b{color:var(--bt-ink)}
.bt-link{padding:0;border:0;background:none;color:#0A6624;font-weight:800;font-size:14.5px;text-decoration:underline;text-underline-offset:3px}
.bt-req{display:flex;align-items:center;gap:6px;margin:2px 0 0!important;padding:6px 10px;border-radius:8px;background:#FBE3DF;
  color:var(--bt-red-edge)!important;font-size:13px!important;font-weight:800;line-height:1.3!important}
.bt-req svg{width:16px;height:16px}
.bt-req-m{display:flex;align-items:center;gap:8px;margin:14px 0 0!important;padding:10px 14px;border-radius:12px;
  background:rgba(200,55,45,.18);border:1px solid rgba(200,55,45,.5);color:var(--bt-cream)!important;font-size:14.5px!important}
.bt-req-m svg{width:18px;height:18px;color:#F2A49B}
.bt-cart-warn{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;
  background:rgba(200,55,45,.22);border-bottom:1px solid rgba(200,55,45,.5);border-radius:22px 22px 0 0}
.bt-cart-warn p{margin:0!important;color:var(--bt-cream)!important;font-size:14px!important}
.bt-cart-warn .bt-link{color:var(--bt-mint);white-space:nowrap}

/* --- Boletos -------------------------------------------------------------- */
.bt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
@media (max-width:900px){.bt-grid{grid-template-columns:minmax(0,1fr);gap:20px}}

/* La sombra va en el contenedor: el recorte de las perforaciones (mask) se la comería. */
.bt-ticket{position:relative;filter:drop-shadow(0 14px 22px rgba(0,0,0,.3))}
.bt-ticket-in{height:100%}
.bt-ticket-in{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:20px 26px;
  background:var(--bt-cream);border-radius:8px;color:var(--bt-ink-body);overflow:hidden;
  -webkit-mask:radial-gradient(circle 8px at 0 50%,#0000 97%,#000) left/51% 24px repeat-y,
               radial-gradient(circle 8px at 100% 50%,#0000 97%,#000) right/51% 24px repeat-y;
          mask:radial-gradient(circle 8px at 0 50%,#0000 97%,#000) left/51% 24px repeat-y,
               radial-gradient(circle 8px at 100% 50%,#0000 97%,#000) right/51% 24px repeat-y}
.bt-thumb{position:relative;border-radius:14px;overflow:hidden;min-height:210px;
  background:radial-gradient(circle at 50% 120%,rgba(143,209,158,.35),transparent 55%),
    repeating-radial-gradient(circle at 50% 130%,#0E5A2E 0 16px,#0B4E27 16px 32px)}
.bt-thumb-price{position:absolute;z-index:2;top:14px;left:8px;right:8px;text-align:center}
.bt-thumb-price b{display:block;padding:7px 6px 5px;border-radius:10px;background:var(--bt-red);color:#fff;
  font-family:var(--bt-display);font-weight:800;font-size:28px;line-height:1;box-shadow:0 3px 0 var(--bt-red-edge)}
.bt-thumb-price span{display:inline-block;margin-top:6px;padding:3px 8px;border-radius:8px;background:rgba(200,55,45,.92);
  color:#fff;font-size:11.5px;font-weight:800;line-height:1.2}
.bt-thumb img{position:absolute;z-index:1;left:50%;bottom:-3px;transform:translateX(-50%);height:62%;width:auto;max-width:96%;
  object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35))}
.bt-thumb .bt-trio img{height:48%}
.bt-thumb .bt-trio img:nth-child(1){left:28%}
.bt-thumb .bt-trio img:nth-child(2){left:72%;height:56%}
.bt-thumb .bt-trio img:nth-child(3){left:50%;height:44%;z-index:2}
.bt-badge{position:absolute;z-index:3;top:10px;left:10px;padding:3px 9px;border-radius:999px;background:var(--bt-cream);
  color:#053F16;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.bt-badge{white-space:nowrap}
.bt-badge~.bt-thumb-price{top:40px}

.bt-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.bt-body h3{margin:0!important;padding:0!important;font-family:var(--bt-display)!important;font-weight:800!important;
  font-size:22px!important;line-height:1.15!important;color:var(--bt-ink)!important}
.bt-tags{list-style:none!important;margin:0!important;padding:0!important;display:flex;flex-wrap:wrap;gap:6px}
.bt-tags li{list-style:none!important;margin:0!important;padding:3px 10px!important;border-radius:8px;background:var(--bt-sunken);
  color:var(--bt-muted);font-size:12.5px!important;font-weight:700;line-height:1.4}
.bt-desc{margin:0!important;font-size:14.5px!important;line-height:1.5!important;color:var(--bt-muted)!important;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* max-height: con la fila estirada (tarjetas de igual altura) el clamp solo no recorta y asomaba una 4.ª línea */
.bt-desc{flex:none;max-height:4.5em}
.bt-ticket.is-open .bt-desc{-webkit-line-clamp:unset;display:block;max-height:none}
.bt-more{align-self:flex-start;padding:0;border:0;background:none;color:#0A6624;font-weight:800;font-size:13.5px;
  text-decoration:underline;text-underline-offset:3px}
.bt-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.bt-price{margin:0!important;color:var(--bt-muted)!important;font-size:14px!important}
.bt-price b{font-family:var(--bt-display);font-weight:800;font-size:28px;line-height:1;color:var(--bt-ink)}
.bt-spots{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:var(--bt-sky-soft);
  color:#1E5E83;font-size:12.5px;font-weight:800}
.bt-cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;margin-top:6px;border-radius:999px;
  border:2px solid var(--bt-yellow-edge);background:var(--bt-yellow);color:var(--bt-ink)!important;box-shadow:0 4px 0 var(--bt-yellow-edge);
  font-family:var(--bt-display);font-weight:800;font-size:17px;line-height:1;text-decoration:none!important;
  transition:transform .12s ease,background-color .12s ease,box-shadow .12s ease}
.bt-cta:hover{background:var(--bt-yellow-edge);transform:translateY(2px);box-shadow:0 2px 0 var(--bt-yellow-edge)}
.bt-cta svg{width:20px;height:20px}
@media (max-width:520px){
  .bt-ticket-in{grid-template-columns:104px minmax(0,1fr);gap:14px;padding:16px 20px}
  .bt-thumb{min-height:170px}
  .bt-thumb-price b{font-size:21px}
  .bt-thumb-price span{font-size:10px}
  .bt-badge{top:8px;left:50%;transform:translateX(-50%);font-size:9px;padding:2px 7px;letter-spacing:.03em}
  .bt-badge~.bt-thumb-price{top:32px}
  .bt-cta{grid-column:1/-1}
}

/* Agotado: gris, franja roja diagonal y botón deshabilitado */
.bt-ribbon{display:none}
.bt-ticket.is-agotado .bt-ticket-in>*:not(.bt-ribbon){filter:grayscale(.7);opacity:.6}
.bt-ticket.is-agotado .bt-ribbon{display:block;position:absolute;z-index:5;left:-20%;right:-20%;top:42%;padding:8px 0;
  transform:rotate(-24deg);background:var(--bt-red);color:#fff;text-align:center;font-family:var(--bt-display);font-weight:800;
  font-size:20px;letter-spacing:.2em;text-transform:uppercase;box-shadow:0 6px 16px rgba(0,0,0,.25);pointer-events:none}
.bt-ticket.is-agotado .bt-cta{pointer-events:none;background:#CFC7B8;border-color:#B4AA98;box-shadow:none;color:#6E6456!important}
.bt-ticket.is-agotado .bt-spots{background:#F6D9D6;color:var(--bt-red-edge)}

/* --- Ventana de horario y cantidades (sistema de boletaje) --------------- */
.bt-modal{width:min(720px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:0;border:1px solid var(--bt-edge);
  border-radius:26px;background:linear-gradient(180deg,var(--bt-deep-2),var(--bt-night));color:var(--bt-cream);
  box-shadow:0 30px 70px rgba(0,0,0,.5);overflow:auto}
.bt-modal::backdrop{background:rgba(3,32,15,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.bt-modal-in{position:relative;padding:24px 26px 20px}
.bt-close{position:absolute;top:16px;right:16px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid rgba(251,248,239,.6);background:transparent;color:var(--bt-cream);font-weight:800}
.bt-close:hover{background:rgba(251,248,239,.1)}
.bt-close svg{width:18px;height:18px}
.bt-modal-head{display:flex;gap:16px;align-items:center;margin:4px 0 18px;padding-right:130px}
.bt-mini{position:relative;flex:0 0 96px;height:96px;border-radius:14px;overflow:hidden;
  background:repeating-radial-gradient(circle at 50% 130%,#0E5A2E 0 12px,#0B4E27 12px 24px)}
.bt-mini img{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);height:88%;width:auto}
.bt-modal-head h2{margin:0 0 4px!important;font-family:var(--bt-display)!important;font-weight:800!important;font-size:22px!important;
  line-height:1.1!important;text-transform:uppercase;color:var(--bt-cream)!important}
.bt-modal-price{margin:0!important;color:var(--bt-mute)!important;font-size:14px!important}
.bt-modal-price b{font-family:var(--bt-display);font-size:26px;color:var(--bt-cream)}
.bt-modal-date{display:flex;align-items:center;gap:6px;margin:4px 0 0!important;color:var(--bt-mint)!important;font-weight:800;font-size:14.5px!important}
.bt-modal-date svg{width:16px;height:16px}

.bt-seg{display:flex;gap:26px;border-bottom:1px solid var(--bt-edge);margin:0 0 16px}
.bt-seg button{position:relative;padding:10px 0;border:0;background:none;color:var(--bt-mute);font-weight:800;font-size:16px}
.bt-seg button[aria-selected="true"]{color:var(--bt-cream)}
.bt-seg button[aria-selected="true"]:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:var(--bt-mint)}
.bt-seg-sm{gap:22px;border-bottom:0;margin-bottom:12px}
.bt-seg-sm button{font-size:15px}
.bt-seg-sm button span{font-weight:700;color:var(--bt-mute);margin-left:4px}

.bt-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:10px;margin:0 0 6px}
.bt-slot{min-height:52px;border-radius:14px;border:1px solid var(--bt-edge);background:var(--bt-glass);color:var(--bt-cream);
  font-family:var(--bt-display);font-weight:800;font-size:18px;line-height:1.05}
.bt-slot small{display:block;font-family:var(--bt-body);font-weight:700;font-size:11px;color:var(--bt-mute)}
.bt-slot:hover{background:var(--bt-glass-2)}
.bt-slot[aria-pressed="true"]{background:var(--bt-mint);border-color:var(--bt-mint);color:var(--bt-deep)}
.bt-slot[aria-pressed="true"] small{color:var(--bt-deep)}
.bt-slot:disabled{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.bt-empty{margin:4px 0 8px!important;font-size:14.5px!important;color:var(--bt-mute)!important}
.bt-detail p{margin:0 0 12px!important;color:var(--bt-mute)!important;font-size:15px!important}
.bt-detail .bt-tags li{background:var(--bt-glass-2);color:var(--bt-cream)}

.bt-qtys{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:16px -26px 0;padding:18px 26px 0;
  border-top:1px solid var(--bt-edge)}
.bt-qty-label{display:flex;justify-content:space-between;gap:8px;margin:0 0 8px!important;font-size:14.5px!important;color:var(--bt-mute)!important}
.bt-qty-label b{color:var(--bt-cream);font-weight:800}
.bt-qty{display:flex;align-items:center;justify-content:space-between;padding:6px;border-radius:999px;border:1px solid var(--bt-edge)}
.bt-qty output{font-family:var(--bt-display);font-weight:800;font-size:22px;color:var(--bt-cream);min-width:2ch;text-align:center}
.bt-qty button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:var(--bt-glass-2);color:var(--bt-cream)}
.bt-qty button:last-child{background:var(--bt-mint);color:var(--bt-deep)}
.bt-qty button:disabled{opacity:.35;cursor:not-allowed}
.bt-qty svg{width:20px;height:20px}

.bt-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}
.bt-modal-foot p{margin:0!important;color:var(--bt-mute)!important;font-size:14.5px!important}
.bt-modal-foot p b{color:var(--bt-cream);font-family:var(--bt-display);font-size:20px}
.bt-add,.bt-pay{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:999px;
  border:2px solid var(--bt-yellow-edge);background:var(--bt-yellow);color:var(--bt-ink)!important;box-shadow:0 4px 0 var(--bt-yellow-edge);
  font-family:var(--bt-display);font-weight:800;font-size:17px;text-decoration:none!important;white-space:nowrap}
.bt-add:hover,.bt-pay:hover{background:var(--bt-yellow-edge)}
.bt-add:disabled{background:var(--bt-glass-2);border-color:transparent;box-shadow:none;color:var(--bt-mute)!important;cursor:not-allowed}
@media (max-width:520px){
  .bt-modal-in{padding:18px 18px 16px}
  .bt-qtys{margin:14px -18px 0;padding:16px 18px 0}
  .bt-modal-foot{flex-direction:column;align-items:stretch}
  .bt-modal-head{padding:48px 0 0}
  .bt-close{top:12px;right:12px;min-height:40px;padding:0 14px}
  .bt-modal-head h2{font-size:19px!important}
  .bt-mini{flex-basis:72px;height:72px}
}

/* --- Carrito (barra fija) ------------------------------------------------- */
.bt-cart{position:fixed;z-index:9990;left:50%;bottom:16px;transform:translateX(-50%);width:min(760px,calc(100vw - 24px));
  border-radius:22px;border:1px solid var(--bt-edge);background:rgba(3,32,15,.94);box-shadow:0 18px 44px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--bt-cream)}
.bt-cart-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px}
.bt-cart-sum{margin:0!important;color:var(--bt-mute)!important;font-size:14.5px!important}
.bt-cart-sum b{display:block;font-family:var(--bt-display);font-size:22px;line-height:1.1;color:var(--bt-cream)}
.bt-cart-actions{display:flex;gap:10px;align-items:center}
.bt-cart-toggle{min-height:48px;padding:0 18px;border-radius:999px;border:1px solid rgba(251,248,239,.6);background:transparent;
  color:var(--bt-cream);font-weight:800}
.bt-cart-list{list-style:none!important;margin:0!important;padding:4px 20px 12px!important;max-height:40vh;overflow:auto;
  border-bottom:1px solid var(--bt-edge)}
.bt-cart-list li{list-style:none!important;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0!important;
  border-bottom:1px dashed var(--bt-edge)}
.bt-cart-list li:last-child{border-bottom:0}
.bt-cart-list b{color:var(--bt-cream)}
.bt-cart-list small{display:block;color:var(--bt-mute);font-size:13px}
.bt-cart-list button{border:0;background:none;color:var(--bt-mint);font-weight:800;font-size:13.5px;text-decoration:underline}
@media (max-width:520px){
  .bt-cart-bar{flex-wrap:wrap;padding:12px}
  .bt-cart-actions{width:100%}
  .bt-cart-actions>*{flex:1 1 0}
  .bt-pay{padding:0 16px}
}
/* Deja espacio para que la barra no tape el último boleto */
.bt.has-cart{padding-bottom:120px}

@media (prefers-reduced-motion:reduce){.bt *{transition:none!important;scroll-behavior:auto!important}}