/* Forma propia de cada tema (A2). Mismo contenido y rutas; cambian filetes, bordes, densidad,
   escala de titulares, botones y barra de reproducción. Colores y letra vienen de themes.css. */

/* ================= Arcilla · tranquila, redondeada, mucho aire ================= */
html[data-theme="arcilla"] .hero h1{letter-spacing:-.02em;font-weight:500}
html[data-theme="arcilla"] .section-head h2{font-weight:500;font-size:26px}
html[data-theme="arcilla"] .play-big{box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent)}
html[data-theme="arcilla"] .greeting em{font-style:italic}

/* ================= Alba · alegre y multicolor (solo claro) ================= */
html[data-theme="alba"]{--alba-1:#e8567c;--alba-2:#7c5cbf;--alba-3:#2e9e6b;--alba-4:#3478c9;--alba-5:#d98a16}
html[data-theme="alba"] .section-head h2{position:relative;padding-bottom:8px}
html[data-theme="alba"] .section-head h2::after{content:'';position:absolute;left:0;bottom:0;width:72px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--alba-1) 0 20%,var(--alba-2) 20% 40%,var(--alba-3) 40% 60%,var(--alba-4) 60% 80%,var(--alba-5) 80%)}
html[data-theme="alba"] .card{background:var(--surface);box-shadow:0 1px 0 var(--line),0 6px 16px #2b273310}
html[data-theme="alba"] .card:nth-child(5n+1){box-shadow:inset 0 4px 0 var(--alba-1),0 6px 16px #2b273310}
html[data-theme="alba"] .card:nth-child(5n+2){box-shadow:inset 0 4px 0 var(--alba-2),0 6px 16px #2b273310}
html[data-theme="alba"] .card:nth-child(5n+3){box-shadow:inset 0 4px 0 var(--alba-3),0 6px 16px #2b273310}
html[data-theme="alba"] .card:nth-child(5n+4){box-shadow:inset 0 4px 0 var(--alba-4),0 6px 16px #2b273310}
html[data-theme="alba"] .card:nth-child(5n){box-shadow:inset 0 4px 0 var(--alba-5),0 6px 16px #2b273310}
html[data-theme="alba"] .chip{background:color-mix(in srgb,var(--alba-2) 12%,#fff)}
html[data-theme="alba"] .chip:nth-child(3n+2){background:color-mix(in srgb,var(--alba-3) 12%,#fff)}
html[data-theme="alba"] .chip:nth-child(3n){background:color-mix(in srgb,var(--alba-4) 12%,#fff)}
html[data-theme="alba"] .chip[aria-pressed=true]{background:var(--text);color:var(--bg)}
html[data-theme="alba"] .slider .fill{background:linear-gradient(90deg,var(--alba-1),var(--alba-2),var(--alba-4))}
html[data-theme="alba"] .hero h1{font-weight:800;letter-spacing:-.035em}
html[data-theme="alba"] .greeting{font-weight:800;letter-spacing:-.02em}
html[data-theme="alba"] .greeting em{font-style:normal;color:var(--accent-ink)}
html[data-theme="alba"] .play-big{border-radius:16px}
html[data-theme="alba"] .bar{background:var(--bg);border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--alba-1),var(--alba-2),var(--alba-3),var(--alba-4),var(--alba-5)) 1}

/* ================= Sol · alto contraste: bordes gruesos, letra grande, nada translúcido ================= */
html[data-theme="sol"] body{font-size:16.5px}
html[data-theme="sol"] :focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
html[data-theme="sol"] .side-block,html[data-theme="sol"] .main,html[data-theme="sol"] .np-panel{border:2px solid var(--line)}
html[data-theme="sol"] .chip,html[data-theme="sol"] .pill-btn,html[data-theme="sol"] .mode-btn{border:2px solid var(--text);font-weight:700}
html[data-theme="sol"] .row{border-bottom:1px solid var(--line);border-radius:0}
html[data-theme="sol"] a.card-t,html[data-theme="sol"] .row .t2 a{text-decoration:underline;text-underline-offset:3px}
html[data-theme="sol"] .play-big{border:3px solid var(--text)}
html[data-theme="sol"] .play-main{width:44px;height:44px;border:2px solid var(--text)}
html[data-theme="sol"] .slider .track{height:6px;background:var(--line)}
html[data-theme="sol"] .slider .knob{opacity:1;width:16px;height:16px;margin-left:-8px;border:2px solid var(--bg)}
html[data-theme="sol"] .bar{border-top:3px solid var(--text)}
html[data-theme="sol"] .section-head h2{font-size:26px}

/* ================= Tinta · periódico: reglas, esquinas rectas, columnas a ras ================= */
@media (min-width:761px){
  html[data-theme="tinta"] .app{gap:0;padding:0}
  html[data-theme="tinta"] .side{gap:0;border-right:1px solid var(--text)}
  html[data-theme="tinta"] .side-block{border-bottom:1px solid var(--line)}
}
html[data-theme="tinta"] .main,html[data-theme="tinta"] .side-block,html[data-theme="tinta"] .np-panel{border-radius:0}
html[data-theme="tinta"] .np-panel{border-left:1px solid var(--text)}
html[data-theme="tinta"] .bar{border-top:3px double var(--text);background:var(--bg)}
html[data-theme="tinta"] .topbar.solid{border-bottom:1px solid var(--text)}
html[data-theme="tinta"] .hero{background:none;border-bottom:3px double var(--text);padding-bottom:20px}
html[data-theme="tinta"] .hero h1{font-size:clamp(36px,6.5vw,92px);letter-spacing:-.01em;line-height:.95}
html[data-theme="tinta"] .hero .cover{box-shadow:none;border:1px solid var(--text);filter:grayscale(.15) contrast(1.05)}
html[data-theme="tinta"] .hero-kind,html[data-theme="tinta"] .side-section h3{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.14em;font-size:11px}
html[data-theme="tinta"] .section-head{border-top:2px solid var(--text);padding-top:8px;margin-top:32px}
html[data-theme="tinta"] .section-head h2{font-size:24px;font-style:italic}
html[data-theme="tinta"] .home-top{background:none;border-bottom:1px solid var(--text)}
html[data-theme="tinta"] .greeting{font-size:clamp(34px,5vw,58px);border-bottom:3px double var(--text);padding-bottom:10px}
html[data-theme="tinta"] .card,html[data-theme="tinta"] .quick-item{border-radius:0}
html[data-theme="tinta"] .card .cover{box-shadow:none;outline:1px solid var(--text);outline-offset:-1px}
html[data-theme="tinta"] .card+.card{box-shadow:-1px 0 0 var(--line)}
html[data-theme="tinta"] .quick-item{background:none;border:1px solid var(--text)}
html[data-theme="tinta"] .row{border-bottom:1px solid var(--line);height:50px}
html[data-theme="tinta"] .tracks-head{border-bottom:2px solid var(--text);text-transform:uppercase;letter-spacing:.12em;font-size:11px}
html[data-theme="tinta"] .play-big{background:var(--text);color:var(--bg);box-shadow:none;width:52px;height:52px}
html[data-theme="tinta"] .play-main{background:var(--text);color:var(--bg)}
html[data-theme="tinta"] .chip,html[data-theme="tinta"] .pill-btn{border:1px solid var(--text);background:none}
html[data-theme="tinta"] .chip[aria-pressed=true]{background:var(--text);color:var(--bg)}
html[data-theme="tinta"] .slider .track{height:2px;background:var(--line)}
html[data-theme="tinta"] .slider .fill{background:var(--accent)}
html[data-theme="tinta"] .greeting em{color:var(--accent-ink)}

/* ================= Fósforo · terminal: marcos de línea, cursor, sin rellenos ================= */
html[data-theme="fosforo"] body{font-size:14px;letter-spacing:0}
html[data-theme="fosforo"] .main,html[data-theme="fosforo"] .side-block,html[data-theme="fosforo"] .np-panel{background:var(--bg-deep)!important;border:1px solid var(--line);border-radius:0}
html[data-theme="fosforo"] .main::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:30;
  background:repeating-linear-gradient(180deg,transparent 0 2px,color-mix(in srgb,var(--text) 4%,transparent) 2px 3px)}
html[data-theme="fosforo"] .section-head h2::before{content:'> ';color:var(--accent-ink)}
html[data-theme="fosforo"] .section-head h2{font-size:18px;text-transform:lowercase}
html[data-theme="fosforo"] .greeting{font-size:clamp(24px,3.4vw,36px)}
html[data-theme="fosforo"] .greeting::after,html[data-theme="fosforo"] .hero h1::after{content:'_';color:var(--accent-ink);animation:fosforo-cursor 1s steps(1) infinite;margin-left:.1em}
@keyframes fosforo-cursor{50%{opacity:0}}
html[data-theme="fosforo"] .hero{background:none;border-bottom:1px dashed var(--line)}
html[data-theme="fosforo"] .hero h1{font-size:clamp(26px,4.5vw,56px);letter-spacing:-.02em}
html[data-theme="fosforo"] .hero .cover{box-shadow:none;border:1px solid var(--line);image-rendering:pixelated}
html[data-theme="fosforo"] .home-top{background:none}
html[data-theme="fosforo"] .card{border:1px solid transparent;border-radius:0}
html[data-theme="fosforo"] .card:hover,html[data-theme="fosforo"] .card:focus-within{background:none;border-color:var(--line)}
html[data-theme="fosforo"] .card .cover{box-shadow:none;border-radius:0}
html[data-theme="fosforo"] .quick-item{background:none;border:1px solid var(--line);border-radius:0}
html[data-theme="fosforo"] .row{height:44px;border-radius:0}
html[data-theme="fosforo"] .row:hover{background:none;outline:1px dashed var(--line);outline-offset:-1px}
html[data-theme="fosforo"] .play-big,html[data-theme="fosforo"] .card-play,html[data-theme="fosforo"] .play-main{background:transparent;color:var(--accent-ink);border:1px solid var(--accent-ink);box-shadow:none;border-radius:0}
html[data-theme="fosforo"] .play-big{width:auto;padding:0 18px;height:44px;gap:8px}
html[data-theme="fosforo"] .play-big::before{content:'[';}
html[data-theme="fosforo"] .play-big::after{content:']';}
html[data-theme="fosforo"] .play-big{display:inline-flex;align-items:center}
html[data-theme="fosforo"] .chip,html[data-theme="fosforo"] .pill-btn,html[data-theme="fosforo"] .mode-btn{background:none;border:1px solid var(--line);border-radius:0}
html[data-theme="fosforo"] .chip[aria-pressed=true]{background:var(--text);color:var(--bg-deep)}
html[data-theme="fosforo"] .bar{border-top:1px dashed var(--line)}
html[data-theme="fosforo"] .slider .track{height:8px;border-radius:0;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 8px)}
html[data-theme="fosforo"] .slider .fill{border-radius:0;background:repeating-linear-gradient(90deg,var(--text) 0 6px,transparent 6px 8px)}
html[data-theme="fosforo"] .slider:hover .fill,html[data-theme="fosforo"] .slider.dragging .fill{background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 8px)}
html[data-theme="fosforo"] .slider .knob{border-radius:0;width:8px;margin-left:-4px}
html[data-theme="fosforo"] .avatar{border-radius:0}
html[data-theme="fosforo"] .top-search{border:1px solid var(--line);border-radius:0;background:none}

/* ================= Musgo · editorial de bosque: papel, márgenes amplios, cursivas ================= */
@media (min-width:761px){ html[data-theme="musgo"] .app{gap:12px;padding:12px} }
html[data-theme="musgo"] .view{padding-left:36px;padding-right:36px}
html[data-theme="musgo"] .hero{margin-left:-36px;margin-right:-36px;padding-left:36px;padding-right:36px}
html[data-theme="musgo"] .home-top{margin-left:-36px;margin-right:-36px;padding-left:36px;padding-right:36px}
html[data-theme="musgo"] .hero h1{font-weight:500;font-style:italic;letter-spacing:-.01em}
html[data-theme="musgo"] .section-head h2{font-style:italic;font-weight:500;font-size:28px}
html[data-theme="musgo"] .section-head{border-bottom:1px dotted var(--line);padding-bottom:6px}
html[data-theme="musgo"] .card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 1px 0 var(--line)}
html[data-theme="musgo"] .card .cover{border-radius:14px}
html[data-theme="musgo"] .row{height:60px}
html[data-theme="musgo"] .play-big{border-radius:18px;width:60px;height:60px}
html[data-theme="musgo"] .bar{background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 1px 0 var(--line)}

/* ================= Marea · océano: olas, curvas, respiración ================= */
html[data-theme="marea"] .section-head{position:relative;padding-top:14px}
html[data-theme="marea"] .section-head::before{content:'';position:absolute;left:0;right:0;top:0;height:8px;opacity:.55;
  background:radial-gradient(circle at 6px -2px,transparent 6px,var(--line) 6.5px 7.5px,transparent 8px) 0 0/16px 8px repeat-x}
html[data-theme="marea"] .hero{border-radius:0 0 48px 48px}
html[data-theme="marea"] .hero .cover{border-radius:28px}
html[data-theme="marea"] .card .cover{border-radius:22px 22px 22px 6px}
html[data-theme="marea"] .play-big{border-radius:50% 50% 50% 18%}
html[data-theme="marea"] .bar{border-top-left-radius:28px;border-top-right-radius:28px;background:linear-gradient(180deg,color-mix(in srgb,var(--rel) 10%,var(--bg-deep)),var(--bg-deep))}
html[data-theme="marea"] .slider .track{height:6px;border-radius:6px}
html[data-theme="marea"] .slider .fill{background:linear-gradient(90deg,var(--rel),var(--accent))}

/* ================= Glaciar · muy redondo y suave, flotando ================= */
@media (min-width:761px){
  html[data-theme="glaciar"] .app{gap:14px;padding:14px}
  html[data-theme="glaciar"] .bar{background:var(--surface);border-radius:999px;box-shadow:0 10px 30px color-mix(in srgb,var(--text) 12%,transparent);margin:0 6%;padding:0 18px}
}
html[data-theme="glaciar"] .main,html[data-theme="glaciar"] .side-block,html[data-theme="glaciar"] .np-panel{box-shadow:0 8px 30px color-mix(in srgb,var(--text) 8%,transparent)}
html[data-theme="glaciar"] .hero{border-radius:0 0 var(--radius-lg) var(--radius-lg)}
html[data-theme="glaciar"] .hero h1{font-weight:300;letter-spacing:-.03em}
html[data-theme="glaciar"] .greeting{font-weight:300}
html[data-theme="glaciar"] .section-head h2{font-weight:400;font-size:24px}
html[data-theme="glaciar"] .card .cover{border-radius:20px}
html[data-theme="glaciar"] .hero .cover{border-radius:28px}
html[data-theme="glaciar"] .quick-item{border-radius:20px}
html[data-theme="glaciar"] .quick-item .cover{border-radius:20px 0 0 20px}
html[data-theme="glaciar"] .row{height:60px;border-radius:16px}
html[data-theme="glaciar"] .play-big{width:64px;height:64px;background-color:var(--accent);background-image:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 80%,var(--rel)))}
html[data-theme="glaciar"] .slider .track{height:6px;border-radius:6px}

/* ================= Ocaso y Nebulosa · etéreos: paneles de cristal sobre su cielo ================= */
html[data-theme="ocaso"],html[data-theme="nebulosa"]{--panel-alpha:72%}
html[data-theme="ocaso"] .main,html[data-theme="ocaso"] .side-block,html[data-theme="ocaso"] .np-panel,html[data-theme="ocaso"] .bar,
html[data-theme="nebulosa"] .main,html[data-theme="nebulosa"] .side-block,html[data-theme="nebulosa"] .np-panel,html[data-theme="nebulosa"] .bar{
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
html[data-theme="ocaso"] .bar,html[data-theme="nebulosa"] .bar{background:color-mix(in srgb,var(--bg) 60%,transparent);border-radius:var(--radius-lg)}
html[data-theme="ocaso"] .hero,html[data-theme="nebulosa"] .hero,html[data-theme="ocaso"] .home-top,html[data-theme="nebulosa"] .home-top{background:none}
html[data-theme="ocaso"] .hero h1{font-weight:400;font-size:clamp(38px,7vw,96px);letter-spacing:-.01em}
html[data-theme="ocaso"] .greeting{font-weight:400;font-size:clamp(34px,5vw,60px)}
html[data-theme="ocaso"] .section-head h2{font-weight:500;font-size:30px}
/* Ocaso: borde de luz ámbar del horizonte en la barra. */
html[data-theme="ocaso"] .bar{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent) 70%,transparent),0 -12px 40px -20px var(--accent)}
html[data-theme="ocaso"] .play-big{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent),0 0 30px color-mix(in srgb,var(--accent) 40%,transparent)}
/* Nebulosa: titulares espaciados en mayúscula, botón con halo rosa. */
html[data-theme="nebulosa"] .section-head h2{text-transform:uppercase;letter-spacing:.12em;font-size:18px}
html[data-theme="nebulosa"] .hero h1{letter-spacing:.02em}
html[data-theme="nebulosa"] .play-big{box-shadow:0 0 0 1px color-mix(in srgb,var(--text) 30%,transparent),0 0 36px color-mix(in srgb,var(--accent) 55%,transparent)}
html[data-theme="nebulosa"] .card .cover{border-radius:50% 50% var(--radius) var(--radius)}
html[data-theme="nebulosa"] .slider .fill{background:linear-gradient(90deg,var(--rel),var(--accent))}

@media (prefers-reduced-motion:reduce){
  html[data-theme="fosforo"] .greeting::after,html[data-theme="fosforo"] .hero h1::after{animation:none}
}
@media (max-width:760px){
  html[data-theme="glaciar"] .bar,html[data-theme="musgo"] .bar,html[data-theme="marea"] .bar{border-radius:var(--radius)}
  html[data-theme="musgo"] .view{padding-left:16px;padding-right:16px}
  html[data-theme="musgo"] .hero,html[data-theme="musgo"] .home-top{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  html[data-theme="fosforo"] .play-big{padding:0 14px}
}