/* ======================= ESTADÍSTICAS (modal) ======================= */
.modal.modal-xl{max-width:1180px; max-height:94vh; overflow-y:auto;}

.stats-controls{display:flex; justify-content:space-between; align-items:center; gap:10px 16px; flex-wrap:wrap;}
.stats-controls-right{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;}
.stats-controls select{background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:7px; padding:7px 9px; font-size:12.5px; max-width:100%;}
.stats-controls select:focus{outline:none; border-color:var(--accent);}

/* Zona pensada para captura de pantalla: todo lo que sale en redes va aquí dentro. */
.stats-capture{background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:18px;}
.stats-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.stats-camp{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em;}
.stats-title{font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif; font-size:24px; font-weight:700; color:var(--accent-soft); overflow-wrap:anywhere;}
.stats-range{font-size:12px; color:var(--text-muted); text-align:right; line-height:1.5;}
.stats-range span{color:var(--text-dim); font-size:11px;}

.stats-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(128px, 1fr)); gap:8px; margin-bottom:14px;}
.stats-cards .stat-card{padding:10px 12px;}
.stats-cards .stat-card .tviews{font-size:17px;}

.stats-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.stats-table th{text-align:right; white-space:nowrap;}
.stats-table th:first-child{text-align:right; width:28px;}
.stats-table td{text-align:right; white-space:nowrap;}
.stats-table td .tsub{margin-left:4px;}
.stats-table th.sortable{cursor:pointer; user-select:none;}
.stats-table th.sortable:hover{color:var(--text);}
.stats-table th.is-sorted{color:var(--accent-soft);}
.stats-table tr.is-empty{opacity:.45;}
.stats-table tfoot td{border-top:2px solid var(--accent); font-weight:700; border-bottom:none; padding-top:10px;}
.stats-main{min-width:900px;}

@media(max-width:700px){
  .stats-capture{padding:12px;}
  .stats-title{font-size:19px;}
  .stats-range{text-align:left;}
  .stats-controls-right{width:100%;}
  .stats-controls-right select{flex:1 1 100%;}
}

/* ======================= CONFIGURACIÓN COMO MODAL =======================
   script.js sigue alternando la clase "is-open" en #settingsPanel; aquí solo cambia cómo se ve. */
#settingsPanel.is-open{
  display:flex; position:fixed; inset:0; z-index:90; margin-top:0;
  background:rgba(10,8,15,.65); align-items:flex-start; justify-content:center;
  padding:16px; overflow-y:auto;
}
.settings-modal{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; width:100%; max-width:1100px; margin:auto;}
.settings-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px;}
.settings-head h3{font-size:16px;}
.settings-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:14px; align-items:start;}
.settings-grid .card{margin-bottom:0; min-width:0; background:var(--bg);}
@media(max-width:700px){ .settings-modal{padding:14px;} }