/* ====== Tema base ====== */
:root {
  color-scheme: dark;
  --bg: #0b0f14;
  --card: #111723;
  --fg: #e6edf3;
  --muted: #94a3b8;
  --accent: #60a5fa;
  --shadow: 0 10px 24px rgba(0,0,0,0.35);
  --shadow-sm: 0 8px 20px rgba(0,0,0,0.35);
}

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

.wrap {
  max-width: min(1650px, 100vw - 24px);
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 1.5vw, 16px);
  margin-bottom: clamp(10px, 2vw, 18px);
}
.head-left{display:flex;align-items:baseline;gap:12px;}
h1 { margin: 0; font-size: clamp(28px, 4vw, 48px); line-height: 1.1; }
#now { color: var(--muted); font-size: clamp(14px, 2vw, 24px); }
.mute-btn{background:#1f2937;border:1px solid #334155;color:#cbd5e1;padding:8px 12px;border-radius:10px;cursor:pointer;}
.mute-btn:hover{filter:brightness(1.1);}

/* ====== Tarjetas ====== */
.cards {
  display: grid;
  gap: clamp(10px, 2vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
  background: var(--card);
  border-radius: 18px;
  padding: clamp(12px, 2vw, 18px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card h2 {
  margin: 0 0 clamp(8px, 1.5vw, 12px);
  font-size: clamp(18px, 2.2vw, 28px);
}
.grid {
  display: grid;
  gap: clamp(8px, 1.5vw, 12px);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.k { display: block; color: var(--muted); font-size: clamp(12px, 1.6vw, 18px); margin-bottom: 4px; }
.v { display: inline-block; white-space: nowrap; font-size: clamp(18px, 3.2vw, 36px); font-weight: 700; color: var(--accent); }
.sub { margin-top: clamp(8px, 1.5vw, 12px); color: var(--fg); font-size: clamp(12px, 1.8vw, 20px); line-height: 1.35; }
.sub.muted { color: var(--muted); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }

/* ===== Inputs / Tabla ===== */
.text, select.text {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #263040;
  background: #0e141c;
  color: var(--fg);
  font-size: 16px;
}
.btn {
  display: inline-block;
  padding: 10px 14px;
  background: var(--accent);
  color: #0b0f14;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.05); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px; border-bottom: 1px solid #263040; text-align: left; }
.table th { color: var(--muted); font-weight: 600; }
.table-wrap { overflow: auto; }

/* ===== Videos ===== */
.videos { margin-top: clamp(12px, 2vw, 18px); }
.videos h2 { margin: 0 0 clamp(8px, 1.5vw, 12px); font-size: clamp(18px, 2.2vw, 28px); }
.video-grid {
  display: grid;
  gap: clamp(8px, 1.2vw, 12px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.video-card {
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.video-card iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.video-list{margin:8px 0 12px;font-size:14px;color:#94a3b8}
.video-list a{margin-right:8px}

/* ===== Ajustes ===== */
@media (min-width: 1700px) { .wrap { max-width: 1750px; } }
@media (max-width: 380px) { .grid { grid-template-columns: 1fr 1fr; } .v { font-size: clamp(18px, 7vw, 28px); } }