/* CSS Puro para Portal Empresarial */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --secondary:#e5e7eb;
  --success:#10b981;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif}

.hero{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 100%);color:#fff;padding:40px 0}
.hero .hero-content{display:flex;gap:24px;align-items:flex-end;justify-content:space-between}
.hero h1{margin:0 0 8px 0;font-weight:700}
.hero .lead{margin:0;max-width:800px;opacity:.95}

.buscador{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end;background:rgba(255,255,255,.12);backdrop-filter:saturate(1.2) blur(2px);padding:16px;border-radius:12px}
.buscador .field-group{display:flex;flex-direction:column;gap:6px}
.buscador label{font-size:.85rem;opacity:.85}
.buscador select,.buscador input{height:40px;border:0;border-radius:8px;padding:0 10px}
.buscador .actions{display:flex;gap:10px}
/* Botones Generales */
.btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px;border-radius:12px;border:1px solid transparent;text-decoration:none;cursor:pointer;font-weight:600;font-size:0.95rem;transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);gap:8px;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)}
.btn-primary, .btn.primary{background:var(--primary);color:#fff;border-color:var(--primary-600)}
.btn-secondary{background:rgba(255,255,255,0.1);color:#fff;border-color:rgba(255,255,255,0.2);backdrop-filter: blur(4px);}
.btn:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)}
.btn:active{transform:translateY(0)}
/* El botón de mostrar clave vive dentro de un modal blanco; necesita contraste propio */
#login_toggle_pwd_global{
  background:#f3f4f6;
  color:#1f2937;
  border:1px solid #d1d5db;
}
#login_toggle_pwd_global:hover{
  background:#e5e7eb;
  color:#111827;
}

.container{max-width:1200px;margin:0 auto;padding:16px}

/* Topbar Rediseñado */
.topbar{position:sticky;top:0;background:rgba(255,255,255,0.95);backdrop-filter: blur(10px);border-bottom:1px solid rgba(238,242,247,0.8);z-index:100;transition: all .3s ease}
.topbar-content{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width: 1400px;margin: 0 auto;position: relative}
.brand{display:inline-flex;align-items:center;gap:14px;font-weight:800;color:var(--primary);text-decoration:none;font-size:1.4rem;transition: transform .2s}
.brand:hover{transform: scale(1.02)}
.brand-logo{height:36px;width:auto;object-fit: contain;transition: filter .3s}
.brand-text{line-height:1;letter-spacing: -0.8px;color: #111827}

/* Menú Principal */
.menu{display:flex;gap:8px;align-items:center}
.menu-root{list-style:none;margin:0;padding:0;display:flex;gap:6px;height:100%}
.menu-item{position:relative; display: flex; align-items: center; height: 100%}
.menu-item > a{color:#4b5563;text-decoration:none;padding:12px 16px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:0.95rem;transition:all .2s ease}
.menu-item > a:hover{background:#f3f4f6;color:var(--primary)}
.menu-item.has-children > a{padding-right: 32px}

/* Submenús */
.submenu-btn{position:absolute; right:8px; background:none; border:none; color:#9ca3af; cursor:pointer; padding:4px; font-size:0.75rem; transition: color .2s}
.submenu-btn:hover{color:var(--primary)}
.submenu{position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:1px solid #eef2f7;border-radius:14px;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);list-style:none;margin:0;padding:12px 8px;display:none;z-index:110;opacity: 0;transform: translateY(5px);transition: all .2s ease}
.submenu::before{content:''; position:absolute; top:-30px; left:0; right:0; height:30px; background:transparent; z-index: -1} /* Puente invisible para mantener el hover */
.menu-item:hover > .submenu, .menu-item:focus-within > .submenu{display:block; opacity: 1; transform: translateY(0)}
.submenu li a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;color:#4b5563;text-decoration:none;font-size:0.9rem;font-weight:500;transition:all .2s}
.submenu li a:hover{background:#f9fafb;color:var(--primary);padding-left:18px}

/* Navegación de Usuario */
.user-nav{display:flex;gap:16px;align-items:center;margin-left:12px;padding-left:12px;border-left:1px solid #e5e7eb}
.user-profile{display:flex;align-items:center;gap:10px;padding:6px 12px;background:#f9fafb;border:1px solid #f3f4f6;border-radius:99px;cursor:default}
.profile-icon{font-size:1.3rem;color:var(--primary)}
.menu-user{font-weight:700;font-size:0.9rem;color:#111827}

.nav-actions{display:flex;gap:8px}
.btn-nav{display:inline-flex;align-items:center;justify-content:center;height:40px;border-radius:10px;text-decoration:none;transition:all .2s ease;font-weight:600}
.btn-panel{background:var(--primary);color:#fff;padding:0 14px;gap:8px;font-size:0.85rem}
.btn-panel:hover{background:var(--primary-600)}
.btn-logout{width:40px;background:#fee2e2;color:#ef4444;font-size:1.1rem}
.btn-logout:hover{background:#fecaca;transform: rotate(5deg)}
.logout-text{display: none}

/* Login Button en Topbar */
.btn-login{height:40px;padding:0 18px;font-size:0.9rem;background:var(--primary);color:#fff}

/* Iconos de Menú */
.menu-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;font-size:1rem}

/* Responsivo Móvil */
@media (max-width:990px){
  .topbar-content{padding: 10px 16px; width: 100%; max-width: 100%; box-sizing: border-box}
  .topbar-toggle{display:inline-flex; align-items:center; justify-content:center; height:42px; width:42px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; color:#374151; font-size: 1.2rem; cursor:pointer; transition: all .2s;}
  .topbar-toggle:hover{ background: #f9fafb; border-color: var(--primary); color: var(--primary) }
  
  .menu{display:none; position: absolute; top: calc(100% + 10px); left: 12px; right: 12px; width: auto; background:#fff; border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); padding: 20px; flex-direction: column; align-items: stretch; gap: 20px; border: 1px solid #f3f4f6; box-sizing: border-box; overflow: hidden}
  .topbar.open .menu{display:flex; animation: mobileMenuIn .3s cubic-bezier(0.4, 0, 0.2, 1) forwards;}
  
  @keyframes mobileMenuIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .menu-root{flex-direction:column; gap: 4px}
  .menu-item{flex-direction: column; align-items: stretch; height: auto}
  .menu-item > a{width: 100%; padding: 12px 16px; font-size: 1.05rem}
  .menu-item.has-children > a{padding-right: 16px}
  
  .submenu-btn{top: 12px; right: 12px; font-size: 1rem; width: 32px; height: 32px}
  .submenu{position:static; opacity: 1; transform: none; box-shadow: none; border: 0; margin: 4px 0 0 16px; padding: 0; background: #f9fafb; border-radius: 12px}
  .menu-item.open > .submenu{display:block}
  .menu-item.open .submenu-btn{transform: rotate(180deg); color: var(--primary)}

  .user-nav{margin: 0; padding: 16px 0 0; border-left: 0; border-top: 1px solid #f3f4f6; flex-direction: column; align-items: stretch; gap: 16px}
  .user-profile{justify-content: center; padding: 10px; border-radius: 14px}
  .nav-actions{flex-direction: column; gap: 10px}
  .btn-nav{width: 100%; height: 48px; border-radius: 14px; gap: 10px; font-size: 1rem}
  .btn-logout{width: 100%; background: #fee2e2; padding: 0 16px}
  .btn-logout:hover{transform: none}
  .logout-text{display: inline}
  
  .btn-login{width: 100%; height: 48px; border-radius: 14px}
}

@media (max-width:480px){
  .brand-text{display: none}
  .brand-logo{height: 32px}
  .topbar-content{padding: 8px 12px}
  .menu{left: 8px; right: 8px}
}

/* Limpieza de reglas antiguas */
#top-login-btn::before, #login_btn_global::before, #login_btn::before, #pm_gate_login::before, #pm_send::before, .buscador .actions .btn-primary::before, .buscador .actions .btn-secondary::before, .social-btn::before, a[href$="auth/logout"]::before {
    content: none !important;
}
.footer{background:#fff;border-top:1px solid #eef2f7;margin-top:24px}
.footer .container{padding:16px;display:flex;flex-direction:column;gap:4px;align-items:center}
.footer .container p{margin:0}
.footer .credits{font-size:.85rem;color:var(--muted)}
.footer .credits a{color:var(--muted);text-decoration:underline dotted}

.grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}

.card{background:var(--card);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.08),0 10px 20px rgba(17,24,39,.08);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;border:1px solid #eef2f7}
.card:hover{box-shadow:0 3px 10px rgba(0,0,0,.12),0 14px 28px rgba(17,24,39,.12);transform:translateY(-2px);transition:all .2s ease}
.card{position:relative}
.card.publicidad{border-color:#f59e0b;box-shadow:0 2px 8px rgba(245, 158, 11, .25),0 12px 24px rgba(17,24,39,.08)}
.promo-tag{position:absolute;top:10px;left:10px;background:#f59e0b;color:#fff;border:1px solid #f59e0b;padding:4px 8px;border-radius:999px;font-size:.75rem;font-weight:700}
.card-media{height:140px;background:#fff;display:flex;align-items:center;justify-content:center}
.card-media img{max-height:120px;max-width:90%;object-fit:contain}
.placeholder-logo{width:80px;height:80px;border-radius:20px;background:#e5e7eb;color:#111;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:2rem}
.card-body{padding:12px 14px}
.card-title{margin:0 0 6px;font-size:1.05rem}
.card-text{margin:0;color:var(--muted);font-size:.95rem}
.card-footer{padding:10px 14px;border-top:1px solid #eef2f7;display:flex;justify-content:flex-end}
.badge{background:var(--secondary);color:#111;border-radius:8px;padding:6px 10px;font-size:.85rem}

.empty{padding:32px;text-align:center;color:var(--muted)}

/* Overlay */
.overlay{position:fixed;inset:0;background:rgba(17,24,39,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;}
.overlay.hidden{display:none}
.overlay-top{z-index:1000}
.overlay-panel{background:#fff;border-radius:24px;max-width:760px;width:100%;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);padding:32px;position:relative}
#panel-consulta .overlay-panel { max-width: 600px; width: 100%; padding: 32px; margin: 40px auto; }
#panel-consulta .publica-layout { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
#panel-consulta .publica-header-banner { flex-direction: column !important; text-align: center; padding: 24px 16px !important; margin-bottom: 0; }
#panel-consulta .publica-header-banner h2 { font-size: 1.8rem !important; }
#panel-consulta .publica-header-text { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
#panel-consulta .publica-header-text p { margin: 0 auto !important; text-align: center; }

@media (max-width: 990px) {
  #panel-consulta .publica-header-banner { padding: 24px 16px !important; }
}
#panel-consulta .contact-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 480px) {
  #panel-consulta .contact-grid { grid-template-columns: 1fr 1fr; }
}
#panel-consulta .social { margin-top: 16px; padding-top: 16px; }
@media (max-width: 991px) {
  #panel-consulta .overlay-panel {
    padding: 24px;
    margin: 20px auto;
  }
}
.overlay-panel{will-change:transform,opacity}
@keyframes overlayPop {
  0% { transform: scale(.96); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.overlay-panel.animate-in{ animation: overlayPop .22s ease-out; }
.overlay-header{margin-bottom:24px; padding-right: 120px}
.overlay-header h2{margin:0 0 8px; font-size: 1.75rem; color: #111827; letter-spacing: -0.025em}
.overlay-header .muted{margin:0;color:var(--muted); line-height: 1.6; font-size: 1.05rem}

.close{position:absolute; top: 24px; right: 24px; background:#f3f4f6; color:#4b5563; border: none; border-radius:12px; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size: 1.5rem; transition: all .2s ease}
.close:hover{background: #e5e7eb; color: #111827; transform: rotate(90deg)}
.maximize-btn{position:absolute; top: 24px; right: 76px; background:#f3f4f6; color:#4b5563; border: none; border-radius:12px; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: all .2s ease}
.maximize-btn:hover{background: #e5e7eb; color: #0b5cff}

.contact-row { display: flex; flex-direction: column; width: 100%; }
.contact-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; width: 100%}
.contact-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #eef2f7;padding:12px 16px;border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,0.02)}
.contact-item:hover{background:#fff; border-color:var(--primary); box-shadow:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); transform: translateY(-2px)}
.contact-icon{font-size:1.25rem; color:var(--primary); width:24px; text-align:center; display: flex; align-items: center; justify-content: center}
.contact-icon.wa{color:#22c55e}
.contact-item span{font-weight:600; font-size:0.9rem; color:#64748b; min-width:auto; width: auto}
.contact-item a{color:#1e293b; text-decoration:none; font-weight:700; font-size:1rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.pc-direccion{font-size: 0.85rem; font-weight: 700; color: #475569; margin: 20px 0; text-transform: uppercase; letter-spacing: 0.025em; display: flex; align-items: center; gap: 8px}

.social{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; padding-top: 24px; border-top: 1px solid #f1f5f9}
.social-btn{display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 20px; border-radius:14px; border:1px solid #e2e8f0; background:#fff; color:#334155; text-decoration:none; font-weight:600; font-size:0.95rem; gap:10px; transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)}
.social-btn:hover:not(.disabled){transform:translateY(-2px); box-shadow:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); border-color:#cbd5e1; background: #f8fafc}
.social-btn i{font-size:1.2rem}

.social-btn.fb{color:#1877f2; border-color:#1877f220}
.social-btn.fb:hover{background:#1877f2; color:#fff}
.social-btn.ig{color:#e1306c; border-color:#e1306c20}
.social-btn.ig:hover{background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color:#fff}
.social-btn.yt{color:#ff0000; border-color:#ff000020}
.social-btn.yt:hover{background:#ff0000; color:#fff}
.social-btn.tw{color:#000; border-color:#00000020}
.social-btn.tw:hover{background:#000; color:#fff}
.social-btn.tt{color:#000; border-color:#00000020}
.social-btn.tt:hover{background:#000; color:#fff}
.social-btn.web{color:var(--primary); border-color:var(--primary-600)20}
.social-btn.web:hover{background:var(--primary); color:#fff}

@media (max-width:600px){
    .contact-grid{grid-template-columns: 1fr}
}

/* Detalle */
.detalle{background:#fff;border-radius:24px;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:32px; border: 1px solid #f1f5f9}
.detalle-header h2{margin:0 0 12px; font-size: 1.75rem; color: #111827}
.detalle-header .muted{margin:0;color:var(--muted); line-height: 1.6}
.detalle-contacto{margin-top:24px; display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px}
.detalle-redes{margin-top:24px; padding-top: 24px; border-top: 1px solid #f1f5f9}

.publica-page{max-width:1200px;margin:0 auto;padding-bottom:40px}
.publica-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start}
.publica-header-banner{flex-direction:row}
.publica-back{margin-bottom:20px}
.btn-back{display:inline-flex;align-items:center;gap:8px;color:#6b7280;text-decoration:none;font-size:0.95rem;transition:color .2s;font-weight:600}
.btn-back:hover{color:#0b5cff}
.publica-contactos { display: block; }

@media (max-width: 990px) {
  .detalle.publica-page { padding: 24px; border-radius: 16px; border: 1px solid #f1f5f9; }
  .publica-layout{grid-template-columns:1fr;gap:24px}
  .publica-header-banner{flex-direction:column; text-align:center; padding:24px 16px !important; border-radius: 16px; margin-bottom: 20px;}
  .publica-header-banner h1{font-size:1.8rem !important;}
  .publica-header-text p{margin: 0 auto !important;}
  .publica-back { margin-bottom: 16px; }
}

@media (max-width: 600px) {
  .detalle.publica-page { padding: 16px; border-radius: 12px; }
  .message-form { padding: 16px !important; }
  .exclusive-gate { padding: 16px !important; }
  .pm-header-row { flex-wrap: wrap; justify-content: flex-start; gap: 8px !important; }
  .pm-header-row h3 { font-size: 1.05rem !important; }
  .pm-destinatario-row { flex-direction: column; align-items: flex-start !important; gap: 4px !important; }
  .pm-destinatario-row select { width: 100%; }
  .pm-send-btn { width: 100%; justify-content: center; }
}

/* Gate de beneficio exclusivo: ocultar cuando tenga clase .hidden */
.exclusive-gate.hidden{display:none !important}

/* Responsivo */
@media (max-width:1024px){
  .grid-cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:990px){
  .hero .hero-content{flex-direction:column;align-items:flex-start}
  .buscador{grid-template-columns:1fr 1fr;}
  .grid-cards{grid-template-columns:repeat(2,1fr)}
  /* Topbar responsive */
  .topbar-content{padding: 8px 16px}
  .topbar-toggle{display:inline-flex; align-items:center; justify-content:center; height:40px; width:44px; border-radius:10px; border:1px solid #e5e7eb; background:#f9fafb; color:#111; font-size: 1.2rem; cursor:pointer; transition: all .2s;}
  .topbar-toggle:hover{ background: #f3f4f6; }
  
  .menu{display:none; position: absolute; top: calc(100% + 10px); left: 12px; right: 12px; width: auto; background:#fff; border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); padding: 20px; flex-direction: column; align-items: stretch; gap: 20px; border: 1px solid #f3f4f6; box-sizing: border-box; overflow: hidden; z-index: 150}
  .topbar.open .menu{display:flex; animation: slideDown .3s ease-out;}
  
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .menu-root{gap:4px; flex-direction:column}
  .menu-item{padding:2px 0}
  .menu a{padding:12px 16px; width: 100%; justify-content: flex-start; border-radius: 8px;}
  .menu-item.has-children > a::after{display:none}
  
  .submenu-btn{display:inline-flex; align-items:center; justify-content:center; height:36px; width:36px; position: absolute; right: 8px; top: 6px; border-radius:10px; border:1px solid #e5e7eb; background:#f9fafb; color:#6b7280; z-index: 5; transition: all .3s ease;}
  .submenu-btn i{transition: transform .3s ease;}
  .submenu{position:static; min-width:auto; box-shadow:none; border:0; margin:4px 12px; padding:8px; display:none; background: #f9fafb; border-radius: 12px;}
  .menu-item.open > .submenu{display:block}
  .menu-item.open .submenu-btn{background: var(--primary); color: #fff; border-color: var(--primary-600)}
  .menu-item.open .submenu-btn i{transform: rotate(180deg);}

  .user-nav{flex-direction: column; align-items: stretch; padding: 12px 16px; background: #f9fafb; border-radius: 12px; margin: 0 16px;}
  .menu-user{justify-content: center; background: transparent; border: 0; padding: 0; margin-bottom: 8px; height: auto; font-size: 1.1rem;}
  .user-nav .btn{width: 100%; justify-content: center; height: 44px;}
  
  #top-login-btn{ margin: 0 16px; height: 44px; }
}
@media (max-width:520px){
  .buscador{grid-template-columns:1fr}
  .grid-cards{grid-template-columns:1fr}
  .brand-text{display: none;} /* Ocultar texto de marca en móviles muy pequeños */
}

/* Limpieza de reglas obsoletas y duplicadas */
.menu-user{
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    height: 40px;
    border-radius: 10px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all .2s;
}
.menu-user:hover{ background: #e5e7eb; }

/* Botones en topbar */
.topbar .btn-primary{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary-600);
}

/* Botón de iniciar sesión resaltado en topbar */
#top-login-btn{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary-600);
}

/* Toggle oculto en desktop */
@media (min-width: 991px){
  .topbar-toggle{ display:none }
}

/* Emojis en acciones del buscador */
.buscador .actions .btn-primary::before{ content: "🔍"; margin-right: .35em; }
.buscador .actions .btn-secondary::before{ content: "🧹"; margin-right: .35em; }

/* Emojis para redes sociales */
.social-btn.web::before{ content: "🌐"; margin-right: .35em; }
.social-btn.fb::before{ content: "📘"; margin-right: .35em; }
.social-btn.ig::before{ content: "📸"; margin-right: .35em; }
.social-btn.yt::before{ content: "▶️"; margin-right: .35em; }
.social-btn.tt::before{ content: "🎵"; margin-right: .35em; }
.social-btn.tw::before{ content: "🐦"; margin-right: .35em; }

/* Altura del modal y scroll en móviles */
/* Permite desplazamiento interno del contenido del modal cuando excede el alto de la pantalla */
.overlay{padding:12px;}
.overlay-panel{max-height: calc(100vh - 48px); overflow-y: auto; -webkit-overflow-scrolling: touch;}
@media (max-width:520px){
  .overlay{align-items:center; padding:12px; display:flex; overflow-y:auto;}
  .overlay-panel{width:100%; max-height:none; padding:24px !important; margin:auto;}
  .close{top: 12px; right: 12px;}
  .maximize-btn{top: 12px; right: 60px;}
}