:root{ --bg:#0b1020; --fg:#e9eef8; --accent:#1DB954; --panel:rgba(255,255,255,.06); --panel-b:rgba(255,255,255,.12); }
body.service-youtube{ --accent:#FF0000; }
body{ margin:0; font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--fg);
  background:
    radial-gradient(1100px 800px at 110% 0%, rgba(124,92,255,.22), transparent 65%),
    radial-gradient(900px 700px at 30% 120%, rgba(29,185,84,.16), transparent 60%),
    var(--bg);
}
main{ max-width:980px; width:92%; margin:0 auto; padding:48px 16px; text-align:center; }
h1{ margin:0 0 8px; font-size:clamp(28px,4vw,44px); letter-spacing:-.02em;
    background:linear-gradient(90deg, var(--accent), #58ffc4 35%, #7dbbff 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
#login-view{ min-height:calc(100svh - 6rem); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; }
.login-buttons{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.login-button{ display:inline-block; padding:12px 18px; border-radius:999px; color:#fff; font-weight:700; text-decoration:none; box-shadow:0 10px 28px rgba(0,0,0,.22); }
.login-button.spotify{ background:#1DB954; } .login-button.youtube{ background:#FF0000; }
.feedback-link{ display:inline-block; margin-top:8px; padding:8px 14px; border-radius:999px; text-decoration:none; color:var(--fg); background:var(--panel); border:1px solid var(--panel-b); }
.header-controls{ display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; margin:8px 0 10px; }
#playlist-select{ padding:10px 14px; border-radius:999px; border:1px solid var(--panel-b); background:var(--panel); color:var(--fg); }
#theme-toggle-btn{ width:42px; height:42px; border-radius:999px; border:1px solid var(--panel-b); background:var(--panel); color:var(--fg); }
.logout-link{ padding:10px 14px; border-radius:999px; text-decoration:none; color:var(--fg); background:var(--panel); border:1px solid var(--panel-b); }
#top-genre-widget{ display:none; margin:20px auto 10px; max-width:560px; padding:14px 16px; border-radius:14px; background:var(--panel); border:1px solid var(--panel-b); }
#top-genre-widget h2{ margin:4px 0 0; font-size:clamp(26px,4.5vw,36px); color:var(--accent); text-transform:capitalize; }
#chart-layout-container{ display:flex; gap:18px; align-items:stretch; justify-content:center; margin-top:14px; }
.chart-container{ position:relative; width:100%; max-width:720px; height:58vh; }
#legend-container{ width:240px; max-height:58vh; overflow:auto; padding:10px; border-radius:12px; background:var(--panel); border:1px solid var(--panel-b); text-align:left; }
.legend-item{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:14px; }
.legend-color-box{ width:16px; height:16px; border-radius:4px; flex-shrink:0; }
#open-history-sidebar-btn{ margin-top:10px; padding:10px 16px; border-radius:999px; border:none; background:var(--accent); color:#fff; cursor:pointer; }
#history-sidebar{ position:fixed; top:0; right:-360px; width:320px; height:100%; background:var(--bg); border-left:1px solid var(--panel-b); padding:22px 16px; transition:right .35s; z-index:1000; }
#history-sidebar.visible{ right:0; }
#close-history-sidebar-btn{ position:absolute; top:10px; left:10px; background:none; border:none; color:#bbb; font-size:28px; cursor:pointer; }
.time-range-buttons{ display:flex; justify-content:center; gap:8px; margin:8px 0 12px; }
.time-range-buttons button{ padding:8px 12px; border-radius:999px; border:1px solid var(--panel-b); background:var(--panel); color:var(--fg); cursor:pointer; }
.time-range-buttons button.active{ background:var(--accent); color:#fff; border-color:transparent; }
.top-items-container{ display:flex; gap:18px; justify-content:space-between; }
.top-list{ flex:1; text-align:left; } .top-list ol{ list-style-position:inside; padding:0; margin:0; }
.top-list li{ margin-bottom:6px; }
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; justify-content:center; align-items:center; z-index:1001; }
.modal-overlay.visible{ display:flex; }
.modal-content{ width:90%; max-width:520px; max-height:80vh; overflow:auto; padding:18px; border-radius:14px; background:var(--panel); border:1px solid var(--panel-b); text-align:left; position:relative; }
.close-btn{ position:absolute; right:20px; top:8px; font-size:26px; color:#bbb; cursor:pointer; }
#comments-list{ margin:10px 0; padding:10px 0; border-top:1px solid var(--panel-b); border-bottom:1px solid var(--panel-b); }
#comment-form input, #comment-form textarea{ width:100%; padding:10px; border-radius:8px; border:1px solid var(--panel-b); background:rgba(255,255,255,.03); color:var(--fg); margin-bottom:10px; }
#comment-form button{ width:100%; padding:12px; border:none; border-radius:10px; background:var(--accent); color:#fff; font-weight:700; cursor:pointer; }
@media (max-width:980px){ #chart-layout-container{ flex-direction:column; align-items:stretch; } #legend-container{ width:auto; max-height:none; } }
/* === Grid de proveedores (2 columnas) === */
.provider-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  width:100%;
  max-width:900px;
  margin:10px auto 6px;
}

/* Tarjeta base */
.provider-card{
  padding:18px 16px;
  border-radius:16px;
  background: var(--panel);
  border:1px solid var(--panel-b);
  text-align:center;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.provider-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.22);
}

.provider-card h3{ margin:10px 0 6px; font-size:1.2rem; }
.provider-card p{ margin:0 0 12px; opacity:.9; }

/* insignia redonda arriba */
.badge-circle{
  width:56px; height:56px; border-radius:999px; margin:0 auto 6px;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  background: rgba(255,255,255,.08); border:1px solid var(--panel-b);
}

/* acentos por proveedor */
.provider-card.spotify .badge-circle{ background: rgba(29,185,84,.18); }
.provider-card.youtube .badge-circle{ background: rgba(255,0,0,.18); }

@media (max-width: 860px){
  .provider-grid{ grid-template-columns: 1fr; }
}