/* ===============================
       PALETA MARRÓN + BASE
       =============================== */
    :root{
      --brown-900:#3E2723; /* fondo principal oscuro */
      --brown-800:#5D4037; /* barra lateral */
      --brown-700:#8B4513;
      --brown-600:#A0522D;
      --brown-500:#D2691E;
      --brown-400:#CD853F;
      --brown-300:#DEB887;
      --text:#F5F2EF;      /* texto claro */
      --text-dim:#D7CFC9;  /* texto atenuado */
      --accent:#D2691E;    /* acento en botones */
      --card:#4E342E;      /* tarjetas */
      --hover:#6D4C41;     /* hover */
      --success:#7CB342;   /* feedback */
      --error:#E53935;     /* errores */
      --shadow:rgba(0,0,0,.4);
    }

    *{box-sizing:border-box}
    html,body{
      height:100%;
      background:var(--brown-900);
      color:var(--text);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%;height:auto;border-radius:6px}


    /* Asegurar que el sidebar esté por encima de todo al abrirse */
aside.sidebar {
  z-index: 20; /* Mayor que el player (10) y el header (5) */
  /* El resto de tus estilos ya están bien */
}

/* Opcional: añadir un overlay oscuro al fondo cuando el menú está abierto (mejora UX) */
body {
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 19; /* Justo debajo del sidebar */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

body.menu-open::before {
  opacity: 1;
  pointer-events: auto;
}

    /* ===============================
       LAYOUT GENERAL
       =============================== */
    .app{
      display:grid;
      grid-template-columns: 260px 1fr;
      grid-template-rows: auto 1fr 100px;
      grid-template-areas:
        "sidebar header"
        "sidebar main"
        "player player";
      min-height:100vh;
    }
    /* Barra lateral tipo Spotify */
    aside.sidebar{
      grid-area:sidebar;
      background:var(--brown-800);
      padding:20px 16px;
      border-right:1px solid rgba(255,255,255,.06);
    }
    .brand{
      display:flex;align-items:center;gap:10px;margin-bottom:24px;
    }
    .brand-logo{
      width:36px;height:36px;border-radius:8px;
      background:linear-gradient(135deg,var(--brown-700),var(--brown-400));
      box-shadow:0 8px 20px var(--shadow);
    }
    .brand-name{font-weight:700;letter-spacing:.3px}

    .nav-group{margin-top:10px}
    .nav-item{
      display:flex;align-items:center;gap:12px;
      padding:10px 12px;border-radius:8px;color:var(--text);
      transition:background .2s ease, transform .1s ease;
      cursor:pointer;
    }
    .nav-item:hover{background:var(--hover);transform:translateY(-1px)}
    .nav-item.active{background:var(--brown-700)}

    .genres{
      margin-top:18px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
    }
    .genre-btn{
      background:var(--card);
      border:none;color:var(--text);
      border-radius:8px;padding:10px;
      cursor:pointer;
      transition:background .2s ease, transform .1s ease;
    }
    .genre-btn:hover{background:var(--hover);transform:translateY(-1px)}
    .genre-btn.active{outline:2px solid var(--accent)}

    /* Header con buscador y filtros */
    header.header{
      grid-area:header;
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06);
      position:sticky;top:0;background:linear-gradient(0deg, var(--brown-900), var(--brown-900));
      z-index:5;
    }
    .searchbar{
      flex:1;display:flex;gap:10px;
    }
    .searchbar input, .searchbar select{
      background:var(--card);color:var(--text);
      border:1px solid rgba(255,255,255,.08);
      padding:10px 12px;border-radius:10px;outline:none;
    }
    .searchbar input{flex:1}
    .primary-btn{
      background:var(--accent);border:none;color:#1b0e0b;
      font-weight:700;padding:10px 14px;border-radius:10px;cursor:pointer;
      transition:filter .2s ease, transform .1s ease;
    }
    .primary-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
    .status{
      min-width:150px;text-align:right;color:var(--text-dim);font-size:.92rem;
    }

    /* Área principal de contenido */
    main.main{
      grid-area:main;
      padding:20px;
      overflow:auto;
    }
    .section-title{
      font-size:1.2rem;margin-bottom:12px;color:var(--text-dim)
    }
    .grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:16px;
    }
    .card{
      background:var(--card);
      border:1px solid rgba(255,255,255,.08);
      border-radius:12px;overflow:hidden;
      display:flex;flex-direction:column;
      transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
      position:relative;
    }
    .card:hover{transform:translateY(-2px);box-shadow:0 10px 28px var(--shadow);border-color:rgba(255,255,255,.15)}
    .card-content{padding:12px}
    .title{font-weight:600;line-height:1.2}
    .subtitle{color:var(--text-dim);font-size:.92rem;margin-top:4px}

    /* Botones en tarjeta */
    .card-actions{
      display:flex;align-items:center;justify-content:space-between;
      padding:12px;border-top:1px solid rgba(255,255,255,.06);
      gap:8px;
    }
    .play-btn, .fav-btn{
      display:inline-flex;align-items:center;justify-content:center;
      gap:8px;border:none;border-radius:10px;padding:8px 10px;cursor:pointer;
      background:var(--brown-700);color:var(--text);
      transition:background .2s ease, transform .1s ease;
    }
    .play-btn:hover, .fav-btn:hover{background:var(--hover);transform:translateY(-1px)}
    .fav-btn.active{background:var(--success);color:#0b1607}

    .badge{
      position:absolute;top:10px;left:10px;
      background:var(--brown-600);color:#180d08;
      font-size:.75rem;padding:4px 8px;border-radius:999px;
      border:1px solid rgba(255,255,255,.08);font-weight:700;
      box-shadow:0 4px 14px var(--shadow);
    }

    /* Sección favoritos */
    .favorites-empty{
      background:rgba(255,255,255,.05);
      border:1px dashed rgba(255,255,255,.2);
      border-radius:12px;padding:20px;color:var(--text-dim);
    }

    /* Reproductor fijo inferior */
    .player{
      grid-area:player;
      background:linear-gradient(0deg,var(--brown-800),var(--brown-800));
      border-top:1px solid rgba(255,255,255,.08);
      padding:10px 16px;display:grid;grid-template-columns:320px 1fr 320px;gap:14px;align-items:center;
      position:sticky;bottom:0;z-index:10;
    }
    .now-playing{
      display:flex;align-items:center;gap:12px;min-width:0;
    }
    .thumb{width:56px;height:56px;border-radius:8px;background:#2e1d1a;flex-shrink:0}
    .np-meta{min-width:0}
    .np-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .np-artist{font-size:.92rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    .controls{
      display:flex;align-items:center;gap:12px;
    }
    .ctrl-btn{
      background:var(--brown-700);border:none;color:var(--text);
      width:36px;height:36px;border-radius:999px;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      transition:background .2s ease, transform .1s ease;
    }
    .ctrl-btn:hover{background:var(--hover);transform:translateY(-1px)}
    .play-toggle{width:44px;height:44px;background:var(--accent);color:#1b0e0b;font-weight:800}

    .timeline{
      display:flex;align-items:center;gap:10px;flex:1;
    }
    .time{
      width:52px;text-align:center;font-variant-numeric:tabular-nums;color:var(--text-dim);
    }
    .progress{
      position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,.12);
      flex:1;cursor:pointer;
    }
    .progress-fill{
      position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--brown-500),var(--brown-300));
    }
    .progress-handle{
      position:absolute;top:50%;transform:translate(-50%,-50%);
      width:14px;height:14px;border-radius:999px;background:#fff;box-shadow:0 4px 12px var(--shadow);
      left:0;
    }

    .right{
      display:flex;align-items:center;justify-content:flex-end;gap:12px;
    }
    .volume{
      display:flex;align-items:center;gap:8px;width:160px;
    }
    .volume input[type="range"]{
      width:100%;accent-color:var(--accent);
    }

    /* Etiquetas e iconos simples */
    .icon{font-weight:900}
    .heart{font-size:18px}
    .heart.empty::before{content:"♡"}
    .heart.full::before{content:"♥"}

    /* Feedback de estado y errores */
    .toast{
      position:fixed;bottom:120px;left:50%;transform:translateX(-50%);
      background:var(--brown-700);color:var(--text);
      border:1px solid rgba(255,255,255,.12);
      padding:10px 14px;border-radius:10px;
      box-shadow:0 10px 28px var(--shadow);z-index:50;display:none;
    }
    .toast.show{display:block}
    .toast.error{background:var(--error)}
    
    /* ===============================
   MEJORAS PARA MÓVIL EN EL REPRODUCTOR (FOOTER)
   =============================== */
@media (max-width: 600px) {
  .player {
    padding: 12px 14px;
    grid-template-columns: 1fr;
    gap: 12px;
    height: auto;
  }

  .now-playing {
    gap: 10px;
  }

  .thumb {
    width: 48px;
    height: 48px;
  }

  .np-meta {
    overflow: hidden;
  }

  .np-title,
  .np-artist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
  }

  .np-title {
    font-size: 0.95rem;
    font-weight: 600;
  }

  .controls {
    gap: 10px;
  }

  .ctrl-btn {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }

  .play-toggle {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .timeline {
    gap: 8px;
  }

  .time {
    width: 44px;
    font-size: 0.8rem;
  }

  .progress {
    height: 6px;
  }

  .progress-handle {
    width: 12px;
    height: 12px;
  }

  .right {
    display: none; /* Ocultamos volumen en móviles muy pequeños para ahorrar espacio */
  }

  /* Alternativa: si prefieres mantener el volumen, usa un ícono + slider colapsable, pero por simplicidad lo ocultamos */
}
    /* ===============================
       RESPONSIVE
       =============================== */
    @media (max-width: 1200px){
      .grid{grid-template-columns:repeat(3,1fr)}
      .player{grid-template-columns:280px 1fr 280px}
    }
    @media (max-width: 900px){
      .app{
        grid-template-columns: 1fr;
        grid-template-areas:
          "header"
          "main"
          "player";
      }
      aside.sidebar{grid-area:unset;position:fixed;left:0;top:0;bottom:0;width:70vw;transform:translateX(-100%);transition:transform .25s ease}
      aside.sidebar.open{transform:translateX(0)}
      .hamburger{display:inline-flex}
      .grid{grid-template-columns:repeat(2,1fr)}
      .player{grid-template-columns:1fr}
      .right{justify-content:flex-start}
    }
    @media (max-width: 600px){
      .grid{grid-template-columns:1fr}
      .status{display:none}
      .volume{width:120px}
      .np-title{font-size:.95rem}
      .np-artist{font-size:.85rem}
    }