/* Acceso y panel del cliente. Mismas reglas: papel, tinta, un morado,
   esquinas cuadradas. */

.pagina-angosta { min-height: 100vh; display: flex; flex-direction: column; }
.pagina-angosta main { flex: 1; }

/* ---------- Acceso ---------- */
.acceso {
  display: grid; grid-template-columns: .9fr 1fr; gap: 3rem;
  align-items: center; padding: clamp(2rem, 6vw, 4rem) 0;
}
.acceso__arte {
  background: var(--papel);
  border: var(--borde);
  box-shadow: var(--sombra);
  transform: rotate(-1.5deg);
  overflow: hidden;
}
.acceso__arte img { width: 100%; }

.tarjeta {
  background: var(--papel);
  border: var(--borde);
  box-shadow: var(--sombra);
  padding: 1.8rem;
  max-width: 460px; width: 100%;
}

.pestanas { display: flex; gap: 0; margin-bottom: 1.6rem; }
.pestana {
  flex: 1; font-family: var(--display); font-size: .95rem; letter-spacing: .03em;
  padding: .75rem; text-transform: uppercase;
  background: var(--papel); color: var(--gris);
  border: var(--borde-fino); cursor: pointer;
  transition: none;
}
.pestana + .pestana { border-left: none; }
.pestana:hover { color: var(--tinta); }
.pestana.activa { background: var(--tinta); color: var(--papel); }

form label { display: block; margin-bottom: 1.1rem; }
/* El JS esconde "Tu nombre" con el atributo `hidden` al entrar (solo va al
   crear cuenta). Sin esta regla la de arriba le gana al `display:none` que el
   navegador aplica a [hidden], y el campo se ve igual. */
form label[hidden] { display: none; }
form label > span {
  display: block; font-size: .8rem; font-weight: 700;
  margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .04em;
}
form input {
  width: 100%; padding: .8rem .9rem; font-family: var(--texto); font-size: 1rem;
  font-weight: 500;
  color: var(--tinta); background: var(--papel);
  border: var(--borde-fino);
  transition: box-shadow .1s steps(2);
}
form input:focus { outline: none; box-shadow: var(--sombra-chica); }
.ayuda, .nota {
  display: block; font-size: .78rem; color: var(--gris); margin-top: .35rem;
  font-weight: 500;
}
.nota { margin: .4rem 0 1rem; }
form .boton { width: 100%; justify-content: center; margin-top: .4rem; }

.aviso {
  padding: .8rem 1rem; font-size: .9rem; font-weight: 700;
  border: var(--borde-fino); margin-bottom: 1rem;
}
.aviso--error { background: #fee2e2; border-color: #991b1b; color: #7f1d1d; }
.aviso--ok { background: var(--morado-humo); color: var(--morado-hondo); }

.pie-tarjeta { font-size: .76rem; color: var(--gris); margin-top: 1.2rem; line-height: 1.5; }

/* ---------- Panel ---------- */
.panel { padding: clamp(2rem, 5vw, 3.5rem) 0; position: relative; }
.panel__cabecera {
  margin-bottom: 2.2rem; position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
}
.panel__cabecera h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.panel__saludo { color: var(--gris); margin-top: .5rem; font-weight: 500; }

/* El robot saluda desde la esquina, DENTRO de su viñeta: el dibujo trae fondo
   blanco, así que sin marco se ve como un cuadrado blanco pegado sobre el
   papel gris. Con borde es un panel más. Decorativo: se va si falta lugar. */
.panel__robot {
  width: 132px; flex: none;
  margin-bottom: -2.2rem;   /* apoyado sobre la primera viñeta */
  transform: rotate(3deg);
  background: var(--papel);
  border: var(--borde);
  box-shadow: var(--sombra-chica);
}
@media (max-width: 700px) { .panel__robot { display: none; } }

/* 2 columnas fijas, no `auto-fit`: con minmax(320px,1fr) el navegador reserva
   3 columnas en pantallas anchas y, como hay 2 bloques, queda una columna
   muerta a la derecha. */
.rejilla-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.bloque { padding: 1.6rem; }
.bloque h2 { font-size: 1.35rem; margin-bottom: .9rem; }
.bloque--ancho { grid-column: 1 / -1; }

@media (max-width: 760px) { .rejilla-panel { grid-template-columns: 1fr; } }

/* ---------- Mi acceso (el checkout) ----------
   Es la viñeta donde el cliente decide pagar: la más importante del panel.
   Trama de fondo y líneas de concentración apuntando al precio. */
/* Trama de puntos, NO líneas de velocidad: sobre blanco las líneas a baja
   opacidad se ven como rayones sucios (funcionan sobre el negro del acto 2,
   donde hay contraste). La trama sí lee como screentone impreso. */
#bloque-acceso { position: relative; overflow: hidden; }
#bloque-acceso::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--tinta) 1px, transparent 1.3px);
  background-size: 6px 6px;
  -webkit-mask-image: linear-gradient(105deg, #000 0%, transparent 62%);
  mask-image: linear-gradient(105deg, #000 0%, transparent 62%);
  opacity: .16;
}
#bloque-acceso > * { position: relative; z-index: 1; }

.acceso-fila {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: space-between; align-items: center;
  padding: 1.2rem; border: var(--borde);
  background: var(--papel);
  box-shadow: var(--sombra-chica);
}
.acceso-fila + .acceso-fila { margin-top: 1rem; }
.acceso-fila__que h3 { font-size: 1.9rem; margin-bottom: .5rem; }
.acceso-fila__que .nota { margin: .5rem 0 0; max-width: 44ch; }
.acceso-fila__pagar { display: grid; gap: .6rem; justify-items: end; }

.precio-chico { font-family: var(--display); font-size: 2rem; line-height: 1; }
.precio-chico small { font-family: var(--texto); font-size: .74rem; color: var(--gris); font-weight: 700; }
.semanas { display: flex; gap: .45rem; }

.chip {
  display: inline-block;
  font-family: var(--display); font-size: .82rem; letter-spacing: .05em;
  padding: .28rem .65rem; border: var(--borde-fino);
}
.chip--activa  { background: var(--morado); color: var(--papel); }
.chip--gracia  { background: #fde047; color: var(--tinta); }
.chip--cortada { background: var(--tinta); color: var(--papel); }
/* Estados de suscripción, como los pidió el dueño: VERDE = activa,
   BLANCO = desactivada. Semánticos, como el amarillo de gracia. */
.chip--verde  { background: #22c55e; color: var(--tinta); }
.chip--blanca { background: var(--papel); color: var(--tinta); }

/* ---------- Mi perfil ---------- */
.perfil-campo { margin-bottom: 1.1rem; }
.perfil-campo > span {
  display: block; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .4rem;
}
.perfil-nombre { display: flex; gap: .5rem; align-items: stretch; }
.perfil-nombre input { flex: 1; min-width: 0; }
/* cuenta.css estira todo `form .boton` al 100%: acá el GUARDAR va al lado del
   input, no debajo, así que se le devuelve el ancho automático. */
.perfil-nombre .boton { width: auto; margin-top: 0; flex: none; }
.perfil-email { font-weight: 700; word-break: break-all; }
.perfil-ok { color: #15803d; }

.lista { list-style: none; display: grid; gap: .6rem; }
.lista li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .75rem .9rem; background: var(--papel);
  border: var(--borde-fino);
  font-size: .92rem;
}
.lista li strong { display: block; font-weight: 900; }
.lista li small { color: var(--gris); font-size: .78rem; font-weight: 500; }

.vacio {
  color: var(--gris); font-size: .9rem; padding: 1.2rem; font-weight: 500;
  border: 2px dashed var(--gris); text-align: center;
}

.boton--chico { padding: .42rem .75rem; font-size: .78rem; box-shadow: 2px 2px 0 var(--tinta); }
.boton--chico:hover { box-shadow: 4px 4px 0 var(--tinta); }
.boton--peligro { background: #dc2626; color: var(--papel); }

.cargando { color: var(--gris); font-size: .9rem; font-weight: 500; }

@media (max-width: 820px) {
  .acceso { grid-template-columns: 1fr; gap: 1.5rem; }
  .acceso__arte { display: none; }
  .tarjeta { margin-inline: auto; }
  .acceso-fila { flex-direction: column; align-items: flex-start; }
  .acceso-fila__pagar { justify-items: start; width: 100%; }
}

/* Link de descarga del programa (en MI ACCESO, con licencia activa) */
.descargar {
  display: inline-block; margin-top: .5rem;
  font-family: var(--display); font-size: .82rem; letter-spacing: .03em;
  color: var(--morado); border-bottom: 2px solid var(--morado);
  padding-bottom: 1px;
}
.descargar:hover { color: var(--morado-hondo); border-color: var(--morado-hondo); }

/* ---------- Fichas de programa (póster de cine) ----------
   Los programas se muestran como portadas verticales en grilla, no como filas:
   cada uno es "un producto en la vidriera". Mismo lenguaje manga (borde grueso,
   sombra dura, esquinas cuadradas). */

.fichas {
  display: grid;
  /* Se acomoda sola: entran las que quepan, mínimo 210px cada una. */
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.4rem;
}

.ficha {
  display: flex; flex-direction: column;
  background: var(--papel);
  border: var(--borde);
  box-shadow: var(--sombra-chica);
}

/* El póster: proporción 3:4 como una portada de verdad. Todavía no hay arte por
   programa, así que se dibuja con el vocabulario del cómic (trama de puntos +
   la inicial gigante entintada) en vez de dejar un hueco gris. */
.ficha__poster {
  position: relative; aspect-ratio: 3 / 4;
  background: var(--tinta);
  border-bottom: var(--borde);
  display: grid; place-items: center;
  overflow: hidden;
}
.ficha__poster .trama { position: absolute; inset: 0; }
.ficha__inicial {
  font-family: var(--titulo);
  font-size: clamp(3.6rem, 8vw, 6rem); line-height: 1;
  color: var(--papel);
  -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill;
  transform: rotate(-6deg);
  user-select: none;
}
.ficha__chip { position: absolute; top: .55rem; left: .55rem; }

.ficha__datos { padding: .9rem 1rem 1.1rem; display: grid; gap: .55rem; justify-items: start; }
.ficha__nombre { font-size: 1.3rem; line-height: 1.05; }
.ficha__detalle { margin: 0; font-size: .8rem; }
.ficha__datos .descargar { margin-top: 0; }
.ficha__datos .semanas { width: 100%; }
.ficha__datos .boton--chico { flex: 1; justify-content: center; }

/* Bloqueada: el póster se apaga. Es SOLO la señal visual — el candado real lo
   pone el servidor al validar la licencia, y el programa al pedir login. */
.ficha--bloqueada .ficha__poster { background: var(--gris); }
.ficha--bloqueada .ficha__inicial { opacity: .55; }
.ficha--bloqueada .ficha__nombre { color: var(--gris); }

/* En el teléfono, DOS por fila (como cualquier grilla de pósters). A una sola
   columna cada ficha ocupaba media pantalla de alto y ver 4 programas era un
   scroll eterno. */
@media (max-width: 520px) {
  .fichas { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .ficha__datos { padding: .7rem .7rem .9rem; gap: .45rem; }
  .ficha__nombre { font-size: 1rem; }
  .ficha__inicial { font-size: 3.2rem; }
  .precio-chico { font-size: 1.4rem; }
  /* Los tres botones tienen que entrar en una fila dentro de media pantalla. */
  .ficha__datos .semanas { gap: .25rem; }
  .ficha__datos .boton--chico { padding: .4rem .2rem; font-size: .66rem; letter-spacing: 0; }
}

/* ---------- Programas web (se usan en el navegador, no se descargan) ---------- */

/* Destacada: es lo nuevo y lo que más queremos mostrar. Mismo lenguaje manga
   (borde grueso + sombra dura sin blur) pero en MORADO en vez de tinta, así
   salta a la vista sin sumar un color nuevo a la paleta. */
.vineta.bloque--destacado {
  border-color: var(--morado);
  box-shadow: 10px 10px 0 var(--morado);
}

.web-app {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: space-between; align-items: center;
  padding: 1.2rem; border: var(--borde);
  background: var(--papel);
  box-shadow: var(--sombra-chica);
}
.web-app + .web-app { margin-top: 1rem; }
.web-app__que h3 { font-size: 1.9rem; margin-bottom: .5rem; }
.web-app__que .nota { margin: .5rem 0 0; max-width: 46ch; }
.web-app__accion { display: grid; gap: .6rem; justify-items: end; }

/* Bloqueada: apagada sobre papel gris. Es SOLO la señal visual — el candado de
   verdad lo pone la app web, que pide login y valida la licencia por su cuenta. */
.web-app--bloqueada { background: var(--papel-sucio); }
.web-app--bloqueada .web-app__que h3 { color: var(--gris); }

/* ABRIR: la acción estrella de la sección, más grande que un botón normal. */
.boton--abrir { font-size: 1.05rem; padding: .85rem 1.7rem; }

@media (max-width: 820px) {
  .web-app { flex-direction: column; align-items: flex-start; }
  .web-app__accion { justify-items: start; width: 100%; }
}