/* Rebobina · tema «Bolsillo»: un reproductor MP3 de los 2000 -carcasa metálica,
 * pantalla blanca de píxeles, tres píldoras y una cruceta-.
 *
 * Las reglas de aspecto SON las de la muestra aprobada
 * (diseno/muestra-bolsillo.html): mismos colores, medidas y tipografías. Lo
 * único que cambia es el nombre de las clases: las de la muestra (`.fila`,
 * `.tapa`, `.letra`...) chocan con otras que la aplicación ya tiene, así que
 * lo que se crea para el tema lleva el prefijo `bol`, y lo que la aplicación
 * ya pinta -filas, tarjetas, el reproductor, las hojas- se viste con las
 * mismas reglas por su propio nombre.
 *
 * TODO va atado a `:root[data-tema="bolsillo"]`: con otro tema puesto, nada de
 * esto se aplica, y lo que el tema crea (carcasa, píldoras, cruceta) queda
 * oculto. Sin ecualizador animado: el dueño lo quitó de la muestra.
 *
 * La CSP (`style-src 'self'`) no deja `style="..."`: nada de eso aquí. */

/* Las tres tipografías, del propio servidor (la CSP no deja las de Google).
 * Las tres son de licencia OFL: las licencias están en fuentes/. Solo se
 * bajan cuando algo las pide, o sea, con este tema puesto. */
@font-face {
  font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fuentes/michroma-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Pixelify Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fuentes/pixelify-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Silkscreen"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fuentes/silkscreen-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lo que crea el tema, oculto con cualquier otro: todo lleva la clase `bol`. */
:root:not([data-tema="bolsillo"]) .bol { display: none !important; }

/* La muestra de Bolsillo en el selector de temas de Ajustes, que se ve con
 * cualquier tema puesto: colores fijos, como las de Oscuro y Claro. */
.muestraTema--bolsillo { background: #C7CCD3; }
.muestraTema--bolsillo .mCabecera { background: #2A2F37; }
.muestraTema--bolsillo .mLinea    { background: #0B1620; opacity: .55; }
.muestraTema--bolsillo .mBoton    { background: #1F8FE0; }

/* ============================================================ la carcasa */
:root[data-tema="bolsillo"] {
  --fondo: #C7CCD3; --texto: #0B1620; --tenue: #3D4D5C; --tarjeta: #C9D1D8;
  --acento: #1F8FE0; --sobreAcento: #FFFFFF; --linea: #0B162033; --toque: transparent;
  --rosa: #0B1620;
  /* La escala la pone el JS en pantalla ancha; en móvil no se usa. */
  --bolEscala: 1;
  /* Las zonas seguras del iPhone (muesca, isla, barra de inicio), en variables para
   * sumarlas al relleno de la carcasa y para poder simularlas en las pruebas. */
  --bolArriba: env(safe-area-inset-top, 0px); --bolAbajo: env(safe-area-inset-bottom, 0px);
  --bolIzda: env(safe-area-inset-left, 0px); --bolDcha: env(safe-area-inset-right, 0px);
  overflow: hidden; overscroll-behavior: none;
}
:root[data-tema="bolsillo"] body {
  background: #0F1216; overflow: hidden; overscroll-behavior: none; font: 15px/normal "Michroma", "Arial", sans-serif;
  -webkit-font-smoothing: auto;
}
/* `#app` ES la carcasa. Con una puerta abierta -entrar, mirar el correo- se
 * esconde con `.oculto`, pero aquí la carcasa se queda y la puerta sale en la
 * pantalla de píxeles, como en la muestra. */
:root[data-tema="bolsillo"] #app,
:root[data-tema="bolsillo"] #app.oculto {
  display: flex !important; flex-direction: column; gap: 16px;
  position: fixed; left: 50%; top: 50%; width: 390px; height: 844px;
  box-sizing: border-box; padding: 18px 20px 14px;
  transform: translate(-50%, -50%) scale(var(--bolEscala));
  font: 16px/normal "Michroma", "Arial", sans-serif; color: #22262C;
  background-color: #C7CCD3;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.65), inset 0 -4px 0 rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.12);
}
:root[data-tema="bolsillo"] #app:not(.oculto) ~ .puerta { display: none !important; }
:root[data-tema="bolsillo"] button { font-family: inherit; }
/* En móvil la carcasa va fija a los cuatro bordes, sin márgenes; la pantalla
 * de píxeles se estira o encoge. El documento entero toma el color de la
 * carcasa, para que al estirar la página o mover la barra de Safari no asome
 * nada oscuro. Las zonas seguras se SUMAN al relleno de la muestra: la muesca,
 * la isla y la barra de inicio caen sobre la carcasa. */
@media (max-width: 600px) {
  :root[data-tema="bolsillo"], :root[data-tema="bolsillo"] body { background: #C7CCD3; }
  :root[data-tema="bolsillo"] #app,
  :root[data-tema="bolsillo"] #app.oculto {
    inset: 0; width: auto; height: auto; transform: none;
    padding: calc(18px + var(--bolArriba)) calc(20px + var(--bolDcha)) calc(14px + var(--bolAbajo)) calc(20px + var(--bolIzda));
  }
}
/* En Safari instalado la hora es blanca (black-translucent) y cae sobre la
 * carcasa clara: una sombra suave justo debajo de ella la deja leer. Sin zona
 * segura arriba -el navegador normal- mide 0 y no se ve. */
:root[data-tema="bolsillo"] #app::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--bolArriba); pointer-events: none;
  background: linear-gradient(rgba(14,17,22,.55), rgba(14,17,22,0));
}

/* La fila de arriba: el nombre, la insignia y el botón de ajustes. */
:root[data-tema="bolsillo"] .cabecera {
  position: static; flex: none; height: 44px; margin: 0; max-width: none; padding: 0;
  background: none; display: flex; flex-wrap: nowrap; align-items: center;
  justify-content: space-between; gap: 10px;
}
:root[data-tema="bolsillo"] .marcaIcono,
:root[data-tema="bolsillo"] .cabeceraCentro,
:root[data-tema="bolsillo"] #instalar,
:root[data-tema="bolsillo"] #saludo,
:root[data-tema="bolsillo"] #quedan { display: none !important; }
:root[data-tema="bolsillo"] .cabeceraExtra { display: contents; }
:root[data-tema="bolsillo"] #marcaTextoLogo {
  flex: 0 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0;
}
:root[data-tema="bolsillo"] .marca {
  font-size: 16px; font-weight: 400; letter-spacing: .06em; color: #1D2127; text-transform: lowercase;
}
:root[data-tema="bolsillo"] #marcaTextoLogo::after {
  content: "MÚSICA DIGITAL"; font-size: 8px; letter-spacing: .18em; color: #3A414B;
  border: 1px solid #6B737E; border-radius: 4px; padding: 3px 6px; white-space: nowrap;
}
:root[data-tema="bolsillo"] #iniciarSesion {
  font: 0/0 "Silkscreen", "Courier New", monospace;
  border: 2px solid #0B1620; border-radius: 2px; padding: 5px 6px 4px; background: transparent; color: #0B1620;
}
:root[data-tema="bolsillo"] #iniciarSesion::after {
  content: "ENTRAR"; font: 10px/normal "Silkscreen", "Courier New", monospace; letter-spacing: .06em;
}
:root[data-tema="bolsillo"] .cabecera:has(#iniciarSesion:not(.oculto)) #marcaTextoLogo::after { display: none; }
:root[data-tema="bolsillo"] .bolAbrir, :root[data-tema="bolsillo"] #botonAjustes {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0;
  background: #2A2F37; color: #E8EDF2; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 2px 0 rgba(0,0,0,.35); font: 13.3333px Arial; cursor: pointer;
}
:root[data-tema="bolsillo"] .bolAbrir { margin-left: auto; }
:root[data-tema="bolsillo"] .bolAbrir[data-vacio="true"] { opacity: .5; }
/* La rueda de la muestra (un círculo con ocho rayas), no la de siempre. */
:root[data-tema="bolsillo"] #botonAjustes .d { display: none; }
:root[data-tema="bolsillo"] #botonAjustes::before {
  content: ""; width: 18px; height: 18px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
:root[data-tema="bolsillo"] #botonAjustes[aria-pressed="true"],
:root[data-tema="bolsillo"] .bolAbrir[aria-pressed="true"] { background: #1F8FE0; }

/* El marco negro y la pantalla de píxeles. Crece o encoge con el alto. */
:root[data-tema="bolsillo"] .bolMarco {
  display: block; flex: 1 1 0; min-height: 0; background: #0E1116; border-radius: 16px; padding: 12px;
  box-sizing: border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 0 rgba(255,255,255,.5);
  position: relative;
}
:root[data-tema="bolsillo"] .bolLcd {
  height: 100%; box-sizing: border-box; border-radius: 6px; background-color: #F4F6F8;
  background-image: repeating-linear-gradient(0deg, rgba(11,22,32,.05) 0 1px, transparent 1px 3px),
                    repeating-linear-gradient(90deg, rgba(11,22,32,.05) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 18px rgba(11,22,32,.10); color: #0B1620;
  font-family: "Pixelify Sans", "Courier New", monospace; display: flex; flex-direction: column;
  overflow: hidden;
}
:root[data-tema="bolsillo"] .bolEstado {
  display: flex; justify-content: space-between; align-items: center; padding: 7px 10px 6px;
  font-family: "Silkscreen", "Courier New", monospace; font-size: 11px; letter-spacing: .04em;
  border-bottom: 2px solid #0B1620; flex: none;
}
:root[data-tema="bolsillo"] .bolEstadoCentro {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer;
}
/* La zona táctil es toda la barra de estado, de borde a borde de la pantalla, y 44 px de alto: un
 * pseudo-elemento que sale del botón y se ancla al marco (la pantalla no es el bloque de
 * referencia, así que no lo recorta). No cambia nada de lo que se ve. */
:root[data-tema="bolsillo"] .bolEstadoCentro::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 44px;
}
:root[data-tema="bolsillo"] .bolPila { display: inline-flex; align-items: center; gap: 1px; }
:root[data-tema="bolsillo"] .bolPila i { display: block; width: 5px; height: 9px; background: #0B1620; }
:root[data-tema="bolsillo"] .bolPila b { display: block; width: 2px; height: 5px; background: #0B1620; }
:root[data-tema="bolsillo"] .bolTitulo {
  display: flex; justify-content: space-between; background: #0B1620; color: #F4F6F8; flex: none;
  font-family: "Silkscreen", "Courier New", monospace; font-size: 13px; letter-spacing: .12em; padding: 6px 10px 5px;
}
:root[data-tema="bolsillo"] .bolAtras {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit;
  cursor: pointer; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:root[data-tema="bolsillo"] .bolTituloIzq { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-tema="bolsillo"] .bolTituloDcha { flex: none; padding-left: 10px; white-space: nowrap; }
:root[data-tema="bolsillo"] [hidden] { display: none !important; }
:root[data-tema="bolsillo"] .bolPantalla {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}

/* Las tres píldoras. */
:root[data-tema="bolsillo"] .bolPastillas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: none;
}
:root[data-tema="bolsillo"] .bolPastilla {
  height: 40px; border: 0; border-radius: 20px; background: #2A2F37; color: #E8EDF2;
  font-family: "Michroma", "Arial", sans-serif; font-size: 9px; letter-spacing: .14em;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 2px 0 rgba(0,0,0,.35); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0;
}
:root[data-tema="bolsillo"] .bolLuz { width: 6px; height: 6px; border-radius: 50%; background: #4B525C; }
:root[data-tema="bolsillo"] .bolPastilla[aria-pressed="true"] .bolLuz {
  background: #3FB4FF; box-shadow: 0 0 6px 1px rgba(63,180,255,.8);
}

/* La cruceta. */
:root[data-tema="bolsillo"] .bolCruz {
  display: block; flex: none; position: relative; width: 210px; height: 210px; align-self: center;
}
:root[data-tema="bolsillo"] .bolCruzV, :root[data-tema="bolsillo"] .bolCruzH {
  position: absolute; border-radius: 16px; background: #2A2F37;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 3px 0 rgba(0,0,0,.35);
}
:root[data-tema="bolsillo"] .bolCruzV { left: 70px; top: 0; width: 70px; height: 210px; }
:root[data-tema="bolsillo"] .bolCruzH { left: 0; top: 70px; width: 210px; height: 70px; }
:root[data-tema="bolsillo"] .bolBrazo {
  position: absolute; width: 70px; height: 70px; border: 0; background: transparent; color: #E8EDF2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0;
  font-family: "Michroma", "Arial", sans-serif; font-size: 7px; letter-spacing: .12em; cursor: pointer; border-radius: 14px;
}
:root[data-tema="bolsillo"] .bolBrazo.arriba { left: 70px; top: 0; }
:root[data-tema="bolsillo"] .bolBrazo.izq { left: 0; top: 70px; }
:root[data-tema="bolsillo"] .bolBrazo.der { left: 140px; top: 70px; }
:root[data-tema="bolsillo"] .bolBrazo.bajo { left: 70px; top: 140px; }
:root[data-tema="bolsillo"] .bolCentro {
  position: absolute; left: 73px; top: 73px; width: 64px; height: 64px; border-radius: 50%; border: 0; padding: 0;
  background: #1F8FE0; color: #FFFFFF;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.25), 0 0 0 4px #1A1E24;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font: 13.3333px Arial;
}
:root[data-tema="bolsillo"] .bolGrabado {
  display: block; flex: none; font-size: 8px; letter-spacing: .24em; color: #4A525D; text-align: center;
  margin-top: 3px;
}
/* Si el alto no da, la cruceta baja a 180×180 y no cambia nada más. */
@media (max-height: 699px) {
  :root[data-tema="bolsillo"] .bolCruz { transform-origin: top left; width: 180px; height: 180px; }
  :root[data-tema="bolsillo"] .bolCruzV { left: 60px; width: 60px; height: 180px; }
  :root[data-tema="bolsillo"] .bolCruzH { top: 60px; width: 180px; height: 60px; }
  :root[data-tema="bolsillo"] .bolBrazo { width: 60px; height: 60px; }
  :root[data-tema="bolsillo"] .bolBrazo.arriba { left: 60px; }
  :root[data-tema="bolsillo"] .bolBrazo.izq { top: 60px; }
  :root[data-tema="bolsillo"] .bolBrazo.der { left: 120px; top: 60px; }
  :root[data-tema="bolsillo"] .bolBrazo.bajo { left: 60px; top: 120px; }
  :root[data-tema="bolsillo"] .bolCentro { left: 58px; top: 58px; }
}

/* El foco del teclado, el de la muestra. */
:root[data-tema="bolsillo"] button:focus-visible,
:root[data-tema="bolsillo"] input:focus-visible,
:root[data-tema="bolsillo"] .bolListas:focus-visible,
:root[data-tema="bolsillo"] .carrusel:focus-visible,
:root[data-tema="bolsillo"] .linea:focus-visible {
  outline: 2px solid #1F8FE0; outline-offset: 3px;
}

/* Lo que la aplicación pinta por su cuenta y aquí no tiene sitio. */
:root[data-tema="bolsillo"] .barrita,
:root[data-tema="bolsillo"] .abajo,
:root[data-tema="bolsillo"] .bibliotecaLateral,
:root[data-tema="bolsillo"] .flecha,
:root[data-tema="bolsillo"] .vozBuscar,
:root[data-tema="bolsillo"] .fondoGrande,
:root[data-tema="bolsillo"] .grande::after { display: none !important; }

/* ===================================================== la pantalla por dentro */
/* Cada «pantalla» -la columna con las vistas, el reproductor, la hoja, la
 * puerta- es una capa que llena el hueco bajo la barra de título; lo que no
 * cabe se desplaza en vertical, sin barra. */
:root[data-tema="bolsillo"] .columna,
:root[data-tema="bolsillo"] .grande,
:root[data-tema="bolsillo"] .hoja,
:root[data-tema="bolsillo"] .puertaDentro {
  box-sizing: border-box; padding: 9px 10px 6px; display: flex; flex-direction: column; gap: 7px;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none; min-height: 0;
  font-family: "Pixelify Sans", "Courier New", monospace; color: #0B1620; font-size: 15px; line-height: normal;
}
:root[data-tema="bolsillo"] .columna::-webkit-scrollbar,
:root[data-tema="bolsillo"] .grandeDentro::-webkit-scrollbar,
:root[data-tema="bolsillo"] .hoja::-webkit-scrollbar,
:root[data-tema="bolsillo"] .puerta::-webkit-scrollbar,
:root[data-tema="bolsillo"] .carrusel::-webkit-scrollbar,
:root[data-tema="bolsillo"] .pastillas::-webkit-scrollbar,
:root[data-tema="bolsillo"] .rejillaFichas::-webkit-scrollbar,
:root[data-tema="bolsillo"] .bolListas::-webkit-scrollbar { display: none; }
:root[data-tema="bolsillo"] .columna { flex: 1; max-width: none; margin: 0; }
:root[data-tema="bolsillo"] .vista { padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1 0 auto; }
:root[data-tema="bolsillo"] .vista.oculto { display: none; }
:root[data-tema="bolsillo"] .tenue { color: #3D4D5C; }
:root[data-tema="bolsillo"] .error { color: #0B1620; font-size: 13px; max-width: none; text-decoration: underline; }
:root[data-tema="bolsillo"] p { margin: 0; }
:root[data-tema="bolsillo"] a { color: #0B1620; }

/* Rótulos de sección: el `.sec` de la muestra. */
:root[data-tema="bolsillo"] h3.fila,
:root[data-tema="bolsillo"] .artistaSeccion > h2,
:root[data-tema="bolsillo"] .rotuloAjustes,
:root[data-tema="bolsillo"] .bolSec {
  display: flex; justify-content: space-between; margin: 0; padding: 0;
  font-family: "Silkscreen", "Courier New", monospace; font-size: 10px; font-weight: 400;
  letter-spacing: .14em; color: #3D4D5C; text-transform: uppercase; line-height: normal;
}
:root[data-tema="bolsillo"] h3.fila::after { content: attr(data-dcha); }
:root[data-tema="bolsillo"] h3.fila:has(+ .filaCarrusel)::after { content: "DESLIZA ▸"; }
:root[data-tema="bolsillo"] .artistaSeccion { margin: 0; display: flex; flex-direction: column; gap: 7px; }

/* ----------------------------------------------------------- las filas
 * `.linea` es la fila de toda la aplicación (listas, búsqueda, cola,
 * artista). Se viste como `.fila` de la muestra: título de 17 px, artista de
 * 14 px, y la que suena, invertida. */
:root[data-tema="bolsillo"] .linea, :root[data-tema="bolsillo"] .bolFila {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center;
  padding: 3px 6px; margin: 0; border-radius: 2px; cursor: pointer; background: transparent;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; color: inherit;
}
:root[data-tema="bolsillo"] .linea:hover { background: transparent; }
:root[data-tema="bolsillo"] .linea .txt, :root[data-tema="bolsillo"] .bolFila .txt { min-width: 0; flex: none; }
:root[data-tema="bolsillo"] .linea .txt > div:first-child {
  font-size: 17px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.05; margin: 0;
}
:root[data-tema="bolsillo"] .linea .txt > .tenue,
:root[data-tema="bolsillo"] .linea .txt .enlaceArtista,
:root[data-tema="bolsillo"] .linea .txt div + div {
  font-size: 14px; color: #3D4D5C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.05; margin: 0; text-decoration: none;
}
:root[data-tema="bolsillo"] .linea .dur {
  font-family: "Silkscreen", "Courier New", monospace; font-size: 11px; font-variant-numeric: tabular-nums;
  color: inherit;
}
:root[data-tema="bolsillo"] .linea .mas,
:root[data-tema="bolsillo"] .linea .puesto,
:root[data-tema="bolsillo"] .linea .repro,
:root[data-tema="bolsillo"] .linea .agarre { display: none; }
:root[data-tema="bolsillo"] .linea.sonando { background: #0B1620; color: #F4F6F8; }
:root[data-tema="bolsillo"] .linea.sonando .txt > div:first-child { color: #F4F6F8; font-weight: 500; }
:root[data-tema="bolsillo"] .linea.sonando .txt > .tenue,
:root[data-tema="bolsillo"] .linea.sonando .txt .enlaceArtista,
:root[data-tema="bolsillo"] .linea.sonando .tenue { color: #B8C4CF; }
:root[data-tema="bolsillo"] .linea.muda { opacity: .55; }
:root[data-tema="bolsillo"] .linea.muda .dur::after { content: ""; }

/* La carátula: cuadro de 34 px con marco de 2 px, en blanco y negro. Sin
 * carátula -la imagen vacía de la aplicación-, el cuadro de píxeles. */
:root[data-tema="bolsillo"] .linea img, :root[data-tema="bolsillo"] .bolTapa,
:root[data-tema="bolsillo"] .miniatura {
  box-sizing: border-box; width: 34px; height: 34px; border: 2px solid #0B1620; border-radius: 0; object-fit: cover;
  background-color: #C9D1D8; background-image: radial-gradient(#0B1620 30%, transparent 32%); background-size: 4px 4px;
  box-shadow: none; flex: none; overflow: hidden;
}
:root[data-tema="bolsillo"] .linea img:not([src^="data:"]),
:root[data-tema="bolsillo"] .bolTapa:not([src^="data:"]),
:root[data-tema="bolsillo"] .miniatura img:not([src^="data:"]) { filter: grayscale(1) contrast(1.1); }
:root[data-tema="bolsillo"] .linea:nth-child(3n+2) img, :root[data-tema="bolsillo"] .bolFila:nth-child(3n+2) .bolTapa { background-size: 3px 3px; }
:root[data-tema="bolsillo"] .linea:nth-child(3n) img, :root[data-tema="bolsillo"] .bolFila:nth-child(3n) .bolTapa { background-size: 5px 5px; }
:root[data-tema="bolsillo"] .linea.sonando img { border-color: #F4F6F8; }
:root[data-tema="bolsillo"] .miniatura::before { content: none; }
:root[data-tema="bolsillo"] .miniatura img { width: 100%; height: 100%; border: 0; background: none; }

/* Dónde no hay carátula sino número -listas, artista, cola-. */
:root[data-tema="bolsillo"] #canciones, :root[data-tema="bolsillo"] #popularesArtista,
:root[data-tema="bolsillo"] #todasArtista, :root[data-tema="bolsillo"] #laCola { counter-reset: bolN; display: flex; flex-direction: column; gap: 7px; }
:root[data-tema="bolsillo"] #laCola { counter-reset: bolN var(--bolDesde, 0); }
:root[data-tema="bolsillo"] #canciones .linea, :root[data-tema="bolsillo"] #popularesArtista .linea,
:root[data-tema="bolsillo"] #todasArtista .linea, :root[data-tema="bolsillo"] #laCola .linea,
:root[data-tema="bolsillo"] #cola .linea.sonando {
  grid-template-columns: 22px minmax(0, 1fr) auto; counter-increment: bolN;
}
:root[data-tema="bolsillo"] #canciones .linea img, :root[data-tema="bolsillo"] #popularesArtista .linea img,
:root[data-tema="bolsillo"] #todasArtista .linea img, :root[data-tema="bolsillo"] #cola .linea img { display: none; }
:root[data-tema="bolsillo"] #canciones .linea::before, :root[data-tema="bolsillo"] #popularesArtista .linea::before,
:root[data-tema="bolsillo"] #todasArtista .linea::before, :root[data-tema="bolsillo"] #laCola .linea::before {
  content: counter(bolN, decimal-leading-zero); order: -1;
  font-family: "Silkscreen", "Courier New", monospace; font-size: 11px; font-variant-numeric: tabular-nums;
}
:root[data-tema="bolsillo"] #canciones .linea.sonando::before, :root[data-tema="bolsillo"] #popularesArtista .linea.sonando::before,
:root[data-tema="bolsillo"] #todasArtista .linea.sonando::before, :root[data-tema="bolsillo"] #laCola .linea.sonando::before,
:root[data-tema="bolsillo"] #cola .linea.sonando::before { content: "▶"; }
:root[data-tema="bolsillo"] #cola .linea.sonando::before { order: -1; font-family: "Silkscreen", "Courier New", monospace; font-size: 11px; }
/* En los resultados de búsqueda la fila lleva carátula y no duración. */
:root[data-tema="bolsillo"] #listaCanciones { display: flex; flex-direction: column; gap: 7px; }
:root[data-tema="bolsillo"] #listaCanciones .linea .dur { display: none; }
:root[data-tema="bolsillo"] #listaCanciones .linea { grid-template-columns: 34px minmax(0, 1fr); }
:root[data-tema="bolsillo"] #filas .linea, :root[data-tema="bolsillo"] .bolInicio .linea { grid-template-columns: 16px minmax(0, 1fr); }
:root[data-tema="bolsillo"] .bolInicio .linea img { display: none; }
:root[data-tema="bolsillo"] .bolInicio .linea .dur { display: none; }
:root[data-tema="bolsillo"] .bolInicio .linea::before {
  content: ""; width: 16px; height: 16px; background-color: currentColor; order: -1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M3 0h4v2H4v4H3V7H1V6H0V5h1V4h2z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M3 0h4v2H4v4H3V7H1V6H0V5h1V4h2z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
:root[data-tema="bolsillo"] .bolInicio { display: flex; flex-direction: column; gap: 7px; }
:root[data-tema="bolsillo"] .bolInicio .bolFilas { display: flex; flex-direction: column; gap: 7px; }

/* Los huesos de mientras carga. */
:root[data-tema="bolsillo"] .hueso { background: #D3D9DF; border-radius: 0; animation: none; }
:root[data-tema="bolsillo"] .hueso.cuadro { width: 34px; height: 34px; }

/* -------------------------------------------- las filas que se deslizan */
:root[data-tema="bolsillo"] .carrusel, :root[data-tema="bolsillo"] .bolListas,
:root[data-tema="bolsillo"] .rejillaFichas {
  display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 0 0 2px; margin: 0;
}
:root[data-tema="bolsillo"] .filaCarrusel { display: block; }
:root[data-tema="bolsillo"] .tarjeta, :root[data-tema="bolsillo"] .redonda,
:root[data-tema="bolsillo"] .bolArtistaT {
  flex: 0 0 76px; scroll-snap-align: start; border: 0; background: transparent; color: #0B1620;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0;
  font-family: "Pixelify Sans", "Courier New", monospace; font-size: 13px; text-align: center; cursor: pointer;
}
:root[data-tema="bolsillo"] .tarjetaAbrir { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 0; text-align: center; }
:root[data-tema="bolsillo"] .tarjeta .miniatura, :root[data-tema="bolsillo"] .redonda .miniatura,
:root[data-tema="bolsillo"] .bolArtistaT .bolTapa { width: 56px; height: 56px; }
:root[data-tema="bolsillo"] .rejillaFichas .tarjeta .miniatura, :root[data-tema="bolsillo"] .rejillaFichas .redonda .miniatura { width: 56px; height: 56px; aspect-ratio: auto; }
:root[data-tema="bolsillo"] .redonda .miniatura, :root[data-tema="bolsillo"] .miniatura.redonda,
:root[data-tema="bolsillo"] .bolArtistaT .bolTapa { border-radius: 50%; }
:root[data-tema="bolsillo"] .tarjeta div, :root[data-tema="bolsillo"] .redonda div {
  width: 100%; margin: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:root[data-tema="bolsillo"] .tarjeta div + div, :root[data-tema="bolsillo"] .tarjeta > .tenue { font-size: 12px; width: 100%; margin: 0; }
:root[data-tema="bolsillo"] .bolListaT {
  flex: 0 0 112px; scroll-snap-align: start; box-sizing: border-box; border: 2px solid #0B1620; border-radius: 2px;
  background: transparent; color: #0B1620; text-align: left; padding: 5px 7px 4px;
  font-family: "Pixelify Sans", "Courier New", monospace; display: flex; flex-direction: column; gap: 3px; cursor: pointer;
}
:root[data-tema="bolsillo"] .bolListaT .n { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-tema="bolsillo"] .bolListaT .c { font-size: 12px; color: #3D4D5C; }
:root[data-tema="bolsillo"] .bolListaT.nueva { border-style: dashed; }

/* ----------------------------------------------------- teclas y casillas */
:root[data-tema="bolsillo"] .bolTeclas, :root[data-tema="bolsillo"] .accionesLista,
:root[data-tema="bolsillo"] .artistaAcciones, :root[data-tema="bolsillo"] .temas,
:root[data-tema="bolsillo"] .pestanasAjustes, :root[data-tema="bolsillo"] .cajaAjustes .flojos,
:root[data-tema="bolsillo"] .mosaico {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; border: 0;
}
:root[data-tema="bolsillo"] .bolTeclas.dos, :root[data-tema="bolsillo"] .pestanasAjustes,
:root[data-tema="bolsillo"] .cajaAjustes .flojos, :root[data-tema="bolsillo"] .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-tema="bolsillo"] .bolTeclas.una { grid-template-columns: minmax(0, 1fr); }
:root[data-tema="bolsillo"] .bolTecla, :root[data-tema="bolsillo"] .accionesLista button,
:root[data-tema="bolsillo"] .artistaAcciones button, :root[data-tema="bolsillo"] .temas button,
:root[data-tema="bolsillo"] .pestanasAjustes button, :root[data-tema="bolsillo"] .cajaAjustes .flojos button,
:root[data-tema="bolsillo"] .mosaico button, :root[data-tema="bolsillo"] .pastillas button,
:root[data-tema="bolsillo"] #traerCaja button, :root[data-tema="bolsillo"] .cajaLocal .flojos button,
:root[data-tema="bolsillo"] .fallo .principal, :root[data-tema="bolsillo"] .flojos button {
  box-sizing: border-box; border: 2px solid #0B1620; border-radius: 2px; background: transparent; color: #0B1620;
  text-align: center; font-family: "Silkscreen", "Courier New", monospace; font-size: 10px; font-weight: 400;
  letter-spacing: .06em; padding: 6px 2px 5px; cursor: pointer; text-transform: uppercase; line-height: normal;
  display: block; width: auto; height: auto; min-height: 0; margin: 0;
}
:root[data-tema="bolsillo"] .bolTecla.on, :root[data-tema="bolsillo"] .bolTecla[aria-pressed="true"],
:root[data-tema="bolsillo"] .accionesLista .principal, :root[data-tema="bolsillo"] .artistaAcciones .principal,
:root[data-tema="bolsillo"] .artistaAcciones .siguiendo, :root[data-tema="bolsillo"] .temas button.puesta,
:root[data-tema="bolsillo"] .pestanasAjustes button.puesta, :root[data-tema="bolsillo"] .cajaAjustes .flojos button.puesta,
:root[data-tema="bolsillo"] .pastillas button.puesta, :root[data-tema="bolsillo"] .bolTecla.encendido,
:root[data-tema="bolsillo"] .fallo .principal {
  background: #0B1620; color: #F4F6F8; border-color: #0B1620;
}
:root[data-tema="bolsillo"] .accionesLista .d, :root[data-tema="bolsillo"] .artistaAcciones .d { display: none; }
:root[data-tema="bolsillo"] #sonarTodo, :root[data-tema="bolsillo"] #sonarArtista { background: #0B1620; color: #F4F6F8; }
:root[data-tema="bolsillo"] .pestanasAjustes { border: 0; margin: 0; }
:root[data-tema="bolsillo"] .pestanasAjustes button { margin: 0; }
:root[data-tema="bolsillo"] .artistaAcciones { margin: 0; }
:root[data-tema="bolsillo"] .artistaAcciones #compartirArtista { grid-column: 1 / -1; }
:root[data-tema="bolsillo"] .pastillas {
  display: flex; gap: 5px; overflow-x: auto; margin: 0; padding: 0 0 2px; scrollbar-width: none;
}
:root[data-tema="bolsillo"] .pastillas button { flex: none; padding: 6px 8px 5px; }
:root[data-tema="bolsillo"] .filaPastillas { display: block; }
:root[data-tema="bolsillo"] .mosaico button { height: auto; position: static; background: transparent !important; color: #0B1620; display: block; text-shadow: none; }
:root[data-tema="bolsillo"] .mosaico button img { display: none; }
:root[data-tema="bolsillo"] .mosaico button .nombreGenero { text-shadow: none; }
:root[data-tema="bolsillo"] .mosaico { margin-top: 0; }
:root[data-tema="bolsillo"] .mosaico > h3 { grid-column: 1 / -1; }
:root[data-tema="bolsillo"] #traerCaja, :root[data-tema="bolsillo"] .cajaLocal .flojos { display: flex; flex-direction: column; gap: 5px; margin: 0; }
:root[data-tema="bolsillo"] .enlace, :root[data-tema="bolsillo"] #olvidada, :root[data-tema="bolsillo"] #traerLista {
  border: 0; background: transparent; color: #0B1620; font-family: "Pixelify Sans", "Courier New", monospace;
  font-size: 15px; text-decoration: underline; cursor: pointer; padding: 4px 0; text-transform: none; letter-spacing: normal; align-self: center;
}
:root[data-tema="bolsillo"] .accion {
  border: 0; border-radius: 2px; background: #0B1620; color: #F4F6F8; font-family: "Silkscreen", "Courier New", monospace;
  font-size: 12px; letter-spacing: .12em; padding: 9px 0 8px; cursor: pointer; text-transform: uppercase;
}

/* ============================================================== Buscar */
:root[data-tema="bolsillo"] .cajaBuscar {
  position: static; background: none; padding: 0; display: flex; align-items: center; gap: 8px;
  border: 2px solid #0B1620; border-radius: 2px; padding: 6px 8px; font-size: 17px; z-index: auto;
}
:root[data-tema="bolsillo"] .cajaBuscar .lupa { display: none; }
:root[data-tema="bolsillo"] .cajaBuscar::before {
  content: ""; flex: none; width: 16px; height: 16px; background-color: #0B1620;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2 0h3v1h1v1h1v3H6v1h1v1h1v1H7V7H6V6H5v1H2V6H1V5H0V2h1V1h1zm0 2v3h3V2z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2 0h3v1h1v1h1v3H6v1h1v1h1v1H7V7H6V6H5v1H2V6H1V5H0V2h1V1h1zm0 2v3h3V2z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  order: -1;
}
:root[data-tema="bolsillo"] .cajaBuscar input {
  flex: 1; min-width: 0; width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: #0B1620;
  font-family: "Pixelify Sans", "Courier New", monospace; font-size: 17px; caret-color: transparent;
  -webkit-appearance: none; appearance: none; outline: 0;
}
/* El cursor de bloque de la muestra, detrás del texto; solo con la casilla enfocada. */
:root[data-tema="bolsillo"] .cajaBuscar { position: relative; top: 0; }
:root[data-tema="bolsillo"] .bolEco {
  position: absolute; left: 34px; right: 10px; top: 2px; bottom: 2px; display: flex; align-items: center;
  overflow: hidden; pointer-events: none; font: 17px "Pixelify Sans", "Courier New", monospace;
}
:root[data-tema="bolsillo"] .bolEcoTxt { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: pre; visibility: hidden; }
:root[data-tema="bolsillo"] .bolCursor {
  flex: none; width: 8px; height: 16px; background: #0B1620; visibility: hidden; animation: bolParpadeo 1s steps(1) infinite;
}
:root[data-tema="bolsillo"] #caja:focus ~ .bolEco .bolCursor { visibility: visible; }
@keyframes bolParpadeo { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { :root[data-tema="bolsillo"] .bolCursor { animation: none; } }
:root[data-tema="bolsillo"] .cajaBuscar input::placeholder { color: #3D4D5C; opacity: 1; }
:root[data-tema="bolsillo"] .cajaBuscar input::-webkit-search-cancel-button { display: none; }
:root[data-tema="bolsillo"] .cajaBuscar:focus-within { outline: 2px solid #1F8FE0; outline-offset: 3px; }
:root[data-tema="bolsillo"] #resultados { display: flex; flex-direction: column; gap: 7px; }
/* Primero las canciones, luego los artistas y los discos, como en la muestra. */
:root[data-tema="bolsillo"] #resultados > h3.fila { order: 1; }
:root[data-tema="bolsillo"] #resultados > #listaCanciones { order: 2; }
:root[data-tema="bolsillo"] #resultados > h3.fila:has(+ .filaCarrusel) { order: 3; }
:root[data-tema="bolsillo"] #resultados > .filaCarrusel { order: 4; }

/* ========================================================== Biblioteca */
:root[data-tema="bolsillo"] #vistaBiblioteca[data-bol="listas"] #biblioteca,
:root[data-tema="bolsillo"] #vistaBiblioteca[data-bol="artistas"] #biblioteca { display: none; }
:root[data-tema="bolsillo"] #vistaBiblioteca[data-bol="aparato"] #biblioteca > :not(#cajaLocal) { display: none; }
:root[data-tema="bolsillo"] #vistaBiblioteca[data-bol="aparato"] .bolBibListas { display: none; }
:root[data-tema="bolsillo"] #vistaBiblioteca[data-bol="aparato"] .bolBibPie { display: none; }
:root[data-tema="bolsillo"] .bolBiblioteca { display: flex; flex-direction: column; gap: 7px; flex: 1; min-height: 0; }
:root[data-tema="bolsillo"] .bolBibListas { display: flex; flex-direction: column; gap: 7px; }
:root[data-tema="bolsillo"] .bolBibPie { display: flex; flex-direction: column; gap: 7px; margin-top: auto; padding-top: 4px; }
:root[data-tema="bolsillo"] .bolBibListas .enlace { align-self: flex-start; padding: 4px 6px; }
:root[data-tema="bolsillo"] .bolIcono {
  display: flex; align-items: center; justify-content: center; background-color: #F4F6F8; background-image: none;
}
:root[data-tema="bolsillo"] .bolIcono::before {
  content: ""; width: 18px; height: 18px; background-color: #0B1620;
  -webkit-mask: var(--bolIcono) center / 18px 18px no-repeat; mask: var(--bolIcono) center / 18px 18px no-repeat;
}
:root[data-tema="bolsillo"] .bolIcono.corazon { --bolIcono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 1h2v1h2V1h2v1h1v2H7v1H6v1H5v1H3V6H2V5H1V4H0V2h1z'/%3E%3C/svg%3E"); }
:root[data-tema="bolsillo"] .bolIcono.reloj { --bolIcono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2 0h4v1h1v1h1v4H7v1H6v1H2V7H1V6H0V2h1V1h1zm0 2v4h4V2H5v2H4V2z'/%3E%3C/svg%3E"); }
:root[data-tema="bolsillo"] .bolFila.sel .bolIcono { background-color: #F4F6F8; }
:root[data-tema="bolsillo"] .bolFila .t { font-size: 17px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.05; }
:root[data-tema="bolsillo"] .bolFila .a { font-size: 14px; color: #3D4D5C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.05; }
:root[data-tema="bolsillo"] .bolFila.sel { background: #0B1620; color: #F4F6F8; }
:root[data-tema="bolsillo"] .bolFila.sel .a { color: #B8C4CF; }
:root[data-tema="bolsillo"] .bolFila.sel .bolTapa { border-color: #F4F6F8; }
:root[data-tema="bolsillo"] .bolFila { text-align: left; border: 0; font-family: inherit; }
:root[data-tema="bolsillo"] .bolFila > span:not(.bolTapa) { min-width: 0; display: block; }
:root[data-tema="bolsillo"] .bolFila .t, :root[data-tema="bolsillo"] .bolFila .a { display: block; }
:root[data-tema="bolsillo"] .bolFila:hover { background: transparent; }
:root[data-tema="bolsillo"] .bolFila.sel:hover { background: #0B1620; }
:root[data-tema="bolsillo"] #cajaLocal .caja { background: transparent; border: 2px solid #0B1620; border-radius: 2px; padding: 5px 7px 4px; width: 100%; }
:root[data-tema="bolsillo"] .caja b { font-size: 15px; font-weight: 500; }
:root[data-tema="bolsillo"] .caja span { font-size: 12px; color: #3D4D5C; }

/* ============================================================== Lista */
:root[data-tema="bolsillo"] #vistaLista > .volver, :root[data-tema="bolsillo"] #vistaLista > .tapa,
:root[data-tema="bolsillo"] #vistaArtista > .volver { display: none; }
:root[data-tema="bolsillo"] .accionesLista { margin: 0; }
:root[data-tema="bolsillo"] #sonarTodo, :root[data-tema="bolsillo"] #mezclarTodo, :root[data-tema="bolsillo"] #compartirEsto,
:root[data-tema="bolsillo"] #sonarArtista, :root[data-tema="bolsillo"] #mezclarArtista { font-size: 0; }
:root[data-tema="bolsillo"] #sonarTodo::after, :root[data-tema="bolsillo"] #sonarArtista::after { content: "▶ SONAR"; font-size: 10px; }
:root[data-tema="bolsillo"] #mezclarTodo::after, :root[data-tema="bolsillo"] #mezclarArtista::after { content: "ALEATORIO"; font-size: 10px; }
:root[data-tema="bolsillo"] #compartirEsto::after { content: "COMPARTIR"; font-size: 10px; }
:root[data-tema="bolsillo"] #seguirArtista.siguiendo { font-size: 0; }
:root[data-tema="bolsillo"] #seguirArtista { font-size: 0; }
:root[data-tema="bolsillo"] #seguirArtista::after { content: "SEGUIR"; font-size: 10px; }
:root[data-tema="bolsillo"] #seguirArtista.siguiendo::after { content: "✓ SIGUIENDO"; }
:root[data-tema="bolsillo"] #compartirArtista { font-size: 0; }
:root[data-tema="bolsillo"] #compartirArtista::after { content: "COMPARTIR"; font-size: 10px; }
:root[data-tema="bolsillo"] #cola h3.fila { font-size: 0; }
:root[data-tema="bolsillo"] #cola h3.fila::before { content: attr(data-bol); font-size: 10px; }
:root[data-tema="bolsillo"] #cola h3.fila::after { content: none; }
:root[data-tema="bolsillo"] #laCola .linea { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
:root[data-tema="bolsillo"] #laCola .linea .mas {
  display: block; padding: 0 2px; font-family: "Silkscreen", "Courier New", monospace; font-size: 0; color: inherit; line-height: 1;
}
:root[data-tema="bolsillo"] #laCola .linea .mas::after { content: "×"; font-size: 16px; }
:root[data-tema="bolsillo"] #laCola .linea .mas .d { display: none; }
:root[data-tema="bolsillo"] .bolDur {
  font-family: "Silkscreen", "Courier New", monospace; font-size: 11px; font-variant-numeric: tabular-nums;
}
:root[data-tema="bolsillo"] #cola .linea.sonando { grid-template-columns: 22px minmax(0, 1fr) auto; }
:root[data-tema="bolsillo"] .bolMas {
  z-index: 20; position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 3px 10px 5px;
  font-family: "Silkscreen", "Courier New", monospace; font-size: 10px; letter-spacing: .14em; color: #3D4D5C;
  padding-top: 16px; background-image: linear-gradient(rgba(244,246,248,0), #F4F6F8 12px); pointer-events: none;
}

/* ============================================================= Artista */
:root[data-tema="bolsillo"] #artista { display: flex; flex-direction: column; gap: 9px; }
:root[data-tema="bolsillo"] .artistaCabecera { position: static; margin: 0; display: flex; gap: 12px; align-items: center; }
:root[data-tema="bolsillo"] .artistaFoto {
  box-sizing: border-box; width: 72px; height: 72px; border-radius: 50%; border: 2px solid #0B1620; object-fit: cover;
  filter: grayscale(1) contrast(1.1); background: #C9D1D8; flex: none;
}
:root[data-tema="bolsillo"] .artistaVelo { display: none; }
:root[data-tema="bolsillo"] .artistaCabecera:not(:has(.artistaFoto))::before {
  content: ""; box-sizing: border-box; width: 72px; height: 72px; border: 2px solid #0B1620; border-radius: 50%; flex: none;
  background-color: #C9D1D8; background-image: radial-gradient(#0B1620 30%, transparent 32%); background-size: 4px 4px;
}
:root[data-tema="bolsillo"] #artista:has(.seguir.siguiendo) .artistaNombre::after {
  content: "ARTISTA QUE SIGUES"; font-family: "Silkscreen", "Courier New", monospace; font-size: 10px; letter-spacing: .14em; color: #3D4D5C;
}
:root[data-tema="bolsillo"] .artistaNombre { position: static; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
:root[data-tema="bolsillo"] .artistaNombre h1 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: normal; }
:root[data-tema="bolsillo"] .artistaDato {
  margin: 0; font-family: "Silkscreen", "Courier New", monospace; font-size: 10px; letter-spacing: .14em; color: #3D4D5C; text-transform: uppercase;
}
:root[data-tema="bolsillo"] .artistaSeccion .rejillaFichas { margin: 0; }

/* ============================================================== Ajustes */
:root[data-tema="bolsillo"] .tituloAjustes { display: none; }
:root[data-tema="bolsillo"] #ajustes { display: flex; flex-direction: column; gap: 10px; }
:root[data-tema="bolsillo"] .rotuloAjustes { margin-bottom: -5px; }
:root[data-tema="bolsillo"] .cajaAjustes {
  background: none; border: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 5px;
}
:root[data-tema="bolsillo"] .cajaAjustes p { margin: 0; font-size: 15px; line-height: 1.2; }
:root[data-tema="bolsillo"] .cajaAjustes p.letraChica { font-size: 13px; }
:root[data-tema="bolsillo"] .cajaAjustes .flojos { margin: 0; }
:root[data-tema="bolsillo"] .cajaAjustes .flojos .principal { background: transparent; color: #0B1620; font-weight: 400; }
:root[data-tema="bolsillo"] .cajaAjustes .flojos button.peligro, :root[data-tema="bolsillo"] .peligro { color: #0B1620 !important; border-color: #0B1620 !important; }
:root[data-tema="bolsillo"] .cajaAjustes label.acepto { font-size: 14px; color: #3D4D5C; line-height: 1.2; gap: 8px; align-items: flex-start; }
:root[data-tema="bolsillo"] .cajaAjustes label.acepto input { accent-color: #0B1620; margin-top: 2px; }
:root[data-tema="bolsillo"] .cajaAjustes .separado { margin-top: 0; }
:root[data-tema="bolsillo"] .cajaAjustes a { color: #0B1620; text-decoration: underline; }
:root[data-tema="bolsillo"] .temas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-tema="bolsillo"] .temas button { display: block; }
:root[data-tema="bolsillo"] .muestraTema { display: none; }
:root[data-tema="bolsillo"] .etiquetaTema { display: block; min-height: 0; line-height: normal; }
/* «Seguir al sistema», entero, en su propia fila. */
:root[data-tema="bolsillo"] .temas button[data-pontema="sistema"] { grid-column: 1 / -1; }
/* Lo que el ajuste explica de más y la muestra no lleva. */
:root[data-tema="bolsillo"] .cajaAjustes > p.letraChica:first-child,
:root[data-tema="bolsillo"] .cajaAjustes > .flojos + p.letraChica:not(.separado) { display: none; }
:root[data-tema="bolsillo"] .rotuloAjustes:has(+ .cajaAjustes .temas) { font-size: 0; }
:root[data-tema="bolsillo"] .rotuloAjustes:has(+ .cajaAjustes .temas)::before { content: "TEMA"; font-size: 10px; }
:root[data-tema="bolsillo"] .cajaAjustes p.separado {
  font-family: "Silkscreen", "Courier New", monospace; font-size: 10px; letter-spacing: .14em; color: #3D4D5C; text-transform: uppercase; margin-top: 5px;
}
:root[data-tema="bolsillo"] .cajaAjustes label.acepto span { font-size: 13px; }

/* ===================================================== el reproductor */
:root[data-tema="bolsillo"] .grande {
  position: absolute; inset: 0; z-index: 5; padding: 0; gap: 0; overflow: hidden; background-color: #F4F6F8;
  background-image: repeating-linear-gradient(0deg, rgba(11,22,32,.05) 0 1px, transparent 1px 3px),
                    repeating-linear-gradient(90deg, rgba(11,22,32,.05) 0 1px, transparent 1px 3px);
}
:root[data-tema="bolsillo"] .grande.oculto { display: none; }
:root[data-tema="bolsillo"] .grandeDentro {
  box-sizing: border-box; position: relative; z-index: 1; height: 100%; max-width: none; margin: 0; width: 100%;
  padding: 9px 10px 6px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; overflow-y: auto; scrollbar-width: none;
}
:root[data-tema="bolsillo"] .grandeArriba, :root[data-tema="bolsillo"] .grandeCuerpo, :root[data-tema="bolsillo"] .grandeColumna { display: contents; }
:root[data-tema="bolsillo"] .grandeArriba > .icono, :root[data-tema="bolsillo"] #deDonde { display: none; }
:root[data-tema="bolsillo"] .bolSonando { display: flex; gap: 12px; align-items: flex-start; }
:root[data-tema="bolsillo"] .lienzo { margin: 0; display: block; flex: none; }
:root[data-tema="bolsillo"] .lienzo img, :root[data-tema="bolsillo"] .lienzoVacio {
  box-sizing: border-box; width: 118px; height: 118px; max-width: none; max-height: none; border: 2px solid #0B1620; border-radius: 0;
  object-fit: cover; box-shadow: none; display: block;
  background-color: #C9D1D8; background-image: radial-gradient(#0B1620 30%, transparent 32%); background-size: 5px 5px;
  filter: grayscale(1) contrast(1.1);
}
:root[data-tema="bolsillo"] .lienzoVacio { filter: none; }
:root[data-tema="bolsillo"] .lienzoVacio .d { display: none; }
:root[data-tema="bolsillo"] .bolSonandoTexto { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; flex: 1; }
:root[data-tema="bolsillo"] .rotulos { display: none; }
:root[data-tema="bolsillo"] .rotulosTexto { display: flex; flex-direction: column; gap: 6px; }
:root[data-tema="bolsillo"] .rotulosTexto h2 {
  margin: 0; font-size: 22px; font-weight: 600; line-height: 1.05; letter-spacing: normal; white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
:root[data-tema="bolsillo"] .rotulosTexto p, :root[data-tema="bolsillo"] .rotulosTexto .enlaceArtista { margin: 0; font-size: 16px; color: #3D4D5C; text-decoration: none; }
:root[data-tema="bolsillo"] .enlaceAlbum { display: none; }
:root[data-tema="bolsillo"] .bolDe {
  padding-top: 6px; font-family: "Silkscreen", "Courier New", monospace; font-size: 10px; letter-spacing: .14em; color: #3D4D5C; text-transform: uppercase;
}
/* La barra de 20 segmentos. El deslizador de siempre se queda encima,
 * invisible: es quien recibe el dedo. */
:root[data-tema="bolsillo"] .barraSitio { position: relative; display: flex; flex-direction: column; gap: 5px; width: auto; margin: 0; }
:root[data-tema="bolsillo"] .bolSeg { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; height: 12px; }
:root[data-tema="bolsillo"] .bolSeg span { background: #D3D9DF; box-shadow: inset 0 0 0 1px #0B1620; }
:root[data-tema="bolsillo"] .bolSeg span.on { background: #0B1620; }
:root[data-tema="bolsillo"] #barra { position: absolute; left: 0; top: 0; width: 100%; height: 12px; opacity: 0; margin: 0; }
:root[data-tema="bolsillo"] .tiempos { display: none; }
:root[data-tema="bolsillo"] .bolTiempos {
  display: flex; justify-content: space-between; margin: 0; font-family: "Silkscreen", "Courier New", monospace;
  font-size: 11px; color: #0B1620; font-variant-numeric: tabular-nums;
}
:root[data-tema="bolsillo"] .bolTeclasSonando { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
:root[data-tema="bolsillo"] #mezclar, :root[data-tema="bolsillo"] #repetir, :root[data-tema="bolsillo"] #corazon,
:root[data-tema="bolsillo"] #verLetra, :root[data-tema="bolsillo"] #verCola, :root[data-tema="bolsillo"] #masGrande {
  box-sizing: border-box; display: block; border: 2px solid #0B1620; border-radius: 2px; background: transparent; color: #0B1620;
  text-align: center; font-family: "Silkscreen", "Courier New", monospace; font-size: 0; letter-spacing: .06em; padding: 6px 2px 5px;
  cursor: pointer; width: auto; height: auto; opacity: 1;
}
:root[data-tema="bolsillo"] #mezclar::after, :root[data-tema="bolsillo"] #repetir::after, :root[data-tema="bolsillo"] #corazon::after,
:root[data-tema="bolsillo"] #verLetra::after, :root[data-tema="bolsillo"] #verCola::after, :root[data-tema="bolsillo"] #masGrande::after {
  font-size: 10px; line-height: normal;
}
:root[data-tema="bolsillo"] #mezclar::after { content: "ALEATORIO"; }
:root[data-tema="bolsillo"] #repetir::after { content: "REPETIR"; }
:root[data-tema="bolsillo"] #corazon::after { content: "♥ ME GUSTA"; }
:root[data-tema="bolsillo"] #verLetra::after { content: "LETRA"; }
:root[data-tema="bolsillo"] #verCola::after { content: "SIGUIENTES"; }
:root[data-tema="bolsillo"] #masGrande::after { content: "MÁS…"; }
:root[data-tema="bolsillo"] #mezclar.encendido, :root[data-tema="bolsillo"] #repetir.encendido, :root[data-tema="bolsillo"] #corazon.encendido,
:root[data-tema="bolsillo"] #verLetra.encendido, :root[data-tema="bolsillo"] #verCola.encendido { background: #0B1620; color: #F4F6F8; }
:root[data-tema="bolsillo"] #mezclar.apagado { opacity: 1; }
:root[data-tema="bolsillo"] #corazon .d, :root[data-tema="bolsillo"] #mezclar .d, :root[data-tema="bolsillo"] #repetir .d,
:root[data-tema="bolsillo"] #verLetra .d, :root[data-tema="bolsillo"] #verCola .d, :root[data-tema="bolsillo"] #masGrande .d { display: none; }
:root[data-tema="bolsillo"] .mandos, :root[data-tema="bolsillo"] .mandos.secundarios, :root[data-tema="bolsillo"] .volumenGrande,
:root[data-tema="bolsillo"] #anterior, :root[data-tema="bolsillo"] #sonar, :root[data-tema="bolsillo"] #siguiente,
:root[data-tema="bolsillo"] #bajarGrande, :root[data-tema="bolsillo"] #granArtistaTexto.oculto { display: none; }
/* Letra y cola: pantallas propias, no un panel debajo. */
:root[data-tema="bolsillo"] .panelGrande { width: auto; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
:root[data-tema="bolsillo"] .grande:has(#panelGrande:not(.oculto)) .bolSonando .lienzo,
:root[data-tema="bolsillo"] .grande:has(#panelGrande:not(.oculto)) .barraSitio,
:root[data-tema="bolsillo"] .grande:has(#panelGrande:not(.oculto)) .bolTeclasSonando,
:root[data-tema="bolsillo"] .grande:has(#panelGrande:not(.oculto)) .bolDe,
:root[data-tema="bolsillo"] .grande:has(#cola:not(.oculto)) .bolSonando { display: none; }
:root[data-tema="bolsillo"] .grande:has(#letraViva:not(.oculto)) .bolSonando { gap: 0; }
:root[data-tema="bolsillo"] .grande:has(#letraViva:not(.oculto)) .rotulosTexto h2 { font-size: 18px; font-weight: 600; line-height: normal; }
:root[data-tema="bolsillo"] .grande:has(#letraViva:not(.oculto)) .rotulosTexto { gap: 3px; }
:root[data-tema="bolsillo"] .grande:has(#letraViva:not(.oculto)) .rotulosTexto p,
:root[data-tema="bolsillo"] .grande:has(#letraViva:not(.oculto)) .rotulosTexto .enlaceArtista { font-size: 14px; }
:root[data-tema="bolsillo"] .letra { display: flex; flex-direction: column; gap: 9px; font-size: 17px; line-height: 1.15; width: auto; }
:root[data-tema="bolsillo"] .letra p { margin: 0; color: #0B1620; font-size: 17px; }
:root[data-tema="bolsillo"] .letra p.ahora { background: #0B1620; color: #F4F6F8; padding: 3px 6px; margin: 0 -6px; font-weight: 400; }
:root[data-tema="bolsillo"] .letra p:has(~ p.ahora) { color: #7C8894; }
:root[data-tema="bolsillo"] .cola { width: auto; display: flex; flex-direction: column; gap: 7px; }
:root[data-tema="bolsillo"] .bolPieLetra { display: none; }
:root[data-tema="bolsillo"] .grande:has(#letraViva:not(.oculto)) .bolPieLetra { display: grid; margin-top: auto; padding-top: 6px; }

/* ===================================================== las hojas (menú) */
:root[data-tema="bolsillo"] .menu {
  position: absolute; inset: 0; z-index: 8; display: block; padding: 0; background-color: #F4F6F8;
  background-image: repeating-linear-gradient(0deg, rgba(11,22,32,.05) 0 1px, transparent 1px 3px),
                    repeating-linear-gradient(90deg, rgba(11,22,32,.05) 0 1px, transparent 1px 3px);
}
:root[data-tema="bolsillo"] .menu.oculto { display: none; }
:root[data-tema="bolsillo"] .sabana { display: none; }
:root[data-tema="bolsillo"] .hoja {
  position: absolute; inset: 0; width: auto; max-height: none; background: none; border: 0; border-radius: 0; box-shadow: none; animation: none; gap: 0;
}
:root[data-tema="bolsillo"] .hoja .linea { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 2px 0 9px; margin: 0; border: 0; cursor: default; }
:root[data-tema="bolsillo"] .hoja > p.tenue { margin: 0 0 7px; font-size: 15px; line-height: 1.2; }
:root[data-tema="bolsillo"] .hoja h3.fila { margin: 0 0 7px; }
:root[data-tema="bolsillo"] .hoja button[data-que]:not(.principal), :root[data-tema="bolsillo"] .hoja button[data-que="nueva"] {
  display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 8px; padding: 8px 8px 7px; margin: 0;
  font-size: 17px; font-family: inherit; text-align: left; border: 0; border-bottom: 1px dashed #9AA6B1; border-radius: 0;
  background: transparent; color: inherit; cursor: pointer;
}
:root[data-tema="bolsillo"] .hoja button[data-que] .d { display: none; }
:root[data-tema="bolsillo"] .hoja button[data-que]:not(.principal)::after, :root[data-tema="bolsillo"] .hoja button[data-que="nueva"]::after {
  font-family: "Silkscreen", "Courier New", monospace; font-size: 10px; color: #3D4D5C; flex: none;
}
:root[data-tema="bolsillo"] .hoja button[data-que="fav"]::after { content: "♥"; }
:root[data-tema="bolsillo"] .hoja button[data-que="luego"]::after { content: "COLA"; }
:root[data-tema="bolsillo"] .hoja button[data-que="radio"]::after { content: "RADIO"; }
:root[data-tema="bolsillo"] .hoja button[data-que="lista"]::after { content: "LISTAS"; }
:root[data-tema="bolsillo"] .hoja button[data-que="enlace"]::after { content: "ENLACE"; }
:root[data-tema="bolsillo"] .hoja button[data-que="bajar"]::after { content: "M4A"; }
:root[data-tema="bolsillo"] .hoja button[data-que="quitar"]::after { content: "QUITAR"; }
:root[data-tema="bolsillo"] .hoja button[data-que="compartir"]::after { content: "CÓDIGO"; }
:root[data-tema="bolsillo"] .hoja button[data-que="nueva"] { border-bottom: 1px dashed #9AA6B1; }
:root[data-tema="bolsillo"] .hoja button[data-que="nueva"]::before { content: "+ "; white-space: pre; }
:root[data-tema="bolsillo"] .hoja button[data-que="nueva"]::after { content: "CREAR"; margin-left: auto; }
:root[data-tema="bolsillo"] .hoja button[data-que="nueva"] { justify-content: flex-start; gap: 0; font-weight: 400; }
:root[data-tema="bolsillo"] .hoja .filaLista .nombreLista { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-tema="bolsillo"] .hoja .filaLista .tenue { font-family: "Silkscreen", "Courier New", monospace; font-size: 10px; text-transform: uppercase; }
:root[data-tema="bolsillo"] .hoja button[data-que]:not(.principal).sel, :root[data-tema="bolsillo"] .hoja button[data-que="nueva"].sel { background: #0B1620; color: #F4F6F8; border-bottom-color: #0B1620; }
:root[data-tema="bolsillo"] .hoja button[data-que].sel::after, :root[data-tema="bolsillo"] .hoja button[data-que].sel .tenue, :root[data-tema="bolsillo"] .hoja .filaLista.sel .tenue { color: #B8C4CF; }
:root[data-tema="bolsillo"] .hoja button[data-que].ya:not(.sel) { color: #3D4D5C; }
:root[data-tema="bolsillo"] .hoja .principal:not([data-que="nueva"]) {
  box-sizing: border-box; display: block; width: 100%; border: 0; border-radius: 2px; background: #0B1620; color: #F4F6F8;
  font-family: "Silkscreen", "Courier New", monospace; font-size: 12px; letter-spacing: .12em; padding: 9px 0 8px; text-transform: uppercase; margin: 0 0 7px; font-weight: 400;
}
:root[data-tema="bolsillo"] .hoja button[data-que="cancelar"] {
  box-sizing: border-box; border: 2px solid #0B1620; border-radius: 2px; text-align: center; font-family: "Silkscreen", "Courier New", monospace; font-size: 10px; padding: 6px 2px 5px; text-transform: uppercase; display: block; width: auto;
}
:root[data-tema="bolsillo"] .hoja .formServidor { margin: 0 0 7px; }
:root[data-tema="bolsillo"] .hoja .formServidor input, :root[data-tema="bolsillo"] .puertaDentro input[type="email"],
:root[data-tema="bolsillo"] .puertaDentro input[type="password"], :root[data-tema="bolsillo"] .cajaAjustes input[type="text"] {
  box-sizing: border-box; width: 100%; border: 2px solid #0B1620; border-radius: 2px; background: transparent; color: #0B1620;
  font-family: "Pixelify Sans", "Courier New", monospace; font-size: 17px; padding: 6px 8px;
}
:root[data-tema="bolsillo"] .bolPie { margin-top: auto; padding-top: 8px; }

/* ============================================================== la puerta */
:root[data-tema="bolsillo"] .puerta {
  position: absolute; inset: 0; z-index: 9; display: block !important; padding: 0; overflow: hidden; background-color: #F4F6F8;
  background-image: repeating-linear-gradient(0deg, rgba(11,22,32,.05) 0 1px, transparent 1px 3px),
                    repeating-linear-gradient(90deg, rgba(11,22,32,.05) 0 1px, transparent 1px 3px);
}
:root[data-tema="bolsillo"] .puerta.oculto { display: none !important; }
:root[data-tema="bolsillo"] .puertaDentro { position: relative; width: auto; height: 100%; text-align: left; gap: 11px; }
:root[data-tema="bolsillo"] .puerta img, :root[data-tema="bolsillo"] .puerta h1, :root[data-tema="bolsillo"] .puerta .granIcono,
:root[data-tema="bolsillo"] #cerrarPuerta, :root[data-tema="bolsillo"] #cajaAcepta .tenue { display: none; }
:root[data-tema="bolsillo"] #porQuePuerta { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; font-size: 15px; line-height: 1.2; color: #3D4D5C; max-width: none; }
:root[data-tema="bolsillo"] #lemaPuerta { font-size: 15px; line-height: 1.2; }
:root[data-tema="bolsillo"] .puerta form { display: flex; flex-direction: column; gap: 11px; margin: 0; }
:root[data-tema="bolsillo"] .bolEtiqueta {
  display: block; margin-bottom: -7px; font-family: "Silkscreen", "Courier New", monospace; font-size: 10px; letter-spacing: .12em; color: #3D4D5C;
}
/* con el motivo a la vista, el lema de siempre sobra */
:root[data-tema="bolsillo"] #porQuePuerta:not(.oculto) ~ #lemaPuerta { display: none; }
:root[data-tema="bolsillo"] .puerta .acepto { font-size: 14px; color: #3D4D5C; line-height: 1.2; gap: 8px; padding: 0; }
:root[data-tema="bolsillo"] .puerta button[type="submit"] {
  border: 0; border-radius: 2px; background: #0B1620; color: #F4F6F8; font-family: "Silkscreen", "Courier New", monospace;
  font-size: 12px; letter-spacing: .12em; padding: 9px 0 8px; font-weight: 400; text-transform: uppercase;
}
:root[data-tema="bolsillo"] .puerta .flojos { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0; }
:root[data-tema="bolsillo"] #cambiarModo { display: none; }
:root[data-tema="bolsillo"] .puerta .flojos button.principal { background: #0B1620; color: #F4F6F8; border-color: #0B1620; }
:root[data-tema="bolsillo"] .puerta .letraChica { font-size: 13px; line-height: 1.2; margin: 0; }
:root[data-tema="bolsillo"] #correoDicho { font-weight: 500; }
:root[data-tema="bolsillo"] .puerta h1 + .tenue { margin: 0; }

/* ============================================================== el aviso */
:root[data-tema="bolsillo"] .aviso {
  position: absolute; left: 10px; right: 10px; bottom: 6px; top: auto; transform: none; z-index: 12; max-width: none;
  background: #0B1620; color: #F4F6F8; padding: 7px 10px; border-radius: 2px; font-family: "Silkscreen", "Courier New", monospace;
  font-size: 11px; font-weight: 400; letter-spacing: .06em; text-align: left; box-shadow: none; animation: none; text-transform: uppercase;
}
:root[data-tema="bolsillo"] .aviso.oculto { display: none; }

@media (prefers-reduced-motion: reduce) {
  :root[data-tema="bolsillo"] .hueso { animation: none; }
}

/* Con cuatro temas, cuatro columnas en el selector (valen para todos los temas). */
.temas { grid-template-columns: repeat(4, 1fr); }

/* =============================================================== en horizontal
 * Con el móvil tumbado (alto de 500 px o menos) el aparato se tumba con él: la
 * pantalla de píxeles a la izquierda, entera de alto, y a la derecha, de arriba
 * abajo, el logo con los botones redondos, las tres píldoras, la cruceta de
 * 180 px y el grabado. Medidas de las pantallas horizontales de la muestra
 * (844×390). Con más ancho crece la pantalla; la columna de la derecha no. */
@media (orientation: landscape) and (max-height: 500px) {
  :root[data-tema="bolsillo"], :root[data-tema="bolsillo"] body { background: #C7CCD3; }
  :root[data-tema="bolsillo"] #app,
  :root[data-tema="bolsillo"] #app.oculto {
    inset: 0; width: auto; height: auto; transform: none;
    display: grid !important; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto auto auto auto;
    align-content: space-between; column-gap: 18px; row-gap: 0;
    padding: calc(14px + var(--bolArriba)) calc(18px + var(--bolDcha)) calc(14px + var(--bolAbajo)) calc(18px + var(--bolIzda));
  }
  :root[data-tema="bolsillo"] .bolMarco { grid-column: 1; grid-row: 1 / 5; flex: none; contain: size; }
  :root[data-tema="bolsillo"] .cabecera { grid-column: 2; grid-row: 1; }
  :root[data-tema="bolsillo"] .bolPastillas { grid-column: 2; grid-row: 2; gap: 8px; }
  :root[data-tema="bolsillo"] .bolCruz { grid-column: 2; grid-row: 3; justify-self: center; }
  :root[data-tema="bolsillo"] .bolGrabado { grid-column: 2; grid-row: 4; margin-top: 0; }
  :root[data-tema="bolsillo"] #marcaTextoLogo::after { display: none; }
  :root[data-tema="bolsillo"] .bolPastilla { height: 36px; font-size: 8px; gap: 5px; }
  :root[data-tema="bolsillo"] .bolCentro { left: 63px; top: 63px; width: 54px; height: 54px; }
  :root[data-tema="bolsillo"] .bolBrazo.arriba svg, :root[data-tema="bolsillo"] .bolBrazo.bajo svg { width: 14px; height: 14px; }
  :root[data-tema="bolsillo"] .bolBrazo.izq svg, :root[data-tema="bolsillo"] .bolBrazo.der svg { width: 22px; height: 13px; }
  :root[data-tema="bolsillo"] .bolCentro svg { width: 18px; height: 18px; }
  /* Sonando: la carátula a la izquierda del título y las seis teclas en una sola fila. */
  :root[data-tema="bolsillo"] .bolSonando { gap: 14px; }
  :root[data-tema="bolsillo"] .rotulosTexto h2 { font-size: 24px; }
  :root[data-tema="bolsillo"] .rotulosTexto p, :root[data-tema="bolsillo"] .rotulosTexto .enlaceArtista { font-size: 17px; }
  :root[data-tema="bolsillo"] .grande:not(:has(#panelGrande:not(.oculto))) .grandeColumna {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 5px; row-gap: 10px; align-content: start;
  }
  :root[data-tema="bolsillo"] .grande:not(:has(#panelGrande:not(.oculto))) .grandeColumna > * { grid-column: 1 / -1; }
  :root[data-tema="bolsillo"] .grande:not(:has(#panelGrande:not(.oculto))) .grandeColumna > .bolTeclasSonando { grid-column: span 3; }
  /* Inicio como en la muestra: dos de «Sigue escuchando» y una de «Me gustan»; el resto, en Biblioteca. */
  :root[data-tema="bolsillo"] .bolFilas[data-bolfilas="rec"] .linea:nth-child(n+3),
  :root[data-tema="bolsillo"] .bolFilas[data-bolfilas="fav"] .linea:nth-child(n+2) { display: none; }
  :root[data-tema="bolsillo"] #mezclar::after { content: "ALEAT."; }
  :root[data-tema="bolsillo"] #corazon::after { content: "♥"; }
  :root[data-tema="bolsillo"] #verCola::after { content: "SIGUIEN."; }
}