/* La misma vitrina que davidameth.dev (DESIGN.md del portafolio): suelo
   plateado, cada pieza en doble bisel, un solo acento naranja. Los valores
   son copia de src/styles/sitio.css; si cambian allá, cambiarlos aquí. */

@font-face{font-family:"Schibsted Grotesk";font-weight:800;font-display:swap;src:url(/fuentes/schibsted-grotesk-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:400;font-display:swap;src:url(/fuentes/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:600;font-display:swap;src:url(/fuentes/atkinson-hyperlegible-next-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/fuentes/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}

:root{
  --bg:#eef0f3;--nucleo:#fbfbfc;--tinta:#111318;--suave:#565c67;
  --linea:rgb(20 24 32 / .09);--bisel:rgb(20 24 32 / .045);--bisel-borde:rgb(20 24 32 / .06);
  --acento:#ff5b24;--verde:#1f9d62;--verde-txt:#13764a;--rojo:#c8372d;--rojo-txt:#b42318;--gris:#9aa1ad;
  --sombra:0 30px 60px -30px rgb(40 50 70 / .18),0 8px 24px -12px rgb(40 50 70 / .08);
  --f-display:"Schibsted Grotesk",system-ui,sans-serif;
  --f-texto:"Atkinson Hyperlegible Next",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
}
/* El oscuro, dos veces, como en el portafolio: una para quien no ha elegido
   y su sistema pide oscuro, otra para la elección manual (cookie `tema`,
   compartida con davidameth.dev). Las dos deben decir lo mismo. */
:root{color-scheme:light}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --bg:#0c0d10;--nucleo:#15171c;--tinta:#f1f2f4;--suave:#a2a8b3;
    --linea:rgb(255 255 255 / .09);--bisel:rgb(255 255 255 / .04);--bisel-borde:rgb(255 255 255 / .07);
    --verde:#3ddc97;--verde-txt:#3ddc97;--rojo:#ff6b5e;--rojo-txt:#ff8a80;--gris:#5c626d;
    --sombra:0 30px 60px -30px rgb(0 0 0 / .6);
    color-scheme:dark;
  }
}
:root[data-tema="oscuro"]{
  --bg:#0c0d10;--nucleo:#15171c;--tinta:#f1f2f4;--suave:#a2a8b3;
  --linea:rgb(255 255 255 / .09);--bisel:rgb(255 255 255 / .04);--bisel-borde:rgb(255 255 255 / .07);
  --verde:#3ddc97;--verde-txt:#3ddc97;--rojo:#ff6b5e;--rojo-txt:#ff8a80;--gris:#5c626d;
  --sombra:0 30px 60px -30px rgb(0 0 0 / .6);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tinta);font:400 1.0625rem/1.6 var(--f-texto)}
main{max-width:880px;margin:0 auto;padding:24px 28px 96px}
a{color:inherit;text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:6px}
code{font:400 .78rem var(--f-mono)}

.barra{display:flex;justify-content:space-between;align-items:center;margin-bottom:72px}
.marca{font:800 26px/1 var(--f-display);letter-spacing:-.04em;text-decoration:none;display:inline-flex;align-items:baseline;gap:2px}
.marca .punto{width:.24em;height:.24em;border-radius:50%;background:var(--acento);display:inline-block}
.herramientas{display:flex;align-items:center;gap:6px}
.idioma{font-size:.875rem;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--linea);text-decoration:none}
.tool{display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:999px;background:none;color:var(--suave);cursor:pointer}
.tool:hover{background:var(--bisel);color:var(--tinta)}
.tool:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.tool .i{width:18px;height:18px}
.tool .sol{display:none}
:root[data-tema="oscuro"] .tool .sol{display:block}
:root[data-tema="oscuro"] .tool .luna{display:none}

.portada{margin-bottom:48px}
h1{font:800 clamp(2.4rem,7vw,4.4rem)/1 var(--f-display);letter-spacing:-.0425em;margin:0 0 20px}
.portada p{font-size:1.1875rem;color:var(--suave);max-width:60ch;margin:0}

.suites{display:grid;gap:20px}
.bisel{background:var(--bisel);border:1px solid var(--bisel-borde);border-radius:32px;padding:7px;box-shadow:var(--sombra)}
.placa{background:var(--nucleo);border-radius:25px;padding:32px}
.cabeza{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
h2{font:800 1.625rem/1.15 var(--f-display);letter-spacing:-.03em;margin:0}
.que{color:var(--suave);margin:12px 0 16px}
.meta{font-size:.9375rem;color:var(--suave);margin:8px 0}

.estado{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--bg)}
.estado i{width:9px;height:9px;border-radius:50%}
.estado.pasa{color:var(--verde-txt)}.estado.pasa i{background:var(--verde)}
.estado.falla{color:var(--rojo-txt)}.estado.falla i{background:var(--rojo)}
.estado.vacio,.estado.no-corrio{color:var(--suave)}
.estado.no-corrio i{background:var(--gris)}

.cifras{display:flex;flex-wrap:wrap;gap:12px 32px;margin:20px 0}
.cifras div{display:flex;flex-direction:column-reverse}
.cifras dt{font-size:.875rem;color:var(--suave)}
.cifras dd{margin:0;font:800 2rem/1.1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cifras dd.mal{color:var(--rojo-txt)}

/* El historial: cada barra es un enlace a su corrida. La que solo conserva
   el resultado (`parcial`) va más clara; «no corrió» va en gris, para no
   contarla como un fallo de pruebas. */
.historial{display:flex;gap:3px;height:28px;margin:8px 0 6px}
.historial a{flex:1;max-width:14px;border-radius:2px;transition:transform .15s}
.historial a:hover{transform:scaleY(1.15)}
.historial a:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.pasa:is(a,i){background:var(--verde)}
.falla:is(a,i){background:var(--rojo)}
.no-corrio:is(a,i){background:var(--gris)}
.parcial:is(a,i){opacity:.4}
.leyenda{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 16px;font-size:.875rem;color:var(--suave)}
.leyenda span{display:inline-flex;align-items:center;gap:6px}
.leyenda i{width:9px;height:9px;border-radius:2px;display:inline-block}

/* Prueba por prueba, agrupadas por archivo como en el informe de Playwright. */
.todas{margin:8px 0 16px}
.todas>summary{cursor:pointer;font-weight:600;font-size:.9375rem}
.pruebas{margin-top:12px;border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.archivo+.archivo{border-top:1px solid var(--linea)}
.archivo summary{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:12px 16px;cursor:pointer;background:var(--bisel)}
.archivo summary code{font-size:.875rem;font-weight:600}
.cuenta{font-size:.875rem;color:var(--suave)}
.cuenta .mal,.mal{color:var(--rojo-txt)}
.archivo ul{list-style:none;margin:0;padding:0}
.archivo li{display:grid;grid-template-columns:20px 1fr auto;gap:10px;padding:9px 16px;border-top:1px solid var(--linea);font-size:.875rem;line-height:1.45}
.archivo li .m{font-weight:700;text-align:center}
.archivo li.pasa .m{color:var(--verde-txt)}
.archivo li.falla .m,.archivo li.inestable .m{color:var(--rojo-txt)}
.archivo li.omitida{color:var(--suave)}
.chip{font-size:.78rem;font-weight:600;padding:1px 8px;border-radius:999px;border:1px solid var(--linea);color:var(--suave);white-space:nowrap}
.ms{font:400 .78rem var(--f-mono);color:var(--suave);white-space:nowrap}
.error{display:block;margin-top:4px;font:400 .78rem/1.5 var(--f-mono);color:var(--rojo-txt);overflow-wrap:anywhere}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* La página de una corrida. */
.migas{font-size:.9375rem;color:var(--suave);margin:0 0 20px}
.h-corrida{font:800 clamp(1.6rem,4vw,2.2rem)/1.1 var(--f-display);letter-spacing:-.03em;margin:0}
.nota{margin:16px 0;padding:14px 18px;border-radius:14px;background:var(--bisel);font-size:.9375rem}
.pasos{display:flex;justify-content:space-between;margin-top:24px;font-weight:600}

.fallos{margin:8px 0 16px;font-size:.9375rem}
.fallos summary{cursor:pointer;font-weight:600;color:var(--rojo-txt)}
.fallos ul{margin:8px 0 0;padding-left:20px}

.enlaces{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.enlaces a{font-size:.9375rem;font-weight:600;padding:9px 18px;border-radius:999px;background:var(--tinta);color:var(--bg);text-decoration:none}

.pie{margin-top:64px;color:var(--suave)}
.pie h2{color:var(--tinta);font-size:1.25rem;margin-bottom:8px}
.pie p{margin:0;max-width:66ch;overflow-wrap:anywhere}

@media (max-width:600px){
  main{padding:18px 16px 72px}
  .barra{margin-bottom:48px}
  .placa{padding:24px 20px}
}