:root {
      color-scheme: light;
      --ink: #111111;
      --paper: #f6f3ec;
      --white: #ffffff;
      --orange: #ef5a2f;
      --yellow: #f3c846;
      --muted: #6f6c66;
      --line: rgba(17,17,17,.14);
      --shadow: 0 24px 64px rgba(17,17,17,.12);
    }

    * { box-sizing: border-box; }

    /* Cualquier regla de autor con `display` anula el `[hidden]` del navegador.
       .controls usa display:flex y se quedaba visible con hidden=true. */
    [hidden] { display: none !important; }

    html, body { min-height: 100%; }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 8% 5%, rgba(243,200,70,.30), transparent 26rem),
        radial-gradient(circle at 96% 93%, rgba(239,90,47,.17), transparent 28rem),
        var(--paper);
      color: var(--ink);
      font-family: Gotham, Montserrat, "Helvetica Neue", Arial, sans-serif;
      padding: clamp(18px, 4vw, 48px);
    }

    button, a { font: inherit; }

    .shell {
      width: min(1120px, 100%);
      margin: 0 auto;
      min-height: calc(100vh - clamp(36px, 8vw, 96px));
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: clamp(24px, 4vw, 44px);
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand {
      width: clamp(172px, 21vw, 240px);
      height: auto;
      display: block;
    }

    .local-time {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .pulse {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 0 0 6px rgba(239,90,47,.12);
    }

    main {
      display: grid;
      grid-template-columns: minmax(260px, .78fr) minmax(420px, 1.22fr);
      gap: clamp(22px, 4vw, 52px);
      align-items: center;
    }

    .intro h1 {
      margin: 0 0 14px;
      max-width: 620px;
      font-size: clamp(2.45rem, 6vw, 5.2rem);
      line-height: .92;
      letter-spacing: -.06em;
      text-transform: uppercase;
    }

    .intro h1 span {
      display: block;
      color: var(--orange);
    }

    .intro p {
      margin: 0 0 28px;
      color: var(--muted);
      font-size: clamp(1rem, 1.7vw, 1.18rem);
      line-height: 1.55;
      max-width: 470px;
    }

    .selector {
      display: grid;
      gap: 12px;
      max-width: 470px;
    }

    .shift-button {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255,255,255,.55);
      color: var(--ink);
      padding: 17px 18px;
      display: grid;
      grid-template-columns: 48px 1fr auto;
      align-items: center;
      gap: 14px;
      text-align: left;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .shift-button:hover { transform: translateY(-2px); }
    .shift-button:focus-visible { outline: 3px solid rgba(239,90,47,.30); outline-offset: 3px; }
    .shift-button[aria-pressed="true"] {
      background: var(--ink);
      color: var(--white);
      border-color: var(--ink);
      box-shadow: 0 18px 38px rgba(17,17,17,.17);
    }

    .shift-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--yellow);
      color: var(--ink);
      font-size: 1.45rem;
    }

    .shift-button[data-shift="dinner"] .shift-icon { background: var(--orange); color: var(--white); }

    .shift-copy strong {
      display: block;
      font-size: 1.05rem;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .shift-copy small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: .80rem;
      font-weight: 700;
    }

    .shift-button[aria-pressed="true"] .shift-copy small { color: rgba(255,255,255,.64); }
    .arrow { font-size: 1.25rem; transition: transform .2s ease; }
    .shift-button[aria-pressed="true"] .arrow { transform: translateX(3px); color: var(--yellow); }

    .player-card {
      position: relative;
      overflow: hidden;
      min-height: 510px;
      padding: clamp(22px, 4vw, 38px);
      border-radius: clamp(24px, 4vw, 42px);
      background: var(--ink);
      color: var(--white);
      box-shadow: var(--shadow);
      isolation: isolate;
    }

    .player-card::before {
      content: "";
      position: absolute;
      width: 280px;
      height: 280px;
      right: -105px;
      top: -125px;
      border: 52px solid var(--orange);
      border-radius: 50%;
      opacity: .94;
      z-index: -1;
    }

    .player-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 24px;
    }

    .eyebrow {
      margin: 0 0 8px;
      color: var(--yellow);
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .player-title {
      margin: 0;
      font-size: clamp(2rem, 4vw, 3.4rem);
      line-height: 1;
      letter-spacing: -.04em;
      text-transform: uppercase;
    }

    .equalizer {
      display: flex;
      align-items: flex-end;
      gap: 5px;
      height: 44px;
      padding: 5px;
    }

    .equalizer i {
      display: block;
      width: 5px;
      min-height: 8px;
      border-radius: 6px;
      background: var(--yellow);
      animation: bounce 1.05s ease-in-out infinite alternate;
    }

    .equalizer i:nth-child(1) { height: 17px; animation-delay: -.2s; }
    .equalizer i:nth-child(2) { height: 34px; animation-delay: -.7s; }
    .equalizer i:nth-child(3) { height: 23px; animation-delay: -.4s; }
    .equalizer i:nth-child(4) { height: 39px; animation-delay: -.85s; }

    @keyframes bounce { to { height: 9px; } }
    @media (prefers-reduced-motion: reduce) { .equalizer i { animation: none; } * { scroll-behavior: auto !important; } }

    .embed-wrap {
      border-radius: 18px;
      overflow: hidden;
      background: #282828;
      min-height: 352px;
    }

    iframe {
      display: block;
      width: 100%;
      height: 352px;
      border: 0;
    }

    .spotify-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 18px;
      color: var(--white);
      text-underline-offset: 4px;
      font-weight: 700;
      font-size: .92rem;
    }

    footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-top: 6px;
      color: var(--muted);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }


    /* --- estados nuevos: sesion, reproduccion y respaldo ------------------ */

    .header-meta {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 13px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.62);
      color: var(--muted);
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--muted);
      flex: none;
    }

    .status-pill[data-state="playing"] { color: #1a7f4b; border-color: rgba(26,127,75,.32); }
    .status-pill[data-state="playing"] .status-dot { background: #1db954; }
    .status-pill[data-state="warning"] { color: #8a5a12; border-color: rgba(239,90,47,.34); }
    .status-pill[data-state="warning"] .status-dot { background: var(--yellow); }
    .status-pill[data-state="error"] { color: #a32b12; border-color: rgba(163,43,18,.34); }
    .status-pill[data-state="error"] .status-dot { background: var(--orange); }

    .schedule-note {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 10px;
      margin: 18px 0 0;
      color: var(--muted);
      font-size: .84rem;
      font-weight: 700;
      line-height: 1.5;
    }

    .link-button {
      border: 0;
      padding: 0;
      background: none;
      color: var(--orange);
      font-size: .84rem;
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }

    .track-line {
      margin: 0 0 20px;
      min-height: 2.9em;
      line-height: 1.45;
    }

    .track-line strong {
      display: block;
      font-size: 1.06rem;
      letter-spacing: -.01em;
    }

    .track-line span {
      display: block;
      margin-top: 3px;
      color: rgba(255,255,255,.62);
      font-size: .88rem;
      font-weight: 600;
    }

    .stage {
      display: grid;
      gap: 16px;
      padding: 20px;
      border-radius: 18px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.13);
    }

    .stage-message {
      margin: 0;
      color: rgba(255,255,255,.76);
      font-size: .92rem;
      line-height: 1.55;
    }

    .stage-message:empty { display: none; }

    .stage-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .stage-actions:not(:has(button:not([hidden]))) { display: none; }

    .primary-button {
      border: 0;
      border-radius: 999px;
      padding: 13px 26px;
      background: #1db954;
      color: #06210f;
      font-size: .94rem;
      font-weight: 800;
      letter-spacing: .03em;
      cursor: pointer;
      transition: transform .18s ease, filter .18s ease;
    }

    .primary-button:hover { transform: translateY(-1px); filter: brightness(1.06); }
    .primary-button:disabled { opacity: .55; cursor: progress; transform: none; }

    .ghost-button {
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 999px;
      padding: 11px 20px;
      background: transparent;
      color: var(--white);
      font-size: .86rem;
      font-weight: 700;
      cursor: pointer;
      transition: background .18s ease, border-color .18s ease;
    }

    .ghost-button:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.46); }

    .primary-button:focus-visible,
    .ghost-button:focus-visible,
    .link-button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

    .controls {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .volume {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
      color: rgba(255,255,255,.66);
      font-size: .74rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .volume input {
      width: 122px;
      accent-color: #1db954;
      cursor: pointer;
    }

    .fallback { margin-top: 20px; }

    .fallback-warning {
      margin: 0 0 12px;
      padding: 12px 14px;
      border-radius: 12px;
      background: rgba(243,200,70,.16);
      border: 1px solid rgba(243,200,70,.42);
      color: var(--yellow);
      font-size: .84rem;
      font-weight: 700;
      line-height: 1.5;
    }

    /* El ecualizador solo se mueve cuando de verdad esta sonando. */
    .equalizer[data-active="false"] i { animation-play-state: paused; opacity: .4; }

    @media (max-width: 820px) {
      .volume { margin-left: 0; }
    }

    @media (max-width: 560px) {
      .header-meta { width: 100%; justify-content: space-between; }
      .controls { gap: 8px; }
      .volume input { width: 100%; }
    }

    @media (max-width: 820px) {
      body { padding: 20px; }
      .shell { min-height: calc(100vh - 40px); }
      main { grid-template-columns: 1fr; }
      .intro h1 { max-width: 560px; }
      .selector { max-width: none; grid-template-columns: 1fr 1fr; }
      .shift-button { grid-template-columns: 42px 1fr; }
      .shift-icon { width: 42px; height: 42px; }
      .arrow { display: none; }
      .player-card { min-height: auto; }
    }

    @media (max-width: 560px) {
      header { align-items: flex-start; flex-direction: column; }
      .brand { width: 190px; }
      .intro h1 { font-size: clamp(2.45rem, 15vw, 4rem); }
      .selector { grid-template-columns: 1fr; }
      .player-card { padding: 22px; border-radius: 26px; }
      .equalizer { display: none; }
      iframe { height: 352px; }
      footer { align-items: flex-start; flex-direction: column; }
    }