/* ==========================================================
   Kyema Player — hoja única para la portada, el panel y el admin.

   Una sola paleta, un solo ritmo tipográfico. Las tres páginas
   comparten esto para que no se noten las costuras.
   ========================================================== */

:root {
  color-scheme: dark;

  --tinta:   #F1F4FA;   /* texto principal */
  --tenue:   #8B94AC;   /* texto secundario */
  --apagado: #5D6478;   /* etiquetas, pistas */
  --fondo:   #06070D;
  --panel:   #0C1020;
  --linea:   rgba(255,255,255,.09);
  --linea2:  rgba(255,255,255,.16);

  --ambar:   #F5A524;
  --ambar2:  #FFC65C;
  --verde:   #3DDC97;
  --rojo:    #FF6B6B;

  --ancho:   64rem;   /* portada */
  --lectura: 46rem;   /* formularios */
  --radio:   .9rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--tinta);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* El resplandor de detrás: dos manchas muy difusas que dan
     profundidad sin costar nada al desplazar.

     Va aquí, en el fondo del propio body, y NO en un pseudoelemento
     fijo con z-index negativo. Esa otra forma se ve igual arriba del
     todo, pero es una capa opaca a la que el compositor del navegador
     le pierde el orden en cuanto hay otra capa promovida cerca -el
     backdrop-filter de la barra, sin ir más lejos-: baja de la
     portada y de repente el gradiente tapa la página entera. Como
     fondo del body no hay capa que ordenar mal.

     'fixed' es lo que lo deja quieto al desplazar. Safari en iPhone
     lo ignora y lo mueve con el contenido, que es una degradación que
     no rompe nada. */
  background-color: var(--fondo);
  background-image:
    radial-gradient(60rem 40rem at 15% 0,   rgba(245,165,36,.13), transparent 60%),
    radial-gradient(50rem 40rem at 95% 8%,  rgba(61,220,151,.08), transparent 60%),
    linear-gradient(170deg, #0C1020, rgba(6,7,13,0) 55%);
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat;
}

a { color: var(--ambar); text-decoration: none; }
a:hover { color: var(--ambar2); }

h1, h2, h3 { letter-spacing: -.022em; line-height: 1.15; margin: 0; }

/* ---------- piezas comunes ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border: 0; border-radius: .6rem;
  background: rgba(255,255,255,.09); color: var(--tinta);
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .15s, opacity .15s;
}
.btn:hover { background: rgba(255,255,255,.16); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn--go {
  background: linear-gradient(180deg, var(--ambar2), var(--ambar));
  color: #17120A; box-shadow: 0 .4rem 1.4rem rgba(245,165,36,.28);
}
.btn--go:hover { background: linear-gradient(180deg, #FFD483, var(--ambar2)); }
.btn--ghost { background: none; color: var(--tenue); box-shadow: none; }
.btn--ghost:hover { background: rgba(255,255,255,.07); color: var(--tinta); }
.btn--x { background: none; color: var(--rojo); }
.btn--x:hover { background: rgba(255,107,107,.14); }
.btn--gr { padding: 1rem 1.9rem; font-size: 1.02rem; }

.pill {
  display: inline-block; padding: .3rem .8rem; border-radius: 2rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  background: rgba(255,255,255,.1); white-space: nowrap;
}
.pill--ok { background: rgba(61,220,151,.16); color: var(--verde); }
.pill--av { background: rgba(245,197,24,.16); color: #F5C518; }
.pill--no { background: rgba(255,107,107,.16); color: var(--rojo); }

/* ==========================================================
   PORTADA
   ========================================================== */

.env { max-width: var(--ancho); margin: 0 auto; padding: 0 1.4rem; }

.nav {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px); background: rgba(6,7,13,.72);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.nav--pegado { border-bottom-color: var(--linea); }
.nav .env { display: flex; align-items: center; gap: 1.4rem; height: 4rem; }
.nav__enlaces { display: flex; gap: 1.4rem; margin-left: auto; }
/* Sin partir: "So funktioniert es" en tres lineas dentro de la barra
   queda ilegible, y en aleman casi todo es mas largo. */
.nav__enlaces a { color: var(--tenue); font-size: .92rem; font-weight: 500; white-space: nowrap; }
.nav__enlaces a:hover { color: var(--tinta); }
.nav .btn { padding: .55rem 1.1rem; font-size: .88rem; }

.marca { display: flex; align-items: center; gap: .6rem; color: var(--tinta); font-weight: 800;
         font-size: 1.08rem; letter-spacing: -.03em; }
.marca svg { width: 1.6rem; height: 1.6rem; flex: none; }

/* --- héroe --- */

.hero { padding: 5rem 0 3rem; text-align: center; }
.hero__sello {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.6rem;
  padding: .35rem .9rem .35rem .45rem; border: 1px solid var(--linea2); border-radius: 2rem;
  color: var(--tenue); font-size: .84rem;
}
.hero__sello b { color: var(--tinta); }
.hero__sello i {
  font-style: normal; padding: .1rem .55rem; border-radius: 2rem;
  background: rgba(245,165,36,.18); color: var(--ambar); font-size: .72rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 800; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--ambar2), var(--ambar) 55%, #FF8A3D);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__bajada {
  max-width: 34rem; margin: 1.2rem auto 0; color: var(--tenue); font-size: clamp(1rem, 2.4vw, 1.18rem);
}
.hero__acc { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }
.hero__nota { margin: 1.1rem 0 0; color: var(--apagado); font-size: .84rem; }

/* --- la tele --- */

.tele { max-width: 52rem; margin: 3.5rem auto 0; padding: 0 1.4rem; }
.tele__marco {
  position: relative; border-radius: 1rem; padding: .55rem;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  box-shadow: 0 3rem 6rem rgba(0,0,0,.6), 0 0 0 1px var(--linea);
}
.tele__pantalla {
  border-radius: .65rem; overflow: hidden; background: #05060B;
  aspect-ratio: 16 / 9; display: block; width: 100%;
}
.tele__pie {
  width: 34%; height: .7rem; margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0));
  border-radius: 0 0 .5rem .5rem;
}

/* --- secciones --- */

.sec { padding: 5.5rem 0 0; }
.sec__t { text-align: center; max-width: 38rem; margin: 0 auto 2.6rem; }
.sec__t h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 800; }
.sec__t p { margin: .8rem 0 0; color: var(--tenue); }
.sec__ojo {
  display: block; margin-bottom: .7rem; color: var(--ambar);
  font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}

.rej { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.caja {
  padding: 1.5rem; border: 1px solid var(--linea); border-radius: var(--radio);
  background: linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition: border-color .2s, transform .2s;
}
.caja:hover { border-color: var(--linea2); transform: translateY(-2px); }
.caja h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.caja p { margin: 0; color: var(--tenue); font-size: .92rem; }
.caja__ico {
  width: 2.4rem; height: 2.4rem; margin-bottom: 1rem; border-radius: .6rem;
  display: grid; place-items: center;
  background: rgba(245,165,36,.13); color: var(--ambar);
}
.caja__ico svg { width: 1.25rem; height: 1.25rem; }

/* --- pasos --- */

.pasos { counter-reset: p; display: grid; gap: 1rem;
         grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.paso { position: relative; padding: 1.6rem 1.5rem 1.5rem;
        border: 1px solid var(--linea); border-radius: var(--radio); }
.paso::before {
  counter-increment: p; content: counter(p);
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; margin-bottom: .9rem;
  border-radius: 50%; background: rgba(245,165,36,.13);
  color: var(--ambar); font-weight: 800; font-size: .95rem;
}
.paso h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.paso p { margin: 0; color: var(--tenue); font-size: .92rem; }
.paso code { color: var(--tinta); font-size: .86rem; background: rgba(255,255,255,.07);
             padding: .12rem .38rem; border-radius: .3rem; }

/* --- cierre --- */

.cierre {
  margin: 6rem 0 0; padding: 3.4rem 2rem; text-align: center;
  border: 1px solid var(--linea); border-radius: 1.2rem;
  background:
    radial-gradient(40rem 18rem at 50% 0%, rgba(245,165,36,.13), transparent 70%),
    linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.cierre h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 800; }
.cierre p { max-width: 30rem; margin: .9rem auto 1.8rem; color: var(--tenue); }

.pieweb {
  margin-top: 4rem; padding: 2rem 0 3rem; border-top: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  color: var(--apagado); font-size: .86rem;
}
.pieweb nav { margin-left: auto; display: flex; gap: 1.2rem; }
.pieweb a { color: var(--apagado); }
.pieweb a:hover { color: var(--tenue); }

/* --- descargo de contenido ---
   La linea que mas se repite en este negocio y la que mas importa:
   esto es un reproductor y va vacio. */

.descargo {
  margin: 2.5rem auto 0; max-width: 46rem; padding: 1.2rem 1.4rem;
  border: 1px solid var(--linea); border-left: 3px solid var(--ambar);
  border-radius: .6rem; background: rgba(255,255,255,.03);
  color: var(--tenue); font-size: .89rem;
}
.descargo b { color: var(--tinta); }
.descargo p { margin: 0; }
.descargo p + p { margin-top: .6rem; }

/* --- páginas de texto legal --- */

.legal { max-width: 44rem; margin: 0 auto; padding: 2.5rem 0 4rem; }
.legal h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 800; }
.legal .fecha { margin: .6rem 0 0; color: var(--apagado); font-size: .85rem; }
.legal h2 {
  margin: 3rem 0 .8rem; padding-top: 1.6rem; font-size: 1.3rem; font-weight: 800;
  border-top: 1px solid var(--linea);
}
.legal h3 { margin: 1.8rem 0 .4rem; font-size: 1.02rem; }
.legal p, .legal li { color: var(--tenue); }
.legal p { margin: .8rem 0; }
.legal b, .legal strong { color: var(--tinta); }
.legal ul { margin: .8rem 0; padding-left: 1.2rem; }
.legal li { margin: .45rem 0; }
.legal a { text-decoration: underline; text-underline-offset: .2em; }

/* Lo que el titular tiene que rellenar antes de publicar esto. Se ve
   a la legua a proposito: un aviso legal a medias es peor que ninguno. */
.rellenar {
  padding: .1rem .45rem; border-radius: .3rem;
  background: rgba(245,165,36,.16); color: var(--ambar2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
}
.legal .aviso-borrador {
  margin: 1.6rem 0; padding: 1.1rem 1.3rem;
  border: 1px dashed var(--ambar); border-radius: .6rem;
  background: rgba(245,165,36,.06); color: var(--tenue); font-size: .89rem;
}

/* ==========================================================
   FORMULARIOS: panel del televisor y administración
   ========================================================== */

/* La portada se da su propio aire lateral con .env en cada seccion.
   Las paginas de formulario no tienen esa envoltura, asi que el
   margen se lo pone el body -y solo el de ellas, o en la portada se
   sumarian los dos. */
.pag-form { padding: 0 1rem 3rem; }

.top { max-width: var(--lectura); margin: 0 auto 1.6rem; padding-top: 2.4rem; }
.top .marca { margin-bottom: .9rem; }
.top h1 { font-size: 1.7rem; font-weight: 800; }
.top .sub { margin: .25rem 0 0; color: var(--tenue); }

.card {
  max-width: var(--lectura); margin: 0 auto 1.2rem; padding: 1.7rem;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
}
.card > h2 { font-size: 1.25rem; margin-bottom: .4rem; }
.card h3 { margin: 2.2rem 0 .3rem; font-size: 1.05rem; }
.card h3:first-child { margin-top: 0; }

.ayuda { margin: .25rem 0 1.1rem; color: var(--tenue); font-size: .9rem; }
.ayuda b { color: var(--tinta); }

label { display: block; margin-bottom: .9rem; color: var(--tenue); font-size: .82rem; }
input, select {
  display: block; width: 100%; margin-top: .3rem; padding: .72rem .85rem;
  background: rgba(255,255,255,.055); color: var(--tinta);
  border: 1px solid rgba(255,255,255,.12); border-radius: .5rem;
  font-size: 1rem; font-family: inherit;
  transition: border-color .15s, background .15s;
}
input::placeholder { color: var(--apagado); }
input:focus, select:focus {
  outline: none; border-color: var(--ambar); background: rgba(255,255,255,.08);
}
input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }

.err { color: var(--rojo); font-size: .9rem; min-height: 1.2em; margin: .8rem 0 0; }
.msg { color: var(--verde); font-size: .9rem; }

.cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }

.datos {
  display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.2rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.datos dt { color: var(--apagado); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.datos dd { margin: .15rem 0 0; font-size: .95rem; }

.fila { padding: 1rem; margin-bottom: .8rem; border: 1px solid var(--linea); border-radius: .6rem; }
.fila .cab2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.fila .cab2 b { font-size: .95rem; }
.fila .btn--x { padding: .35rem .7rem; font-size: .85rem; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; }
.rejilla label { margin: 0; }

.pie {
  position: sticky; bottom: 0; z-index: 5;
  margin: 2rem -1.7rem -1.7rem; padding: 1.1rem 1.7rem;
  border-top: 1px solid var(--linea); border-radius: 0 0 var(--radio) var(--radio);
  background: rgba(12,16,32,.94); backdrop-filter: blur(10px);
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}

.check { display: block; margin-bottom: .8rem; color: var(--tinta); font-size: .95rem; cursor: pointer; }
.check input { width: auto; display: inline-block; margin: 0 .5rem 0 0; vertical-align: middle; }
.pista { display: block; margin: .1rem 0 0 1.6rem; color: var(--tenue); font-size: .82rem; }

/* --- enlace directo con QR --- */

.enlace { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
          padding: 1rem; border: 1px solid var(--linea); border-radius: .6rem; }
.enlace__qr { width: 8.5rem; height: 8.5rem; flex: none; border-radius: .45rem;
              background: #fff; padding: .3rem; }
.enlace__qr img, .enlace__qr svg { width: 100%; height: 100%; display: block; }
.enlace__txt { flex: 1 1 14rem; min-width: 0; }
.enlace__txt p { margin: 0 0 .7rem; color: var(--tenue); font-size: .9rem; }
.enlace__url {
  display: block; width: 100%; padding: .5rem .6rem; margin-bottom: .7rem;
  border: 1px solid var(--linea); border-radius: .4rem; background: rgba(0,0,0,.35);
  color: var(--tenue); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- administración --- */

.card--ancha, .apar, .vacio { max-width: var(--lectura); margin-left: auto; margin-right: auto; }

.cuenta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: .95rem; }
.cuenta .pill b, .cuenta > span b { font-size: 1.05rem; }

.apar {
  margin-bottom: 1rem; padding: 1.2rem 1.5rem;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  transition: border-color .2s, opacity .2s;
}
.apar:hover { border-color: var(--linea2); }
.apar--ocupado { opacity: .5; pointer-events: none; }
.apar__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.apar__t { margin: 0; font-size: 1.08rem; font-weight: 700; }
.apar__d { margin: .2rem 0 0; color: var(--tenue); font-size: .84rem; line-height: 1.65; }
.apar__d code { color: #B9C1D2; font-size: .8rem; }
.apar__acc { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.apar__acc .btn { padding: .48rem .9rem; font-size: .85rem; }
.apar__nota { margin: .8rem 0 0; }
.apar__nota input { font-size: .9rem; padding: .5rem .7rem; }

.vacio { color: var(--tenue); text-align: center; padding: 2.5rem; }

/* --- avisos flotantes: todo botón deja rastro visible --- */

.avisos {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  display: flex; flex-direction: column-reverse; gap: .5rem; pointer-events: none;
}
.aviso {
  padding: .7rem 1rem; border-radius: .55rem; max-width: 22rem;
  background: #161B2E; border: 1px solid var(--linea2);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.5);
  font-size: .9rem; animation: entra .18s ease-out;
}
.aviso--ok  { border-left: 3px solid var(--verde); }
.aviso--mal { border-left: 3px solid var(--rojo); }
@keyframes entra { from { opacity: 0; transform: translateY(.5rem); } }

/* --- diálogo propio: confirm() del navegador se puede silenciar --- */

.velo {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1.4rem;
  background: rgba(4,5,10,.72); backdrop-filter: blur(3px);
  animation: entra .15s ease-out;
}
.dlg {
  max-width: 26rem; width: 100%; padding: 1.6rem;
  background: var(--panel); border: 1px solid var(--linea2); border-radius: var(--radio);
  box-shadow: 0 2rem 4rem rgba(0,0,0,.6);
}
.dlg h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.dlg p { margin: 0 0 1.4rem; color: var(--tenue); font-size: .92rem; }
.dlg__acc { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }

/* El aviso de entrada es mas largo que un "seguro que si": necesita
   sitio y, en una pantalla baja, poder desplazarse. */
.dlg--aviso { max-width: 34rem; max-height: calc(100vh - 3rem); overflow-y: auto; }
.dlg--aviso p { margin-bottom: .8rem; }
.dlg--aviso b { color: var(--tinta); }
.dlg--aviso ul { margin: 0 0 1.2rem; padding-left: 1.1rem; color: var(--tenue); font-size: .92rem; }
.dlg--aviso li { margin: .35rem 0; }
.dlg--aviso .dlg__acc { margin-top: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Los enlaces de la barra se van antes de que se amontonen. Con el
   aleman puesto hacen falta casi mil pixeles para que quepan en una
   linea, y estan repetidos en el pie. */
@media (max-width: 62rem) {
  .nav__enlaces { display: none; }
}

@media (max-width: 40rem) {
  .hero { padding: 3.5rem 0 2rem; }
  .card { padding: 1.2rem; }
  .pie { margin: 1.6rem -1.2rem -1.2rem; padding: 1rem 1.2rem; }
}

/* ---- catálogos por idioma ---- */
.fila--idioma { padding: .9rem 1.2rem; }
.fila--nueva { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.fila--nueva select { width: auto; min-width: 16rem; margin: 0; }
.k-comprobar { margin-top: .7rem; }

/* ---- filas de addon: la dirección se escribe, el nombre lo dice él ---- */
.fila--addon .mono { font-size: .92rem; }
.fila__pie { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .7rem; }
.k-ficha { font-size: .9rem; color: #8B94AC; }
.k-ficha--ok { color: #3DDC97; }
.k-ficha--mal { color: #FF6B6B; }

/* ---- paleta de colores de cuenta ---- */
.paleta { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .45rem; }
.tono {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: .16rem solid transparent; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 .06rem rgba(0,0,0,.4) inset;
}
.tono.is-on { border-color: #F1F4FA; transform: scale(1.12); }
.tono:focus-visible { outline: .12rem solid #F1F4FA; outline-offset: .12rem; }

/* ==========================================================
   PANEL DEL TELEVISOR CON MENU LATERAL

   Antes era una sola pagina de siete secciones y un boton Guardar al
   final. En un movil eso son tres pantallas de desplazamiento entre
   lo que estas tocando y el boton, y guardaba TODO de golpe: cambiar
   un idioma reescribia tus cinco cuentas.

   Ahora cada seccion es su pantalla y guarda lo suyo.
   ========================================================== */

.marco {
  max-width: 74rem; margin: 0 auto;
  display: grid; grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: 1.2rem; align-items: start;
}

.lado {
  position: sticky; top: 1rem;
  padding: .6rem; background: var(--panel);
  border: 1px solid var(--linea); border-radius: var(--radio);
}
.lado__it {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; margin: 0; padding: .68rem .8rem;
  border: 0; border-radius: .55rem; background: none;
  color: var(--tenue); font: inherit; font-size: .94rem; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
.lado__it:hover { background: rgba(255,255,255,.06); color: var(--tinta); }
.lado__it.is-on { background: rgba(245,165,36,.14); color: var(--ambar2); }
.lado__it svg { width: 1.15rem; height: 1.15rem; flex: none; }
.lado__it i {
  margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 800;
  padding: .1rem .45rem; border-radius: 2rem;
  background: rgba(255,255,255,.1); color: var(--tenue);
}
.lado__it .i--av { background: rgba(245,197,24,.2); color: #F5C518; }
.lado__sep { margin: .5rem .8rem; border-top: 1px solid var(--linea); }

/* Dentro del marco las tarjetas ya no se centran solas: el ancho lo
   pone la rejilla, no ellas. */
.hoja .card { max-width: none; margin-left: 0; margin-right: 0; }
.top--ancho { max-width: 74rem; }
.pieweb--ancho { max-width: 74rem; margin-left: auto; margin-right: auto; }

@media (max-width: 56rem) {
  .marco { grid-template-columns: minmax(0, 1fr); }
  .lado {
    position: static; display: flex; gap: .3rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lado::-webkit-scrollbar { display: none; }
  .lado__it { width: auto; white-space: nowrap; padding: .6rem .75rem; font-size: .88rem; }
  .lado__it i, .lado__sep { display: none; }
}

/* ---------- barra de guardar de cada seccion ---------- */

.pie--sec {
  position: sticky; bottom: 0; z-index: 5;
  margin: 1.6rem -1.7rem -1.7rem; padding: 1rem 1.7rem;
  border-top: 1px solid var(--linea); border-radius: 0 0 var(--radio) var(--radio);
  background: rgba(12,16,32,.94); backdrop-filter: blur(10px);
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
@media (max-width: 40rem) { .pie--sec { margin: 1.4rem -1.2rem -1.2rem; padding: .9rem 1.2rem; } }

/* ---------- rejilla de cuentas ---------- */

.tabla { border: 1px solid var(--linea); border-radius: .6rem; overflow: hidden; }
.tabla__f {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--linea);
  background: rgba(255,255,255,.014);
}
.tabla__f:last-child { border-bottom: 0; }
.tabla__f:hover { background: rgba(255,255,255,.045); }
.tabla__pt { width: .7rem; height: 2.2rem; border-radius: .3rem; flex: none; }
.tabla__c { min-width: 0; flex: 1 1 auto; }
.tabla__n { display: block; font-weight: 700; font-size: .98rem; }
.tabla__d {
  display: block; margin-top: .12rem; color: var(--tenue); font-size: .82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabla__acc { display: flex; gap: .3rem; flex: none; }
.tabla__acc .btn { padding: .42rem .8rem; font-size: .84rem; }

/* ---------- el biombo del PIN ---------- */

.biombo {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.3rem; margin-bottom: 1rem;
  border: 1px solid var(--linea2); border-left: 3px solid var(--ambar);
  border-radius: .6rem; background: rgba(245,165,36,.05);
}
.biombo__t { flex: 1 1 16rem; margin: 0; color: var(--tenue); font-size: .9rem; }
.biombo__t b { color: var(--tinta); }
.biombo input { width: 8rem; margin: 0; text-align: center; letter-spacing: .3em; }
.biombo form { display: flex; gap: .5rem; align-items: center; }

/* ---------- activar: la ficha del precio ---------- */

.precio {
  text-align: center; padding: 2.4rem 1.8rem; margin-bottom: 1.2rem;
  border: 1px solid var(--linea2); border-radius: 1.1rem;
  background:
    radial-gradient(30rem 14rem at 50% 0%, rgba(245,165,36,.16), transparent 70%),
    linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
}
.precio__sello {
  display: inline-block; margin-bottom: 1rem; padding: .28rem .8rem;
  border-radius: 2rem; background: rgba(245,165,36,.16); color: var(--ambar);
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.precio__n {
  margin: 0;
  font-size: clamp(2.8rem, 9vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(100deg, var(--ambar2), var(--ambar) 60%, #FF8A3D);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.precio__n span { font-size: .42em; letter-spacing: -.02em; }
.precio__p { margin: .7rem 0 0; color: var(--tenue); font-size: .95rem; }
.precio__l {
  list-style: none; max-width: 22rem; margin: 1.6rem auto 0; padding: 0;
  text-align: left; color: var(--tenue); font-size: .93rem;
}
.precio__l li { display: flex; gap: .6rem; align-items: flex-start; margin: .55rem 0; }
.precio__l li > span { flex: 1; }
.precio__l li::before {
  content: ''; flex: none; width: 1.05rem; height: 1.05rem; margin-top: .25rem;
  border-radius: 50%; background: rgba(61,220,151,.18) center / .6rem no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%233DDC97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.4 4.6 9 10 3'/%3E%3C/svg%3E");
}
.precio__l b { color: var(--tinta); font-weight: 600; }
.precio .btn--gr { margin-top: 1.8rem; width: 100%; max-width: 22rem; }
.precio__nota { margin: 1rem 0 0; color: var(--apagado); font-size: .8rem; }

.oya {
  display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0;
  color: var(--apagado); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em;
}
.oya::before, .oya::after { content: ''; flex: 1; border-top: 1px solid var(--linea); }

.canje { display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap; }
.canje label { flex: 1 1 14rem; margin: 0; }
.canje .btn { margin-top: 1.35rem; }

/* Ya activo: no se ensena un boton de pagar a quien ya ha pagado. */
.yaesta {
  text-align: center; padding: 2.4rem 1.6rem;
  border: 1px solid rgba(61,220,151,.3); border-radius: 1.1rem;
  background: radial-gradient(30rem 14rem at 50% 0%, rgba(61,220,151,.12), transparent 70%);
}
.yaesta__ico {
  width: 3.4rem; height: 3.4rem; margin: 0 auto 1rem; border-radius: 50%;
  display: grid; place-items: center; background: rgba(61,220,151,.16); color: var(--verde);
}
.yaesta__ico svg { width: 1.7rem; height: 1.7rem; }
.yaesta h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.yaesta p { margin: 0; color: var(--tenue); font-size: .93rem; }

/* ---------- addons: una sola lista ---------- */

.adn { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem;
       border-bottom: 1px solid var(--linea); background: rgba(255,255,255,.014); }
.adn:last-child { border-bottom: 0; }
.adn:hover { background: rgba(255,255,255,.045); }
.adn__c { min-width: 0; flex: 1 1 auto; }
.adn__n { display: block; font-weight: 700; font-size: .98rem; }
.adn__u {
  display: block; margin-top: .12rem; color: var(--apagado); font-size: .78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adn__q { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .35rem; }
.marca-q {
  padding: .12rem .5rem; border-radius: 2rem; font-size: .72rem; font-weight: 700;
  background: rgba(255,255,255,.09); color: var(--tenue);
}
.marca-q--v { background: rgba(76,154,255,.16); color: #7FB6FF; }
.marca-q--c { background: rgba(245,165,36,.16); color: var(--ambar); }
.marca-q--s { background: rgba(61,220,151,.16); color: var(--verde); }

.pega { display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap; margin-top: .9rem; }
.pega label { flex: 1 1 18rem; margin: 0; }
.pega .btn { margin-top: 1.35rem; }
.pega__r { width: 100%; margin: 0; font-size: .9rem; min-height: 1.3em; }
.pega__r--ok { color: var(--verde); }
.pega__r--mal { color: var(--rojo); }

/* ---------- codigos en administracion ---------- */

.cods { display: grid; gap: .4rem; margin-top: 1rem; }
.cod {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .6rem .9rem; border: 1px solid var(--linea); border-radius: .5rem;
  font-size: .88rem;
}
.cod code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem; font-weight: 700; letter-spacing: .06em; color: var(--tinta);
}
.cod--usado { opacity: .55; }
.cod--usado code { text-decoration: line-through; }
.cod__d { color: var(--tenue); margin-left: auto; font-size: .82rem; }
.cod .btn { padding: .3rem .7rem; font-size: .8rem; }

/* [hidden] es una regla del navegador, y cualquier clase que ponga
   display la gana: .biombo declara display:flex y se veia con el
   atributo hidden puesto -el aviso del PIN salia en televisores que
   no tenian PIN-. Aqui se zanja para toda la hoja. */
[hidden] { display: none !important; }

/* ---- candado de cuenta protegida ---- */
.candado {
  display: inline-block; vertical-align: -.12em; margin-left: .4rem;
  width: .9rem; height: .9rem; color: var(--ambar);
}
.candado svg { width: 100%; height: 100%; display: block; }

/* ---- filas de addon: icono, version y flechas ----

   El icono lo declara el propio addon en su manifiesto. Lo carga el
   navegador del cliente directamente del servidor del addon, asi que
   va sin referer: no tiene por que enterarse de desde donde se mira.
   Si no carga, queda la inicial, que es mejor que un roto. */
.adn__ico {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  padding: .12rem; overflow: hidden;
  background: rgba(255,255,255,.07); color: var(--tenue);
  font-weight: 800; font-size: 1rem;
}

/* Ojo con esto, que costo entenderlo.

   Esto era un grid con place-items:center y el icono de OpenSubtitles
   salia gigante. En un grid asi el ancho de la pista lo decide el
   tamano NATURAL de lo que hay dentro: un PNG de 512px pedia 512px,
   el width:100% de la imagen se resolvia contra esa pista y no contra
   la caja de 2.4rem, y lo que se veia era un trozo enorme del centro
   del logo, recortado por el overflow.

   Con max-width/max-height la imagen nunca pasa de la caja, y
   min-width:0 quita la otra trampa: un elemento flex no se encoge por
   debajo de su tamano natural a menos que se le diga.

   Y nada de object-fit:cover, que recorta. Un logo hay que verlo
   entero aunque sobre aire a los lados. */
.adn__ico img {
  display: block;
  min-width: 0; min-height: 0;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
}

/* Muchos logos son redondos o llevan su propia transparencia, y el
   cuadrado gris de detras se ve por las esquinas. Con imagen, sin
   fondo: el fondo es para la inicial de repuesto. */
.adn__ico--img { background: none; }

.adn__v {
  margin-left: .45rem; padding: .08rem .4rem; border-radius: 2rem;
  background: rgba(255,255,255,.08); color: var(--apagado);
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
}

.adn__mov { display: flex; flex-direction: column; gap: .15rem; flex: none; }
.btn--f {
  padding: .12rem .4rem; background: none; color: var(--tenue);
  border-radius: .35rem; line-height: 1;
}
.btn--f svg { width: 1rem; height: 1rem; display: block; }
.btn--f:hover:not(:disabled) { background: rgba(255,255,255,.1); color: var(--tinta); }
.btn--f:disabled { opacity: .2; }

/* El de serie no se mueve: va el primero y se nota. */
.adn--fijo { background: rgba(245,165,36,.05); }
.adn--fijo .adn__ico:not(.adn__ico--img) { background: rgba(245,165,36,.14); color: var(--ambar); }

@media (max-width: 40rem) {
  .adn__mov { flex-direction: row; }
}

/* ---- proteger una cuenta ----
   Va debajo de la ficha y separado: no es un campo mas, es lo que
   decide si el resto se ve o no. */
.proteger {
  margin-top: 1.1rem; padding: 1rem 1.1rem;
  border: 1px solid var(--linea); border-left: 3px solid var(--ambar);
  border-radius: .6rem; background: rgba(245,165,36,.05);
}
.proteger > label:first-child { margin: 0; color: var(--tinta); font-size: .95rem; font-weight: 600; }
.proteger input[type="password"] { max-width: 12rem; letter-spacing: .3em; }
.proteger .check { font-size: .9rem; font-weight: 500; }
/* El espaciado de las cifras se come el texto de ayuda del campo. */
.proteger input[type="password"]::placeholder { letter-spacing: normal; }

/* ---- lo que se acepta antes de pagar ----
   Ni escondido en letra pequena ni premarcado: un consentimiento que
   no se ve, o que ya viene puesto, no es un consentimiento. */
.consiento {
  max-width: 26rem; margin: 1.8rem auto 0; text-align: left;
  padding: 1rem 1.1rem;
  border: 1px solid var(--linea); border-radius: .6rem;
  background: rgba(255,255,255,.03);
}
.consiento .check { margin-bottom: .7rem; font-size: .88rem; line-height: 1.5; color: var(--tenue); }
.consiento .check:last-child { margin-bottom: 0; }
.consiento .check input { margin-top: .25rem; vertical-align: top; }
.consiento .check > span { display: inline-block; width: calc(100% - 1.6rem); vertical-align: top; }
.consiento a { text-decoration: underline; text-underline-offset: .2em; }

.yaesta__cons { margin-top: .8rem !important; color: var(--apagado) !important; font-size: .82rem !important; }

/* ---- dónde funciona ----
   Sin logotipos: los nombres son marcas de otros, y dibujarlas para
   decir "somos compatibles" es meterse en un lío que no hace falta.
   El nombre escrito basta y se lee mejor. */
.sec--plat { padding-top: 4rem; }
.plats {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  max-width: 48rem; margin: 0 auto;
}
.plat {
  padding: 1.1rem 1rem; text-align: center;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition: border-color .2s;
}
.plat:hover { border-color: var(--linea2); }
.plat b { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.plat i {
  display: block; margin-top: .15rem; font-style: normal;
  color: var(--apagado); font-size: .8rem;
}
.plat__nota {
  max-width: 34rem; margin: 1.4rem auto 0; text-align: center;
  color: var(--tenue); font-size: .9rem;
}

/* ---- formulario de contacto ---- */
.contacto textarea {
  display: block; width: 100%; margin-top: .3rem; padding: .72rem .85rem;
  background: rgba(255,255,255,.055); color: var(--tinta);
  border: 1px solid rgba(255,255,255,.12); border-radius: .5rem;
  font: inherit; font-size: 1rem; line-height: 1.5; resize: vertical; min-height: 7rem;
}
.contacto textarea:focus { outline: none; border-color: var(--ambar); background: rgba(255,255,255,.08); }
.contacto__pie { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .4rem; }
.k-res { font-size: .9rem; color: var(--tenue); }
.k-res--mal { color: var(--rojo); }
.contacto__ok {
  margin: 0; padding: 1.2rem 1.3rem;
  border: 1px solid rgba(61,220,151,.3); border-radius: .6rem;
  background: rgba(61,220,151,.07); color: var(--tinta); font-size: .95rem;
}

/* ---- mensajes en administración ---- */
.mens {
  padding: .9rem 1.1rem; margin-bottom: .5rem;
  border: 1px solid var(--linea); border-radius: .6rem;
  background: rgba(255,255,255,.02);
}
.mens--nuevo { border-left: 3px solid var(--ambar); background: rgba(245,165,36,.05); }
.mens__cab { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.mens__de { font-weight: 700; font-size: .95rem; }
.mens__cu { color: var(--apagado); font-size: .8rem; margin-left: auto; }
.mens__as { margin: .35rem 0 0; font-size: .92rem; color: var(--tinta); }
.mens__tx { margin: .5rem 0 0; color: var(--tenue); font-size: .9rem; white-space: pre-wrap; }
.mens__ctx {
  margin: .6rem 0 0; padding: .5rem .7rem; border-radius: .4rem;
  background: rgba(0,0,0,.3); color: var(--apagado);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem;
  overflow-x: auto; white-space: nowrap;
}
.mens__acc { display: flex; gap: .4rem; margin-top: .7rem; }
.mens__acc .btn { padding: .35rem .8rem; font-size: .82rem; }

/* ---- selector de idioma ---- */
.top__fila { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.top__fila .marca { margin-bottom: 0; }
.idioma {
  width: auto; margin: 0 0 0 auto; padding: .4rem 1.9rem .4rem .75rem;
  font-size: .86rem; font-weight: 600; color: var(--tenue);
  background-color: rgba(255,255,255,.055);
  border-radius: .5rem; cursor: pointer;
  /* La flecha, dibujada: un select nativo la pinta del gris del
     sistema y aquí canta. */
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238B94AC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: .7rem;
}
.idioma:hover { color: var(--tinta); }