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

.wrap{max-width:540px;margin:0 auto;padding:14px 14px 70px}

/* ---- volver ---- */
.volver{
  display:inline-block;text-decoration:none;color:var(--faint);
  font-size:15px;padding:4px 0;margin-bottom:10px
}
.volver:hover{color:var(--accent)}

/* ---- el numero, que es a lo que se vino ---- */
.foco{text-align:center;margin:0 0 6px}
.foco-que{font-size:17px;color:var(--faint)}
.foco-n{
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-variant-numeric:tabular-nums;font-size:30px;font-weight:600;
  line-height:1.1;color:var(--accent);letter-spacing:-.02em
}
.foco-cuando{font-size:15px;color:var(--faint)}
/* La zona horaria: del tamaño del rotulo del paso, con el color de la hora. */
.zona-t{font-size:13px;color:var(--ink);letter-spacing:.02em}

/* ---- la afirmacion ---- */
.tesis{
  text-align:center;font-size:21px;font-weight:600;
  margin:20px 0 4px;text-wrap:balance
}
.tesis-sub{
  text-align:center;font-size:16px;color:var(--muted);
  margin:0 0 22px;text-wrap:balance
}

/* ---- los tres momentos ---- */
.paso{
  background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:12px 14px
}
.paso-h{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
.paso-hora{
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-variant-numeric:tabular-nums;font-size:26px;font-weight:600;
  line-height:1.2
}
.paso-que{font-size:13px;color:var(--faint);letter-spacing:.02em}
.paso p{margin:2px 0 0;color:var(--muted);font-size:16px}
.paso b{color:var(--ink);font-weight:600}

/* La flecha entre pasos: el ORDEN es el argumento, asi que se dibuja. */
.entre{
  display:flex;align-items:center;gap:10px;
  padding:6px 0 6px 16px;color:var(--faint);font-size:14px
}
.entre::before{content:"↓";font-size:19px;line-height:1;color:var(--accent)}

/* ---- el cierre ---- */
.cierre{
  margin-top:22px;padding:14px 16px;
  border:1px solid var(--accent);border-radius:8px;
  background:var(--accent-soft)
}
.cierre-t{display:block;font-size:18px;font-weight:600;margin-bottom:4px}
.cierre p{margin:0;font-size:16px;color:var(--muted)}
.cierre p b{color:var(--ink);font-weight:600}
/* Las horas dentro del texto son el argumento, no un dato de paso. */
.h{
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)
}
.zona{
  text-align:center;font-size:14px;color:var(--faint);
  margin:10px 0 16px
}

/* ---- el detalle tecnico, plegado ---- */
details{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
summary{
  cursor:pointer;color:var(--accent);font-size:16px;
  list-style:none;padding:4px 0
}
summary::-webkit-details-marker{display:none}
summary::after{content:" ▾";font-size:12px;opacity:.7}
details[open] summary::after{content:" ▴"}
.dato{margin-top:12px}
.dato-k{font-size:13px;color:var(--faint)}
.dato-v{
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-size:13px;color:var(--muted);word-break:break-all;
  background:var(--sunk);border:1px solid var(--line);
  border-radius:5px;padding:7px 9px;margin-top:3px
}
.nota{font-size:14px;color:var(--faint);margin-top:16px}
.nota a{color:var(--accent)}
/* 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, igual que en la portada. */
.pie-repos{
  display:flex;justify-content:center;align-items:center;gap:10px;
  margin-top:10px
}