/* detalle.css · popup con el detalle de cada evento
   Se abre desde la tarjeta hacia el centro de la pantalla (detalle.js hace la animación).
   Estructura: .dlg > .dlg-back + .dlg-win [.dlg-face, .dlg-content > (.dlg-cover + .dlg-body), .dlg-x]
   Índice: 1 Ajustes rápidos · 2 Capas y ventana · 3 Contenido · 4 Botones */

/* 1. Ajustes rápidos */
:root{
  --dlg-width:560px;          /* ancho máximo de la ventana en pantallas grandes */
  --dlg-radius:30px;          /* redondeo */
  --dlg-bg:#0b0b0e;           /* fondo de la ventana */
}

/* 2. Capas y ventana */
.dlg{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none}
.dlg.on{visibility:visible;pointer-events:auto}
.dlg-back{position:absolute;inset:0;background:rgba(0,0,0,.66);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;touch-action:none}
.dlg-win{position:fixed;overflow:hidden;background:var(--dlg-bg);border-radius:var(--dlg-radius);box-shadow:0 40px 100px -30px #000;transform:translateZ(0)}
.dlg-win::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.dlg-face{position:absolute;left:0;top:0;z-index:5;pointer-events:none;margin:0}
.dlg-content{position:absolute;left:0;top:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;outline:0}
.dlg-content::-webkit-scrollbar{display:none}
.dlg-x{position:absolute;top:12px;right:12px;z-index:6;width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(12,12,16,.78);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.dlg-x .ico{width:20px;height:20px}
.dlg-x:active{opacity:.7}

/* 3. Contenido */
.dlg-cover{position:relative;isolation:isolate;height:clamp(200px,32vh,250px)}
.dlg-cover .k-date{position:absolute;left:18px;top:16px;z-index:3}
.dlg-body{position:relative;display:grid;gap:18px;padding:0 22px 26px;margin-top:-30px}
.dlg-head{display:grid;gap:12px;justify-items:start}
.dlg-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dlg h2{font-size:clamp(28px,8vw,36px);font-weight:800;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.dlg-desc{margin:0;color:rgba(255,255,255,.78);font-size:16px;line-height:1.55}

.dlg-info{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.dlg-info li{display:flex;align-items:center;gap:14px;min-width:0}
.dlg-info .k-ic{width:40px;height:40px}
.dlg-info .k-ic .ico{width:20px;height:20px}
.dlg-info div{display:grid;min-width:0}
.dlg-info small{font-size:12px;color:var(--muted);letter-spacing:.04em}
.dlg-info b{font-size:16px;font-weight:700;overflow-wrap:anywhere}

.dlg-map{position:relative;height:170px;border-radius:20px;overflow:hidden;background:#15151b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.dlg-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.7) contrast(.95)}
.dlg-map::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

.dlg-go{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:999px;text-decoration:none;
  font-weight:700;font-size:14px;color:#000;background:#F4F4F5}
.dlg-go .ico{width:16px;height:16px}

/* 4. Botones */
.dlg-actions{display:grid;gap:10px}
.dlg-actions>div{display:grid;gap:10px}
.dlg-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 20px;border-radius:999px;border:0;cursor:pointer;
  font:700 16px 'DM Sans',sans-serif;text-decoration:none;color:var(--ink);
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dlg-btn .ico{width:19px;height:19px}
.dlg-btn:active{opacity:.8}
.dlg-btn.main{background:#F4F4F5;color:#000;box-shadow:none}
.dlg-btn small{font-weight:500;opacity:.6;font-size:13px}
.dlg-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dlg-row>:last-child:nth-child(odd){grid-column:1/-1}   /* con 3 botones, el último ocupa todo el ancho */
.dlg-note{margin:0;font-size:13px;color:var(--muted);text-align:center}
.dlg-toast{position:absolute;left:50%;bottom:20px;z-index:8;transform:translate(-50%,10px);opacity:0;pointer-events:none;padding:10px 18px;border-radius:999px;
  background:#F4F4F5;color:#000;font-weight:700;font-size:14px;transition:opacity .25s,transform .25s}
.dlg-toast.on{opacity:1;transform:translate(-50%,0)}

/* Con la ventana abierta, la página de atrás no se mueve (detalle.js la fija) */
body.dlg-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* 5. Entradas: barra fija abajo de la ventana (siempre a la vista) */
.dlg-buy{position:sticky;bottom:0;z-index:4;display:grid;gap:10px;padding:28px 22px calc(18px + env(safe-area-inset-bottom,0px));margin-top:-26px;
  background:linear-gradient(rgba(11,11,14,0),var(--dlg-bg) 34%)}
.dlg-win:has(.dlg-buy) .dlg-toast{bottom:auto;top:70px}