/* verificar.css — solo lo propio. Lo compartido vive en comun.css */

:root{
  --ground:#E4E8E6; --surface:#DADFDD; --sunk:#D0D6D3; --line:#BFC7C4;
  --ink:#1B201E; --muted:#525C5A; --faint:#7A8482;
  --accent:#155E5A; --accent-soft:#D8E8E5; --ok:#2F5B33; --warn:#8A4B12;
  --j-cab:#D6004E; --j-pay:#9B14D6; --j-fir:#0077A8; --j-pt:#1B201E;
}
/* La paleta compartida esta en common.css. Aca van SOLO las variables
   propias de esta pagina. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ok:#7DBA84; --warn:#D9925A;
    --j-cab:#FB015B; --j-pay:#D63AFF; --j-fir:#00B9F1; --j-pt:#E7EAEE;
  }
}
:root[data-theme="dark"] {
  --ok: #7DBA84;
  --warn: #D9925A;
  --j-cab: #FB015B;
  --j-pay: #D63AFF;
  --j-fir: #00B9F1;
  --j-pt: #E7EAEE;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55
}
.wrap{max-width:740px;margin:0 auto;padding:14px 14px 70px}
code,.mono{font-family:ui-monospace,"Cascadia Code",Consolas,monospace}

.volver{display:inline-block;text-decoration:none;color:var(--faint);font-size:15px;margin-bottom:12px}
.volver:hover{color:var(--accent)}

h1{font-size:23px;font-weight:640;margin:0 0 2px;letter-spacing:-.01em}
.sub{color:var(--muted);margin:0 0 4px}
/* El numero es a lo que va toda la pagina: los cuatro pasos existen para
   demostrar que se llega a EL. Va grande desde el titulo. */
.ident-r{
  font-family:ui-monospace,Consolas,monospace;
  font-size:30px;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1;
  vertical-align:-4px;margin-left:2px
}
/* La variante es lo que se esta verificando: sin eso, los valores de abajo no
   se sabe de que son. Va destacada aunque la linea sea tecnica. */
.ident-v{
  font-family:ui-monospace,Consolas,monospace;
  font-size:17px;font-weight:700;color:var(--accent)
}
.ident{
  font-family:ui-monospace,Consolas,monospace;font-size:14px;
  color:var(--faint);margin-bottom:18px
}

/* ---- los pasos ---- */
/* VEREDICTO GLOBAL. 10.5 pide TRES respuestas, no dos: verifica, no verifica,
   o inverificable. Sin esto la pantalla mostraba cuatro veredictos sueltos y
   quien alteraba un dato veia «unas cosas dicen falso y otras verdadero». */
/* Hasta que no llega el .jws no hay nada que mostrar: sin esto se ven los
   marcadores %%...%% en crudo durante el primer instante. */
/* ⚠️ ESTO ERA display:none Y COSTABA UN CLS DE 0,94.

   Sacar los bloques del flujo hace que la pagina mida CERO mientras se baja
   el .jws, y al llegar aparecen los cuatro pasos de golpe y empujan todo hacia
   abajo. Cloudflare lo marco sobre .wrap con 0,94 y 0,94 — un desplazamiento
   acumulado de casi 1 es de los peores que se pueden medir.

   visibility:hidden esconde lo mismo y RESERVA EL ESPACIO: los bloques ya
   estan ahi con su alto, con los marcadores %%...%% adentro, y al llegar el
   archivo se rellenan en su lugar sin mover nada alrededor.

   Sigue cumpliendo lo que la regla pedia —que no se vean los %%...%% en
   crudo— que es lo unico que el display:none estaba resolviendo. */
body.cargando .paso, body.cargando .verarch, body.cargando .ident, body.cargando .pie{visibility:hidden}
.global{
  padding:11px 14px;border-radius:8px;margin:12px 0 14px;
  font-size:17px;font-weight:600;text-wrap:balance
}
.global small{display:block;font-weight:400;font-size:14.5px;margin-top:2px;opacity:.85}
.g-si{background:var(--accent-soft);border:1px solid var(--accent);color:var(--ok)}
.g-no{border:1px solid color-mix(in srgb, var(--warn) 60%, transparent);color:var(--warn)}
/* En pausa: espera un clic de la persona, no es un fallo. Se puede tocar. */
.g-pausa{border:1px dashed var(--line);color:var(--muted);cursor:pointer}
.paso{
  background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:14px 16px;margin-bottom:12px
}
.paso-n{
  display:inline-block;font-family:ui-monospace,monospace;font-size:12px;
  color:var(--faint);letter-spacing:.1em;margin-bottom:4px
}
.paso h2{font-size:18px;font-weight:620;margin:0 0 6px}
.paso p{margin:0 0 10px;color:var(--muted);font-size:15px}

.kv{margin-bottom:9px}
/* La altura la fija el boton "restaurar", que no todas las filas tienen. Sin
   este minimo, un rotulo con boton y uno sin boton quedan de alto distinto y
   las cajas de al lado no alinean. */
.kv-k{font-size:12.5px;color:var(--faint);margin-bottom:2px;min-height:21px}
.kv-v{
  font-family:ui-monospace,Consolas,monospace;font-size:12.5px;
  background:var(--sunk);border:1px solid var(--line);border-radius:5px;
  padding:7px 9px;word-break:break-all;color:var(--ink)
}

.bien,.mal{
  margin-top:2px;padding:8px 10px;border-radius:6px;font-size:14px;font-weight:600
}
.bien{background:var(--accent-soft);border:1px solid var(--accent);color:var(--ok)}
.bien::before{content:"✓ ";}
.mal{border:1px solid color-mix(in srgb, var(--warn) 55%, transparent);color:var(--warn)}
.mal::before{content:"✗ ";}
.calc{
  margin-top:8px;font:inherit;font-size:14px;cursor:pointer;
  background:var(--accent);color:var(--ground);border:0;
  border-radius:6px;padding:7px 16px
}
.calc:hover{opacity:.9}
/* Restaurar va ARRIBA, pegado a la etiqueta del dato que restaura, para que
   se lea de que valor habla. Y en fino: es la salida, no la accion. */
.fila{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* El rotulo tiene que poder achicarse. Un elemento flex trae min-width:auto,
   que le impide bajar del ancho de su contenido: con un rotulo largo —el de
   drand_public_key— el texto empujaba los dos botones fuera de la caja en vez
   de partirse en dos lineas. */
.fila>span{min-width:0;flex:1 1 auto}
.restaurar{
  flex:none;font:inherit;font-size:12px;cursor:pointer;
  background:none;color:var(--muted);border:1px solid var(--line);
  border-radius:20px;padding:1px 10px;line-height:1.5
}
.restaurar:hover{border-color:var(--accent);color:var(--accent)}
.viejo{opacity:.35}
.espera{
  margin-top:2px;padding:8px 10px;border-radius:6px;font-size:14px;
  border:1px dashed var(--line);color:var(--faint)
}
.rot{font-family:ui-monospace,Consolas,monospace;color:var(--accent);font-weight:600}
.j-cab{color:var(--j-cab)}
.j-pay{color:var(--j-pay)}
.j-fir{color:var(--j-fir)}
.j-pt{color:var(--j-pt);font-weight:700}
.bloq{border-left:2px solid var(--line);padding-left:11px;margin:10px 0}
.bloq-t{font-size:12.5px;color:var(--accent);font-weight:600;margin-bottom:5px}

#edCab{color:var(--j-cab)}
#edPay{color:var(--j-pay)}
#edSig{color:var(--j-fir)}
/* Los dos de este paso miden lo mismo y los dos se agrandan arrastrando: son
   el payload que entra y el mensaje que se firma, y se leen comparandolos. */
#edMsgOut{
  height:192px;max-height:none;resize:vertical;
  overflow:auto;word-break:break-all;white-space:normal
}
#edPay{height:192px}
#edMsgOut .p1{color:var(--j-cab)}
#edMsgOut .p2{color:var(--j-pay)}
#edMsgOut .pt{color:var(--j-pt);font-weight:700}
.leyenda{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;margin-top:6px}
.leyenda b{font-weight:600}
.cinco{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:2px}
.cinco label{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--faint);min-width:0}
.cinco input{padding:6px 8px;border-radius:5px;color:var(--ink)}
textarea.ed{padding:7px 9px;border-radius:5px;color:var(--ink);resize:vertical;line-height:1.45}
.flujo{white-space:pre;overflow-x:auto;word-break:normal}
@media(max-width:640px){.cinco{grid-template-columns:repeat(2,1fr)}}
.kv-nota{font-size:12px;color:var(--faint);margin-top:3px}
/* LO QUE SE EDITA Y LO QUE NO TIENEN QUE VERSE DISTINTO SIN LEER LA ETIQUETA.
   Tenian el mismo aspecto y no habia forma de saber donde se podia tocar. */
.ed{
  width:100%;font:inherit;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;
  background:var(--ground);
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  cursor:text
}
.ed:hover{border-color:var(--accent)}
.ed:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
/* Lo calculado: hundido, sin borde y en gris. No invita a tocarlo. */
.kv-v:not(.ed){
  background:var(--sunk);border:1px dashed var(--line);color:var(--muted)
}
.op{
  font-family:ui-monospace,Consolas,monospace;font-size:13px;
  color:var(--accent);margin:8px 0 4px
}
.veredicto{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  font-size:14px;color:var(--ok);font-weight:600
}
.veredicto::before{content:"✓";font-size:16px}

/* ---- la trampa ---- */
.trampa{
  border-left:3px solid var(--warn);background:var(--ground);
  padding:9px 12px;margin-top:10px;font-size:14px;color:var(--muted)
}
.trampa b{color:var(--warn)}

/* ---- codigo ---- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 0}
.tab{user-select:none;
  font-family:ui-monospace,monospace;font-size:12.5px;
  background:var(--ground);border:1px solid var(--line);border-radius:20px;
  padding:4px 12px;cursor:pointer;color:var(--muted)
}
.tab-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
pre{
  background:var(--sunk);border:1px solid var(--line);border-radius:6px;
  padding:11px 13px;overflow:auto;margin:8px 0 0;
  font-size:12.5px;line-height:1.5;
  /* Se agrandan arrastrando, como las cajas de los pasos. Los fragmentos de
     codigo por lenguaje son lo que la gente copia, y con alto fijo hay que
     leerlos por una ranura. resize necesita overflow distinto de visible. */
  resize:vertical
}
.verarch{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
/* Resaltado del JSON. Propio y minimo: una expresion regular y cinco colores
   del mismo juego que el resto de la pagina. */
.j-k{color:var(--accent)}
.j-s{color:var(--ink)}
.j-n{color:var(--ok)}
.j-b{color:var(--warn)}
.j-p{color:var(--faint)}
.arch{
  /* SE PUEDE AGRANDAR ARRASTRANDO, igual que los textarea de los pasos.
     Antes era una altura fija de 220px: el JWS crudo y el payload entero no
     entran ahi, y no habia forma de verlos completos sin hacer scroll dentro
     de una cajita. resize necesita overflow distinto de visible, que ya esta. */
  height:220px;max-height:none;resize:vertical;
  overflow:auto;white-space:pre-wrap;word-break:break-all;
  font-size:11.5px;margin-top:4px
}
.pie{margin-top:22px;font-size:14px;color:var(--faint)}
.pie a{color:var(--accent)}
/* ---- el validador en vivo ---- */
.val{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.val label{display:block;font-size:12.5px;color:var(--faint);margin-bottom:3px}
.val input{
  width:100%;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;
  padding:8px 9px;border:1px solid var(--line);border-radius:5px;
  background:var(--ground);color:var(--ink)
}
.val input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.val button{
  margin-top:8px;font:inherit;font-size:14px;cursor:pointer;
  background:var(--accent);color:var(--ground);border:0;
  border-radius:6px;padding:7px 16px
}
.val button:hover{opacity:.9}
.res{margin-top:10px;font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
.res div{padding:7px 9px;border-radius:5px;margin-bottom:5px;word-break:break-all}
.res .si{background:var(--accent-soft);border:1px solid var(--accent)}
.res .no{border:1px solid color-mix(in srgb, var(--warn) 45%, transparent)}
.res b{display:block;font-family:system-ui,sans-serif;font-size:12.5px;margin-bottom:2px}
.res .si b{color:var(--ok)} .res .no b{color:var(--warn)}

/* Enlaces a terceros. El color NO cambia nunca — ni visitado, ni activo. */
.ext,.ext:link,.ext:visited,.ext:active{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent)
}
.ext:hover,.ext:focus-visible{border-bottom-color:var(--accent);outline:none}

/* ---- el pie de controles, igual que en la portada ---- */
.pie-ctl{
  display:flex;justify-content:center;align-items:center;gap:10px;
  margin-top:26px;padding-top:16px;border-top:1px solid var(--line)
}
.idi{display:flex;gap:4px}
/* Los tres repositorios de anclaje. Fila propia, debajo de los controles. */
.pie-repos{
  display:flex;justify-content:center;align-items:center;gap:10px;
  margin-top:10px
}

/* Los nombres de los algoritmos: se notan, pero no compiten con el titulo.
   600 y no 700, y el color del texto normal — el acento esta reservado para
   lo accionable (enlaces, botones). */
.algos{font-size:14.5px;color:var(--muted);margin:6px 0 0}
.term{font-weight:600;color:var(--ink)}

/* ⚠️ NADA ARRASTRA LA PAGINA DE COSTADO.
   Reportado el 2026-08-23 en celular: esta pagina —y solo esta— se corria
   ~60% hacia la izquierda, con negro vacio a la derecha. O sea algo mas ancho
   que la pantalla, sin fondo, que no aparece leyendo el CSS: todos los flex
   llevan wrap, los <pre> tienen overflow:auto y los input width:100%.

   `clip` y no `hidden`: hidden crea un contenedor de scroll y rompe el
   `position:sticky` de cualquier hijo. clip solo recorta.

   Esto CONTIENE el sintoma. Cuando aparezca el elemento culpable —con la
   consola, filtrando los que se pasan de innerWidth— se arregla en el
   elemento y esta regla queda igual, como red. */
html{overflow-x:clip}

/* Y que ningun texto largo pueda empujar: los nombres de campo con guiones
   bajos y las formulas monoespaciadas son los que llegan mas lejos. */
.op,.kv-nota,.trampa,.sub,.algos,p,li{overflow-wrap:anywhere}