/* Una columna centrada sobre la ciudad de los documentos Menares: el código primero, el resultado encima. */
@font-face{font-family:Montserrat;src:url("montserrat-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--navy:#0f2438;--cyan:#12bde6;--ink:#172c3d;--muted:#566a7a;--line:#d8e2e9;--soft:#f2f6f9;--white:#fff;--ok:#167a4f;--ok-soft:#e8f6ef;--warn:#9a6200;--warn-soft:#fdf3e0;--bad:#b3261e;--bad-soft:#fdecea}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--white);color:var(--ink);font-family:Montserrat,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.top{height:7px;background:var(--navy);border-bottom:2px solid var(--cyan)}
.shell{max-width:640px;margin:0 auto;padding:36px 20px 0;text-align:center}
.back-row{margin:0 0 10px;text-align:left}.back{display:inline-flex;align-items:center;gap:7px;color:var(--navy);font-size:14.5px;font-weight:600;text-decoration:none}.back:hover{text-decoration:underline;text-underline-offset:3px}.back .icon{font-size:18px}.back:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.logo{display:block;width:230px;max-width:70%;height:auto;margin:0 auto 26px}
h1{margin:0;color:var(--navy);font-size:clamp(28px,5vw,36px);line-height:1.14;font-weight:700;text-wrap:balance}
.intro{margin:10px auto 26px;max-width:52ch;color:var(--muted);text-wrap:balance}
.icon{width:1em;height:1em;flex:none;fill:currentColor}
.result{margin:0 0 22px;border:1px solid var(--line);border-radius:10px;overflow:hidden;text-align:left;background:var(--white)}
.result header{display:flex;gap:14px;align-items:flex-start;padding:18px 20px}
.badge{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;background:var(--white);font-size:27px}
.result h2{margin:0;color:var(--navy);font-size:20px;line-height:1.25;font-weight:700}
.result header p{margin:3px 0 0;font-size:14.5px;line-height:1.45}
.ok header{background:var(--ok-soft)}.ok .badge{color:var(--ok)}
.warn header{background:var(--warn-soft)}.warn .badge{color:var(--warn)}
.bad header{background:var(--bad-soft)}.bad .badge{color:var(--bad)}
.muted header{background:var(--soft)}.muted .badge{color:var(--muted)}
dl{margin:0;padding:4px 20px 10px}
dl div{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:4px 14px;padding:10px 0;border-top:1px solid var(--line)}
dl div:first-child{border-top:0}
dt{color:var(--muted);font-size:13.5px;font-weight:600}
dd{margin:0;color:var(--navy);font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.hash dd{font-size:12.5px;font-weight:500}
.search{display:grid;gap:9px;margin:0 0 30px;padding:20px;background:var(--soft);border:1px solid var(--line);border-radius:10px;text-align:left}
.search label{color:var(--navy);font-size:14.5px;font-weight:700}
.search input{width:100%;min-width:0;padding:13px 14px;border:1px solid #b9c8d4;border-radius:7px;background:var(--white);color:var(--navy);font:600 16px/1.3 Montserrat,sans-serif}
.search input::placeholder{color:#7a8c9a;font-weight:500}
.search button{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px 16px;border:0;border-radius:7px;background:var(--navy);color:var(--white);font:700 16px/1.2 Montserrat,sans-serif;cursor:pointer}
.search button:hover{background:#1b3a54}
.search button .icon{font-size:21px}
.search input:focus-visible,.search button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.hint{margin:0;color:var(--muted);font-size:13px;text-align:center}
.help{text-align:left}
.help h2{margin:0 0 10px;color:var(--navy);font-size:16px;font-weight:700;text-align:center}
.help ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.help li{display:flex;gap:11px;align-items:flex-start;padding:13px;border:1px solid var(--line);border-radius:9px;background:var(--white)}
.help li .icon{margin-top:1px;font-size:25px;color:var(--navy)}
.help strong{display:block;color:var(--navy);font-size:14px;line-height:1.3}
.help span{display:block;margin-top:2px;color:var(--muted);font-size:13px;line-height:1.4}
.city{display:block;width:100%;max-width:820px;height:auto;margin:30px auto 0;padding:0 20px}
@media (max-width:560px){.help ul{grid-template-columns:1fr}dl div{grid-template-columns:1fr}.shell{padding-top:26px}}