/* =====================================================================
   /css/modal_evento_musical.css
   Ficha de evento MUSICAL (layout 'music') — se aplica solo cuando
   #modalEventoTickets lleva la clase .em-mode, así el modal clásico
   de eventos no se ve afectado.
   Origen del diseño: maqueta_evento_musical.php · 2026-08-16
   ===================================================================== */

#modalEventoTickets.em-mode{
  --em-blue:#005BAB;
  --em-blue-dark:#283F8C;
  --em-orange:#F4801E;
  --em-txt:#111827;
  --em-txt2:#4b5563;
  --em-txt3:#6b7280;
  --em-line:#e5e7eb;
  --em-bg:#f8fafc;
  --em-r:12px;
  --em-sh:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
}

#modalEventoTickets.em-mode .modal-content{ background:var(--em-bg); }
#modalEventoTickets.em-mode .em-body{ padding:0 14px 14px; }

/* ------------------------------------------------------------ cabecera -- */
#modalEventoTickets.em-mode .em-head{ align-items:flex-start; background:#fff; }
#modalEventoTickets.em-mode .em-head-in{ min-width:0; }
#modalEventoTickets.em-mode .em-head-title{ font-size:1.35rem; font-weight:800; letter-spacing:-.4px; }
#modalEventoTickets.em-mode .em-head-date{ font-size:.9rem; color:var(--em-txt3); display:flex; gap:.35rem; flex-wrap:wrap; }
#modalEventoTickets.em-mode .em-head-date .sep{ opacity:.5; }

/* ---------------------------------------------------------------- hero -- */
#modalEventoTickets.em-mode .em-hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:#fff; border:1px solid var(--em-line); border-radius:var(--em-r);
  overflow:hidden; margin-top:14px; box-shadow:var(--em-sh);
}
#modalEventoTickets.em-mode .em-hero-img{ position:relative; min-height:280px; background:#0f172a; }
#modalEventoTickets.em-mode .em-hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }
#modalEventoTickets.em-mode .em-soldout{
  position:absolute; top:14px; right:-52px; transform:rotate(35deg); transform-origin:top right;
  background:#000; color:#fff; font-weight:800; font-size:18px; letter-spacing:.5px;
  padding:10px 70px; line-height:1; z-index:5; text-transform:uppercase;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}
#modalEventoTickets.em-mode .em-hero-info{ padding:22px 26px; }

#modalEventoTickets.em-mode .em-badge{
  display:inline-block; background:var(--em-blue); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:1px; text-transform:uppercase; padding:5px 10px; border-radius:5px;
}
#modalEventoTickets.em-mode .em-title{
  margin:12px 0 2px; font-size:2.1rem; line-height:1.1; font-weight:800; letter-spacing:-1px; color:var(--em-txt);
}
#modalEventoTickets.em-mode .em-subtitle{
  margin:0 0 14px; font-size:1.35rem; color:var(--em-orange); font-style:italic; font-weight:600;
  display:flex; align-items:center; gap:14px;
}
#modalEventoTickets.em-mode .em-subtitle::after{ content:""; flex:1; height:1px; background:var(--em-line); }

#modalEventoTickets.em-mode .em-facts{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:12px; text-align:left; }
#modalEventoTickets.em-mode .em-facts li{ display:grid; grid-template-columns:22px 1fr; gap:11px; align-items:start; }
#modalEventoTickets.em-mode .em-facts i{ color:var(--em-txt3); font-size:15px; margin-top:3px; }
#modalEventoTickets.em-mode .em-facts b{ font-weight:600; color:var(--em-txt); }
#modalEventoTickets.em-mode .em-facts small{ display:block; color:var(--em-txt3); font-size:13px; }

#modalEventoTickets.em-mode .em-tags{ color:var(--em-txt2); font-size:14px; margin:0 0 12px; text-align:left; }
#modalEventoTickets.em-mode .em-from{ font-size:15px; color:var(--em-txt2); margin:0 0 16px; text-align:left; }
#modalEventoTickets.em-mode .em-from b{ color:var(--em-orange); font-size:1.45rem; font-weight:800; margin-left:4px; }

#modalEventoTickets.em-mode .em-cta{ display:flex; gap:10px; flex-wrap:wrap; }
#modalEventoTickets.em-mode .em-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; height:44px; padding:0 18px;
  border-radius:9px; border:1px solid var(--em-line); background:#fff; color:var(--em-txt);
  font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap;
}
#modalEventoTickets.em-mode .em-btn:hover{ background:#f1f5f9; }
#modalEventoTickets.em-mode .em-btn-main{
  background:var(--em-orange); border-color:var(--em-orange); color:#fff; min-width:180px;
}
#modalEventoTickets.em-mode .em-btn-main:hover{ background:#dd6f12; color:#fff; }

/* --------------------------------------------------------------- chips -- */
#modalEventoTickets.em-mode .em-chips{
  display:flex; background:#fff; border:1px solid var(--em-line); border-top:0;
  border-radius:0 0 var(--em-r) var(--em-r); margin-top:-1px; overflow-x:auto; scrollbar-width:none;
}
#modalEventoTickets.em-mode .em-chips::-webkit-scrollbar{ display:none; }
#modalEventoTickets.em-mode .em-chip{
  flex:1 0 auto; min-width:145px; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:13px 12px; border-right:1px solid var(--em-line); font-size:13px; color:var(--em-txt2); text-align:center;
}
#modalEventoTickets.em-mode .em-chip:last-child{ border-right:0; }
#modalEventoTickets.em-mode .em-chip i{ font-size:17px; color:var(--em-blue-dark); }
#modalEventoTickets.em-mode .em-chip b{ font-weight:600; color:var(--em-txt); }
#modalEventoTickets.em-mode .em-chip span{ font-size:12px; color:var(--em-txt3); }

/* -------------------------------------------------------------- tarjetas -- */
#modalEventoTickets.em-mode .em-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0 10px; align-items:start;
}
#modalEventoTickets.em-mode .em-card{
  background:#fff; border:1px solid var(--em-line); border-radius:var(--em-r);
  box-shadow:var(--em-sh); overflow:hidden; text-align:left;
}
#modalEventoTickets.em-mode .em-card.em-wide,
#modalEventoTickets.em-mode .em-card.em-tickets{ grid-column:1 / -1; }
#modalEventoTickets.em-mode .em-card > summary{
  list-style:none; cursor:pointer; padding:14px 18px; font-weight:700; font-size:1rem;
  display:flex; align-items:center; gap:10px;
}
#modalEventoTickets.em-mode .em-card > summary::-webkit-details-marker{ display:none; }
#modalEventoTickets.em-mode .em-card > summary i.ic{ color:var(--em-blue); font-size:15px; width:18px; text-align:center; }
#modalEventoTickets.em-mode .em-card > summary .chev{ margin-left:auto; color:var(--em-txt3); font-size:13px; transition:transform .18s; }
#modalEventoTickets.em-mode .em-card[open] > summary .chev{ transform:rotate(180deg); }
#modalEventoTickets.em-mode .em-card .in{ padding:0 18px 18px; color:var(--em-txt2); }
#modalEventoTickets.em-mode .em-card .in p{ margin:0 0 10px; }
#modalEventoTickets.em-mode .em-sep{ height:1px; background:var(--em-line); margin:14px 0; }
#modalEventoTickets.em-mode .em-muted{ color:var(--em-txt3); font-size:13.5px; }
#modalEventoTickets.em-mode .em-link{ color:var(--em-blue); text-decoration:none; font-weight:600; font-size:14px; }
#modalEventoTickets.em-mode .em-link:hover{ text-decoration:underline; }

#modalEventoTickets.em-mode .em-person{ display:grid; grid-template-columns:80px 1fr; gap:14px; align-items:center; }
#modalEventoTickets.em-mode .em-person img{ width:80px; height:80px; border-radius:50%; object-fit:cover; background:#e2e8f0; }
#modalEventoTickets.em-mode .em-person .nm{ font-weight:700; color:var(--em-txt); margin:0 0 4px; }

#modalEventoTickets.em-mode .em-venue{ display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:start; }
#modalEventoTickets.em-mode .em-venue img{ width:120px; height:82px; border-radius:9px; object-fit:cover; background:#e2e8f0; }
#modalEventoTickets.em-mode .em-venue .nm{ font-weight:700; color:var(--em-txt); margin:0 0 4px; }

#modalEventoTickets.em-mode .em-sched{ width:100%; border-collapse:collapse; font-size:14px; }
#modalEventoTickets.em-mode .em-sched td{ padding:9px 0; border-bottom:1px solid var(--em-line); vertical-align:top; }
#modalEventoTickets.em-mode .em-sched tr:last-child td{ border-bottom:0; }
#modalEventoTickets.em-mode .em-sched td:first-child{ width:42%; color:var(--em-txt); font-weight:600; white-space:nowrap; }

#modalEventoTickets.em-mode .em-map{ border-radius:10px; overflow:hidden; border:1px solid var(--em-line); background:#e2e8f0; }
#modalEventoTickets.em-mode .em-map iframe{ width:100%; height:190px; border:0; display:block; }

#modalEventoTickets.em-mode .em-checklist{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px; }
#modalEventoTickets.em-mode .em-checklist li{ display:grid; grid-template-columns:18px 1fr; gap:9px; }
#modalEventoTickets.em-mode .em-checklist i{ color:var(--em-blue); font-size:12px; margin-top:4px; }

/* ------------------------------------------- carrito sobre la ficha ------ */
/* La modal de compra vive DENTRO de #modalEventoTickets (lo exige el JS de
   tickets), así que hay que sacarla del flujo y ponerla por encima. */
#modalEventoTickets.em-mode .em-tk-modal{
  position:fixed; inset:0; z-index:1080;
}
#modalEventoTickets.em-mode .em-tk-modal .modal-dialog{
  max-width:560px; margin:1.75rem auto;
}
#modalEventoTickets.em-mode .em-tk-modal .modal-content{
  background:#fff; border:0; border-radius:14px;
  box-shadow:0 24px 60px rgba(15,23,42,.35);
}
#modalEventoTickets.em-mode .em-tk-modal .modal-header{
  align-items:center; border-bottom:1px solid var(--em-line);
}
#modalEventoTickets.em-mode .em-tk-modal .modal-title{ font-size:1.1rem; font-weight:700; }
#modalEventoTickets.em-mode .em-tk-modal .modal-body{ padding:1rem 1.1rem 1.4rem; }

/* Icono + contador del carrito en la cabecera de la modal de compra */
#modalEventoTickets.em-mode .em-tk-cart{
  position:relative; display:inline-block; width:42px; line-height:0; margin-left:auto;
}
#modalEventoTickets.em-mode .em-tk-cart img{ display:block; width:100%; height:auto; }
#modalEventoTickets.em-mode .em-tk-cart .em-cart-badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:#fff; font-weight:800; font-size:16px; line-height:1; pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* El backdrop de la modal de compra debe tapar la ficha, no al revés */
.modal-backdrop.show ~ .modal-backdrop.show{ z-index:1075; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width:991.98px){
  #modalEventoTickets.em-mode .em-hero{ grid-template-columns:1fr; }
  #modalEventoTickets.em-mode .em-hero-img{ min-height:220px; }
  #modalEventoTickets.em-mode .em-hero-info{ padding:16px 16px 14px; }
  #modalEventoTickets.em-mode .em-title{ font-size:1.7rem; }
  #modalEventoTickets.em-mode .em-subtitle{ font-size:1.15rem; }
  #modalEventoTickets.em-mode .em-grid{ grid-template-columns:1fr; }
  #modalEventoTickets.em-mode .em-chip{ min-width:118px; font-size:12px; }
  #modalEventoTickets.em-mode .em-cta .em-btn{ flex:1 1 auto; }
  #modalEventoTickets.em-mode .em-cta .em-btn-main{ min-width:0; }
}
@media (max-width:575.98px){
  #modalEventoTickets.em-mode .em-title{ font-size:1.5rem; }
  #modalEventoTickets.em-mode .em-chip{ min-width:100px; padding:11px 8px; }
  #modalEventoTickets.em-mode .em-chip span{ display:none; }
  #modalEventoTickets.em-mode .em-person{ grid-template-columns:64px 1fr; }
  #modalEventoTickets.em-mode .em-person img{ width:64px; height:64px; }
  #modalEventoTickets.em-mode .em-venue{ grid-template-columns:1fr; }
  #modalEventoTickets.em-mode .em-venue img{ width:100%; height:150px; }
}