/* ================== Estilo vivo ==================
   El estilo de «Nueva canción» llevado a Pitch para Spotify, Streams a euros y Presupuesto de lanzamiento.
   La vista lleva .ev y el color de la herramienta en .ev-<herramienta> (las herramientas en prueba, solo con isAdmin()).
   - Color solo en las secciones clave (.card.ev-dest): línea de color arriba, velo suave y cabecera con icono de color.
   - El resto de secciones, sobrias: tarjeta neutra, sin línea de color ni brillo.
   - Todas las elecciones (chips y selectores de modo) en el morado de la app (--ac): tarjetas que se iluminan al pasar y al elegir.
   - Botón principal morado «vivo»: degradado, reflejo y brillo de borde al pasar, onda al pulsar.
     Para llevarlo a toda la app basta con poner la clase .ev-boton en <body>.
   Sin lámina holográfica: esa se reserva para botones y diseños especiales.
   Fuera de .ev las cabeceras son las de siempre (llevan también .eyebrow) y el icono no se ve. */

.ev-ico { display: none; }

html.v2 .ev { --sc: #b594ec; --ac: #9b6cf0; }
html.v2 .ev-pitch { --sc: #1DB954; }
html.v2 .ev-streams { --sc: #3DBE7A; }
html.v2 .ev-presupuesto { --sc: #E8B04B; }

/* ---------- Secciones ---------- */
html.v2 .ev .card { border: 1px solid var(--v2-linea); border-radius: 20px; transition: border-color .25s, box-shadow .3s; }
@media (hover: hover) { html.v2 .ev .card:hover { border-color: rgba(255,255,255,.15); } }

/* Las secciones clave: con el color de la herramienta */
html.v2 .ev .card.ev-dest {
  border: 1px solid color-mix(in srgb, var(--sc) 26%, transparent);
  border-top: 3px solid var(--sc);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sc) 12%, transparent) 0%, color-mix(in srgb, var(--sc) 3%, transparent) 200px),
    var(--v2-card-solida);
}
@media (hover: hover) {
  html.v2 .ev .card.ev-dest:hover {
    border-color: color-mix(in srgb, var(--sc) 52%, transparent); border-top-color: var(--sc);
    box-shadow: 0 18px 44px -30px var(--sc), 0 0 0 1px color-mix(in srgb, var(--sc) 14%, transparent);
  }
}

/* Cabecera de sección: icono + título en minúsculas normales (neutro; de color en las clave) */
html.v2 .ev .ev-cab { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0;
  font-size: 15.5px; font-weight: 750; letter-spacing: -.012em; line-height: 1.25; color: var(--text); text-transform: none; }
html.v2 .ev .ev-cab > span:last-child { min-width: 0; overflow-wrap: anywhere; }
html.v2 .ev .ev-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px;
  background: rgba(255,255,255,.06); color: var(--text-2); }
html.v2 .ev .ev-ico svg { width: 17px; height: 17px; }
html.v2 .ev .ev-dest .ev-ico { background: color-mix(in srgb, var(--sc) 22%, transparent); color: color-mix(in srgb, var(--sc) 72%, #fff); }
html.v2 .ev summary .ev-cab { flex: 1; }
html.v2 .ev .pp-notes .card > b { font-size: 15px; letter-spacing: -.01em; }

/* Dentro de las secciones clave, el dato y el foco toman su color */
html.v2 .ev .ev-dest .input:focus { border-color: var(--sc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 24%, transparent); }
html.v2 .ev .ev-dest .pp-big { border-bottom-color: color-mix(in srgb, var(--sc) 30%, var(--border)); transition: border-color .2s; }
html.v2 .ev .ev-dest .pp-big:focus-within { border-bottom-color: var(--sc); }
html.v2 .ev .ev-dest .pp-money span { color: color-mix(in srgb, var(--sc) 75%, #fff); }
html.v2 .ev .ev-dest .st-facts > div { background: color-mix(in srgb, var(--sc) 7%, var(--bg-2)); }

/* ---------- Elecciones: tarjetas en el morado de la app ---------- */
html.v2 .ev .chip {
  max-width: 100%; white-space: normal; text-align: left; cursor: pointer;
  border-radius: 12px; border: 1.5px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035); color: var(--text-2);
  transition: background .2s, border-color .2s, box-shadow .25s, color .2s, transform .16s cubic-bezier(.2,.9,.3,1.5);
}
html.v2 .ev .chip.sm { padding: 8px 12px; font-size: 13px; }
@media (hover: hover) { html.v2 .ev .chip:hover { border-color: color-mix(in srgb, var(--ac) 60%, transparent); color: var(--text); } }
html.v2 .ev .chip:active { transform: scale(.94); }
html.v2 .ev .chip.on {
  border-color: var(--ac); color: var(--text);
  background: color-mix(in srgb, var(--ac) 24%, var(--surface-2));
  box-shadow: 0 8px 22px -14px var(--ac), 0 0 0 1px var(--ac) inset;
}
html.v2 .ev .chip:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

/* En el pitch, las opciones van en rejilla de tarjetas */
html.v2 .ev .pi-col .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr)); gap: 8px; }
html.v2 .ev .pi-col .chip.sm { padding: 10px 12px; font-size: 13.5px; }

/* Selectores de modo (Tengo streams / Quiero ganar…) como dos tarjetas */
html.v2 .ev .seg { gap: 8px; padding: 0; background: none; border: 0; }
html.v2 .ev .seg-b {
  padding: 12px 8px; border-radius: 14px; font-size: 13.5px; color: var(--text-2); cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035);
  transition: background .2s, border-color .2s, box-shadow .25s, color .2s, transform .16s cubic-bezier(.2,.9,.3,1.5);
}
@media (hover: hover) { html.v2 .ev .seg-b:hover { border-color: color-mix(in srgb, var(--ac) 60%, transparent); color: var(--text); } }
html.v2 .ev .seg-b:active { transform: scale(.96); }
html.v2 .ev .seg-b.on {
  color: var(--text); border-color: var(--ac);
  background: color-mix(in srgb, var(--ac) 24%, var(--surface-2));
  box-shadow: 0 10px 24px -16px var(--ac), 0 0 0 1px var(--ac) inset;
}
html.v2 .ev .seg-b:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

/* ---------- Presupuesto: grupos neutros con su punto de color ---------- */
html.v2 .ev .pp-group { margin-top: 12px; padding: 12px 12px 6px; border-radius: 16px; border: 1px solid var(--v2-linea); border-top: 1px solid var(--v2-linea); background: rgba(255,255,255,.02); }
html.v2 .ev .pp-group:first-child { margin-top: 0; padding-top: 12px; }
html.v2 .ev .pp-ghead i { width: 9px; height: 9px; border-radius: 50%; }
html.v2 .ev .pp-ghead b { font-size: 15px; }
html.v2 .ev .pp-pack { background: rgba(0,0,0,.22); }

/* ---------- Botón principal morado «vivo» ---------- */
html.v2 :is(.ev, .ev-boton) .btn.primary {
  position: relative; isolation: isolate; color: #fff;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255,255,255,.2) 50%, transparent 60%) 160% 0 / 250% 100% no-repeat,
    linear-gradient(135deg, #8f62da 0%, #6c41ab 55%, #59348b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(185,156,245,.38), 0 10px 26px -12px rgba(122,79,184,.9);
  transition: transform .16s cubic-bezier(.2,.9,.3,1.4), box-shadow .25s, filter .2s, background-position .7s ease;
}
html.v2 :is(.ev, .ev-boton) .btn.primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 12px rgba(185,156,245,0); transition: box-shadow .5s ease-out;
}
@media (hover: hover) {
  html.v2 :is(.ev, .ev-boton) .btn.primary:hover {
    transform: translateY(-1px); filter: brightness(1.06); background-position: -60% 0, 0 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(220,204,255,.8), 0 0 0 3px rgba(185,156,245,.18), 0 14px 32px -12px rgba(139,92,246,1);
  }
}
html.v2 :is(.ev, .ev-boton) .btn.primary:active { transform: scale(.96); filter: brightness(.96); }
html.v2 :is(.ev, .ev-boton) .btn.primary:active::after { box-shadow: 0 0 0 0 rgba(185,156,245,.6); transition: none; }
html.v2 :is(.ev, .ev-boton) .btn.primary:focus-visible { outline: 3px solid #d6c4ff; outline-offset: 3px; }
html.v2 :is(.ev, .ev-boton) .btn.primary:disabled { filter: saturate(.5); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html.v2 .ev .card, html.v2 .ev .chip, html.v2 .ev .seg-b,
  html.v2 :is(.ev, .ev-boton) .btn.primary, html.v2 :is(.ev, .ev-boton) .btn.primary::after { transition: none; }
  html.v2 .ev .chip:active, html.v2 .ev .seg-b:active,
  html.v2 :is(.ev, .ev-boton) .btn.primary:hover, html.v2 :is(.ev, .ev-boton) .btn.primary:active { transform: none; }
  html.v2 :is(.ev, .ev-boton) .btn.primary:active::after { box-shadow: none; }
}

/* ---------- Secciones que se pliegan solas (js/plegado-auto.js), mismo patrón que el briefing de «Nueva canción» ---------- */
html.v2 .ev .pa-cab { cursor: pointer; border-radius: 12px; -webkit-user-select: none; user-select: none; }
html.v2 .ev .pa-cab:focus-visible { outline: 3px solid var(--ac); outline-offset: 4px; }
html.v2 .ev .pa-cab.row { gap: 8px 10px; }
html.v2 .ev .pa-cab .ev-cab { flex: 1 1 auto; }
html.v2 .ev .pa-tit { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; flex: 1 1 auto; }
html.v2 .ev .pa-chev { flex: none; display: grid; place-items: center; margin-left: auto; color: var(--muted); transform: rotate(90deg); transition: transform .25s ease; }
html.v2 .ev .plegado .pa-chev { transform: rotate(0deg); }
html.v2 .ev .pa-res { display: none; margin-top: 2px; font-size: 12.5px; font-weight: 700; letter-spacing: 0; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v2 .ev .plegado .pa-res { display: block; }
html.v2 .ev .pa-listo .pa-res { color: #4ade80; }
html.v2 .ev .pa-listo .ev-ico { background: color-mix(in srgb, #4ade80 20%, transparent); color: #86efac; }
/* Al plegar, la tarjeta pasa a una línea (y no se estira con su vecina) */
html.v2 .ev .pa-sec.plegado { align-self: start; }
html.v2 .ev .pa-sec.plegado .pa-cab + .pa-cuerpo { margin-top: 0; }
html.v2 .ev .pp-input.pa-sec, html.v2 .ev .pp-input.pa-sec.plegado { gap: 0; }
/* El cuerpo se abre y se cierra con una transición de altura */
html.v2 .ev .pa-cuerpo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease, opacity .25s ease; }
html.v2 .ev .pa-in { min-width: 0; min-height: 0; }
html.v2 .ev .plegado > .pa-cuerpo { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .3s ease, opacity .2s ease, visibility 0s .3s; }
html.v2 .ev .plegado > .pa-cuerpo > .pa-in, html.v2 .ev .pa-mueve > .pa-cuerpo > .pa-in { overflow: hidden; }
html.v2 .ev .pa-quieto > .pa-cuerpo, html.v2 .ev .pa-quieto .pa-chev { transition: none; }
/* Separación entre la cabecera y lo de dentro, igual que antes */
html.v2 .ev .pp-input .pa-in { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
html.v2 .ev .pp-input .pa-in > .pp-opts, html.v2 .ev .pp-input .pa-in > .st-periodo { margin-top: 0; }
html.v2 .ev .pa-cab + .pa-cuerpo > .pa-in > .mt-2:first-child, html.v2 .ev .pa-cab + .pa-cuerpo > .pa-in > .field:first-child { margin-top: 12px; }
/* La cabecera repetida dentro de cada modo no hace falta (va arriba, en la cabecera plegable) */
html.v2 .ev .pp-input .pa-in .only-streams > .ev-cab, html.v2 .ev .pp-input .pa-in .only-goal > .ev-cab,
html.v2 .ev .pp-input .pa-in .only-auto > .ev-cab, html.v2 .ev .pp-input .pa-in .only-manual > .ev-cab { display: none; }
html.v2 .ev .pp-input .pa-in .only-auto > .pp-big, html.v2 .ev .pp-input .pa-in .only-streams > .pp-big, html.v2 .ev .pp-input .pa-in .only-goal > .pp-big { margin-top: 0; }
html.v2 .ev .pp-input .pa-in .only-manual > p { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  html.v2 .ev .pa-cuerpo, html.v2 .ev .plegado > .pa-cuerpo, html.v2 .ev .pa-chev { transition: none; }
}
html.v2 .ev .plegado > .pa-cab > .tiny { display: none; }
html.v2 .ev .pa-cab.row { flex-wrap: nowrap; }
html.v2 .ev .pa-cab.row > .tiny { flex: 0 1 auto; min-width: 0; max-width: 38%; text-align: right; }
html.v2 .ev .pp-input.plegado .pa-in { padding-top: 0; }
/* «Siempre visible en ordenador»: cabecera normal, sin chevron */
html.v2 .ev .pa-fija > .pa-cab { cursor: default; }
html.v2 .ev .pa-fija > .pa-cab .pa-chev { display: none; }

/* ---------- Plegables que ya son <details> (Mi EPK): cabecera con icono, título normal y resumen con ✓ ---------- */
html.v2 .ev details.fold > summary .eyebrow, html.v2 .ev .pa-det > summary .eyebrow {
  font-size: 15.5px; font-weight: 750; letter-spacing: -.012em; line-height: 1.25; text-transform: none; color: var(--text); }
html.v2 .ev details.fold > summary .ev-ico { display: grid; }
html.v2 .ev .pa-det .pa-res:not(:empty) { display: block; }
html.v2 .ev .pa-det.pa-listo > summary .ev-ico { background: color-mix(in srgb, #4ade80 20%, transparent); color: #86efac; }
html.v2 .ev .pa-det .pa-res { color: #4ade80; }
html.v2 .ev details.fold > summary:focus-visible { outline: 3px solid var(--ac); outline-offset: 4px; border-radius: 12px; }
html.v2 .ev-epk { --sc: #a855f7; }
html.v2 .ev-lanzamiento { --sc: #6d6af5; }
html.v2 .ev-libreta { --sc: #8b5cf6; }

/* Mi EPK: pastilla «qué es un EPK» (se cierra y se recuerda) */
.epk-que-es { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; max-width: 100%;
  background: color-mix(in srgb, #a855f7 12%, var(--surface-2)); border: 1px solid color-mix(in srgb, #a855f7 34%, transparent);
  font-size: 13px; line-height: 1.35; color: var(--text-2); }
.epk-que-es .grow { min-width: 0; }
.epk-que-es-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); color: var(--text-2); cursor: pointer; }
.epk-que-es-x:hover { background: rgba(255,255,255,.12); color: var(--text); }
.epk-que-es-x:focus-visible { outline: 2px solid #b594ec; outline-offset: 2px; }
@media (max-width: 480px) { .epk-que-es { border-radius: 16px; align-items: flex-start; } }

/* Lote 2: Metas y objetivos, Retos de constancia y el Analizador de redes */
html.v2 .ev-objetivos { --sc: #f59e0b; }
html.v2 .ev-retos { --sc: #f97316; }
html.v2 .ev-analizador { --sc: #d9529a; }
/* Retos: el catálogo como tarjetas de elección en morado */
html.v2 .ev .rt-opcion { border: 1.5px solid rgba(255,255,255,.09); border-top-width: 1.5px; background: rgba(255,255,255,.035);
  transition: background .2s, border-color .2s, box-shadow .25s, transform .16s cubic-bezier(.2,.9,.3,1.5); }
@media (hover: hover) { html.v2 .ev .rt-opcion:not(:disabled):hover { border-color: color-mix(in srgb, var(--ac) 60%, transparent); box-shadow: none; } }
html.v2 .ev .rt-opcion:not(:disabled):active { transform: scale(.97); }
html.v2 .ev .rt-opcion.on { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 22%, var(--surface-2)); box-shadow: 0 8px 22px -14px var(--ac), 0 0 0 1px var(--ac) inset; }
html.v2 .ev .rt-opcion:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
html.v2 .ev .rt-elegido { border-color: color-mix(in srgb, var(--ac) 50%, transparent); }
html.v2 .ev .rt-item.on { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 14%, var(--surface-2)); box-shadow: 0 10px 26px -16px var(--ac), 0 0 0 1px var(--ac) inset; }
@media (prefers-reduced-motion: reduce) { html.v2 .ev .rt-opcion { transition: none; } html.v2 .ev .rt-opcion:active { transform: none; } }

/* Lote 3 (con las pestañas por pasos y el plegado a mano): Planificador de conciertos, Rider técnico y Nota de prensa (js/estilo-vivo.js pone los iconos) */
html.v2 .ev-directos { --sc: #f43f5e; }
html.v2 .ev-rider { --sc: #e0567a; }
html.v2 .ev-nota { --sc: #f97316; }
html.v2 .ev .card > .row:first-child > .ev-cab { flex: 1 1 auto; }
html.v2 .ev .dr-clave .bar i { background: var(--sc); }

/* Lo que solo sale con el estilo vivo (cabeceras nuevas, «Siguiente paso»…) */
.ev-solo { display: none !important; }
html.v2 .ev .ev-solo { display: flex !important; }
.paso-n { display: none; }

/* ---------- Pestañas por pasos (js/estilo-vivo.js pasosHtml): número y color de cada paso ---------- */
html.v2 .ev .ev-pasos { display: flex; gap: 6px; padding: 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--v2-linea); }
html.v2 .ev .ev-pasos::-webkit-scrollbar { display: none; }
html.v2 .ev .ev-pasos .tab { flex: 1 0 auto; scroll-snap-align: center; position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 14px 0 8px; border-radius: 13px; border: 1.5px solid transparent; background: transparent; color: var(--text-2);
  font-size: 13.5px; font-weight: 700; white-space: nowrap; box-shadow: none; transition: background .2s, border-color .2s, color .2s; }
html.v2 .ev .ev-pasos .tab svg { color: color-mix(in srgb, var(--tc) 80%, #fff); }
html.v2 .ev .ev-pasos .paso-n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; font-weight: 800; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); border: 1.5px solid color-mix(in srgb, var(--tc) 55%, transparent); }
@media (hover: hover) { html.v2 .ev .ev-pasos .tab:not(.on):hover { color: var(--text); background: color-mix(in srgb, var(--tc) 9%, transparent); } }
html.v2 .ev .ev-pasos .tab.on { color: #fff; background: color-mix(in srgb, var(--tc) 24%, var(--surface-2)); border-color: var(--tc);
  box-shadow: 0 8px 22px -14px var(--tc), 0 0 0 1px color-mix(in srgb, var(--tc) 60%, transparent) inset; }
html.v2 .ev .ev-pasos .tab.on .paso-n { background: var(--tc); color: #14111b; border-color: var(--tc); }
html.v2 .ev .ev-pasos .tab:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; }
/* «Paso 3 de 8 · Siguiente: Monitores →» */
html.v2 .ev .paso-sig { align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--v2-linea); }
html.v2 .ev .paso-sig .btn { border-color: color-mix(in srgb, var(--tc) 55%, transparent); color: var(--text); }
@media (hover: hover) { html.v2 .ev .paso-sig .btn:hover { background: color-mix(in srgb, var(--tc) 16%, transparent); } }
/* Subpestañas (Luces: Plano, Ambiente, Guion): pestañas dentro de la pestaña, con el color del paso */
html.v2 .ev .rd-subtabs { display: flex; gap: 4px; padding: 0; margin-top: 4px; background: none; border: 0; border-bottom: 1px solid var(--v2-linea); border-radius: 0; overflow-x: auto; scrollbar-width: none; }
html.v2 .ev .rd-subtabs::-webkit-scrollbar { display: none; }
html.v2 .ev .rd-subtabs .tab { flex: 1 0 auto; height: 44px; padding: 0 12px; border: 0; border-bottom: 3px solid transparent; border-radius: 10px 10px 0 0; background: none; box-shadow: none;
  color: var(--muted); font-size: 14px; font-weight: 700; white-space: nowrap; }
html.v2 .ev .rd-subtabs .tab.on { color: var(--text); border-bottom-color: var(--sc); background: color-mix(in srgb, var(--sc) 10%, transparent); }
@media (hover: hover) { html.v2 .ev .rd-subtabs .tab:not(.on):hover { color: var(--text); } }
/* Vistas previas (PDF del rider, nota de prensa): sin color alrededor, para ver el diseño tal cual */
html.v2 .ev .rd-prev-card, html.v2 .ev details[data-sec="prev"] { border-color: var(--v2-linea); background: var(--v2-card-solida); }
/* Metas: «¿Para qué sirve?» y «¿Cómo quieres hacer tu plan?» en el morado de elección */
html.v2 .ev-objetivos .ob-info { background: color-mix(in srgb, var(--ac) 12%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--ac) 40%, transparent); }
html.v2 .ev-objetivos .ob-forma { border: 1.5px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035);
  transition: background .2s, border-color .2s, box-shadow .25s, transform .16s cubic-bezier(.2,.9,.3,1.5); }
@media (hover: hover) { html.v2 .ev-objetivos .ob-forma:not(.bloq):hover { border-color: color-mix(in srgb, var(--ac) 60%, transparent); transform: none; } }
html.v2 .ev-objetivos .ob-forma:not(.bloq):active { transform: scale(.98); }
html.v2 .ev-objetivos .ob-forma[aria-pressed="true"] { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 22%, var(--surface-2)); box-shadow: 0 8px 22px -14px var(--ac), 0 0 0 1px var(--ac) inset; }
html.v2 .ev-objetivos .ob-forma:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
html.v2 .ev-objetivos .ob-forma-e { background: color-mix(in srgb, var(--ac) 18%, transparent); }

/* Lote 4: Plan de lanzamiento, Medios y promoción y Buscador de playlists */
html.v2 .ev-planlanz { --sc: #fb7185; }
html.v2 .ev-contactos { --sc: #8b5cf6; }
html.v2 .ev-playlists { --sc: #1DB954; }
/* Las dos opciones del plan de lanzamiento, como tarjetas de elección en morado */
html.v2 .ev-planlanz .pl-op { border: 1.5px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035); transition: background .2s, border-color .2s, box-shadow .25s, transform .16s cubic-bezier(.2,.9,.3,1.5); }
@media (hover: hover) { html.v2 .ev-planlanz .pl-op:hover { border-color: color-mix(in srgb, var(--ac) 60%, transparent); box-shadow: 0 8px 22px -14px var(--ac); } }
html.v2 .ev-planlanz .pl-op:active { transform: scale(.98); }
html.v2 .ev-planlanz .pl-op:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
/* Tu canción y el mensaje (playlists): el bloque clave, con su color; el resto, neutro */
html.v2 .ev-playlists details.pl-prep > summary b { font-size: 15.5px; }
/* Medios: Buscar, Mi agenda y Campañas con su color (es el orden natural: encuentras, guardas y escribes) */
html.v2 .ev-contactos .ct-pest .seg-b.on { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 22%, var(--surface-2)); box-shadow: 0 8px 22px -14px var(--tc), 0 0 0 1px var(--tc) inset; }
@media (hover: hover) { html.v2 .ev-contactos .ct-pest .seg-b:not(.on):hover { border-color: color-mix(in srgb, var(--tc) 60%, transparent); } }
/* Subtítulos dentro de un bloque (Tu canción / Mensaje para los curadores) con el estilo de las cabeceras */
html.v2 .ev-playlists .pl-prep-g > div > .eyebrow { display: block; font-size: 14.5px; font-weight: 750; letter-spacing: -.01em; text-transform: none; color: var(--text); }
/* Medios: la campaña se elige desde su pastilla */
html.v2 .ev-contactos .ct-camp { align-items: center; gap: 10px; }
html.v2 .ev-contactos .ct-elegir { flex: none; white-space: nowrap; }
@media (max-width: 420px) { html.v2 .ev-contactos .ct-elegir span { display: none; } }
.ct-elegir-lista { display: grid; gap: 8px; }
.ct-elegir-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; text-align: left; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035); color: var(--text); font: inherit; }
.ct-elegir-i .grow { display: flex; flex-direction: column; min-width: 0; }
.ct-elegir-i small { color: var(--muted); font-size: 12.5px; }
.ct-elegir-i.on { border-color: #9b6cf0; background: color-mix(in srgb, #9b6cf0 20%, transparent); }
@media (hover: hover) { .ct-elegir-i:not(.on):hover { border-color: color-mix(in srgb, #9b6cf0 60%, transparent); } }
.ct-elegir-i:focus-visible { outline: 2px solid #9b6cf0; outline-offset: 2px; }
/* Playlists: en la lista de canciones, si cada una está analizada o no */
.pl-an { flex: none; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--muted); white-space: nowrap; }
.pl-an.si { background: color-mix(in srgb, #4ade80 16%, transparent); color: #4ade80; }
.pl-an-lista { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-2); }
.ct-pc { display: none; }
@media (max-width: 420px) {
  .ct-pc { display: inline; }
}
@media (max-width: 359px) { html.v2 .ev-contactos .ct-elegir span { display: none; } }
@media (min-width: 360px) and (max-width: 420px) { html.v2 .ev-contactos .ct-elegir span { display: inline; } }
/* Buscar medios: el buscador ocupa toda la fila en el móvil */
@media (max-width: 760px) { .md-filtros .search { grid-column: 1 / -1; } }
.paso-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Medios: pestañas de carpeta (las de Mi libreta) y la hoja debajo con el color de la pestaña abierta */
html.v2 .ev-contactos .ct-carpeta { flex-wrap: nowrap; padding-left: 12px; }
html.v2 .ev-contactos .ct-carpeta .lb-tab { white-space: nowrap; }
html.v2 .ev-contactos .ct-hoja { padding: 16px; }
html.v2 .ev-contactos .ct-hoja > :first-child { margin-top: 0; }
@media (max-width: 420px) {
  html.v2 .ev-contactos .ct-carpeta { gap: 4px; padding-left: 8px; }
  html.v2 .ev-contactos .ct-carpeta .lb-tab { padding: 8px 11px 10px; gap: 5px; font-size: 13.5px; }
  html.v2 .ev-contactos .ct-hoja { padding: 12px; }
}
@media (max-width: 340px) { html.v2 .ev-contactos .ct-carpeta .lb-tab { padding: 8px 8px 10px; font-size: 13px; } html.v2 .ev-contactos .ct-carpeta .lb-tab svg { width: 14px; height: 14px; } }
/* Playlists: «?» junto a «Crear pitch para Spotify»; el aviso se abre encima, sin descuadrar la tarjeta */
.pl-ayuda-w { position: relative; display: inline-flex; }
.pl-ayuda { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: var(--text-2); font: 800 15px/1 inherit; cursor: pointer; }
.pl-ayuda:hover, .pl-ayuda[aria-expanded="true"] { border-color: #1DB954; color: #fff; background: color-mix(in srgb, #1DB954 18%, transparent); }
.pl-ayuda:focus-visible { outline: 2px solid #1DB954; outline-offset: 2px; }
.pl-pop { position: absolute; z-index: 20; bottom: calc(100% + 10px); right: -6px; width: min(280px, calc(100vw - 56px)); padding: 12px 14px; border-radius: 14px;
  background: var(--surface-2, #1c1925); border: 1px solid color-mix(in srgb, #1DB954 45%, transparent); box-shadow: 0 18px 40px rgba(0,0,0,.5); font-size: 13px; line-height: 1.45; color: var(--text-2); text-align: left; }
.pl-pop b { color: var(--text); }
.pl-pop::after { content: ''; position: absolute; top: 100%; right: 16px; border: 7px solid transparent; border-top-color: color-mix(in srgb, #1DB954 45%, var(--surface-2, #1c1925)); }
.pl-pop[hidden] { display: none; }

/* ---------- Pestañas de carpeta (js/estilo-vivo.js carpetaHtml): las de Mi libreta, para cualquier herramienta ----------
   La fila se desliza en el móvil (overflow), así que nada puede salirse por abajo: las pestañas no se mueven con transform y
   la fila monta 1 px sobre el borde de la hoja. La abierta llega hasta abajo y lo tapa con el fondo de la hoja (parece que
   sigue en ella); las demás se quedan 1 px por encima y dejan ver la línea. */
.ev-carpeta { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 6px; padding: 6px 0 0 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border: 0 !important; border-radius: 0 !important; background: none !important; margin-bottom: -1px; position: relative; z-index: 2; }
.ev-carpeta::-webkit-scrollbar { display: none; }
.ev-carpeta .lb-tab { flex: none !important; white-space: nowrap; height: auto; padding: 10px 20px 12px; font-size: 14.5px; transform: none !important; margin: 5px 0 1px; }
.ev-carpeta .lb-tab:hover { color: var(--text-2); background: color-mix(in srgb, var(--c) 16%, var(--bg)); }
.ev-carpeta .lb-tab.on, .ev-carpeta .lb-tab.on:hover { margin: 0; padding-bottom: 14px; background: var(--surface); color: var(--text); }
.ev-carpeta .lb-tab.on::after { display: none; }
.ev-hoja { padding: 16px; min-height: 0; }
.ev-hoja > :first-child { margin-top: 0 !important; }
html.v2 .ev .ev-hoja .paso-sig { justify-content: flex-end; }
@media (max-width: 420px) {
  .ev-carpeta { gap: 4px; padding-left: 6px; }
  .ev-carpeta .lb-tab { padding: 8px 11px 10px; gap: 5px; font-size: 13.5px; }
  .ev-carpeta .lb-tab.on { padding-bottom: 12px; }
  .ev-hoja { padding: 12px; }
}
/* Cabecera plegable con botones al lado (p. ej. «Lista de canales» + «Rellenar desde el escenario»): el título nunca se aplasta;
   si no cabe todo en una línea, el botón baja a la siguiente */
html.v2 .ev .pa-cab.row:has(> .btn, > button:not(.pa-chev)) { flex-wrap: wrap; }
html.v2 .ev .pa-cab.row > .ev-cab { flex: 1 1 10em; min-width: min(10em, 100%); }
html.v2 .ev .pa-cab.row > .ev-cab > span:last-child { overflow-wrap: normal; word-break: normal; }
/* Pestañas de las herramientas que van juntas (js/grupos.js): pestañas de carpeta y una hoja (.grupo-marco, js/grupos.js
   marcoGrupo) que rodea todo lo de debajo con el color de la pestaña abierta */
.grupo-carpeta .ev-carpeta { margin: 12px 0 -1px; padding-left: 10px; }
.grupo-carpeta .lb-tab { text-decoration: none; }
.grupo-carpeta .lb-tab small { font-size: 10px; font-weight: 800; color: #fde68a; }
.g-carpeta { position: relative; isolation: isolate; }
.grupo-marco { position: absolute; z-index: -1; pointer-events: none; border: 1px solid var(--gc); border-radius: 4px 18px 18px 18px; background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.g-carpeta > .grupo-carpeta ~ :not(.grupo-marco) { margin-left: 16px; margin-right: 16px; max-width: calc(100% - 32px); }
.g-carpeta > .grupo-carpeta + * { margin-top: 16px !important; }
.g-carpeta > .grupo-carpeta .grupo-nota { margin: 14px 16px 0; }
@media (max-width: 599px) {
  .grupo-marco { border-radius: 4px 14px 14px 14px; }
  .g-carpeta > .grupo-carpeta ~ :not(.grupo-marco) { margin-left: 10px; margin-right: 10px; max-width: calc(100% - 20px); }
  .g-carpeta > .grupo-carpeta + * { margin-top: 12px !important; }
  .g-carpeta > .grupo-carpeta .grupo-nota { margin: 12px 10px 0; }
}
/* Filtros en pastilla (Guiones, Ganchos…): una sola pastilla por filtro, con sus opciones separadas por rayitas y la
   elegida iluminada con el color de la herramienta. Buscador y pastillas en una fila en el ordenador (si no caben, pasan
   abajo); en el móvil, una debajo de otra (y cada pastilla se desliza si no cabe) */
.seg-pill { --pc: var(--sc, var(--brand-3)); display: inline-flex; align-items: center; flex: none; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 3px; border: 1px solid var(--border); border-radius: 99px; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.seg-pill::-webkit-scrollbar { display: none; }
.seg-pill > * { flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 11px; height: 34px; white-space: nowrap; font-size: 12.5px; font-weight: 700; }
.seg-pill > button { border: 0; border-radius: 99px; background: none; color: var(--text-2); cursor: pointer; font-family: inherit; transition: background .15s, color .15s, box-shadow .15s; }
.seg-pill > * + *::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px; background: var(--border); }
.seg-pill > button.on::before, .seg-pill > button.on + *::before { display: none; }
.seg-pill > button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.seg-pill > button.on { color: #fff; background: color-mix(in srgb, var(--pc) 32%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 75%, transparent), 0 0 16px -3px var(--pc); text-shadow: 0 0 10px color-mix(in srgb, var(--pc) 60%, transparent); }
.seg-pill > button:focus-visible { outline: 2px solid var(--pc); outline-offset: -2px; }
.seg-ico { color: var(--pc); padding: 0 6px 0 9px !important; }
.seg-nom { display: none; }
.id-barra, .gn-barra-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.id-barra .search, .gn-barra-ev .search { flex: 1 1 130px; min-width: 130px; margin: 0; }
.gn-barra-ev .search { flex: 0 1 260px; }
.gn-barra-ev .gn-cats { flex: 1 1 320px; }
@media (max-width: 760px) {
  .id-barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .id-barra .search { min-width: 0; }
  .id-barra > .seg-pill { grid-column: 1 / -1; display: flex; }
  .id-barra > .id-estilo { grid-column: 2; grid-row: 1; }
  .id-barra .seg-pill > button { flex: 1 0 auto; padding: 0 9px; }
  .gn-barra-ev .search { flex: 1 1 0; min-width: 0; }
  .gn-barra-ev .gn-cats { flex: 1 1 100%; display: flex; }
}

/* Lote 5 (en prueba, solo Seven): Plan de contenido (y Plan de grabación), Guiones y ganchos, Analizador de canciones */
html.v2 .ev-plancont { --sc: #f472b6; }
html.v2 .ev-grabacion { --sc: #fb7185; }
html.v2 .ev-ideas { --sc: #fbbf24; }
html.v2 .ev-ganchos { --sc: #f472b6; }
html.v2 .ev-canciones { --sc: #22d3ee; }

/* «Tu perfil y más» con los colores de marca del artista (js/marca.js aplicarMarcaYo): la pastilla del menú en el
   ordenador, y en el móvil el borde del círculo de la foto y la rueda de ajustes */
html.yo-marca .nav a.nav-me, html.yo-marca .mas-perfil { background: linear-gradient(135deg, color-mix(in srgb, var(--yo1) 15%, #1c1c1e), color-mix(in srgb, var(--yo2) 10%, #1c1c1e)); border-color: color-mix(in srgb, var(--yo1) 32%, transparent); box-shadow: 0 8px 22px -16px var(--yo1); }
html.yo-marca .nav a.nav-me:hover, html.yo-marca .nav a.nav-me.on, html.yo-marca .mas-perfil:hover { border-color: color-mix(in srgb, var(--yo1) 60%, transparent); }
html.yo-marca .mas-perfil .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--yo1) 80%, transparent); }
html.yo-marca .mas-perfil .mas-editar { background: color-mix(in srgb, var(--yo1) 18%, transparent); color: color-mix(in srgb, var(--yo1) 55%, #fff); }
html.yo-marca .mas-perfil .mas-nivel { color: color-mix(in srgb, var(--yo1) 60%, #fff) !important; }
html.yo-marca .nav-me img, html.yo-marca .nav-me .nav-ini { box-shadow: 0 0 0 2px color-mix(in srgb, var(--yo1) 80%, transparent); color: var(--yo1); }
html.yo-marca .nav-me b { color: var(--yo-nombre, #fff); }
html.yo-marca .nav .nav-me svg, html.yo-marca .nav-me small { color: color-mix(in srgb, var(--yo1) 30%, #c9c5d3); }
html.yo-marca .hm-yo .avatar { box-shadow: 0 0 0 2px var(--bg, #0d0c11), 0 0 0 4px var(--yo1); }
html.yo-marca .hm-yo:hover .avatar { box-shadow: 0 0 0 2px var(--bg, #0d0c11), 0 0 0 4px var(--yo2); }
html.yo-marca .hm-yo-ajustes { background: linear-gradient(135deg, var(--yo1), var(--yo2)); color: var(--yo-txt); }

/* Lote 6: Contratos, Ayudante de escritura, Creador de melodías */
html.v2 .ev-contratos { --sc: #a78bfa; }
html.v2 .ev-ayudante { --sc: #f472b6; }
html.v2 .ev-melodias { --sc: #a78bfa; }
.ev-melodias .ev-hoja > .ml-que { margin-top: 0; }
@media (max-width: 420px) { .ev-ayudante .ev-carpeta .lb-tab svg { display: none; } }

/* Más: la pegatina del plan cae desde arriba y se pega de golpe (corta: empieza al terminar de aparecer la pantalla y dura ~0,6 s), y la tarjeta acusa el golpe */
.mas-plan .plan-sello { animation: selloCae .5s cubic-bezier(.5, 0, .75, .3) .22s both; }
.mas-plan .plan-sello.pro { animation: selloCae .5s cubic-bezier(.5, 0, .75, .3) .22s both, planHolo 6s ease-in-out .72s infinite; }
.mas-plan { animation: selloGolpe .3s ease-out .57s both; }
@keyframes selloCae {
  0% { transform: translateY(-150px) scale(1.9) rotate(-24deg); opacity: 0; filter: drop-shadow(0 30px 18px rgba(0,0,0,.6)); }
  20% { opacity: 1; }
  70% { transform: translateY(0) scale(1) rotate(-3deg); filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
  80% { transform: scale(1.12, .86) rotate(-3deg); }
  90% { transform: scale(.97, 1.03) rotate(0deg); }
  100% { transform: none; opacity: 1; filter: none; }
}
.mas-plan.plan-gratis, .mas-plan.plan-gratis .plan-sello { animation: none; }   /* Gratis: sin animación */
/* Pro: al pegarse, un destello con los colores de la pegatina cruza la tarjeta desde la pegatina hasta «Tu plan» */
.mas-plan.plan-pro::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 0 45.5%, rgba(253,230,138,.55) 46.8%, rgba(249,168,212,.8) 48.3%, rgba(255,255,255,.9) 50%, rgba(196,181,253,.8) 51.5%, rgba(147,197,253,.65) 52.8%, rgba(110,231,183,.45) 53.8%, transparent 55% 100%);
  background-size: 300% 100%; mix-blend-mode: screen; animation: planDestello .6s cubic-bezier(.3, .2, .5, 1) .64s both; }
@keyframes planDestello { 0% { background-position: 22% 0; opacity: .14; } 85% { opacity: .14; } 100% { background-position: 78% 0; opacity: 0; } }   /* muy sutil (Seven, 04-11-2026) */
@keyframes selloGolpe { 0% { transform: none; } 30% { transform: translateY(3px) scale(.995); } 60% { transform: translateY(-1px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mas-plan, .mas-plan .plan-sello, .mas-plan .plan-sello.pro, .mas-plan.plan-pro::after { animation: none; } }

/* Lote 7: Demos, Portadas, Plan de videoclip */
html.v2 .ev-demos { --sc: #fb7185; }
html.v2 .ev-portada { --sc: #06b6d4; }
html.v2 .ev-videoclip { --sc: #f472b6; }
.ev-hoja > .sf-aviso + .pt-panel, .ev-hoja > .dm-girar + #dmCuerpo { margin-top: 12px; }
/* Aviso en un «?» (Portadas): se abre debajo, encima del resto, sin descuadrar nada */
.ev-ayuda { position: relative; display: inline-flex; order: 9; margin-left: auto; }
.ev-ayuda > summary { list-style: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: var(--text-2); font-weight: 800; font-size: 14px; }
.ev-ayuda > summary::-webkit-details-marker { display: none; }
.ev-ayuda[open] > summary, .ev-ayuda > summary:hover { border-color: var(--sc, var(--brand-3)); color: #fff; background: color-mix(in srgb, var(--sc, var(--brand-3)) 18%, transparent); }
.ev-ayuda-pop { position: absolute; z-index: 20; top: calc(100% + 10px); right: -6px; width: min(300px, calc(100vw - 56px)); padding: 12px 14px; border-radius: 14px; background: var(--surface-2, #1c1925); border: 1px solid color-mix(in srgb, var(--sc, var(--brand-3)) 45%, transparent); box-shadow: 0 18px 40px rgba(0,0,0,.5); font-size: 13px; line-height: 1.45; color: var(--text-2); }
.pt-pro:has(> .ev-ayuda) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Portadas: «Ideas desde tu canción» en el móvil, con el botón debajo para que el texto no quede estrecho */
@media (max-width: 560px) { .pt-ideas > .row { flex-wrap: wrap; } .pt-ideas > .row > .btn { flex: 1 1 100%; } }
.ev-portada .ev-hoja > .pt-panel { padding: 0; margin: 0; background: none; border: 0; box-shadow: none; }

/* Primeros pasos: el pack de bienvenida sin abrir va lo primero, destacado (js/recorrido.js packPasoHtml) */
.ps-pack { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; color: var(--text); text-decoration: none;
  background: linear-gradient(120deg, color-mix(in srgb, #f472b6 22%, var(--surface)), color-mix(in srgb, #fbbf24 16%, var(--surface)));
  border: 1px solid color-mix(in srgb, #f472b6 50%, transparent); box-shadow: 0 10px 26px -16px #f472b6; animation: psPackLatido 2.6s ease-in-out infinite; }
.ps-pack:hover { border-color: #f9a8d4; }
.ps-pack-ico { font-size: 28px; line-height: 1; flex: none; filter: drop-shadow(0 4px 10px rgba(244,114,182,.5)); }
.ps-pack b { display: block; font-size: 15px; }
.ps-pack small { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.35; margin-top: 2px; }
.ps-pack svg { flex: none; color: #f9a8d4; }
@keyframes psPackLatido { 0%, 100% { box-shadow: 0 10px 26px -16px #f472b6; } 50% { box-shadow: 0 10px 30px -10px #f472b6; } }
@media (prefers-reduced-motion: reduce) { .ps-pack { animation: none; } }

/* ---------- Checklists con el estilo nuevo (js/checklist-vivo.js): Prepara tu sesión, mezcla y máster ---------- */
.cv-anillo { position: relative; flex: none; display: grid; place-items: center; }
.cv-anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cv-an-fondo { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 6; }
.cv-an-valor { fill: none; stroke: var(--cc); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.3,.7,.3,1); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cc) 60%, transparent)); }
.cv-anillo b { position: relative; font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.cv-anillo b small { font-size: 11px; font-weight: 800; opacity: .7; margin-left: 1px; }
.cv-prog { display: flex; align-items: center; gap: 16px; padding: 16px; border-color: color-mix(in srgb, var(--cc) 35%, var(--border)); background: linear-gradient(130deg, color-mix(in srgb, var(--cc) 12%, var(--surface)), var(--surface) 70%); }
.cv-prog.listo { border-color: color-mix(in srgb, var(--cc) 70%, transparent); box-shadow: 0 10px 30px -18px var(--cc); }
.cv-prog-t { display: block; font-size: 15.5px; }
.cv-prog-n { font-size: 13px; font-weight: 800; color: var(--cc); margin: 2px 0; }
.cv-cita { display: flex; align-items: center; gap: 14px; padding: 16px; border-color: rgba(251,191,36,.5); background: linear-gradient(120deg, rgba(251,191,36,.16), rgba(217,160,6,.04) 70%), var(--surface); }
.cv-cita.vacia { border-color: var(--border); background: var(--surface); }
.cv-cita-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: rgba(255,255,255,.06); }
.cv-cita-cuando { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #fde68a; }
.cv-cita-f { display: block; font-size: 18px; margin: 2px 0; }
.cv-bueno { padding: 14px 16px; }
.cv-fases > .cv-fase + .cv-fase { margin-top: 10px; }
.cv-fase { padding: 0; overflow: hidden; border-color: color-mix(in srgb, var(--cc) 30%, var(--border)); }
.cv-fase[open] { border-color: color-mix(in srgb, var(--cc) 55%, var(--border)); box-shadow: 0 12px 30px -22px var(--cc); }
.cv-fase > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; cursor: pointer; }
.cv-fase > summary::-webkit-details-marker { display: none; }
.cv-fase-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; font-weight: 900; color: #fff; background: color-mix(in srgb, var(--cc) 22%, transparent); border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); }
.cv-fase.ok .cv-fase-ico { background: var(--cc); color: #141018; }
.cv-fase-t { display: block; font-size: 15.5px; }
.cv-fase-n { flex: none; font-size: 12.5px; font-weight: 900; padding: 4px 10px; border-radius: 99px; color: var(--cc); background: color-mix(in srgb, var(--cc) 14%, transparent); }
.cv-fase.ok .cv-fase-n { color: #141018; background: var(--cc); }
.cv-fase-chev { flex: none; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: -4px 4px 0 2px; transition: transform .2s; }
.cv-fase[open] .cv-fase-chev { transform: rotate(-135deg); margin-top: 4px; }
.cv-fase-barra { height: 3px; margin: 0 16px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.cv-fase-barra i { display: block; height: 100%; background: var(--cc); border-radius: inherit; transition: width .5s; }
.cv-items { padding: 6px 8px 10px; }
.cv-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 8px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.cv-item + .cv-item { border-top: 1px solid rgba(255,255,255,.05); }
.cv-item:hover { background: rgba(255,255,255,.03); }
.cv-item input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cv-check { flex: none; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--cc) 60%, var(--border-2)); display: grid; place-items: center; transition: background .2s, border-color .2s, transform .2s; }
.cv-check::after { content: ''; width: 6px; height: 11px; border-right: 2.6px solid #141018; border-bottom: 2.6px solid #141018; transform: rotate(45deg) scale(0); margin-top: -3px; transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
.cv-item.on .cv-check { background: var(--cc); border-color: var(--cc); transform: scale(1.04); }
.cv-item.on .cv-check::after { transform: rotate(45deg) scale(1); }
.cv-item input:focus-visible + .cv-check { outline: 2px solid var(--cc); outline-offset: 2px; }
.cv-item b { display: block; font-size: 14.5px; line-height: 1.35; }
.cv-nota { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cv-item.on b { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--cc) 70%, transparent); }
html.v2 .ev-sesion { --sc: #fbbf24; }

/* ---------- Pack de bienvenida por pestañas (js/views/bienvenida.js packVivo) ---------- */
html.v2 .ev-pack { --sc: #f472b6; }
.ev-pack .ev-hoja .carta { margin: 0; }
.pk-regalos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.pk-regalo { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-color: rgba(239,68,68,.4); background: linear-gradient(130deg, rgba(239,68,68,.13), var(--surface) 70%); }
.pk-regalo-todas { border-color: var(--border); background: var(--surface); }
.pk-regalo-e { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: rgba(255,255,255,.06); }
.pk-regalo b { display: block; }
.pk-regalo small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pk-regalo svg { flex: none; color: var(--muted); }
/* Hoja de ruta: resumen arriba y el camino con lo hecho plegado */
.rv-canciones { margin-bottom: 12px; }
.rv-resumen { display: flex; align-items: center; gap: 16px; padding: 18px; border-color: rgba(167,139,250,.45); background: linear-gradient(130deg, rgba(167,139,250,.18), rgba(244,114,182,.06) 60%, var(--surface)); box-shadow: 0 14px 34px -24px #a78bfa; }
.rv-resumen.fin { border-color: rgba(52,211,153,.5); background: linear-gradient(130deg, rgba(52,211,153,.16), var(--surface) 70%); }
.rv-cancion { font-size: 12.5px; font-weight: 800; color: var(--text-2); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rv-ahora { display: block; font-size: 18px; line-height: 1.25; margin: 4px 0 3px; }
.rv-serv { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.rv-serv span { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--text-2); }
.rv-camino, .rv-camino ol { list-style: none; margin: 0; padding: 0; }
.rv-camino { position: relative; }
.rv-paso, .rv-hechos { position: relative; display: flex; gap: 12px; padding-bottom: 12px; }
.rv-hechos { display: block; }
.rv-paso::before { content: ''; position: absolute; left: 18px; top: 40px; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.14) 0 6px, transparent 6px 11px); }
.rv-paso.hecho::before { background: color-mix(in srgb, var(--pc) 70%, transparent); }
.rv-camino > .rv-paso:last-child::before { display: none; }
.rv-punto { position: relative; z-index: 1; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: var(--surface-2); border: 2px solid rgba(255,255,255,.12); }
.rv-paso.hecho .rv-punto, .rv-hechos .rv-punto { background: color-mix(in srgb, var(--pc, #a78bfa) 85%, #000); border-color: transparent; color: #fff; }
.rv-hechos .rv-punto { --pc: #34d399; }
.rv-paso.aqui .rv-punto { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 25%, var(--surface)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pc) 22%, transparent); animation: rvPulso 2.2s ease-in-out infinite; }
@keyframes rvPulso { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--pc) 8%, transparent); } }
.rv-card { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.rv-paso.luego .rv-card { opacity: .78; }
.rv-paso.hecho .rv-card { padding: 9px 14px; opacity: .7; }
.rv-paso.aqui .rv-card { border-color: color-mix(in srgb, var(--pc) 65%, transparent); background: linear-gradient(130deg, color-mix(in srgb, var(--pc) 16%, var(--surface)), var(--surface) 75%); box-shadow: 0 12px 30px -20px var(--pc); }
.rv-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rv-cab b { font-size: 15px; }
.rv-et { font-size: 10.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--pc); }
.rv-card p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.rv-hechos > details > summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 2px 0 12px; font-weight: 800; font-size: 14px; color: var(--text-2); }
.rv-hechos > details > summary::-webkit-details-marker { display: none; }
.rv-hechos > details[open] > summary .tiny { display: none; }
.rv-hechos::before { content: ''; position: absolute; left: 18px; top: 40px; bottom: 0; width: 2px; background: color-mix(in srgb, #34d399 60%, transparent); }
@media (prefers-reduced-motion: reduce) { .rv-paso.aqui .rv-punto { animation: none; } }

/* Dictado por voz (js/dictado.js): micrófono dentro de la caja de texto (entrevista de la bio) */
.dict-caja { position: relative; }
.dict-caja textarea { padding-bottom: 54px; }
.dict-mic { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 11px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--brand-3) 50%, transparent); background: color-mix(in srgb, var(--brand-3) 18%, var(--surface)); color: #fff; font: 800 13.5px/1 inherit; cursor: pointer; transition: background .15s, box-shadow .15s; }
.dict-mic:hover { background: color-mix(in srgb, var(--brand-3) 28%, var(--surface)); }
.dict-mic.on { background: #ef4444; border-color: #f87171; box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: dictLatido 1.4s ease-out infinite; }
.dict-mic.on .dict-mic-t { font-size: 0; } .dict-mic.on .dict-mic-t::before { content: 'Escuchando… toca para parar'; font-size: 13.5px; }
@keyframes dictLatido { 70% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
@media (prefers-reduced-motion: reduce) { .dict-mic.on { animation: none; } }

/* Lote 8: Buscador de conciertos, Artistas Estudio Siete (con Rankings), Mis logros, Juegos */
html.v2 .ev-buscaconc { --sc: #22d3ee; }
html.v2 .ev-artistas { --sc: #fbbf24; }
html.v2 .ev-logros { --sc: #fbbf24; }
html.v2 .ev-juegos { --sc: #22d3ee; }
.ev-carpeta .lb-tab .lg-num, .ev-carpeta .lb-tab .jg-num { font-size: 11px; font-weight: 900; padding: 2px 7px; border-radius: 99px; background: color-mix(in srgb, var(--c) 25%, transparent); color: #fff; }
.ev .rk-modo.seg-pill { margin-bottom: 4px; }
.ev .rk-filtros .seg-pill { margin-bottom: 8px; }
.ev-juegos .ev-hoja > #jgRetos:empty { display: none; }
/* Checklists: enlace a la herramienta que ayuda con ese punto */
.cv-nota a { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-weight: 800; font-size: 12.5px; color: color-mix(in srgb, var(--cc) 75%, #fff); text-decoration: none; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--cc) 14%, transparent); }
.cv-nota a::after { content: '→'; }
.cv-nota a:hover { background: color-mix(in srgb, var(--cc) 24%, transparent); }
/* Carta de bienvenida (pack nuevo): el imagotipo en el centro, más grande, y el párrafo escrito para el artista */
.ev-pack .carta-logo { display: block; height: 58px; margin: 4px auto 22px; opacity: 1; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.ev-pack .carta > .eyebrow:first-of-type { text-align: center; }
.carta-personal { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.07); border-left: 3px solid #f9a8d4; }

/* ---------- Tablones de corcho más reales (Tablón de colaboraciones, Tablón del Buscador de conciertos) ----------
   Corcho: grano de verdad hecho con ruido SVG (dos capas: grano fino y trocitos más gordos) sobre un tono corcho con
   manchas suaves; marco de madera con veta y bisel. Chinchetas: cabeza con volumen y brillo, cuello y sombra que cae
   sobre el papel. El papel, con un poco de textura y la esquina de abajo levantada. */
.tb-corcho {
  background-color: #b98450;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .15 0 0 0 0 .05 0 0 0 2.6 -1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .99 0 0 0 0 .87 0 0 0 0 .67 0 0 0 3 -1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' seed='21' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .19 0 0 0 0 .07 0 0 0 1.8 -.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E"),
    radial-gradient(120% 80% at 30% 15%, rgba(255,226,180,.16), transparent 60%);
  background-size: 200px 200px, 220px 220px, 420px 420px, 100% 100%;
  border: 14px solid #5b3a1f;
  border-image: linear-gradient(135deg, #8a5a32, #5c3a1d 22%, #73492a 45%, #4d2e16 70%, #6a4224) 14;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 7px 16px rgba(40,20,5,.6), inset 0 -3px 10px rgba(40,20,5,.35), 0 18px 34px -14px rgba(0,0,0,.7);
  border-radius: 6px;
}
.tb-corcho::before { content: ''; position: absolute; inset: -14px; border-radius: 6px; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,220,170,.35), inset 0 -2px 0 rgba(0,0,0,.4), inset 1px 0 0 rgba(255,220,170,.18), inset -1px 0 0 rgba(0,0,0,.3); }
.tb-cab b { text-shadow: 0 1px 0 rgba(60,30,10,.7), 0 3px 6px rgba(40,20,5,.45); }
/* Papel: textura muy suave, sombra con la esquina de abajo levantada */
.tb-nota { box-shadow: 0 1px 1px rgba(0,0,0,.18), 0 12px 16px -10px rgba(40,20,5,.65);
  background-image: linear-gradient(180deg, rgba(255,255,255,.4), transparent 35%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .5 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
.tb-nota::after { content: ''; position: absolute; right: 6px; bottom: 8px; width: 46%; height: 14px; z-index: -1; transform: rotate(3deg); box-shadow: 0 10px 12px rgba(30,15,3,.45); }
/* Chincheta con volumen: cabeza, brillo, cuello y sombra sobre el papel */
.tb-chin { top: -11px; width: 22px; height: 22px; margin-left: -11px; z-index: 2; background: none; box-shadow: none; }
.tb-chin::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0 1.6px, rgba(255,255,255,.55) 2.6px, transparent 6px),
    radial-gradient(circle at 60% 70%, color-mix(in srgb, var(--chin) 70%, #000) 0, transparent 70%),
    radial-gradient(circle at 45% 40%, color-mix(in srgb, var(--chin) 85%, #fff), var(--chin) 45%, color-mix(in srgb, var(--chin) 55%, #000) 100%);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.35), 0 1px 1px rgba(0,0,0,.35); }
.tb-chin::after { content: ''; position: absolute; left: 9px; top: 15px; width: 16px; height: 9px; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(20,10,0,.55), transparent); transform: rotate(28deg); filter: blur(1px); }

/* Elegir con qué se escriben los correos (js/correo.js) */
.co-ops { display: grid; gap: 8px; }
.co-op { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2, rgba(255,255,255,.04)); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.co-op:hover { border-color: var(--brand-3); background: color-mix(in srgb, var(--brand-3) 10%, var(--surface)); }
.co-op-e { font-size: 24px; flex: none; }
.co-op b { display: block; font-size: 15px; }
.co-op small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.co-op svg { color: var(--muted); flex: none; }
.co-rec { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; cursor: pointer; }
.co-rec input { width: 18px; height: 18px; accent-color: var(--brand-3); }
.co-ajuste { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; }

/* Buscador de conciertos: la campaña de booking con la que escribe, en la línea de filtros (en el móvil, en su fila) */
@media (max-width: 699px) { .bc-linea1 select.input.bc-camp-sel { grid-column: 1 / -1; grid-row: 4; } }
@media (min-width: 700px) { .bc-linea1 select.input.bc-camp-sel { flex: 1 1 200px; max-width: 280px; } }
.bc-cr-fmt { display: flex; flex-wrap: wrap; border-radius: 16px; }
.bc-cr-fmt > button { flex: 1 1 auto; }

/* Ayudas («¿Para qué sirve…?», «¿Cómo funciona…?»): tarjeta normal y el texto en el color de ayuda, azul suave,
   para que se vea que está ahí para ayudar sin llamar la atención */
:root { --ayuda: #93c5fd; }
.cv-explica.ayuda-txt { border-color: var(--border); background: var(--surface); }
.ayuda-txt > summary b, .ayuda-txt > summary svg { color: var(--ayuda); }
.ayuda-txt p, .ayuda-txt li { color: color-mix(in srgb, var(--ayuda) 45%, var(--text-2)); }
.ayuda-txt p b, .ayuda-txt li b { color: color-mix(in srgb, var(--ayuda) 70%, #fff); }
.ayuda-txt a { color: var(--ayuda); }
.pf-destacar { animation: pfDestacar 2.4s ease-out 1; }
@keyframes pfDestacar { 0%, 30% { box-shadow: 0 0 0 3px var(--brand-3); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Mi música (móvil): «Nueva canción» ya no se queda en «Nueva» apretada en un tercio: SietePlay y Pagos arriba y
   «Nueva canción» debajo, a todo el ancho, con su nombre entero */
@media (max-width: 520px) {
  html.v2 .mu2-pills.con-nc { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
  html.v2 .mu2-pills.con-nc:not(:has(.sp)) .mu2-pill[data-ver-pago] { grid-column: 1 / -1; }
}
@container (max-width: 460px) {
  html.v2 .mu2-pills.con-nc .nc-pill { grid-column: 1 / -1; grid-row: 2; height: 54px; border-radius: 16px; font-size: 15.5px; }
  .mu2-pills.con-nc .nc-largo { display: inline; }
  .mu2-pills.con-nc .nc-corto { display: none; }
}
/* Lote 9: Modo Lanzamiento, Presupuesto y Streams con pestañas de carpeta */
.ev-lanzamiento .ev-hoja > .lz-panel { margin: 0; }
.ev-carpeta .lb-tab small.lg-num:empty { display: none; }
/* Tablón de corcho con proporción de tablón de verdad: 3 de ancho por 2 de alto (si hay más anuncios, crece) */
.tb-corcho { aspect-ratio: 3 / 2; }
/* Presupuesto y Streams: la tarjeta del resultado («Reparto de tu inversión», «Ganarías aprox. al mes») con su cabecera
   arriba y separada del número grande, y el título en una línea */
html.v2 .ev .pp-result { justify-content: flex-start; }
html.v2 .ev .pp-result > .pa-cab { margin-bottom: 4px; align-items: center; position: relative; top: auto; }
html.v2 .ev .pp-result > .pa-cab + * { margin-top: 0; }
html.v2 .ev .pp-result .ev-cab > span:not(.ev-ico) > span:not([hidden]) { display: inline; }
html.v2 .ev .pp-result .ev-cab > span:not(.ev-ico) { display: block; flex: 1 1 auto; white-space: normal; overflow-wrap: normal; }
html.v2 .ev .pp-result .ev-cab .per { display: inline !important; }

/* Lote 10 (en prueba, solo Seven): Mis discos, Vision board, Sesión de fotos con IA, QR */
html.v2 .ev-albumes { --sc: #a78bfa; }
html.v2 .ev-visionboard { --sc: #f472b6; }
html.v2 .ev-sesionfotos { --sc: #22d3ee; }
html.v2 .ev-qr { --sc: #fbbf24; }
/* Pasos numerados que se cierran solos (Sesión de fotos con IA, QR del artista), como los del EPK */
.ev .sf-paso > summary { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: 10px; }
.ev .sf-paso > summary > b { display: block; margin: 0; min-width: 0; }
.sf-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: var(--sc, var(--brand-3)); background: color-mix(in srgb, var(--sc, var(--brand-3)) 16%, transparent); border: 1px solid color-mix(in srgb, var(--sc, var(--brand-3)) 45%, transparent); }
.sf-paso.pa-listo .sf-num { background: var(--sc, var(--brand-3)); color: #141018; font-size: 0; }
.sf-paso.pa-listo .sf-num::before { content: '✓'; font-size: 14px; }
.ev .sf-paso .field.mt-0 > .sf-refs { margin-top: 0; }

/* Lote 11 (en prueba, solo Seven): Guías, Cine, BPM y tonalidad */
html.v2 .ev-guias { --sc: #b594ec; }
html.v2 .ev-cine { --sc: #ef4444; }
html.v2 .ev-bpm { --sc: #34d399; }
.ev .g-barra .g-cats, .ev .cn-barra .cn-cats { flex: 0 1 auto; }
.ev .cn-barra .search, .ev .g-barra .search { flex: 1 1 260px; }
/* BPM: cada tarjeta con su color (el análisis, con el de la herramienta) */
.ev-bpm .card:has(#tapBtn) { --sc: #fbbf24; }
.ev-bpm #bpmMet { --sc: #a78bfa; }
.ev-bpm #bpmHist > .card { --sc: #f472b6; }
.ev-bpm .card:has(#tapBtn), .ev-bpm #bpmMet, .ev-bpm #bpmHist > .card { border-color: color-mix(in srgb, var(--sc) 30%, var(--border)); }
.ev-bpm .met-compas { flex: 1 1 auto; display: flex; }
.ev-bpm .met-compas > button { flex: 1 1 0; height: 40px; font-size: 14px; }
.ev-bpm .tap-btn { border-color: var(--sc); box-shadow: 0 0 22px -6px var(--sc); }
.ev-bpm .tap-btn svg { color: var(--sc); }
@media (max-width: 760px) {
  .cn-barra > .seg-pill, .g-barra > .seg-pill { display: flex; }
  .cn-barra .seg-pill > button, .g-barra .seg-pill > button { flex: 1 0 auto; }
}
/* Lote 11b (en prueba, solo Seven): Calentamiento vocal, Práctica vocal, Medidor de rango vocal */
html.v2 .ev-calent { --sc: #f97316; }
html.v2 .ev-practica { --sc: #10b981; }
html.v2 .ev-medidor { --sc: #f43f5e; }
.ev-calent .c-sel { --sc: #fbbf24; }
.ev-calent .c-tips { --sc: #22d3ee; }
.ev-calent .c-sel, .ev-calent .c-tips { border-color: color-mix(in srgb, var(--sc) 30%, var(--border)); }
/* Práctica: cada grupo de ejercicios con su color */
.ev-practica [data-g="juegos"] { --gc: #fbbf24; }
.ev-practica [data-g="afinacion"] { --gc: #10b981; }
.ev-practica [data-g="tecnica"] { --gc: #a78bfa; }
.ev-practica [data-g="oido"] { --gc: #22d3ee; }
.ev-practica .pr-gr { color: var(--gc); display: flex; align-items: center; gap: 8px; }
.ev-practica .pr-gr::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 45%, transparent), transparent); }
.ev-practica .practica-item .ay-ico { background: color-mix(in srgb, var(--gc) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 40%, transparent); }
.ev-practica .practica-item:hover { border-color: color-mix(in srgb, var(--gc) 45%, var(--border)); }
.ev-practica .practica-item.on { border-color: var(--gc); box-shadow: 0 0 20px -8px var(--gc); }
.ev-practica .practica-item.on .practica-play { color: var(--gc); }
/* Medidor: pasos numerados */
.ev-medidor .md-paso { --sc: #f43f5e; }
.ev-medidor .md-paso .yt-box { margin-top: 12px; }
/* Lote 11c (en prueba, solo Seven): Nombre artístico, ¿Qué vídeo?, Registro de obras */
html.v2 .ev-nombre { --sc: #ec4899; }
html.v2 .ev-quevideo { --sc: #f43f5e; }
html.v2 .ev-registro { --sc: #818cf8; }
.ev-nombre .nb-antes { --sc: #fbbf24; }
.ev-quevideo #conIA { --qc: #a78bfa; } .ev-quevideo #empezar { --qc: #22d3ee; }
.ev-quevideo .qv-modo { border-color: color-mix(in srgb, var(--qc) 40%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--qc) 14%, transparent), transparent 70%); }
.ev-quevideo .qv-modo:hover { border-color: var(--qc); box-shadow: 0 0 22px -8px var(--qc); }
.ev-quevideo .pa-wrap .bar > i, .ev-quevideo .qv-barra > i { background: var(--sc); }
/* Registro: cada paso de la guía con su color, y la canción con todo registrado en verde */
.ev-registro .rg-guia[data-gi="0"] { --gc: #fbbf24; } .ev-registro .rg-guia[data-gi="1"] { --gc: #22d3ee; } .ev-registro .rg-guia[data-gi="2"] { --gc: #a78bfa; }
.ev-registro .rg-guia[data-gi="3"] { --gc: #f472b6; } .ev-registro .rg-guia[data-gi="4"] { --gc: #34d399; } .ev-registro .rg-guia[data-gi="5"] { --gc: #60a5fa; }
.ev-registro .rg-guia { border-color: color-mix(in srgb, var(--gc) 28%, var(--border)); }
.ev-registro .rg-guia[open] { background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 10%, transparent), transparent 120px), var(--v2-card-solida, var(--surface)); border-color: color-mix(in srgb, var(--gc) 50%, var(--border)); }
.ev-registro .rg-ge { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--gc) 16%, transparent); }
.ev-registro .rg-barra > i { background: var(--sc); }
.ev-registro .rg-cancion.abierta { border-color: color-mix(in srgb, var(--sc) 50%, var(--border)); }
.ev-registro .rg-cancion.rg-ok { border-color: color-mix(in srgb, #34d399 45%, var(--border)); }
.ev-registro .rg-cancion.rg-ok .rg-barra > i { background: #34d399; }
.ev-registro .rg-paso.on { border-color: color-mix(in srgb, var(--sc) 40%, var(--border)); }
/* Nombre artístico: cada parte del resultado con su color */
.ev-nombre .nb-c-rev { --sc: #22d3ee; }
.ev-nombre .nb-c-redes { --sc: #f472b6; --sc2: #fb923c; }
.ev-nombre .nb-c-web { --sc: #818cf8; }
html.v2 .ev-nombre .nb-c { border-color: color-mix(in srgb, var(--sc) 38%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 11%, transparent), transparent 130px), var(--v2-card-solida, var(--surface)); }
html.v2 .ev-nombre .nb-c .ev-ico, html.v2 .ev-nombre .nb-antes .ev-ico { background: color-mix(in srgb, var(--sc) 22%, transparent); color: color-mix(in srgb, var(--sc) 72%, #fff); }
html.v2 .ev-nombre .nb-c-redes .ev-ico { background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 45%, transparent), color-mix(in srgb, var(--sc2) 45%, transparent)); color: #fff; }
html.v2 .ev-nombre .nb-c-redes .nb-red { border-color: color-mix(in srgb, var(--sc) 22%, var(--border)); }
html.v2 .ev-nombre .nb-antes { border-color: color-mix(in srgb, var(--sc) 30%, var(--border)); }
/* Los iconos de las tarjetas con su propio color (BPM, Calentamiento) */
html.v2 .ev-bpm .card:has(#tapBtn) .ev-ico, html.v2 .ev-bpm #bpmMet .ev-ico, html.v2 .ev-bpm #bpmHist > .card .ev-ico,
html.v2 .ev-calent .c-sel .ev-ico, html.v2 .ev-calent .c-tips .ev-ico { background: color-mix(in srgb, var(--sc) 22%, transparent); color: color-mix(in srgb, var(--sc) 72%, #fff); }
/* ¿Qué vídeo?: una sola sección de explicación con dos títulos (no parece un botón) y debajo, aparte, los dos modos */
.pa-intro:has(.qv-info) { text-align: left; }
.qv-info { display: grid; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.qv-info-ico { font-size: 34px; line-height: 1; }
.qv-info-sec { padding-left: 14px; border-left: 3px solid color-mix(in srgb, var(--sc, var(--brand-3)) 70%, transparent); }
.qv-info-sec + .qv-info-sec { border-left-color: color-mix(in srgb, #fbbf24 70%, transparent); }
.qv-info-t { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px; line-height: 1.25; }
.qv-info-sec p { margin: 0; }
.qv-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qv-tipo { font-size: 12px; font-weight: 650; padding: 4px 9px; border-radius: 8px; color: var(--text-2); background: rgba(255,255,255,.05); pointer-events: none; }
.qv-empezar-t { margin-top: 18px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
/* Registro de obras: buscador y grupos «Por registrar» / «Registradas» (para todos) */
.rg-buscar { margin-bottom: 10px; }
.rg-grupo + .rg-grupo { margin-top: 16px; }
.rg-grupo-t { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--text-2); }
.rg-grupo-n { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 11px; background: rgba(255,255,255,.08); }
.rg-grupo[data-grupo="reg"] .rg-grupo-t { color: #6ee7b7; }
.rg-grupo .rg-cancion + .rg-cancion { margin-top: 8px; }

/* Lote 11d (en prueba, solo Seven): Generador de títulos, Tablón de colaboraciones, Mis tareas */
html.v2 .ev-titulos { --sc: #eab308; }
html.v2 .ev-tablon { --sc: #38bdf8; }
html.v2 .ev-tareas { --sc: #2dd4bf; }
/* Títulos: 3 pasos numerados dentro del formulario */
.ev-titulos .tg-form { border-color: color-mix(in srgb, var(--sc) 35%, var(--border)); }
.ev-titulos .tg-paso { margin: 0 0 10px; }
.ev-titulos .tg-paso:not(:first-child) { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.ev-titulos .tg-paso + .field { margin-top: 0; }
.ev-titulos .tg-sin-nom > span:first-child { display: none; }
.ev-titulos .tg-sin-nom .chips.mt-1 { margin-top: 0; }
/* Tablón: los filtros en una sola fila en el ordenador */
.tc-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tc-barra .tc-tipos { flex: 0 1 auto; }
.tc-barra .tc-prov { flex: 0 1 220px; width: auto; min-width: 150px; height: 42px; }
.tc-barra .tc-dist { flex: none; gap: 10px; margin: 0; }
@media (max-width: 760px) {
  .tc-barra .tc-tipos { flex: 1 1 100%; display: flex; }
  .tc-barra .tc-tipos > button { flex: 1 0 auto; }
  .tc-barra .tc-prov { flex: 1 1 0; min-width: 0; }
}

/* Lote 11e (en prueba, solo Seven): Enlaces inteligentes, Enlace del lanzamiento, Comunidad WhatsApp */
html.v2 .ev-enlaces { --sc: #38bdf8; }
html.v2 .ev-enlace { --sc: #ec4899; }
html.v2 .ev-wa { --sc: #25d366; }
.ec-info-ev > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.ec-info-ev > summary::-webkit-details-marker { display: none; }
html.v2 .ev .ec-info-ico { background: color-mix(in srgb, var(--sc) 22%, transparent); color: color-mix(in srgb, var(--sc) 72%, #fff); }
.ec-info-ev .ec-info-cuerpo { margin-top: 8px; }
.ec-info-ev { border-color: color-mix(in srgb, var(--sc) 30%, var(--border)); }
/* Enlace del lanzamiento: pasos numerados como el EPK */
.ev-enlace .en-paso > summary { display: flex !important; align-items: center; gap: 10px; }
.ev-enlace .en-paso > summary > b { font-size: 15.5px; font-weight: 750; }
.ev-enlace .en-paso[open] { border-color: color-mix(in srgb, var(--sc) 40%, var(--border)); }
/* Comunidad WhatsApp: la tarjeta del grupo con el verde de WhatsApp */
html.v2 .ev-wa .wa-card { border-color: color-mix(in srgb, var(--sc) 45%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 12%, transparent), transparent 160px), var(--v2-card-solida, var(--surface)); box-shadow: 0 0 34px -18px var(--sc); }
html.v2 .ev-wa .wa-puntos li { padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.035); list-style: none; }
html.v2 .ev-wa .wa-puntos { display: grid; gap: 6px; padding: 0; }
@media (max-width: 420px) { html.v2 .ev-enlace .pi-sticky .card > .row:first-child > .ev-cab { flex: 1 1 100%; } }
.ev-enlace .lk-seg { flex: none; }

/* Lote 11f (en prueba, solo Seven): el Analizador de redes por dentro */
.ev-analizador .ig-c-seg { --sc: #f472b6; } .ev-analizador .ig-c-fmt { --sc: #a78bfa; }
.ev-analizador .ig-c-dias { --sc: #38bdf8; } .ev-analizador .ig-c-hora { --sc: #fbbf24; }
html.v2 .ev-analizador :is(.ig-c-seg, .ig-c-fmt, .ig-c-dias, .ig-c-hora):has(.ig-ico) { border-color: color-mix(in srgb, var(--sc) 32%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 10%, transparent), transparent 110px), var(--v2-card-solida, var(--surface)); }
html.v2 .ev-analizador .ig-h2:has(.ig-ico) { display: flex; align-items: center; gap: 10px; }
html.v2 .ev-analizador .ig-ico, html.v2 .ev-analizador .mr-ico { width: 30px; height: 30px; background: color-mix(in srgb, var(--sc, #2dd4bf) 22%, transparent); color: color-mix(in srgb, var(--sc, #2dd4bf) 72%, #fff); }
html.v2 .ev-analizador :is(.ig-c-fmt, .ig-c-dias, .ig-c-hora):has(.ig-ico) .ig-barra > i > b { background: var(--sc); }
.ig-stats-ev .ig-stat:nth-child(1) { --sc: #f472b6; } .ig-stats-ev .ig-stat:nth-child(2) { --sc: #34d399; } .ig-stats-ev .ig-stat:nth-child(3) { --sc: #38bdf8; }
html.v2 .ig-stats-ev .ig-stat { border-color: color-mix(in srgb, var(--sc) 30%, var(--border)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--sc) 70%, transparent); }
.mr-cab-ev { --sc: #2dd4bf; }
.mr-cab-ev .ev-cab { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 750; }
.ev-analizador .mr-rango.seg-pill { display: flex; width: 100%; }
.ev-analizador .mr-rango.seg-pill > button { flex: 1 1 0; }
.mr-cab-ev { display: flex; align-items: center; gap: 10px; } .mr-cab-ev > .ev-cab { flex: 1 1 auto; }

/* Lote 11g (en prueba, solo Seven): Ayudas y becas, Opiniones de artistas */
html.v2 .ev-ayudas { --sc: #22c55e; }
html.v2 .ev-opiniones { --sc: #fbbf24; }
.ev-ayudas .cv-explica > summary { display: flex; align-items: center; gap: 10px; }
html.v2 .ev .ay-ico { background: color-mix(in srgb, var(--sc) 22%, transparent); color: color-mix(in srgb, var(--sc) 72%, #fff); }
.ev-ayudas .ay-urge { --ac: #f87171; } .ev-ayudas .ay-pronto { --ac: #fbbf24; } .ev-ayudas .ay-calma { --ac: #34d399; }
html.v2 .ev-ayudas .cv-card { border-color: color-mix(in srgb, var(--ac, var(--sc)) 34%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--ac, var(--sc)) 9%, transparent), transparent 120px), var(--v2-card-solida, var(--surface)); }
html.v2 .ev-ayudas .bc-dato > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--ac, var(--sc)) 14%, transparent); }
html.v2 .ev-opiniones .op-item { position: relative; overflow: hidden; padding-bottom: 30px; border-color: color-mix(in srgb, var(--sc) 26%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 8%, transparent), transparent 55%), var(--v2-card-solida, var(--surface)); }
html.v2 .ev-opiniones .op-item::after { content: '”'; position: absolute; right: 14px; bottom: -34px; font-size: 80px; line-height: 1; font-family: Georgia, serif; color: color-mix(in srgb, var(--sc) 20%, transparent); pointer-events: none; }
html.v2 .ev-opiniones .op-est { color: var(--sc); text-shadow: 0 0 10px color-mix(in srgb, var(--sc) 50%, transparent); }

/* Lote 12 (en prueba, solo Seven): Calendario, SietePlay y Artistia con el estilo nuevo */
html.v2 .ev-cal { --sc: #60a5fa; }
html.v2 .ev-cal > .notice { border: 1px solid color-mix(in srgb, #60a5fa 35%, transparent); background: color-mix(in srgb, #60a5fa 9%, transparent); color: #bfdbfe; }
html.v2 .ev-cal .cal-dia-t h2 { display: flex; align-items: center; gap: 10px; }
html.v2 .ev-cal .cal-tr-cab b { display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; }
html.v2 .ev-cal .cal-ico { width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--ic, var(--sc)) 22%, transparent); color: color-mix(in srgb, var(--ic, var(--sc)) 72%, #fff); }
html.v2 .ev-cal .cal-cab-tr { --ic: #2dd4bf; } html.v2 .ev-cal .cal-cab-ct { --ic: #b48cf6; }
html.v2 .ev-cal .cal-reservar { border-color: color-mix(in srgb, #a78bfa 45%, var(--border)); box-shadow: 0 0 30px -16px #a78bfa; }
html.v2 .ev-cal .day.sel { box-shadow: 0 0 0 2px var(--sc), 0 0 18px -6px var(--sc); }
/* SietePlay: cada canción con los colores de marca del artista y el reproductor destacado */
html.v2 .ev-sieteplay details.es { --m1: var(--marca1, #38bdf8); --m2: var(--marca2, #7a4fb8); border-color: color-mix(in srgb, var(--m1) 35%, var(--border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--m1) 10%, transparent), color-mix(in srgb, var(--m2) 8%, transparent) 60%, transparent), var(--v2-card-solida, var(--surface)); }
html.v2 .ev-sieteplay details.es[open] { box-shadow: 0 0 36px -20px var(--m1); }
html.v2 .ev-sieteplay .es-player { border-color: color-mix(in srgb, var(--m1) 30%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--m1) 10%, transparent), transparent 70%), rgba(0,0,0,.18); }
html.v2 .ev-sieteplay .es-play { background: linear-gradient(135deg, var(--m1), var(--m2)); box-shadow: 0 6px 20px -6px var(--m1); }
html.v2 .ev-sieteplay .es-rondas { border-color: color-mix(in srgb, #fbbf24 30%, var(--border)); }
/* Artistia: la ventana con su degradado y las ideas de colores */
html.v2 .ats-ventana.ats-ev { border-color: color-mix(in srgb, #e879f9 35%, var(--border)); box-shadow: 0 24px 60px -20px rgba(0,0,0,.8), 0 0 40px -22px #e879f9; }
html.v2 .ats-ev .ats-cab { background: linear-gradient(110deg, color-mix(in srgb, #e879f9 22%, transparent), color-mix(in srgb, #8b5cf6 18%, transparent) 60%, transparent); }
html.v2 .ats-ev .ats-cab .ats-ava { background: linear-gradient(135deg, #e879f9, #8b5cf6); box-shadow: 0 0 16px -4px #e879f9; }
html.v2 .ats-ev .ats-msg.ella .ats-bur { border: 1px solid color-mix(in srgb, #a78bfa 25%, transparent); background: linear-gradient(160deg, color-mix(in srgb, #a78bfa 10%, transparent), transparent 70%), rgba(255,255,255,.04); }
html.v2 .ats-ev .ats-ideas .chip { border-color: color-mix(in srgb, var(--ic) 45%, transparent); background: color-mix(in srgb, var(--ic) 10%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ic) 80%, transparent); }
html.v2 .ats-ev .ats-ideas .chip:hover { background: color-mix(in srgb, var(--ic) 20%, transparent); }
html.v2 .ats-ev .ats-caja { border-color: color-mix(in srgb, #a78bfa 35%, var(--border)); }
html.v2 .ats-ev .ats-caja:focus-within { box-shadow: 0 0 0 1px #a78bfa, 0 0 24px -8px #a78bfa; }
html.v2 .ev-sieteplay .es-carpeta { border-color: color-mix(in srgb, var(--m1, #38bdf8) 22%, var(--border)); }

/* Clips (herramienta nueva, oculta hasta que Seven la apruebe) */
html.v2 .ev-clips { --sc: #e879f9; }
.cl-lista { display: grid; gap: 8px; }
.cl-cancion, .cl-clip { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.03); color: inherit; font: inherit; text-align: left; width: 100%; min-width: 0; }
.cl-cancion { cursor: pointer; transition: border-color .15s, background .15s; }
.cl-cancion:hover { border-color: color-mix(in srgb, var(--sc) 55%, var(--border)); background: color-mix(in srgb, var(--sc) 8%, transparent); }
.cl-cancion b, .cl-clip b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-cancion .tiny, .cl-clip .tiny { display: block; }
.cl-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--sc, #e879f9) 18%, transparent); color: color-mix(in srgb, var(--sc, #e879f9) 75%, #fff); }
.cl-ir { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; color: color-mix(in srgb, var(--sc) 75%, #fff); }
.cl-clip .icon-btn { flex: none; }
.cl-subir-btn { cursor: pointer; }
.cl-hoja > .card + .card { margin-top: 10px; }
.cl-vacio { padding: 28px 18px; }
@media (max-width: 380px) { .cl-ir { font-size: 0; gap: 0; } .cl-clip { gap: 8px; padding: 8px 10px; } }

/* Sinónimos / antónimos (Ayudante de escritura) */
.sn-sentido { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; }
.sn-num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(245,158,11,.18); color: #fbbf24; font-size: 12.5px; font-weight: 800; }
.sn-sim { font-size: 17px; margin-right: 4px; opacity: .8; }