/* app.css — Estilos del sitio y del panel.
 *
 * Idea de diseño: cada versión de la app tiene una "huella visual" (cuadros
 * generados desde su SHA-256). Ese motivo de cuadros es lo memorable; el resto
 * es sobrio a propósito. El mismo motivo aparece en el logo, el favicon, la
 * línea de versiones y el borde del pie.
 *
 * Organización (para crecer sin enredarse):
 *   1. Tokens   2. Base   3. Estructura   4. Componentes   5. Páginas
 *   6. Anuncios y cookies   7. Panel   8. Movimiento
 * Regla: los colores, tamaños y radios salen SIEMPRE de los tokens.
 * Mobile-first: lo básico es para celular; @media (min-width) lo amplía.
 * Tipografía del sistema a propósito: cero descargas de fuentes = más rápido.
 */

/* ---------- 1. Tokens ---------- */
@property --grados { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --papel: #EDF3F0;
  --superficie: #FFFFFF;
  --tinta: #10231F;
  --suave: #44574F;
  --pino: #0A6B5C;
  --pino-osc: #07564A;
  --menta: #CFE5DD;
  --senal: #E8A23A;
  --noche: #0E2A25;
  --linea: #C5D3CD;
  --peligro: #A02A2A;

  --ancho: 70rem;
  --ritmo: clamp(2.5rem, 6vw, 4.5rem);
  --radio-chico: 4px;
  --radio-grande: 10px;
  --suave-mov: cubic-bezier(.2, .7, .2, 1);

  --fuente: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column; /* el pie siempre queda abajo */
  background: var(--papel); color: var(--tinta); font: 1.0625rem/1.65 var(--fuente);
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pino-osc); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.025em; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); font-weight: 750; }
h3 { font-size: 1.2rem; font-weight: 700; margin-top: 1.8em; letter-spacing: -.01em; }
p { margin: 0 0 1em; max-width: 68ch; }
::selection { background: var(--senal); color: var(--noche); }
:focus-visible { outline: 3px solid var(--noche); outline-offset: 3px; border-radius: 2px; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--noche); color: #fff; padding: .6rem 1rem; z-index: 50; }
.saltar:focus { left: 0; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Estructura ---------- */
.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.columna-texto { max-width: 42rem; }
.seccion { padding-block: var(--ritmo); }
.bloque { display: grid; gap: 1.5rem; align-items: start; }

.cabecera {
  position: sticky; top: 0; z-index: 20; view-transition-name: cabecera;
  background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--linea);
}
@supports (backdrop-filter: blur(8px)) { .cabecera { background: rgba(255, 255, 255, .82); backdrop-filter: blur(10px) saturate(1.4); } }
.cabecera__fila { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.75rem; padding-block: .55rem; }
.marca { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; font-weight: 800; font-size: 1.1rem;
  letter-spacing: -.015em; color: var(--tinta); text-decoration: none; }
.marca__sello { width: 1.65rem; height: 1.65rem; transition: transform .5s var(--suave-mov); }
.marca:hover .marca__sello { transform: rotate(90deg); }
.menu { display: flex; flex-wrap: wrap; gap: 0 1.4rem; list-style: none; margin: 0; padding: 0; }
.menu a { position: relative; display: inline-block; padding: .65rem 0; color: var(--tinta); text-decoration: none; font-weight: 550; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .35rem; height: 3px; background: var(--senal);
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--suave-mov); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }

/* Pie: pegado al fondo de la pantalla; su borde superior repite el motivo de cuadros */
.pie { position: relative; margin-top: calc(var(--ritmo) + 1rem); background: var(--noche); color: #D3E4DE; padding-block: 2.25rem 2rem; }
.pie::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='16'%3E%3Cg fill='%230E2A25'%3E%3Crect x='0' y='8' width='8' height='8'/%3E%3Crect x='8' y='0' width='8' height='16'/%3E%3Crect x='16' y='8' width='8' height='8'/%3E%3Crect x='40' y='8' width='16' height='8'/%3E%3Crect x='48' y='0' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom; }
.pie a { color: #fff; }
.pie__rejilla { display: grid; gap: 1.5rem; }
.pie__nombre { margin: 0 0 .25rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.pie__lema { margin: 0; color: #A9C4BB; max-width: 32rem; }
.pie__enlaces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.pie__enlaces a { display: inline-block; padding: .35rem 0; }

/* ---------- 4. Componentes ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.75rem; padding: .55rem 1.15rem;
  background: var(--pino); color: #fff; border: 2px solid var(--pino); border-radius: var(--radio-chico); font: inherit; font-weight: 650;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .15s var(--suave-mov), box-shadow .15s var(--suave-mov), background-color .2s; }
.boton:hover { background: var(--pino-osc); border-color: var(--pino-osc); transform: translateY(-2px); box-shadow: 0 3px 0 var(--noche); }
.boton:active { transform: translateY(1px); box-shadow: none; }
.boton--claro { background: var(--superficie); color: var(--pino-osc); border-color: var(--pino); }
.boton--claro:hover { background: var(--menta); color: var(--noche); }
.boton--peligro { background: var(--superficie); color: var(--peligro); border-color: var(--peligro); }
.boton--peligro:hover { background: #F7E4E4; border-color: var(--peligro); }
.boton--grande { min-height: 3.4rem; padding: .9rem 1.6rem; font-size: 1.125rem; }
.boton--ancho { display: flex; width: 100%; }
.boton[aria-disabled="true"] { background: #9FB3AC; border-color: #9FB3AC; color: #fff; cursor: not-allowed; transform: none; box-shadow: none; }
.icono { width: 1.35rem; height: 1.35rem; flex: none; }
.boton:hover .icono { animation: caer .7s var(--suave-mov); }

.hash { font-family: var(--mono); font-size: .8rem; font-weight: 400; overflow-wrap: anywhere; color: var(--suave); }
.datos { margin: 0 0 1.25rem; display: grid; gap: .65rem; }
.datos > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .5rem; align-items: baseline; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; font-weight: 650; min-width: 0; font-variant-numeric: tabular-nums; }
.datos--vertical { max-width: 36rem; }
.copiar { display: none; margin-left: .5rem; padding: .15rem .6rem; font: inherit; font-size: .85rem; font-weight: 600; color: var(--pino-osc);
  background: transparent; border: 1.5px solid var(--pino); border-radius: var(--radio-chico); cursor: pointer; }
.js .copiar { display: inline-block; }
.copiar:hover { background: var(--menta); }

/* Huella visual (SVG que genera huella.go) */
.huella { display: block; width: 100%; height: auto; }
.huella rect { fill: var(--pino); }
.huella .s { fill: var(--senal); }

/* La tarjeta de versión: la pieza memorable */
.version { background: var(--superficie); border: 1.5px solid var(--noche); border-radius: var(--radio-grande); overflow: hidden;
  box-shadow: 8px 8px 0 var(--menta); align-self: start; }
.version__huella { display: grid; place-items: center; padding: 1.4rem; background: var(--noche); }
.version__huella .huella { width: min(100%, 11rem); }
.version__huella .huella rect { fill: var(--menta); }
.version__huella .huella .s { fill: var(--senal); }
.version__cuerpo { padding: 1.25rem 1.35rem 1.4rem; }
.version__app { margin-bottom: .15em; font-size: 1.5rem; }
.version__estado { display: flex; align-items: center; margin-bottom: 1.1rem; color: var(--suave); }
.version__vacio { color: var(--suave); margin: 0; }
.punto { width: .6rem; height: .6rem; margin-right: .55rem; border-radius: 50%; background: #2FA37F; }

/* Versiones anteriores: línea de tiempo (el orden es real: de la más nueva a la más vieja) */
.linea { position: relative; list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.linea::before { content: ""; position: absolute; left: 1.75rem; top: 1rem; bottom: 1rem; width: 2px; background: var(--linea); }
.linea__item { position: relative; display: grid; grid-template-columns: 3.5rem 1fr; gap: .25rem 1rem; align-items: center; }
.linea__huella { display: block; width: 3.5rem; padding: .3rem; background: var(--papel); border: 1.5px solid var(--linea); border-radius: var(--radio-chico); }
.linea__huella--grande { width: 5.5rem; padding: .45rem; flex: none; background: var(--noche); border-color: var(--noche); }
.linea__huella--grande .huella rect { fill: var(--menta); }
.linea__huella--grande .huella .s { fill: var(--senal); }
.linea__datos { display: grid; min-width: 0; }
.linea__datos span, summary { color: var(--suave); }
summary { cursor: pointer; }
.linea__boton { grid-column: 2; justify-self: start; }

/* ---------- 5. Páginas ---------- */
.heroe { padding-block: clamp(2rem, 6vw, 4.5rem) 1rem; }
.heroe__rejilla { display: grid; gap: 2.5rem; }
.heroe__titulo { font-size: clamp(2.4rem, 7.5vw, 4.6rem); line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.entrada { font-size: 1.25rem; color: var(--suave); max-width: 34rem; }
.heroe__accion { margin-top: 1.75rem; }
.software__rejilla { display: grid; gap: 2.5rem; }
.foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--linea);
  /* esquina superior derecha "pixelada", como el motivo de cuadros */
  clip-path: polygon(0 0, calc(100% - 28px) 0, calc(100% - 28px) 10px, calc(100% - 10px) 10px, calc(100% - 10px) 28px, 100% 28px, 100% 100%, 0 100%); }
.descarga__cabecera { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; }
.descarga__cabecera h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.4rem); }

/* Pantalla de espera de la descarga */
.puerta { margin-block: 1.5rem; }
.puerta .anuncio { width: 100%; margin: 0 0 1.25rem; }
.puerta__control { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.reloj { --grados: 0deg; position: relative; display: grid; place-items: center; flex: none; width: 5.25rem; height: 5.25rem; border-radius: 50%;
  background: conic-gradient(var(--pino) var(--grados), var(--menta) 0); transition: --grados 1s linear; }
.reloj::before { content: ""; position: absolute; inset: .5rem; border-radius: 50%; background: var(--papel); }
.reloj span { position: relative; font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.puerta__texto { display: grid; gap: .6rem; justify-items: start; }
.puerta__estado { margin: 0; font-weight: 650; }

/* ---------- 6. Anuncios y cookies ---------- */
/* Espacio reservado: la página no salta cuando el anuncio carga */
.anuncio { width: min(100% - 2rem, var(--ancho)); margin: 1.75rem auto; }
.anuncio[hidden] { display: none; }
.anuncio__rotulo { margin: 0 0 .25rem; font-size: .8rem; color: var(--suave); }
.anuncio__caja { min-height: 120px; display: grid; place-items: center; overflow: hidden; background: #E2EAE6; border-radius: var(--radio-chico); }
.anuncio--medio .anuncio__caja { min-height: 250px; }
.anuncio--puerta .anuncio__caja { min-height: 280px; }
.anuncio--pie .anuncio__caja { min-height: 100px; }

.cookies { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; gap: .75rem; padding: .95rem 1rem;
  background: var(--superficie); border-top: 3px solid var(--senal); box-shadow: 0 -6px 0 rgba(14, 42, 37, .06); }
.cookies[hidden] { display: none; }
.cookies p { margin: 0; max-width: none; }
.cookies__botones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- 7. Panel de administración ---------- */
.panel__contenido { padding-block: 1.5rem 3rem; }
.panel h1 { font-size: 1.9rem; }
.panel section + section { margin-top: 2.5rem; }
.formulario { display: grid; gap: 1.25rem; max-width: 44rem; }
.formulario fieldset { display: grid; gap: 1rem; min-width: 0; padding: 1rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); }
.formulario legend { font-weight: 700; padding-inline: .4rem; }
.campo { display: grid; gap: .3rem; }
.campo label { font-weight: 600; }
.casilla { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; font-weight: 600; }
.casilla input { width: 1.4rem; height: 1.4rem; accent-color: var(--pino); }
.ayuda { margin: 0; color: var(--suave); font-size: .9rem; }
input[type="text"], input[type="password"], input[type="number"], select, textarea {
  width: 100%; min-height: 2.75rem; padding: .6rem .7rem; font: inherit; color: var(--tinta);
  background: #fff; border: 1.5px solid #8FA39C; border-radius: var(--radio-chico); }
textarea.codigo { font-family: var(--mono); font-size: .85rem; }
.login { max-width: 24rem; margin: 3rem auto; }
.aviso { padding: .75rem 1rem; border: 1px solid; border-radius: var(--radio-chico); }
.aviso--ok { background: #E1F1EA; border-color: #5FA58F; }
.aviso--error { background: #F9E3E3; border-color: #C86B6B; }
.zona { display: grid; gap: .6rem; justify-items: start; padding: 1.25rem; background: var(--superficie); border: 2px dashed #8FA39C; border-radius: var(--radio-grande); transition: background-color .2s, border-color .2s; }
.zona.sobre { background: var(--menta); border-color: var(--pino); }
.nombre-elegido { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.subida progress { width: 100%; height: 1rem; accent-color: var(--pino); }
.mensaje-subida { min-height: 1.5rem; margin: 0; font-weight: 600; }
.mensaje-subida.error { color: var(--peligro); }
.lista-admin { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.lista-admin li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .9rem 1rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); }
.lista-admin p { margin: .15rem 0 0; }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.etiqueta { display: inline-block; margin-left: .4rem; padding: .1rem .5rem; font-size: .8rem; font-weight: 650; color: #fff; background: var(--pino); border-radius: 99px; }
.etiqueta--gris { background: #5C6D67; }
.medio { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.medio img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radio-chico); }
.medio__video { display: grid; place-items: center; width: 64px; height: 64px; font-size: .85rem; background: var(--linea); border-radius: var(--radio-chico); }

/* ---------- Pantallas más anchas ---------- */
@media (min-width: 48rem) {
  .cookies { grid-template-columns: 1fr auto; align-items: center; padding-inline: max(1rem, calc((100% - var(--ancho)) / 2)); }
  .pie__rejilla { grid-template-columns: 1fr auto; align-items: start; gap: 3rem; }
  .linea__item { grid-template-columns: 3.5rem 1fr auto; }
  .linea__boton { grid-column: auto; }
}
@media (min-width: 56rem) {
  .heroe__rejilla { grid-template-columns: 1.3fr 1fr; align-items: center; gap: 4.5rem; }
  .bloque { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .software__rejilla { grid-template-columns: 1.3fr 1fr; gap: 3.5rem; }
  .software__rejilla .version { position: sticky; top: 5.5rem; }
}

/* ---------- 8. Movimiento ---------- */
/* Una sola secuencia al abrir la portada: el texto sube y la huella se arma cuadro a cuadro.
   Solo se anima si hay JavaScript (clase .js); sin él, todo se ve de inmediato. */
@keyframes subir { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes armar { from { opacity: 0; transform: scale(.15); } to { opacity: 1; transform: none; } }
@keyframes caer { 0% { transform: translateY(0); } 45% { transform: translateY(4px); } 100% { transform: translateY(0); } }
@keyframes latir { 0% { box-shadow: 0 0 0 0 rgba(47, 163, 127, .55); } 100% { box-shadow: 0 0 0 .7rem rgba(47, 163, 127, 0); } }

.js .heroe__titulo { animation: subir .8s var(--suave-mov) both; }
.js .heroe__cuerpo { animation: subir .8s .12s var(--suave-mov) both; }
.js .heroe__accion { animation: subir .8s .24s var(--suave-mov) both; }
.js .version__huella .huella rect { transform-box: fill-box; transform-origin: center;
  animation: armar .5s calc(.3s + var(--i, 0) * 26ms) var(--suave-mov) both; }
.punto { animation: latir 1.8s 1s 3; }

/* Cambio de página con fundido suave (los navegadores que no lo soportan simplemente lo ignoran) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

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