/* RadioStore Portal — portal.css  |  PHP 8.1+ responsive  */
:root {
  --portal-bg: #ffffff;
  --portal-bg-subtle: #f4f5f8;
  --portal-card: #ffffff;
  --portal-border: rgba(15,23,42,.1);
  --portal-text: #1e293b;
  --portal-muted: #64748b;
  --portal-heading: #0f172a;
  --portal-accent: var(--accent,#7c3aed);
  --portal-accent-hover: var(--accent-hover,#6931c9);
  --portal-content-max: 1320px;
  --portal-radius: 14px;
  --portal-shadow: 0 2px 12px rgba(15,23,42,.08);
}

/* ── Reset & Base ── */
html { height:100%; overflow-x:clip; overflow-y:scroll; scrollbar-gutter:stable; }
body.portal-body {
  min-height:100dvh; display:flex; flex-direction:column; align-items:stretch;
  background:var(--portal-bg); color:var(--portal-text);
  font-family:'Poppins',system-ui,sans-serif; overflow-x:clip; margin:0;
  padding-left:env(safe-area-inset-left,0); padding-right:env(safe-area-inset-right,0);
}
body.portal-body.modal-open { padding-right:env(safe-area-inset-right,0)!important; }
body.portal-body > header, body.portal-body > main.portal-main, body.portal-body > footer {
  width:100%; max-width:100%; align-self:stretch;
}
@media (min-width:992px) {
  .portal-body .container { max-width:var(--portal-content-max)!important; margin-left:auto!important; margin-right:auto!important; }
}
.portal-main { flex:1 0 auto; width:100%; }

/* ── Header ── */
.portal-header-clean {
  background:rgba(255,255,255,.92); border-bottom:1px solid var(--portal-border);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:.55rem 0; z-index:1030;
}
.portal-header-clean .navbar { min-height:3.25rem; }
.portal-header-logo-img { display:block; max-height:46px; max-width:230px; width:auto; height:auto; object-fit:contain; }
@media (max-width:991.98px) { .portal-header-logo-img { max-width:min(230px,58vw); } }

.portal-header-menu .nav-link { color:var(--portal-muted)!important; font-weight:500; font-size:.9rem; border-radius:100px; padding:.55rem .9rem!important; }
.portal-header-menu .nav-link:hover { color:var(--portal-heading)!important; background:rgba(15,23,42,.04); }
.portal-header-menu .nav-link.active { color:var(--portal-accent)!important; background:color-mix(in srgb,var(--portal-accent) 10%,transparent); }

.portal-header-btn-primary { background:var(--portal-accent); color:#fff; border-radius:100px; padding:.4rem 1.1rem; font-size:.85rem; font-weight:600; border:none; }
.portal-header-btn-primary:hover { background:var(--portal-accent-hover); color:#fff; }
.portal-header-btn-ghost { color:var(--portal-accent); border:1.5px solid var(--portal-accent); border-radius:100px; padding:.38rem 1rem; font-size:.85rem; font-weight:600; background:transparent; }
.portal-header-btn-ghost:hover { background:color-mix(in srgb,var(--portal-accent) 8%,transparent); }

/* Search */
.portal-header-search-toggle { width:46px; height:46px; border:none; border-radius:100px; background:transparent; color:var(--portal-accent); font-size:1.35rem; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; }
.portal-header-search-panel { overflow:hidden; max-width:0; opacity:0; transition:max-width .38s cubic-bezier(.4,0,.2,1),opacity .28s; pointer-events:none; }
.portal-header-search-wrap.is-open .portal-header-search-panel { max-width:min(300px,calc(100vw - 8rem)); opacity:1; pointer-events:auto; }
.portal-header-search .form-control { border-radius:12px 0 0 12px; min-height:40px; }
.portal-header-search-btn { background:var(--portal-accent); color:#fff; border-radius:0 12px 12px 0; min-width:2.5rem; border:none; }
@media (min-width:992px) { .portal-header-search-wrap { flex-direction:row-reverse; } }
@media (max-width:991px) { .portal-header-search-wrap.is-open .portal-header-search-panel { max-width:none; flex:1 1 auto; } }

/* Offcanvas mobile */
.portal-nav-offcanvas { width:min(20.5rem,100vw - 1rem)!important; z-index:2000; }
.portal-offcanvas-link { font-weight:600; font-size:1.05rem; border-radius:12px!important; padding:.65rem .85rem!important; min-height:48px; }
.portal-offcanvas-link.active { color:var(--portal-accent)!important; background:color-mix(in srgb,var(--portal-accent) 10%,transparent); }

/* ── Banners Hero ── */
.portal-banners-section--hero { margin-bottom:0; }
.portal-banners-carousel--hero { border-radius:0; }
.portal-banner-slide-img--hero { width:100%; aspect-ratio:3/1; object-fit:cover; display:block; }
@media (max-width:767px) { .portal-banner-slide-img--hero { aspect-ratio:16/9; } }
.carousel-control-prev,.carousel-control-next { width:6%; }
.carousel-indicators [data-bs-target] { border-radius:50%; width:8px; height:8px; }

/* ── Seções ── */
.portal-section-title {
  font-size:1.15rem; font-weight:700; color:var(--portal-heading);
  display:flex; align-items:center; gap:.5rem; margin-bottom:1.1rem;
}
.portal-section-title--top { border-left:4px solid var(--portal-accent); padding-left:.75rem; }

/* ── Cards Rádio Compact ── */
.portal-cards-radios-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:.75rem; }
@media (min-width:640px) { .portal-cards-radios-row { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); } }
@media (min-width:992px) { .portal-cards-radios-row { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); } }

.portal-card-radio-slot { position:relative; }
.portal-card-radio-compact {
  position:relative; border-radius:var(--portal-radius); cursor:pointer; outline:none;
  transition:transform .2s,box-shadow .2s;
}
.portal-card-radio-compact:hover,.portal-card-radio-compact:focus-visible { transform:translateY(-3px); box-shadow:var(--portal-shadow); }
.portal-card-radio-thumb-link { display:block; text-decoration:none; }
.portal-card-radio-thumb { width:100%; aspect-ratio:1; border-radius:var(--portal-radius); overflow:hidden; background:var(--portal-bg-subtle); border:1px solid var(--portal-border); }
.portal-card-radio-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.portal-card-radio-compact-caption { font-size:.72rem; color:var(--portal-muted); text-align:center; margin-top:.35rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 .25rem; }

/* Popup hover */
.portal-card-radio-popup {
  position:absolute; bottom:calc(100% + .5rem); left:50%; transform:translateX(-50%);
  width:200px; background:var(--portal-card); border:1px solid var(--portal-border);
  border-radius:var(--portal-radius); box-shadow:0 8px 32px rgba(0,0,0,.12);
  padding:.85rem; z-index:100; opacity:0; pointer-events:none;
  transition:opacity .18s,transform .18s; transform:translateX(-50%) translateY(4px);
}
.portal-card-radio-compact:hover .portal-card-radio-popup,
.portal-card-radio-compact:focus-within .portal-card-radio-popup { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.portal-card-radio-popup-title { font-weight:700; font-size:.88rem; margin-bottom:.25rem; color:var(--portal-heading); }
.portal-card-radio-popup-meta { font-size:.72rem; color:var(--portal-muted); margin-bottom:.35rem; }
.portal-card-radio-popup-badge { display:inline-block; padding:.1rem .55rem; background:color-mix(in srgb,var(--portal-accent) 12%,transparent); border-radius:100px; font-size:.7rem; color:var(--portal-accent); font-weight:600; margin-bottom:.5rem; }
.portal-card-radio-popup-desc { font-size:.75rem; color:var(--portal-muted); margin-bottom:.5rem; }
.portal-card-radio-popup-actions { display:flex; gap:.4rem; }
.portal-card-radio-popup-actions .btn { font-size:.72rem; padding:.28rem .65rem; border-radius:8px; }

/* ── Ranking Section ── */
.portal-ranking-section { background:var(--portal-bg-subtle); border-radius:16px; padding:1.5rem 1.25rem; }
.portal-ranking-section__title { font-size:1.25rem; font-weight:800; color:var(--portal-heading); display:flex; align-items:center; gap:.5rem; margin:0; }
.portal-ranking-section__title-tag { font-size:.72rem; font-weight:700; background:var(--portal-accent); color:#fff; border-radius:100px; padding:.1rem .6rem; }
.portal-ranking-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.portal-ranking-item { display:flex; align-items:center; gap:.85rem; background:var(--portal-card); border-radius:12px; padding:.65rem .9rem; border:1px solid var(--portal-border); cursor:pointer; text-decoration:none; color:inherit; transition:box-shadow .2s,transform .2s; }
.portal-ranking-item:hover { box-shadow:var(--portal-shadow); transform:translateX(3px); }
.portal-ranking-pos { font-size:1.05rem; font-weight:800; color:var(--portal-accent); min-width:1.6rem; text-align:center; }
.portal-ranking-thumb { width:46px; height:46px; border-radius:10px; object-fit:cover; flex-shrink:0; border:1px solid var(--portal-border); }
.portal-ranking-info { flex:1; min-width:0; }
.portal-ranking-name { font-weight:700; font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.portal-ranking-meta { font-size:.72rem; color:var(--portal-muted); }
.portal-ranking-play { width:36px; height:36px; border-radius:50%; background:var(--portal-accent); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }

/* ── Player Bar (rádio individual) ── */
.portal-radio-player {
  background:var(--portal-bg-subtle); border:1px solid var(--portal-border);
  border-radius:16px; padding:1.25rem 1.5rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.portal-radio-player-play {
  width:56px; height:56px; border-radius:50%; background:var(--portal-accent); color:#fff;
  border:none; font-size:1.5rem; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  transition:background .2s,transform .15s;
}
.portal-radio-player-play:hover { background:var(--portal-accent-hover); transform:scale(1.06); }
.portal-radio-player-info { flex:1; min-width:0; }
.portal-radio-player-name { font-weight:700; font-size:1rem; }
.portal-radio-player-meta { font-size:.78rem; color:var(--portal-muted); }
.portal-radio-player-time { font-size:.8rem; color:var(--portal-muted); font-variant-numeric:tabular-nums; }
.portal-radio-live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#22c55e; animation:pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }

/* ── Filtros ── */
.portal-radios-filters { border:1px solid var(--portal-border); border-radius:16px; padding:1.25rem; background:var(--portal-card); }
.portal-radios-filters-title { font-size:1rem; font-weight:700; margin-bottom:1rem; color:var(--portal-heading); }
.portal-form-control { border-radius:10px!important; border:1px solid var(--portal-border)!important; min-height:44px; }
.portal-form-control:focus { box-shadow:0 0 0 3px color-mix(in srgb,var(--portal-accent) 20%,transparent)!important; border-color:var(--portal-accent)!important; }

/* ── Modal login/cadastro ── */
.portal-login-modal-content { border-radius:20px!important; overflow:hidden; }
.portal-login-modal-glow { position:absolute; top:-80px; left:50%; transform:translateX(-50%); width:300px; height:200px; background:radial-gradient(ellipse at center,color-mix(in srgb,var(--portal-accent) 18%,transparent) 0%,transparent 70%); pointer-events:none; }
.portal-login-modal-icon-wrap { width:64px; height:64px; border-radius:50%; background:color-mix(in srgb,var(--portal-accent) 12%,transparent); display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--portal-accent); }
.portal-login-input-wrap { position:relative; }
.portal-login-input-icon { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--portal-muted); pointer-events:none; }
.portal-login-input { padding-left:2.4rem!important; }
.btn-portal-primary { background:var(--portal-accent); color:#fff; border:none; font-weight:600; border-radius:12px; }
.btn-portal-primary:hover { background:var(--portal-accent-hover); color:#fff; }

/* ── Footer ── */
.portal-footer { background:var(--portal-bg-subtle); border-top:1px solid var(--portal-border); padding:2.5rem 0 1.5rem; }
.portal-footer-logo-img { max-height:38px; width:auto; }
.portal-footer-desc { font-size:.82rem; color:var(--portal-muted); line-height:1.65; }
.portal-footer-title { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--portal-heading); margin-bottom:.75rem; }
.portal-footer-link { display:block; font-size:.82rem; color:var(--portal-muted); text-decoration:none; padding:.2rem 0; }
.portal-footer-link:hover { color:var(--portal-accent); }
.portal-footer-bottom { font-size:.75rem; color:var(--portal-muted); border-top:1px solid var(--portal-border); padding-top:1rem; margin-top:1.5rem; text-align:center; }

/* ── Radio Hero Page ── */
.portal-radio-hero { display:flex; align-items:flex-start; gap:1.5rem; flex-wrap:wrap; padding:2rem 0 1.5rem; }
.portal-radio-hero-logo { width:130px; height:130px; border-radius:20px; object-fit:cover; flex-shrink:0; border:2px solid var(--portal-border); box-shadow:var(--portal-shadow); }
.portal-radio-hero-info { flex:1; min-width:0; }
.portal-radio-hero-name { font-size:1.8rem; font-weight:800; color:var(--portal-heading); line-height:1.2; margin-bottom:.4rem; }
.portal-radio-hero-meta { font-size:.88rem; color:var(--portal-muted); margin-bottom:.65rem; }
.portal-radio-hero-badges { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.portal-radio-hero-badge { display:inline-block; padding:.2rem .7rem; border-radius:100px; font-size:.75rem; font-weight:600; background:color-mix(in srgb,var(--portal-accent) 12%,transparent); color:var(--portal-accent); border:1px solid color-mix(in srgb,var(--portal-accent) 25%,transparent); }
.portal-radio-app-card { background:linear-gradient(135deg,color-mix(in srgb,var(--portal-accent) 6%,transparent),var(--portal-bg-subtle)); border:1px solid var(--portal-border); border-radius:16px; padding:1.25rem; }
.portal-radio-app-card h3 { font-size:.95rem; font-weight:700; margin-bottom:.5rem; }
.portal-radio-app-qr { display:block; width:100px; height:100px; }
.portal-radio-app-links { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.btn-app-link { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .85rem; border-radius:10px; font-size:.78rem; font-weight:600; text-decoration:none; border:1.5px solid var(--portal-accent); color:var(--portal-accent); transition:background .2s; }
.btn-app-link:hover { background:color-mix(in srgb,var(--portal-accent) 8%,transparent); }

/* ── Admin ── */
.admin-sidebar { width:240px; min-height:100vh; background:#0f172a; position:fixed; top:0; left:0; z-index:100; display:flex; flex-direction:column; }
.admin-sidebar-brand { padding:1.25rem 1.5rem; border-bottom:1px solid rgba(255,255,255,.08); }
.admin-sidebar-brand a { color:#fff; font-weight:800; font-size:1.1rem; text-decoration:none; }
.admin-nav-link { display:flex; align-items:center; gap:.75rem; padding:.7rem 1.5rem; color:rgba(255,255,255,.65); font-size:.88rem; font-weight:500; text-decoration:none; transition:background .2s,color .2s; }
.admin-nav-link:hover,.admin-nav-link.active { background:rgba(255,255,255,.07); color:#fff; }
.admin-nav-link i { font-size:1.1rem; width:1.25rem; text-align:center; flex-shrink:0; }
.admin-nav-section { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.3); padding:.9rem 1.5rem .3rem; }
.admin-main { margin-left:240px; min-height:100vh; background:#f8fafc; display:flex; flex-direction:column; }
@media (max-width:991.98px) { .admin-sidebar { display:none; } .admin-main { margin-left:0; } }
.admin-topbar { background:#fff; border-bottom:1px solid #e2e8f0; padding:.75rem 1.5rem; display:flex; align-items:center; gap:1rem; }
.admin-topbar-title { font-size:1.1rem; font-weight:700; color:#0f172a; flex:1; }
.admin-content { padding:1.75rem 1.5rem; flex:1; }
.admin-card { background:#fff; border-radius:14px; border:1px solid #e2e8f0; padding:1.5rem; margin-bottom:1.5rem; }
.admin-card-title { font-size:.88rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#64748b; margin-bottom:1rem; }
.admin-stat-num { font-size:2rem; font-weight:800; color:#0f172a; }
.admin-stat-label { font-size:.8rem; color:#64748b; }
.admin-table th { background:#f8fafc; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#64748b; border-top:none; }
.admin-table td { vertical-align:middle; font-size:.875rem; }
.admin-badge { display:inline-block; padding:.2rem .65rem; border-radius:100px; font-size:.72rem; font-weight:600; }
.admin-badge-green { background:#dcfce7; color:#166534; }
.admin-badge-red { background:#fee2e2; color:#991b1b; }
.admin-badge-yellow { background:#fef9c3; color:#854d0e; }