:root{
  color-scheme:light dark;
  --fondo:#0f1115; --panel:#151922; --panel2:#1a1f2b; --borde:#262b36;
  --texto:#e6e8ee; --suave:#8b93a7; --tenue:#6b7385;
  --ok:#4ade80; --atencion:#fbbf24; --roto:#f87171; --acento:#60a5fa;
}
@media (prefers-color-scheme:light){
  :root{ --fondo:#f6f7f9; --panel:#fff; --panel2:#fafbfc; --borde:#e3e6ec;
         --texto:#1a1d24; --suave:#5b6478; --tenue:#8a92a3;
         --ok:#16a34a; --atencion:#b45309; --roto:#dc2626; --acento:#2563eb; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);
  font:15px/1.62 ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}
.envoltorio{max-width:1080px;margin:0 auto;padding:1.25rem}

header.barra{border-bottom:1px solid var(--borde);background:var(--panel);
  position:sticky;top:0;z-index:10}
header.barra .envoltorio{display:flex;gap:1rem;align-items:center;
  padding-top:.75rem;padding-bottom:.75rem;flex-wrap:wrap}
.marca{font-weight:700;letter-spacing:-.02em;font-size:1.05rem;color:var(--texto)}
.marca span{color:var(--suave);font-weight:400;font-size:.82rem;margin-left:.5rem}
.crece{flex:1}
form.buscador{display:flex;gap:.4rem}
input[type=search],input[type=text],input[type=password]{
  background:var(--panel2);border:1px solid var(--borde);color:var(--texto);
  border-radius:8px;padding:.5rem .7rem;font:inherit;font-size:.9rem;min-width:0}
input:focus{outline:2px solid var(--acento);outline-offset:1px}
button{background:var(--acento);color:#fff;border:0;border-radius:8px;
  padding:.5rem .9rem;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
button:hover{filter:brightness(1.1)}
.enlace-tenue{color:var(--suave);font-size:.85rem}

h1{font-size:1.5rem;letter-spacing:-.02em;margin:.2rem 0 .3rem}
h2{font-size:1.05rem;margin:2rem 0 .75rem;letter-spacing:-.01em}
.sub{color:var(--suave);margin:0 0 1.5rem;font-size:.92rem}

.rejilla{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fill,minmax(285px,1fr))}
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:12px;
  padding:1.05rem 1.15rem;display:block;color:inherit}
a.tarjeta:hover{border-color:var(--acento);text-decoration:none}
.tarjeta h3{margin:0 0 .3rem;font-size:.98rem;display:flex;align-items:center;gap:.45rem}
.tarjeta p{margin:0;color:var(--suave);font-size:.85rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.chips{display:flex;gap:.4rem;margin-top:.8rem;flex-wrap:wrap}
.chip{font-size:.74rem;padding:.16rem .5rem;border-radius:999px;
  border:1px solid var(--borde);color:var(--suave);white-space:nowrap}
.chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.chip.atencion{color:var(--atencion);border-color:color-mix(in srgb,var(--atencion) 35%,transparent)}
.chip.roto{color:var(--roto);border-color:color-mix(in srgb,var(--roto) 35%,transparent)}
.candado{font-size:.72rem;color:var(--atencion);border:1px solid color-mix(in srgb,var(--atencion) 35%,transparent);
  padding:.1rem .42rem;border-radius:999px;font-weight:600}

.resumen{background:var(--panel);border:1px solid var(--borde);border-radius:12px;
  padding:1rem 1.15rem;margin-bottom:1.5rem;color:var(--suave);font-size:.9rem}

.entrada{background:var(--panel);border:1px solid var(--borde);border-left-width:3px;
  border-radius:10px;padding:.9rem 1.05rem;margin-bottom:.6rem}
.entrada.ok{border-left-color:var(--ok)}
.entrada.atencion{border-left-color:var(--atencion)}
.entrada.roto{border-left-color:var(--roto)}
.entrada .k{font-weight:650;font-size:.93rem;margin-bottom:.25rem}
.entrada .v{font-size:.9rem;white-space:pre-wrap;overflow-wrap:anywhere}
.entrada .d{color:var(--suave);font-size:.85rem;margin-top:.45rem;white-space:pre-wrap;overflow-wrap:anywhere}
.entrada .f{color:var(--tenue);font-size:.75rem;margin-top:.55rem;font-family:ui-monospace,Menlo,monospace;
  overflow-wrap:anywhere}

.aviso{border-radius:10px;padding:.8rem 1rem;margin-bottom:1rem;font-size:.88rem;
  border:1px solid color-mix(in srgb,var(--roto) 35%,transparent);
  background:color-mix(in srgb,var(--roto) 10%,transparent)}
.aviso.suave{border-color:color-mix(in srgb,var(--atencion) 35%,transparent);
  background:color-mix(in srgb,var(--atencion) 10%,transparent)}
.aviso ul{margin:.4rem 0 0;padding-left:1.1rem}

.filtros{display:flex;gap:.4rem;margin-bottom:1rem;flex-wrap:wrap}
.filtros a{font-size:.8rem;padding:.28rem .7rem;border-radius:999px;
  border:1px solid var(--borde);color:var(--suave)}
.filtros a.activo{border-color:var(--acento);color:var(--acento)}
.filtros a:hover{text-decoration:none;border-color:var(--acento)}

.centro{min-height:100vh;display:grid;place-items:center;padding:2rem 1rem}
.caja-login{width:100%;max-width:23rem;background:var(--panel);
  border:1px solid var(--borde);border-radius:14px;padding:1.9rem}
.caja-login h1{font-size:1.25rem;margin:0 0 .2rem}
.caja-login label{display:block;font-size:.82rem;color:var(--suave);margin:.9rem 0 .3rem}
.caja-login input{width:100%}
.caja-login button{width:100%;margin-top:1.2rem;padding:.62rem}
.error{color:var(--roto);font-size:.85rem;margin-top:.9rem}

table{width:100%;border-collapse:collapse;font-size:.84rem}
th,td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--borde);
  vertical-align:top}
th{color:var(--suave);font-weight:600;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.03em}
td.mono{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--suave)}
.desplaza{overflow-x:auto}

footer{color:var(--tenue);font-size:.78rem;border-top:1px solid var(--borde);
  margin-top:3rem;padding:1.2rem 0}