/* Esquema base de Material 3, el mismo que usan las apps Android sin color dinámico. */
:root {
  color-scheme: light dark;
  --primary: #6750a4;
  --on-primary: #fff;
  --secondary-container: #e8def8;
  --on-secondary-container: #1d192b;
  --surface: #fef7ff;
  --surface-container: #f3edf7;
  --surface-container-high: #ece6f0;
  --on-surface: #1d1b20;
  --on-surface-variant: #49454f;
  --outline-variant: #cac4d0;
  --error: #b3261e;
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-full: 999px;
  --touch: 48px;
  --nav-rail: 88px;
  --player: 96px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #d0bcff;
    --on-primary: #381e72;
    --secondary-container: #4a4458;
    --on-secondary-container: #e8def8;
    --surface: #141218;
    --surface-container: #211f26;
    --surface-container-high: #2b2930;
    --on-surface: #e6e0e9;
    --on-surface-variant: #cac4d0;
    --outline-variant: #49454f;
    --error: #f2b8b5;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--surface);
  color: var(--on-surface);
  font: 400 16px/1.5 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1 { font-size: 28px; line-height: 36px; font-weight: 400; margin: 0; }
h2 { font-size: 16px; line-height: 24px; font-weight: 500; margin: 0; }
p { margin: 0; }
a { color: var(--primary); }
svg { width: 24px; height: 24px; fill: currentColor; display: block; flex: none; }

.shell { min-height: 100%; padding-bottom: 80px; }
.shell.playing { padding-bottom: calc(80px + var(--player)); }
main { max-width: 960px; margin: 0 auto; padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-m); }
.top { display: flex; align-items: center; gap: var(--space-s); min-height: var(--touch); }
.top h1 { flex: 1; min-width: 0; overflow-wrap: anywhere; }

nav {
  position: fixed; inset: auto 0 0 0; height: 80px; z-index: 2;
  display: flex; background: var(--surface-container);
  padding-bottom: env(safe-area-inset-bottom);
}
nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs);
  color: var(--on-surface-variant); text-decoration: none; font-size: 12px; font-weight: 500;
}
nav a span { display: flex; padding: var(--space-xs) 20px; border-radius: var(--radius-full); }
nav a[aria-current="page"] { color: var(--on-surface); }
nav a[aria-current="page"] span { background: var(--secondary-container); color: var(--on-secondary-container); }
nav a:hover span { background: var(--surface-container-high); }
nav a[aria-current="page"]:hover span { background: var(--secondary-container); }

.btn, .icon-btn {
  font: inherit; border: 0; cursor: pointer; color: inherit; background: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn { min-height: 40px; padding: 0 var(--space-l); border-radius: var(--radius-full); font-size: 14px; font-weight: 500; gap: var(--space-s); text-decoration: none; }
.btn.filled { background: var(--primary); color: var(--on-primary); }
.btn.tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn.text { color: var(--primary); padding: 0 var(--space-m); }
.btn:disabled { opacity: .5; cursor: default; }
.icon-btn { width: var(--touch); height: var(--touch); border-radius: var(--radius-full); flex: none; color: var(--on-surface-variant); }
.icon-btn:hover, .btn.text:hover { background: var(--surface-container-high); }
.icon-btn.on { color: var(--primary); }
.icon-btn.play { background: var(--primary); color: var(--on-primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.field {
  flex: 1; min-width: 0; height: var(--touch); padding: 0 var(--space-m); font: inherit; color: inherit;
  background: var(--surface-container-high); border: 0; border-radius: var(--radius-full);
}
.row-form { display: flex; gap: var(--space-s); align-items: center; flex-wrap: wrap; }

.art { width: 64px; height: 64px; border-radius: var(--radius-s); object-fit: cover; flex: none; background: var(--surface-container-high); }
.art.large { width: 128px; height: 128px; border-radius: var(--radius-l); }

.list { display: flex; flex-direction: column; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.item { background: var(--surface-container); border-radius: var(--radius-m); padding: var(--space-s) var(--space-s) var(--space-s) var(--space-m); }
.item-main { display: flex; align-items: center; gap: var(--space-m); }
.item-text { flex: 1; min-width: 0; }
.item-title { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.item.played .item-title { color: var(--on-surface-variant); font-weight: 400; }
.meta { color: var(--on-surface-variant); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.meta a { color: inherit; }
.actions { display: flex; flex: none; }
.bar { height: 4px; border-radius: 2px; background: var(--outline-variant); margin-top: var(--space-xs); overflow: hidden; }
.bar div { height: 100%; background: var(--primary); }
.description { margin: var(--space-s) var(--space-s) var(--space-s) 0; color: var(--on-surface-variant); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-m); }
.tile { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: var(--space-s); min-width: 0; }
.tile img { width: 100%; aspect-ratio: 1; border-radius: var(--radius-m); object-fit: cover; background: var(--surface-container-high); display: block; }
.tile-title { font-size: 14px; font-weight: 500; line-height: 20px; overflow-wrap: anywhere; }

.header { display: flex; gap: var(--space-m); align-items: flex-start; }
.header > div { min-width: 0; display: flex; flex-direction: column; gap: var(--space-s); }
.state { padding: var(--space-l) var(--space-m); text-align: center; color: var(--on-surface-variant); display: flex; flex-direction: column; gap: var(--space-m); align-items: center; }
.error { color: var(--error); }

.login { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-m); }
.login-card { background: var(--surface-container); border-radius: var(--radius-l); padding: var(--space-l); display: flex; flex-direction: column; gap: var(--space-m); align-items: center; text-align: center; max-width: 360px; width: 100%; }
.login-card img { width: 72px; height: 72px; }

.player {
  position: fixed; inset: auto 0 80px 0; z-index: 2; min-height: var(--player);
  background: var(--surface-container-high); padding: var(--space-s) var(--space-m);
  display: flex; flex-direction: column; gap: var(--space-xs);
}
.player-main { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; }
.player-controls { display: flex; align-items: center; gap: var(--space-s); }
.player .art { width: 48px; height: 48px; }
.player-text { flex: 1 1 0; min-width: 0; }
.player-title { font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-seek { display: flex; align-items: center; gap: var(--space-s); font-size: 12px; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.player-seek input { flex: 1; min-width: 0; accent-color: var(--primary); margin: 0; }
.speed { height: 40px; border: 0; border-radius: var(--radius-full); padding: 0 var(--space-s); background: var(--secondary-container); color: var(--on-secondary-container); font: inherit; font-size: 14px; }

@media (max-width: 600px) {
  :root { --player: 172px; }
  .player-text { flex-basis: calc(100% - 64px); }
  .player-controls { width: 100%; justify-content: center; }
  .item { padding-left: var(--space-s); }
  .item-main { flex-wrap: wrap; gap: var(--space-s); }
  .art { width: 48px; height: 48px; }
  .art.large { width: 96px; height: 96px; }
  .item-text { flex-basis: calc(100% - 64px); }
  .actions { width: 100%; justify-content: flex-end; }
}
@media (min-width: 840px) {
  .shell, .shell.playing { padding: 0 0 0 var(--nav-rail); }
  .shell.playing { padding-bottom: var(--player); }
  nav { inset: 0 auto 0 0; width: var(--nav-rail); height: auto; flex-direction: column; justify-content: flex-start; padding: var(--space-m) 0; gap: var(--space-m); }
  nav a { flex: none; }
  .player { inset: auto 0 0 var(--nav-rail); }
}