/* =========================================================
   MARQUESINA — Rediseño Comunidad RossDrea
   Se carga DESPUÉS de style.css para sobrescribir lo necesario.
   Header: global. Home: scopeado bajo .mq-home
   ========================================================= */

:root{
  --mq-bg:#16121f;
  --mq-surface:#1f1830;
  --mq-surface-2:#221a30;
  --mq-border:#33264a;
  --mq-border-2:#3a2b52;
  --mq-text:#f6f0ff;
  --mq-muted:#b3a7c9;
  --mq-muted-2:#8877a3;
  --mq-amber:#ffce4a;
  --mq-pink:#ff3d81;
  --mq-green:#4cd137;
}

body{
  background:var(--mq-bg)!important;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--mq-text);
}

/* ---------- CABECERA (marquesina) ---------- */
.mq-bulbs{
  height:8px;
  background:radial-gradient(circle,var(--mq-amber) 0 3px,transparent 4px) 0 0/22px 8px repeat-x;
  box-shadow:0 0 14px rgba(255,206,74,.5);
}
.mq-header{
  background:#1d1629;border-bottom:1px solid #2e2340;padding:11px 22px;
  display:flex;align-items:center;gap:22px;margin-bottom:0;position:relative;
}
.mq-brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:1}
.mq-brand-logo{
  width:46px;height:46px;object-fit:contain;flex:none;
  filter:drop-shadow(0 0 7px rgba(255,61,129,.3));transition:transform .3s ease;
}
.mq-brand:hover .mq-brand-logo{transform:rotate(-5deg) scale(1.05)}
.mq-logo{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.45rem;letter-spacing:.5px;
  color:#fff;text-shadow:0 0 18px rgba(255,61,129,.45);line-height:1;
}
.mq-logo b{color:var(--mq-amber)}
.mq-logo .mq-pre{
  display:block;font-family:'Inter',sans-serif;font-weight:700;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mq-muted);text-shadow:none;margin-bottom:2px;
}
.mq-nav{display:flex;gap:18px;align-items:center;flex:0 0 auto;justify-content:center}
.mq-nav a{
  color:var(--mq-muted);text-decoration:none;font-weight:600;font-size:.9rem;transition:.15s;
  position:relative;white-space:nowrap;
}
.mq-nav a:hover{color:var(--mq-amber)}
.mq-badge{
  position:absolute;top:-8px;right:-12px;background:#dc3545;color:#fff;font-size:.6rem;font-weight:700;
  min-width:16px;height:16px;line-height:16px;text-align:center;border-radius:999px;padding:0 4px;font-family:system-ui,sans-serif;
}
.mq-right{display:flex;align-items:center;gap:12px;flex:1;justify-content:flex-end}
.mq-tickets{
  background:#2a1f3a;border:1px solid #4a3563;padding:6px 12px;border-radius:999px;
  font-weight:700;color:var(--mq-amber);font-size:.85rem;white-space:nowrap;
}
.mq-admin{
  background:var(--mq-pink);color:#fff;text-decoration:none;font-weight:700;font-size:.78rem;
  padding:6px 11px;border-radius:8px;
}
.mq-admin:hover{filter:brightness(1.1);color:#fff}
.mq-avatar-link{text-decoration:none}
.mq-avatar{
  width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--mq-pink),var(--mq-amber));
  display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--mq-bg);font-size:.9rem;
  overflow:hidden;
}
.mq-avatar img{width:100%;height:100%;object-fit:cover}
.mq-logout{
  color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;
  transition:all .2s cubic-bezier(.175,.885,.32,1.275);
}
.mq-logout svg{width:22px;height:22px}
.mq-logout:hover{color:#ff4d4d;transform:scale(1.15);filter:drop-shadow(0 0 5px rgba(255,77,77,.5))}
.mq-nav-login{color:var(--mq-muted);text-decoration:none;font-weight:600}
.mq-nav-login:hover{color:var(--mq-amber)}

/* ---------- Menú hamburguesa + desplegable ---------- */
.mq-burger{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  width:42px;height:42px;padding:9px;box-sizing:border-box;cursor:pointer;
  background:var(--mq-surface-2);border:1px solid var(--mq-border-2);border-radius:11px;flex:none;
}
/* Bola roja de no leídos, al lado de "Chat" en el desplegable */
.mq-drawer-badge{
  display:inline-block;margin-left:8px;background:#dc3545;color:#fff;
  font-size:.62rem;font-weight:700;min-width:18px;height:18px;line-height:18px;
  text-align:center;border-radius:999px;padding:0 5px;vertical-align:middle;font-family:system-ui,sans-serif;
}
.mq-burger span{display:block;width:100%;height:2.5px;background:var(--mq-text);border-radius:2px;transition:transform .25s ease, opacity .2s ease}
.mq-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.mq-burger.open span:nth-child(2){opacity:0}
.mq-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mq-drawer{
  position:absolute;top:calc(100% + 8px);right:12px;z-index:200;
  min-width:214px;background:var(--mq-surface);border:1px solid var(--mq-border-2);
  border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.55);padding:8px;
  display:none;flex-direction:column;
}
.mq-drawer.open{display:flex;animation:mqDrawerIn .18s ease}
@keyframes mqDrawerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.mq-drawer a{
  color:var(--mq-text);text-decoration:none;font-weight:600;font-size:.98rem;
  padding:11px 14px;border-radius:9px;transition:background .15s ease, color .15s ease;
}
.mq-drawer a:hover{background:var(--mq-surface-2);color:var(--mq-amber)}
.mq-drawer .mq-drawer-logout{color:#ff6b8a;margin-top:5px;border-top:1px solid var(--mq-border)}
.mq-drawer .mq-drawer-logout:hover{background:rgba(255,77,109,.12);color:#ff6b8a}

/* ---------- AVISO GLOBAL ---------- */
.mq-ann-wrap{max-width:1120px;margin:0 auto;padding:24px 30px 0}
.mq-ann{
  background:linear-gradient(90deg,rgba(255,61,129,.18),rgba(255,206,74,.14));
  border:1px solid rgba(255,206,74,.35);border-radius:14px;padding:15px 22px;font-weight:600;
  color:#ffe6b0;display:flex;gap:10px;align-items:center;
}

/* =========================================================
   HOME  (scopeado)
   ========================================================= */
.mq-home{max-width:1120px;margin:0 auto;padding:46px 30px 90px}

.mq-searchcard{text-align:center;max-width:740px;margin:0 auto 72px;padding-top:22px}
.mq-hello{font-weight:700;color:var(--mq-muted);margin-bottom:12px;font-size:1.1rem}
.mq-searchcard h1{
  font-family:'Bricolage Grotesque',sans-serif;font-size:2.9rem;line-height:1.05;font-weight:800;
  margin-bottom:38px;color:#fff;text-shadow:none;
}

.mq-search-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;max-width:780px;margin:0 auto}
.mq-slot-cap{
  display:inline-flex;align-items:center;gap:10px;background:var(--mq-surface-2);border:1px solid var(--mq-border-2);
  border-radius:12px;height:52px;padding:0 14px;flex:none;
}
.mq-tokens{display:flex;align-items:center;gap:6px}
.mq-tok{display:flex;align-items:center;justify-content:center}
.mq-tok.free{width:12px;height:12px;border-radius:50%;background:var(--mq-green);box-shadow:0 0 8px var(--mq-green)}
.mq-tok.used{width:12px;height:12px;border-radius:50%;background:#dc3545;box-shadow:0 0 5px rgba(220,53,69,.5)}
.mq-tok.lock{font-size:.8rem;opacity:.55}
.mq-count{
  background:#2a1f3a;border:1px solid #4a3563;border-radius:8px;padding:4px 10px;font-weight:800;
  color:var(--mq-green);font-size:.85rem;
}
.mq-count span{color:var(--mq-muted-2);font-weight:600}

.mq-searchbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;flex:1 1 340px;margin:0}
.mq-searchbar input[type=text]{
  flex:1;min-width:220px;background:var(--mq-surface-2);border:1px solid var(--mq-border-2);color:#fff;
  padding:15px 18px;border-radius:12px;font-size:1rem;font-family:inherit;height:52px;
}
.mq-searchbar input[type=text]::placeholder{color:var(--mq-muted-2)}
.mq-searchbar input[type=text]:focus{outline:none;border-color:var(--mq-pink)}

.mq-seg{display:flex;background:var(--mq-surface-2);border:1px solid var(--mq-border-2);border-radius:12px;overflow:hidden;height:52px}
.mq-seg input{position:absolute;opacity:0;pointer-events:none}
.mq-seg label{
  display:flex;align-items:center;padding:0 18px;color:var(--mq-muted);font-weight:700;cursor:pointer;font-size:.95rem;
  transition:.15s;
}
.mq-seg input:checked + label{background:var(--mq-pink);color:#fff}

.mq-go{
  background:var(--mq-amber);color:var(--mq-bg);border:none;width:52px;height:52px;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(255,206,74,.3);flex:none;
}
.mq-go svg{width:24px;height:24px}

.mq-slot-reset{
  margin:18px 0 0;font-size:.78rem;color:var(--mq-muted-2);display:flex;gap:6px;align-items:center;justify-content:center;
}
.mq-slot-reset svg{width:13px;height:13px;stroke:var(--mq-muted-2);fill:none;stroke-width:2}

.mq-reward{text-align:center;margin:36px auto 0;max-width:740px}
.mq-reward .mq-obj{
  font-family:'Bricolage Grotesque',sans-serif;font-size:1.25rem;font-weight:800;color:#fff;margin-bottom:10px;line-height:1.3;
}
.mq-reward .mq-obj em{font-style:normal;color:var(--mq-pink)}
.mq-reward .mq-sub{font-size:.88rem;color:#a495c2}
.mq-reward .mq-sub b{color:var(--mq-amber);font-weight:700}

.mq-noresult{margin-top:26px;color:var(--mq-muted-2)}

/* ---------- Sección propuestas ---------- */
.mq-sect{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.mq-sect h2{font-family:'Bricolage Grotesque',sans-serif;font-size:1.5rem;font-weight:800;white-space:nowrap;color:#fff;margin:0}
.mq-sect .mq-line{flex:1;height:1px;background:linear-gradient(90deg,var(--mq-border-2),transparent)}
.mq-refresh{
  color:var(--mq-amber);font-size:.82rem;font-weight:700;cursor:pointer;display:flex;gap:6px;align-items:center;
  white-space:nowrap;background:none;border:none;font-family:inherit;
}
.mq-refresh:hover{filter:brightness(1.15)}
.mq-subnote{font-size:.9rem;color:var(--mq-muted-2);margin-bottom:30px}
.mq-subnote b{color:var(--mq-text)}

.mq-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.mq-card{display:flex;flex-direction:column}
.mq-card.mq-hidden{display:none}
.mq-poster{
  position:relative;border-radius:12px;overflow:hidden;aspect-ratio:2/3;box-shadow:0 10px 30px rgba(0,0,0,.5);
  background:#221a30;
}
.mq-poster img{width:100%;height:100%;object-fit:cover;display:block}
.mq-poster .mq-tag{
  position:absolute;bottom:10px;left:10px;background:rgba(22,18,31,.82);color:var(--mq-amber);
  font-size:.68rem;font-weight:700;padding:4px 8px;border-radius:6px;letter-spacing:.03em;
}
.mq-meta{padding:15px 2px 0;display:flex;flex-direction:column;flex:1}
.mq-meta .mq-t{font-weight:700;font-size:.98rem;color:#fff;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.mq-meta .mq-y{color:var(--mq-muted-2);font-size:.82rem;margin-top:3px}
.mq-sug-form{margin-top:auto;padding-top:12px}
.mq-sug{
  width:100%;background:#2a1f3a;border:1px solid var(--mq-pink);color:#ff6fa3;padding:11px;
  border-radius:9px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s;margin-top:auto;
}
.mq-sug:hover{background:var(--mq-pink);color:#fff}

/* ---------- Modal "Sugerir directo" ---------- */
.mq-modal{position:fixed;inset:0;background:rgba(10,8,15,.72);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease, visibility .25s ease}
.mq-modal.open{opacity:1;visibility:visible;pointer-events:auto}
.mq-modal-card{background:var(--mq-surface);border:1px solid var(--mq-border);border-radius:16px;max-width:460px;width:100%;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.55);
  transform:translateY(16px) scale(.94);opacity:0;transition:transform .42s cubic-bezier(.34,1.56,.64,1), opacity .28s ease}
.mq-modal.open .mq-modal-card{transform:translateY(0) scale(1);opacity:1}
.mq-modal-head{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.mq-modal-head img{width:54px;height:80px;object-fit:cover;border-radius:8px;flex:none;background:#221a30}
.mq-modal-head .mt{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.15rem;color:#fff;line-height:1.2}
.mq-modal-head .my{color:var(--mq-muted-2);font-size:.82rem;margin-top:3px}
.mq-modal .q{display:block;font-weight:600;color:var(--mq-muted);margin-bottom:10px;font-size:.9rem}
.mq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.mq-chip{background:var(--mq-surface-2);border:1px solid var(--mq-border-2);color:var(--mq-muted);padding:6px 12px;border-radius:20px;font-size:.8rem;cursor:pointer;transition:.15s;font-family:inherit}
.mq-chip:hover{border-color:var(--mq-pink);color:#fff}
.mq-chip.active{background:var(--mq-pink);border-color:var(--mq-pink);color:#fff;font-weight:700}
.mq-modal textarea{width:100%;background:var(--mq-surface-2);border:1px solid var(--mq-border-2);color:#fff;border-radius:10px;padding:12px;font-family:inherit;font-size:.95rem;resize:vertical;min-height:90px}
.mq-modal textarea:focus{outline:none;border-color:var(--mq-pink)}
.mq-counter{font-size:.8rem;font-weight:700;color:var(--mq-amber);text-align:right;margin-top:6px}
.mq-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.mq-btn-cancel{background:transparent;border:1px solid var(--mq-border-2);color:var(--mq-muted);padding:10px 18px;border-radius:10px;font-weight:700;cursor:pointer;font-family:inherit}
.mq-btn-cancel:hover{border-color:#fff;color:#fff}
.mq-btn-send{background:var(--mq-pink);border:none;color:#fff;padding:10px 22px;border-radius:10px;font-weight:700;cursor:pointer;font-family:inherit}
.mq-btn-send:disabled{opacity:.5;cursor:not-allowed}

@media(max-width:820px){
  .mq-grid{display:flex;overflow-x:auto;gap:16px;padding-bottom:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .mq-grid .mq-card{flex:0 0 150px;scroll-snap-align:start}
  .mq-grid .mq-card.mq-hidden{display:flex}
}
@media(max-width:560px){
  .mq-nav{display:none}
  .mq-burger{display:flex}
  .mq-right .mq-admin,.mq-right .mq-avatar-link,.mq-right .mq-logout,.mq-right .mq-nav-login{display:none}
  .mq-home-proposals{display:none}
  .mq-sect h2{font-size:1.3rem}

  /* Aprobadas en móvil: sin centrado forzado (evita falso desbordamiento) */
  .mq-approved{ min-height:0; padding:16px 16px 22px; display:block; }

  /* Inicio: página única sin scroll en móvil */
  .mq-home:not(.has-results){
    min-height:calc(100dvh - 80px);
    padding:12px 16px;
    display:flex;flex-direction:column;justify-content:center;
    box-sizing:border-box;
  }
  .mq-home:not(.has-results) .mq-searchcard{margin:0 auto;padding-top:0}
  .mq-searchcard h1{font-size:1.8rem;margin:0 0 12px}
  .mq-hello{font-size:1rem;margin-bottom:8px}
  .mq-slot-reset{margin-top:10px}
  .mq-reward{margin-top:18px}
}

/* =========================================================
   PÁGINAS INTERNAS (título + rejilla) — reutilizable
   ========================================================= */
.mq-page{max-width:1120px;margin:0 auto;padding:40px 30px 80px}
.mq-page-head{text-align:center;margin-bottom:36px}
.mq-page-head h1{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:2.4rem;color:#fff;line-height:1.05;margin:0;
}
.mq-page-head .mq-sub{color:var(--mq-muted-2);font-size:.95rem;margin-top:10px}
.mq-page-head .mq-sub b{color:var(--mq-amber)}

/* ---------- Aprobadas ---------- */
/* ---------- Aprobadas (encaja sin scroll en escritorio) ---------- */
.mq-approved{
  padding:16px 24px 220px;max-width:1400px;
  /* Ocupa el alto disponible (viewport menos cabecera) y centra el bloque:
     con una sola fila queda centrado; con muchas filas el contenedor crece
     y vuelve a fluir con normalidad, sin recortes ni scroll atrapado. */
  min-height:calc(100vh - 78px);
  min-height:calc(100dvh - 78px);
  display:flex;flex-direction:column;justify-content:center;
}
.mq-approved .mq-page-head{margin-bottom:14px}
.mq-approved .mq-card{position:relative}

.mq-col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:22px}
.mq-poster.no-image{display:flex;align-items:center;justify-content:center;color:var(--mq-muted-2);font-size:.8rem}

.mq-details{margin-top:8px;font-size:.75rem;position:relative}
.mq-details-toggle{
  background:none;border:none;cursor:pointer;color:var(--mq-amber);font-weight:600;font-family:inherit;
  font-size:.75rem;width:100%;text-align:center;padding:2px 0;
}
.mq-details-toggle:hover{filter:brightness(1.15)}
.mq-details-body{
  position:absolute;left:50%;top:100%;margin-top:4px;
  transform:translateX(-50%) translateY(-14px) scale(.94);transform-origin:top center;
  background:var(--mq-surface-2);border:1px solid var(--mq-border);border-radius:8px;padding:9px 11px;text-align:left;
  width:210px;z-index:30;box-shadow:0 12px 32px rgba(0,0,0,.55);
  opacity:0;max-height:0;overflow:hidden;pointer-events:none;
  transition:max-height .34s cubic-bezier(.22,.61,.36,1), opacity .24s ease, transform .42s cubic-bezier(.34,1.56,.64,1);
}
.mq-details.open .mq-details-body{
  opacity:1;max-height:220px;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto;
}
.mq-details-body .who{color:var(--mq-muted);font-size:.72rem}
.mq-details-body .who b{color:var(--mq-amber);font-weight:700}
.mq-details-body .who .anon{color:var(--mq-muted-2);font-style:italic}
.mq-details-body .reason{color:#d8cfe6;font-style:italic;font-size:.75rem;margin:7px 0 0;line-height:1.4}

/* Escritorio: 7 columnas, pósters por altura de pantalla → 3 filas sin scroll */
@media(min-width:992px){
  .mq-approved .mq-page-head{margin-bottom:8px}
  .mq-approved .mq-page-head h1{font-size:1.6rem}
  .mq-approved .mq-col-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
  .mq-approved .mq-col-grid .mq-card{width:calc((100% - 72px) / 7)}
  .mq-approved .mq-poster{aspect-ratio:2/3;height:auto}
  .mq-approved .mq-meta{padding-top:8px}
  .mq-approved .mq-t{-webkit-line-clamp:1;min-height:0;font-size:.78rem}
  .mq-approved .mq-details{margin-top:4px}
  .mq-approved .mq-pagination{margin-top:16px}
}

/* ---------- Paginación ---------- */
.mq-pagination{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:40px;list-style:none;padding:0}
.mq-pagination li{margin:0}
.mq-pagination a{
  display:flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 13px;
  background:var(--mq-surface-2);border:1px solid var(--mq-border-2);color:#e8def7;
  border-radius:11px;text-decoration:none;font-size:.92rem;font-weight:600;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.mq-pagination a:hover{background:#2c2340;border-color:var(--mq-pink);color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.mq-pagination .active a{
  background:linear-gradient(135deg,var(--mq-amber),#ffb347);border-color:transparent;color:var(--mq-bg);font-weight:800;
  box-shadow:0 6px 18px rgba(255,206,74,.35);transform:translateY(-1px);
}
.mq-pagination .active a:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,206,74,.45)}
.mq-pagination .disabled a{opacity:.35;pointer-events:none}
.mq-pagination .disabled a:hover{transform:none;box-shadow:none}
.mq-empty{text-align:center;color:var(--mq-muted-2);margin-top:44px;font-size:1rem}

@media(max-width:560px){
  .mq-page-head h1{font-size:1.8rem}
  .mq-col-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}
}

/* =========================================================
   UNIFICACIÓN — botones de paginación de resultados (index)
   y animación del cuadro de motivo
   ========================================================= */
/* Paginación de resultados de búsqueda con el mismo estilo Marquesina */
.pagination{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;list-style:none;padding:0}
.pagination .page-item{margin:0}
.pagination .page-link{
  display:flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 13px;
  background:var(--mq-surface-2);border:1px solid var(--mq-border-2);color:#e8def7;border-radius:11px;
  text-decoration:none;font-size:.92rem;font-weight:600;cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.pagination .page-link:hover{background:#2c2340;border-color:var(--mq-pink);color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.pagination .page-item.active .page-link{
  background:linear-gradient(135deg,var(--mq-amber),#ffb347);border-color:transparent;color:var(--mq-bg);font-weight:800;
  box-shadow:0 6px 18px rgba(255,206,74,.35);
}
.pagination .page-item.disabled .page-link{opacity:.35;pointer-events:none}

/* Cuadro de motivo (index): entrada suave con rebote */
#reason-container{
  opacity:0;transform:translateY(16px);
  transition:opacity .3s ease, transform .42s cubic-bezier(.34,1.56,.64,1);
}

/* Cuando hay resultados de búsqueda: menos hueco antes de "Resultados encontrados" */
.mq-home.has-results{padding-bottom:0}
.mq-home.has-results .mq-searchcard{margin-bottom:22px}
.results-separator{border:none;border-top:1px solid var(--mq-border);max-width:1120px;margin:6px auto 16px;opacity:.55}
.results-title{
  font-family:'Bricolage Grotesque',sans-serif;color:#fff;text-align:center;font-size:1.4rem;font-weight:800;margin:0 0 20px;
}

/* Modo resultados: ocultar el héroe y arrancar en "Resultados encontrados" (evita scroll) */
.mq-home.has-results{padding:0;margin:0}
.mq-home.has-results .mq-searchcard{display:none}
.mq-results-head{
  display:flex;align-items:center;gap:16px;max-width:1120px;margin:22px auto 22px;padding:0 6px;
}
.mq-newsearch{
  background:var(--mq-surface-2);border:1px solid var(--mq-border-2);color:#e8def7;text-decoration:none;
  font-weight:600;font-size:.88rem;padding:9px 15px;border-radius:11px;transition:.15s;white-space:nowrap;
}
.mq-newsearch:hover{border-color:var(--mq-pink);color:#fff;transform:translateY(-1px)}
.results-title{
  font-family:'Bricolage Grotesque',sans-serif;color:#fff;font-size:1.4rem;font-weight:800;margin:0;
  flex:1;text-align:center;
}

/* ---------- Paso "motivo" al sugerir (poster + formulario) ----------
   Se centra verticalmente con el mismo desplazamiento hacia arriba
   que la página de Aprobadas (padding-bottom:220px). La clase la añade
   el JS al seleccionar una película y la quita al pulsar "Atrás". */
#selection-form.mq-reason-mode{
  display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100vh - 78px);
  min-height:calc(100dvh - 78px);
  padding:16px 24px 220px;
  box-sizing:border-box;
}

/* =========================================================
   TRANSICIÓN GLOBAL ENTRE PÁGINAS (universal, sin depender de View Transitions)
   Al pulsar un menú, el contenido sale deslizando; al cargar, entra deslizando.
   ========================================================= */
@keyframes mqPageEnter{ from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
main.container{ animation:mqPageEnter .46s cubic-bezier(.34,1.56,.64,1) both; }
main.container.mq-leaving{
  animation:none;
  transform:translateX(-48px);opacity:0;
  transition:transform .2s cubic-bezier(.5,0,.75,0), opacity .18s ease;
}
/* Blindaje contra el desplazamiento lateral.
   El navegador sólo respeta de forma fiable overflow-x en <body> si <html>
   también lo declara (en móvil, con sólo body, el gesto lateral seguía
   funcionando). Sin esto, la animación de entrada —que empieza desplazada
   40px a la derecha— generaba scroll horizontal en el login. */
html, body{ overflow-x:hidden; max-width:100%; }

/* En móvil la transición entra desde abajo en vez de desde la derecha:
   así no hay NADA que asome por el lateral ni durante la animación. */
@keyframes mqPageEnterY{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@media(max-width:560px){
  main.container{ animation-name:mqPageEnterY; }
  main.container.mq-leaving{ transform:translateY(-18px); }
}

@media (prefers-reduced-motion: reduce){
  main.container, main.container.mq-leaving{animation:none;transition:none;transform:none;opacity:1}
}

/* =========================================================
   CABECERA — CORRECCIÓN DE DESBORDE HORIZONTAL
   Antes, entre 561px y ~900px el menú de escritorio + la zona
   derecha no cabían y quedaban cortados (body overflow:hidden
   sólo ocultaba el síntoma). Además, en móviles estrechos el
   título de marca empujaba la hamburguesa fuera de pantalla.
   ========================================================= */
.mq-header{ flex-wrap:nowrap; }
.mq-brand{ min-width:0; }
.mq-logo{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mq-logo .mq-pre{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mq-right{ min-width:0; }
.mq-drawer{ max-width:calc(100vw - 24px); }

/* Tablet y móvil grande: el menú pasa al desplegable (mismos enlaces) */
@media(max-width:900px){
  .mq-nav{ display:none; }
  .mq-burger{ display:flex; }
  .mq-header{ gap:14px; padding:11px 16px; }
}

/* Móvil: cabecera compacta para que todo quepa sin scroll lateral */
@media(max-width:560px){
  .mq-header{ padding:10px 13px; gap:10px; }
  .mq-brand{ gap:9px; }
  .mq-brand-logo{ width:38px; height:38px; }
  .mq-logo{ font-size:1.1rem; }
  .mq-logo .mq-pre{ font-size:.54rem; }
  .mq-right{ gap:9px; }
  .mq-tickets{ padding:5px 10px; font-size:.78rem; }
  .mq-ann-wrap{ padding:16px 14px 0; }
  .mq-ann{ padding:12px 15px; font-size:.9rem; }
}
@media(max-width:380px){
  .mq-logo{ font-size:.98rem; }
  .mq-brand-logo{ width:33px; height:33px; }
  .mq-tickets{ padding:4px 8px; font-size:.72rem; }
}

/* =========================================================
   AUTENTICACIÓN (login / registro / recuperar contraseña)
   Bloque reutilizable: la tarjeta lleva la tira de bombillas
   de la marquesina y la misma paleta que el resto del sitio.
   ========================================================= */
.mq-auth{
  min-height:calc(100vh - 150px);
  min-height:calc(100dvh - 150px);
  display:flex; align-items:center; justify-content:center;
  padding:24px 4px 48px; box-sizing:border-box;
}
.mq-auth-card{
  position:relative; width:100%; max-width:430px;
  background:var(--mq-surface); border:1px solid var(--mq-border-2);
  border-radius:20px; overflow:hidden;
  box-shadow:0 26px 64px rgba(0,0,0,.55);
  animation:mqAuthIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes mqAuthIn{ from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }
.mq-auth-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:7px;
  background:radial-gradient(circle,var(--mq-amber) 0 2.5px,transparent 3.5px) 0 0/19px 7px repeat-x;
  box-shadow:0 0 14px rgba(255,206,74,.45);
}
.mq-auth-inner{ padding:34px 30px 30px; }

.mq-auth-head{ text-align:center; margin-bottom:26px; }
.mq-auth-logo{
  width:66px; height:66px; object-fit:contain; margin-bottom:12px;
  filter:drop-shadow(0 0 12px rgba(255,61,129,.35));
}
.mq-auth-title{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.72rem; line-height:1.1;
  color:#fff; margin:0; letter-spacing:-.01em; text-shadow:none;
}
.mq-auth-sub{ color:var(--mq-muted-2); font-size:.86rem; margin-top:8px; }

.mq-auth-form{ display:flex; flex-direction:column; gap:15px; }
.mq-field{ position:relative; }
.mq-field label{
  display:block; font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mq-muted-2); margin-bottom:7px;
}
.mq-auth input[type=text],
.mq-auth input[type=email],
.mq-auth input[type=password]{
  width:100%; box-sizing:border-box;
  background:var(--mq-surface-2); border:1px solid var(--mq-border-2); color:#fff;
  padding:13px 15px; border-radius:12px; font-size:.98rem; font-family:inherit;
  transition:border-color .15s ease, background .15s ease;
}
.mq-auth input::placeholder{ color:var(--mq-muted-2); opacity:1; }
.mq-auth input:focus{ outline:none; border-color:var(--mq-pink); background:#2a2040; }
.mq-input-wrap{ position:relative; }
.mq-field .mq-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%); width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--mq-muted-2);
  border-radius:9px; padding:0; font-family:inherit;
}
.mq-field .mq-eye:hover{ color:var(--mq-amber); background:var(--mq-surface-3,#2c2240); }
.mq-field .mq-eye svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; }
.mq-field--pass input{ padding-right:50px; }
.mq-hint{ margin-top:7px; }

.mq-auth-btn{
  width:100%; border:none; cursor:pointer; font-family:inherit;
  background:linear-gradient(135deg,var(--mq-amber),#ffb347); color:var(--mq-bg);
  font-weight:800; font-size:.98rem; padding:14px; border-radius:12px; margin-top:4px;
  box-shadow:0 8px 22px rgba(255,206,74,.28); transition:transform .12s ease, filter .15s ease;
}
.mq-auth-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.mq-auth-btn:active{ transform:translateY(0); }
.mq-auth-btn--ghost{
  background:transparent; border:1px solid rgba(255,206,74,.5); color:var(--mq-amber);
  box-shadow:none; font-size:.88rem; padding:12px;
}
.mq-auth-btn--ghost:hover{ background:rgba(255,206,74,.12); }

.mq-auth-forgot{ text-align:right; margin-top:-4px; }
.mq-auth-forgot a{ color:var(--mq-muted-2); font-size:.82rem; text-decoration:none; font-weight:600; }
.mq-auth-forgot a:hover{ color:var(--mq-amber); }

.mq-auth-sep{
  display:flex; align-items:center; gap:12px; margin:24px 0 18px;
  color:var(--mq-muted-2); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.mq-auth-sep::before, .mq-auth-sep::after{ content:''; flex:1; height:1px; background:var(--mq-border-2); }

.mq-auth-alt{ text-align:center; color:var(--mq-muted); font-size:.88rem; margin:0; }
.mq-auth-alt a{ color:var(--mq-amber); font-weight:700; text-decoration:none; }
.mq-auth-alt a:hover{ text-decoration:underline; }

/* Avisos y errores */
.mq-auth-msg{
  border-radius:12px; padding:12px 14px; font-size:.86rem; font-weight:600; line-height:1.45;
  margin-bottom:14px; border:1px solid transparent; overflow-wrap:anywhere;
}
.mq-auth-msg.is-success{ background:rgba(76,209,55,.12); border-color:rgba(76,209,55,.4); color:#a8f096; }
.mq-auth-msg.is-info   { background:rgba(87,176,255,.12); border-color:rgba(87,176,255,.4); color:#a8d5ff; }
.mq-auth-msg.is-danger { background:rgba(255,61,129,.12); border-color:rgba(255,61,129,.42); color:#ff9dc0; }
.mq-auth-msg.is-warning{ background:rgba(255,206,74,.12); border-color:rgba(255,206,74,.42); color:#ffe6b0; }
.mq-auth-error{
  margin-top:14px; background:rgba(255,61,129,.12); border:1px solid rgba(255,61,129,.42);
  color:#ff9dc0; border-radius:12px; padding:12px 14px; font-size:.86rem; font-weight:600;
  display:flex; gap:9px; align-items:flex-start; overflow-wrap:anywhere;
}
.mq-auth-note{ margin-top:14px; }

@media(max-width:560px){
  .mq-auth{ min-height:calc(100dvh - 120px); padding:16px 2px 32px; width:100%; max-width:100%; }
  .mq-auth-card{ max-width:100%; }
  .mq-auth-inner{ padding:26px 20px 24px; }
  .mq-auth-title{ font-size:1.45rem; }
  .mq-auth-logo{ width:56px; height:56px; }
  /* Nada dentro de la tarjeta puede ensanchar la página */
  .mq-auth-inner *{ max-width:100%; }
  .mq-auth-title, .mq-auth-sub, .mq-auth-alt, .mq-auth-lead{ overflow-wrap:anywhere; }
}

/* --- Extras del bloque de autenticación (registro / recuperación) --- */
.mq-auth-card--wide{ max-width:468px; }
.mq-auth-lead{
  color:var(--mq-muted); font-size:.88rem; line-height:1.55; text-align:center; margin:0 0 20px;
}
.mq-hint{ font-size:.76rem; font-weight:600; margin-top:7px; display:none; }
.mq-hint.show{ display:block; }
.mq-hint.ok { color:#8fe07d; }
.mq-hint.bad{ color:#ff9dc0; }
.mq-auth-back{ text-align:center; margin-top:20px; }
.mq-auth-back a{ color:var(--mq-muted-2); font-size:.85rem; text-decoration:none; font-weight:600; }
.mq-auth-back a:hover{ color:var(--mq-amber); }
.mq-auth-btn--green{
  background:linear-gradient(135deg,var(--mq-green),#3aa82a); color:#0d1a09;
  box-shadow:0 8px 22px rgba(76,209,55,.25);
}

/* Cabecera de resultados: en pantallas estrechas el botón "Nueva búsqueda"
   no encogía y empujaba el título fuera de la pantalla. Se apila. */
@media(max-width:560px){
  .mq-results-head{ flex-direction:column; align-items:stretch; gap:12px; margin:16px auto; }
  .mq-newsearch{ text-align:center; }
  .results-title{ font-size:1.15rem; }
}

/* --- Utilidades compartidas (sustituyen a los restos de Bootstrap) --- */
.mq-loading{
  text-align:center; color:var(--mq-muted-2); font-size:.9rem; margin:2.5rem 0;
}
.mq-loadmore{
  background:var(--mq-surface-2); border:1px solid var(--mq-border-2); color:#e8def7;
  font-family:inherit; font-weight:600; font-size:.8rem; padding:8px 16px;
  border-radius:999px; cursor:pointer; transition:.15s;
}
.mq-loadmore:hover{ border-color:var(--mq-pink); color:#fff; }

/* Ficha de pase extra comprado en la tienda (se distingue de la gratis) */
.mq-tok.extra{
  width:12px;height:12px;border-radius:50%;background:var(--mq-amber);
  box-shadow:0 0 8px rgba(255,206,74,.75);
}
.mq-count-extra{ color:var(--mq-amber)!important; font-weight:800; margin-left:3px; }

/* ---------- AVISOS FLOTANTES (sustituyen a alert()) ----------
   Globo centrado horizontalmente y colocado, en vertical, a la altura
   donde el usuario acaba de tocar/hacer clic (ver mqAlert() en base.html).
   Se puede tocar para cerrarlo antes, o se cierra solo a los pocos segundos. */
.mq-toast{
  position:fixed; left:50%; z-index:4000;
  max-width:min(420px, calc(100vw - 32px));
  background:var(--mq-surface); border:1px solid var(--mq-border-2); color:var(--mq-text);
  padding:14px 18px; border-radius:14px; font-weight:600; font-size:.92rem; line-height:1.45;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  border-left:4px solid var(--mq-amber);
  cursor:pointer; text-align:left; overflow-wrap:anywhere;
  transform:translate(-50%,-10px) scale(.96); opacity:0; pointer-events:auto;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.mq-toast.mq-toast-show{ transform:translate(-50%,0) scale(1); opacity:1; }
.mq-toast.mq-toast-hide{ transform:translate(-50%,-10px) scale(.96); opacity:0; }
.mq-toast-success{ border-left-color:var(--mq-green); }
.mq-toast-warning{ border-left-color:var(--mq-amber); }
.mq-toast-error  { border-left-color:var(--mq-pink); }
.mq-toast-info   { border-left-color:#57b0ff; }
@media(max-width:560px){
  .mq-toast{ font-size:.86rem; padding:12px 15px; }
}