/* ================== Diseño nuevo (v2), a prueba ==================
   Solo actúa con <html class="v2"> (de momento solo Seven, con el interruptor de diseño).
   Minimalista y con color: letra Inter, fondo casi negro con luces suaves, tarjetas grafito con el borde y un velo
   del color de su sección, iconos de color planos, cabeceras más bajas y sin descripciones. Las animaciones no se tocan. */

html.v2 {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --v2-card: rgba(28, 28, 30, .58);
  --v2-card-solida: rgba(28, 28, 30, .9);
  --v2-linea: rgba(255, 255, 255, .08);
  --v2-gris: #98989f;
  --v2-lila: #b99cf5;
  background: #060509;
}

/* ---------- fondo: casi negro, con dos luces muy suaves ---------- */
html.v2 body { background: transparent; }
html.v2 body::before { background: radial-gradient(60% 55% at 50% 0%, rgba(89, 52, 139, .26), transparent 72%); }
html.v2::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(45% 35% at 100% 100%, rgba(122, 79, 184, .13), transparent 70%),
    radial-gradient(40% 30% at 0% 70%, rgba(20, 150, 160, .07), transparent 70%);
}
html.v2 body::after { background: rgba(6, 5, 9, .9); }

/* ---------- tipografía ---------- */
html.v2 body { font-feature-settings: 'cv11', 'ss01'; letter-spacing: -.005em; }
html.v2 .display { font-stretch: 100%; text-transform: none; letter-spacing: -.035em; font-weight: 800; line-height: 1.08; }
html.v2 .display::first-letter { text-transform: uppercase; }
html.v2 .h1 { font-stretch: 100%; letter-spacing: -.025em; }
html.v2 .h2 { font-stretch: 100%; letter-spacing: -.02em; font-weight: 700; }
html.v2 .eyebrow { letter-spacing: .06em; font-weight: 600; color: var(--v2-gris); }

/* ---------- tarjetas ---------- */
html.v2 .card { background: var(--v2-card-solida); border-color: var(--v2-linea); border-radius: 20px; }

/* Inicio: tarjetas más translúcidas, con el borde y un velo arriba del color de su sección */
html.v2 .home2 .hs > .card, html.v2 .home2 .hs > div > .card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 14%, transparent) 0%, transparent 110px), var(--v2-card);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--sc) 34%, transparent); border-radius: 22px;
}
html.v2 .home2 .hs > .card::before, html.v2 .home2 .hs > div > .card::before,
html.v2 .home2 .hs > .card::after, html.v2 .home2 .hs > div > .card::after { display: none; }
html.v2 .hs-ico { color: #fff; background: var(--sc); box-shadow: none; border-radius: 9px; width: 30px; height: 30px; }
html.v2 .hs-ico svg { width: 17px; height: 17px; }
html.v2 .hs-tit { font-weight: 700; letter-spacing: -.015em; }
html.v2 .hm-encuesta { border-radius: 20px; }

/* ---------- iconos de herramientas: el mismo color, plano y sin brillo ---------- */
html.v2 .app-ico { background: var(--c); box-shadow: none; }
html.v2 .app-tile b { color: #e5e5ea; font-weight: 500; }
html.v2 .cat-ico { background: var(--cc); box-shadow: none; width: 36px; height: 36px; border-radius: 10px; }
html.v2 .cat-ico svg { width: 19px; height: 19px; }

/* ---------- Herramientas: secciones en tarjeta con su color (más opacas que las de Inicio) ---------- */
html.v2 details.cat {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 13%, transparent) 0%, transparent 100px), var(--v2-card-solida);
  border: 1px solid color-mix(in srgb, var(--cc) 32%, transparent); border-radius: 22px;
}
html.v2 details.cat::before { display: none; }
html.v2 details.cat > summary .tiny.muted { display: none; }
html.v2 details.cat > summary .h2 { font-size: 17px; }
html.v2 .cat-n { background: color-mix(in srgb, var(--cc) 20%, transparent); color: color-mix(in srgb, var(--cc) 55%, #fff); box-shadow: none; }
html.v2 .app-grid { border-top: 0; padding-top: 4px; }

/* Buscador y botones de al lado */
html.v2 .search .input { background: #1c1c1e; border: 1px solid transparent; border-radius: 12px; }
html.v2 .search .input:focus { border-color: rgba(185, 156, 245, .5); }
html.v2 .h-fav { border-radius: 12px; background: #1c1c1e; border: 0; color: #e5e5ea; }

/* ---------- cabeceras de color: las mismas, más bajas y sin descripción (Mi música, con la foto, igual) ---------- */
html.v2 .t-banner:not(.con-foto) { min-height: 104px; }
html.v2 .t-banner:not(.con-foto) .t-banner-txt { padding: 14px 18px; }
html.v2 .t-banner:not(.con-foto) h1.display { font-size: clamp(26px, 7vw, 34px); }
html.v2 .t-banner:not(.con-foto) p.muted { display: none; }
html.v2 .t-banner:not(.con-foto) .te-apps, html.v2 .t-banner:not(.con-foto) .te-auto { zoom: .74; }

/* ---------- menú de abajo (móvil): cristal translúcido ---------- */
html.v2 .nav {
  background: rgba(20, 20, 22, .66); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
html.v2 .nav a { color: #8e8e93; font-weight: 500; }
html.v2 .nav a.on { color: var(--v2-lila); font-weight: 600; }
html.v2 .nav a.on svg { color: var(--v2-lila); }

/* ---------- Más ---------- */
html.v2 .mas-perfil { border-color: rgba(139, 92, 246, .3); }
html.v2 .view:has(> .mas-perfil) .list-item > .grow > .tiny.muted { display: none; }
html.v2 .view:has(> .mas-perfil) .card > .list-item .ico { color: #fff; background: var(--li, #7c4ff0); border: 0; box-shadow: none; border-radius: 8px; }
html.v2 .view:has(> .mas-perfil) .card > .list-item:nth-child(5n+1) { --li: #7c4ff0; }
html.v2 .view:has(> .mas-perfil) .card > .list-item:nth-child(5n+2) { --li: #e8456b; }
html.v2 .view:has(> .mas-perfil) .card > .list-item:nth-child(5n+3) { --li: #c98a12; }
html.v2 .view:has(> .mas-perfil) .card > .list-item:nth-child(5n+4) { --li: #1f9e5a; }
html.v2 .view:has(> .mas-perfil) .card > .list-item:nth-child(5n+5) { --li: #3a8bd1; }

@media (min-width: 1024px) {
  html.v2 .nav { background: rgba(10, 10, 12, .9); border-right: 1px solid rgba(255, 255, 255, .06); }
  html.v2 .nav a.nav-item { border-radius: 12px; font-weight: 500; color: #c7c7cc; }
  html.v2 .nav a.nav-item:hover { background: rgba(139, 92, 246, .1); }
  html.v2 .nav a.nav-item.on { background: rgba(139, 92, 246, .16); color: #f5f5f7; font-weight: 600; }
  html.v2 .nav a.nav-me { background: #1c1c1e; border-radius: 16px; }
  html.v2 .t-banner:not(.con-foto) { min-height: 122px; }
}

/* ---------- Mi música (diseño nuevo) ---------- */
html.v2 .mu2-grid { display: grid; gap: 14px; margin-top: 14px; }
html.v2 .mu2-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
html.v2 .mu2-curso, html.v2 .mu2-hechas {
  border-radius: 22px; padding: 14px; border: 1px solid color-mix(in srgb, var(--sc) 34%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 12%, transparent) 0%, transparent 120px), var(--v2-card-solida);
}
html.v2 .mu2-cab, html.v2 .mu2-hechas > summary { display: flex; align-items: center; gap: 8px; }
html.v2 .mu2-cab .h2, html.v2 .mu2-hechas > summary .h2 { flex: 1; font-size: 17px; }
html.v2 .mu2-hechas > summary { list-style: none; cursor: pointer; }
html.v2 .mu2-hechas > summary::-webkit-details-marker { display: none; }
html.v2 .mu2-hechas .fold-chev { color: var(--v2-gris); transition: transform .2s; transform: rotate(90deg); display: inline-flex; }
html.v2 .mu2-hechas[open] .fold-chev { transform: rotate(-90deg); }
html.v2 .mu2-lista { display: flex; flex-direction: column; margin-top: 12px; }
html.v2 .mu2-cover { position: relative; flex: none; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; display: block; }
html.v2 .mu2-cover.sm { width: 42px; height: 42px; border-radius: 9px; }
html.v2 .mu2-cover.xl { width: 100%; height: auto; aspect-ratio: 1; border-radius: 16px; }
html.v2 .mu2-cover .pt { width: 100%; height: 100%; border-radius: inherit; display: block; }
html.v2 .mu2-cover .pt img { width: 100%; height: 100%; object-fit: cover; }
html.v2 .mu2-cover .song-nov { position: absolute; top: 6px; right: 6px; }
html.v2 .mu2-hero { display: flex; gap: 14px; color: inherit; }
html.v2 .mu2-hero-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
html.v2 .mu2-hero-txt > b { font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
html.v2 .mu2-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html.v2 .mu2-marcas { display: flex; gap: 6px; flex-wrap: wrap; }
html.v2 .mu2-marcas:empty { display: none; }
html.v2 .mu2-pasos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; max-width: 260px; }
html.v2 .mu2-pasos i { height: 4px; border-radius: 2px; background: #3a3a3c; }
html.v2 .mu2-pasos i.h { background: var(--sc); }
html.v2 .mu2-pasos i.a { background: color-mix(in srgb, var(--sc) 45%, #3a3a3c); }
html.v2 .mu2-pasos.sm { max-width: 150px; margin-top: 6px; }
html.v2 .mu2-pasos.sm i { height: 3px; }
html.v2 .mu2-fila { display: flex; align-items: center; gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--v2-linea); }
html.v2 .mu2-fila > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; }
html.v2 .mu2-fila b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v2 .mu2-asa { flex: none; width: 34px; height: 40px; border: 0; background: none; color: #636366; display: grid; place-items: center; cursor: grab; touch-action: none; }
html.v2 .mu2-item.arrastrando { opacity: .85; }
html.v2 .mu2-lista.ordenando .mu2-item { transition: none; }
html.v2 .mu2-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
html.v2 .mu2-pill { height: 64px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; min-width: 0; white-space: nowrap; }
html.v2 .mu2-pill span { overflow: hidden; text-overflow: ellipsis; }
html.v2 .mu2-pill.pago { background: rgba(255, 159, 10, .13); border: 1px solid rgba(255, 159, 10, .3); color: #ffb340; }
html.v2 .mu2-pill.ok { background: rgba(48, 209, 88, .12); border: 1px solid rgba(48, 209, 88, .3); color: #86efac; }
html.v2 .mu2-pill.sp { background: rgba(139, 92, 246, .14); border: 1px solid rgba(139, 92, 246, .34); color: #c4b0ff; }
html.v2 .mu2-estante { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 12px; overflow-x: auto; margin: 12px 0 0; padding: 0 0 4px; scroll-snap-type: x mandatory; border-radius: 16px; scrollbar-width: none; }
html.v2 .mu2-estante::-webkit-scrollbar { display: none; }
html.v2 .mu2-disco { display: flex; flex-direction: column; gap: 6px; color: inherit; scroll-snap-align: start; min-width: 0; }
html.v2 .mu2-disco b { font-size: 14px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v2 .mu2-disco small { font-size: 12px; color: var(--v2-gris); margin-top: -3px; }
html.v2 .mu2-check { position: absolute; right: 7px; bottom: 7px; width: 24px; height: 24px; border-radius: 50%; background: #30d158; color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(0, 0, 0, .35); }
@media (min-width: 1024px) {
  html.v2 .mu2-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); align-items: start; gap: 18px; }
  html.v2 .mu2-cover:not(.sm):not(.xl) { width: 112px; height: 112px; }
  html.v2 .mu2-hero-txt > b { font-size: 21px; }
  html.v2 .mu2-estante { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 12px 0 0; padding: 0; }
}

/* ---------- filtro de Herramientas (hoja) ---------- */
.hf2 { display: flex; flex-direction: column; gap: 10px; }
.hf2-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.hf2-tit { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #98989f; margin-top: 8px; }
.hf2-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: 12px; background: #2c2c2e; }
.hf2-seg button { height: 36px; border: 0; border-radius: 9px; background: transparent; font-weight: 500; font-size: 14px; min-width: 0; }
.hf2-seg button.on { background: #636366; color: #fff; font-weight: 600; }
.hf2-tipos { display: flex; flex-wrap: wrap; gap: 8px; }
.hf2-tipos button { height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid #3a3a3c; background: transparent; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; }
.hf2-tipos button i { width: 9px; height: 9px; border-radius: 50%; background: var(--cc); flex: none; }
.hf2-tipos button.on { border-color: var(--cc); background: color-mix(in srgb, var(--cc) 20%, transparent); }
.hf2-ver { margin-top: 12px; height: 50px; border-radius: 14px; }
@media (max-width: 1023px) { html.v2 .brandbar .beta { display: none; } }

/* Pliegues con color (Mi música, la ficha de cada canción…): mismo estilo de tarjeta con borde y velo de su color */
html.v2 .mu-sec { background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 12%, transparent) 0%, transparent 110px), var(--v2-card-solida); border: 1px solid color-mix(in srgb, var(--sc) 34%, transparent); border-radius: 22px; }
html.v2 .mu-sec::before { display: none; }
html.v2 .mu2-col > .mu-sec { margin-top: 0; }
@media (min-width: 900px) { html.v2 .rk-filtros .rk-cats { flex: 1 1 auto; min-width: 0; } }

/* ---------- menú: iconos sin color; el de la página en la que estás, del color de su cabecera ---------- */
html.v2 .nav a.nav-item:nth-of-type(2) { --ni: #a78bfa; }   /* Inicio */
html.v2 .nav a.nav-item:nth-of-type(3) { --ni: #60a5fa; }   /* Calendario */
html.v2 .nav a.nav-item:nth-of-type(4) { --ni: #ee7075; }   /* Herramientas: naranja salmón (con un poco de degradado, abajo) */
html.v2 .nav a.nav-item:nth-of-type(5) { --ni: #2dd4bf; }   /* Mis tareas: el verde de su cabecera */
html.v2 .nav a.nav-item:nth-of-type(6) { --ni: #38bdf8; }   /* Mi música: azulito */
html.v2 .nav a.nav-item.on, html.v2 .nav a.nav-item.on svg { color: #fff; }
@media (min-width: 1024px) { html.v2 .nav a.nav-item.on { background: color-mix(in srgb, var(--ni) 30%, transparent); } }
@media (max-width: 1023px) {
  html.v2 .nav a.nav-item.on svg { box-sizing: content-box; padding: 3px 16px; border-radius: 99px; background: color-mix(in srgb, var(--ni) 38%, transparent); }
}

/* ---------- Inicio: la tarjeta «Hoy» con el fondo de la cabecera de Mis tareas ---------- */
html.v2 .home2 .hs > .b-hoy.card {
  --sc: #14b8a6;
  background: linear-gradient(115deg, rgba(17, 12, 26, .62) 0%, color-mix(in srgb, #14b8a6 16%, rgba(17, 12, 26, .62)) 45%, color-mix(in srgb, #14b8a6 34%, rgba(11, 8, 18, .62)) 100%);
}

/* ---------- botones morados: el mismo morado suave del menú (no el morado relleno) ---------- */
html.v2 .btn.primary { background: rgba(139, 92, 246, .2); color: #efe7ff; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .4); }
html.v2 .btn.primary:hover { background: rgba(139, 92, 246, .28); }
html.v2 .btn.primary:disabled { opacity: .55; }

/* ---------- Herramientas en ordenador: secciones en columnas de distinto ancho ---------- */
@media (min-width: 1024px) {
  html.v2 #hCats.vista-mosaico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: stretch; }
  html.v2 #hCats.vista-mosaico > * { margin-top: 0; grid-column: span 12; order: 50; min-width: 0; }
  html.v2 #hCats.vista-mosaico .app-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  html.v2 #hCats.vista-mosaico > [data-cat="lanzamientos"] { order: 1; grid-column: span 7; }
  html.v2 #hCats.vista-mosaico > [data-cat="redes"] { order: 2; grid-column: span 5; }
  html.v2 #hCats.vista-mosaico > [data-cat="organizacion"] { order: 3; grid-column: span 5; }
  html.v2 #hCats.vista-mosaico > [data-cat="composicion"] { order: 4; grid-column: span 7; }
  html.v2 #hCats.vista-mosaico > [data-cat="visuales"] { order: 5; grid-column: span 7; }
  html.v2 #hCats.vista-mosaico > [data-cat="biblioteca"] { order: 6; grid-column: span 5; }
  html.v2 #hCats.vista-mosaico > [data-cat="directos"] { order: 7; grid-column: span 4; }
  html.v2 #hCats.vista-mosaico > [data-cat="marca"] { order: 8; grid-column: span 4; }
  html.v2 #hCats.vista-mosaico > [data-cat="voz"] { order: 9; grid-column: span 4; }
  html.v2 #hCats.vista-mosaico > [data-cat="comunidad"] { order: 10; grid-column: span 5; }
  html.v2 #hCats.vista-mosaico > [data-cat="oportunidades"] { order: 11; grid-column: span 3; }
  html.v2 #hCats.vista-mosaico > [data-cat="constancia"] { order: 12; grid-column: span 4; }
}

/* ---------- Herramientas: vistas (mosaico, lista y secciones apiladas) ---------- */
html.v2 #hCats.vista-mosaico .cat-chev { display: none; }
html.v2 #hCats.vista-mosaico details.cat > summary { cursor: default; }
html.v2 #hCats.vista-lista .app-grid { grid-template-columns: minmax(0, 1fr); gap: 2px; }
html.v2 #hCats.vista-lista .app-tile { position: relative; flex-direction: row; justify-content: flex-start; align-items: center; text-align: left; gap: 12px; padding: 7px 10px; border-radius: 12px; }
html.v2 #hCats.vista-lista .app-tile:hover { background: rgba(255, 255, 255, .05); }
html.v2 #hCats.vista-lista .app-ico { width: 36px; height: 36px; border-radius: 10px; flex: none; }
html.v2 #hCats.vista-lista .app-ico svg { width: 20px; height: 20px; }
html.v2 #hCats.vista-lista .app-tile b { font-size: 15px; font-weight: 500; color: #f5f5f7; flex: 1; min-width: 0; }
html.v2 #hCats.vista-lista .app-tile .pronto-tag { position: static; transform: none; order: 3; flex: none; margin-left: auto; }
@media (min-width: 700px) { html.v2 #hCats.vista-lista .app-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 10px; } }
.hv2-ops { display: flex; flex-direction: column; gap: 8px; }
.hv2-op { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid #3a3a3c; background: transparent; text-align: left; }
.hv2-op svg { flex: none; color: #b99cf5; }
.hv2-op b { display: block; font-size: 15px; }
.hv2-op small { display: block; font-size: 13px; color: #98989f; margin-top: 1px; }
.hv2-op.on { border-color: rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .16); }

/* ---------- Inicio: en las tareas de Hoy, el nombre y sus etiquetas en la misma línea ---------- */
html.v2 #hsHoy .tr-cuerpo { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; }
html.v2 #hsHoy .tr-cuerpo b { display: inline; }
html.v2 #hsHoy .tr-metas { margin-top: 0; }
/* «Se han quedado atrás»: más aire con lo de arriba y con sus tareas */
html.v2 .tr-sep, html.v2 .tr-sep.tarde { margin: 20px 4px 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .07); }
html.v2 .tr-sep + .tr-lista { margin-top: 10px; }
/* Al pasar el ratón por un apartado del menú, se pone de su color (como cuando estás dentro) */
@media (hover: hover) and (min-width: 1024px) {
  html.v2 .nav a.nav-item:hover { background: color-mix(in srgb, var(--ni) 30%, transparent); color: #fff; }
  html.v2 .nav a.nav-item:hover svg { color: #fff; }
}
@media (hover: hover) and (max-width: 1023px) {
  html.v2 .nav a.nav-item:hover { color: #fff; }
  html.v2 .nav a.nav-item:hover svg { color: #fff; box-sizing: content-box; padding: 3px 16px; border-radius: 99px; background: color-mix(in srgb, var(--ni) 38%, transparent); }
}
/* Filas de tareas (Hoy y Mis tareas) y su caja de apuntar: cristal suave en vez del gris liso */
html.v2 .tr-fila, html.v2 .tl-fila, html.v2 .tr-rapida .input {
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html.v2 .tr-fila:hover, html.v2 .tl-fila:hover { background: rgba(255, 255, 255, .07); }
html.v2 .tr-ini .tr-fila { background: rgba(255, 255, 255, .045); }
html.v2 .tr-m, html.v2 .tr-ini .tr-m, html.v2 .tl-x { background: rgba(255, 255, 255, .07); }
html.v2 .tl-props { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }
html.v2 .tl-p + .tl-p { border-left-color: rgba(255, 255, 255, .08); }
html.v2 .tr-tab { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); }
html.v2 .tr-fila.urgente { border-left-color: #f97316; }

/* Terminadas: flechas sutiles que indican que se puede deslizar (solo salen si queda algo por ver hacia ese lado) */
html.v2 .mu2-estante-wrap { position: relative; }
html.v2 .mu2-flecha { position: absolute; top: calc(12px + 64px); transform: translateY(-50%); z-index: 2; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; color: rgba(255, 255, 255, .85); background: rgba(20, 20, 22, .55); border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; transition: opacity .2s; }
html.v2 .mu2-flecha[hidden] { display: none; }
html.v2 .mu2-flecha.der { right: 6px; }
html.v2 .mu2-flecha.izq { left: 6px; }
html.v2 .mu2-flecha.izq svg { transform: rotate(180deg); }
@media (min-width: 1024px) { html.v2 .mu2-flecha { display: none !important; } }

/* Mi música: pastilla de pagos comprobándose */
html.v2 .mu2-pill.cargando { color: var(--v2-gris); border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); flex-wrap: wrap; align-content: center; row-gap: 8px; }
html.v2 .mu2-pill.cargando .pill-barra { flex-basis: 100%; max-width: 72px; margin: 0 auto; }

/* Mi música en el menú: degradado con los colores de marca del artista (Perfil → Tus colores de marca);
   sin colores elegidos, del azul de siempre al morado de la app. Las variables las pone diseno.js */
html.v2 .nav a.nav-item:nth-of-type(6) { --nm1: var(--marca1, #38bdf8); --nm2: var(--marca2, #7a4fb8); }
/* El resto, con un degradado suave de su propio color (Herramientas, del naranja al salmón rosado; los demás, casi imperceptible) */
html.v2 .nav a.nav-item:nth-of-type(2) { --nm1: #a78bfa; --nm2: #9a8cf8; --na: 30%; --nb: 38%; }
html.v2 .nav a.nav-item:nth-of-type(3) { --nm1: #60a5fa; --nm2: #6f97fa; --na: 30%; --nb: 38%; }
html.v2 .nav a.nav-item:nth-of-type(4) { --nm1: #ef7a64; --nm2: #ec6289; --na: 62%; --nb: 66%; }
html.v2 .nav a.nav-item:nth-of-type(5) { --nm1: #2dd4bf; --nm2: #2ac6cf; --na: 30%; --nb: 38%; }
@media (min-width: 1024px) {
  html.v2 .nav a.nav-item:is(:nth-of-type(2), :nth-of-type(3), :nth-of-type(4), :nth-of-type(5), :nth-of-type(6)).on { background: linear-gradient(110deg, color-mix(in srgb, var(--nm1) var(--na, 40%), transparent), color-mix(in srgb, var(--nm2) var(--na, 40%), transparent)); }
}
@media (hover: hover) and (min-width: 1024px) {
  html.v2 .nav a.nav-item:is(:nth-of-type(2), :nth-of-type(3), :nth-of-type(4), :nth-of-type(5), :nth-of-type(6)):hover { background: linear-gradient(110deg, color-mix(in srgb, var(--nm1) var(--na, 40%), transparent), color-mix(in srgb, var(--nm2) var(--na, 40%), transparent)); }
}
@media (max-width: 1023px) {
  html.v2 .nav a.nav-item:is(:nth-of-type(2), :nth-of-type(3), :nth-of-type(4), :nth-of-type(5), :nth-of-type(6)).on svg { background: linear-gradient(110deg, color-mix(in srgb, var(--nm1) var(--nb, 50%), transparent), color-mix(in srgb, var(--nm2) var(--nb, 50%), transparent)); }
}
@media (hover: hover) and (max-width: 1023px) {
  html.v2 .nav a.nav-item:is(:nth-of-type(2), :nth-of-type(3), :nth-of-type(4), :nth-of-type(5), :nth-of-type(6)):hover svg { background: linear-gradient(110deg, color-mix(in srgb, var(--nm1) var(--nb, 50%), transparent), color-mix(in srgb, var(--nm2) var(--nb, 50%), transparent)); }
}

/* Pastillas de Mi música: icono grande y translúcido detrás (€ y ▶) que asoma por encima de la pastilla.
   El icono pequeño del texto ya no hace falta */
html.v2 .mu2-pill { position: relative; isolation: isolate; overflow: hidden; }
html.v2 .mu2-pill > span { position: relative; z-index: 1; }
/* Asoma por la esquina izquierda y se corta con el borde de la pastilla */
html.v2 .mu2-pill .pill-ico { position: absolute; left: -22px; top: 50%; z-index: 0; display: block; line-height: 0; pointer-events: none;
  opacity: .3; transform: translateY(-50%) rotate(-14deg); }
html.v2 .mu2-pill .pill-ico svg { display: block; }
html.v2 .mu2-pill.cargando .pill-ico { opacity: .14; }
@media (max-width: 380px) { html.v2 .mu2-pill .pill-ico { left: -30px; transform: translateY(-50%) rotate(-14deg) scale(.85); } }