:root{
  /* Paleta: paper frío gris-verde, tinta marina, teal estructural, ámbar señal */
  --paper:#EAEEE8;
  --paper-2:#F4F6F1;
  --ink:#13242B;
  --ink-soft:#46585C;
  --teal:#1C6E68;
  --teal-ink:#0E3B38;
  --amber:#D8920C;
  --amber-ink:#7A4F00;
  --up:#1C7A4B;
  --down:#B23A2E;
  --line:#C7CEC4;
  --line-strong:#9FAA99;
  --radius:4px;
  --shadow:0 1px 0 rgba(19,36,43,.06), 0 8px 24px -18px rgba(19,36,43,.5);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  line-height:1.5;
  /* sutil retícula de "papel técnico" */
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:100% 40px,40px 100%;
  background-position:-1px -1px;
  background-attachment:fixed;
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);margin:0 0 .6rem;
}

/* Cabecera */
.masthead{border-bottom:2px solid var(--ink);background:transparent}
.masthead__inner{max-width:880px;margin:0 auto;padding:3rem 1.25rem 2.4rem}
.masthead h1{
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(2rem,6vw,3.4rem);line-height:1.02;margin:0 0 .8rem;letter-spacing:-.01em;
}
.lede{max-width:54ch;margin:0;color:var(--ink-soft);font-size:1.02rem}
.lede strong{color:var(--ink)}

.page{max-width:880px;margin:0 auto;padding:2rem 1.25rem 1rem}

/* Controles */
.controls{
  background:var(--paper-2);border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.1rem 1.1rem 1.25rem;margin-bottom:1.5rem;
}
.field{margin-top:1rem}
.field:first-child{margin-top:0}
label{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem;
}
select,input[type=text]{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:.62rem .7rem;
}
select:focus,input:focus,button:focus-visible{
  outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);
}
.city-row{display:flex;gap:.5rem}
.city-row input{flex:1}

.btn{
  font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;
  background:var(--ink);color:var(--paper-2);border:1px solid var(--ink);
  border-radius:var(--radius);padding:.62rem 1.1rem;transition:background .15s;
}
.btn:hover{background:var(--teal-ink)}

/* Conmutador de modo */
.modes{display:flex;gap:.4rem;margin-top:1rem}
.mode{
  font:inherit;font-size:.85rem;cursor:pointer;
  background:transparent;color:var(--ink-soft);
  border:1px solid var(--line-strong);border-radius:999px;padding:.34rem .9rem;transition:.15s;
}
.mode.is-active{background:var(--teal);color:#fff;border-color:var(--teal)}

/* Resumen especialidad */
.summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line-strong);border:1px solid var(--line-strong);border-radius:var(--radius);
  overflow:hidden;margin-bottom:1.5rem;
}
.summary .cell{background:var(--paper-2);padding:.85rem .9rem}
.summary .k{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 .25rem}
.summary .v{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:1.5rem;margin:0;
  font-variant-numeric:tabular-nums}
.summary .v small{font-size:.8rem;font-weight:500;color:var(--ink-soft)}
.summary .v small.up{color:var(--up)} .summary .v small.down{color:var(--down)}
.summary .k em{font-style:normal;color:var(--amber-ink)}

.status{font-family:"IBM Plex Mono",monospace;font-size:.85rem;color:var(--ink-soft);min-height:1.2em;margin:.2rem 0 1rem}
.status.err{color:var(--down)}

/* Resultados */
.results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.row{
  display:grid;grid-template-columns:2.4rem 1fr auto;gap:.9rem;align-items:center;
  background:var(--paper-2);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:.8rem .95rem;box-shadow:var(--shadow);
}
.rank{font-family:"IBM Plex Mono",monospace;font-size:1.05rem;font-weight:600;color:var(--teal);
  font-variant-numeric:tabular-nums;text-align:right}
.row__main{min-width:0}
.center-name{font-weight:600;font-size:1.02rem;line-height:1.2;margin:0}
.center-meta{font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--ink-soft);
  margin:.25rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center}
.chip{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--line-strong);
  border-radius:999px;padding:.08rem .5rem}
.chip--dist{color:var(--teal-ink);border-color:#9CC3BF;background:#E4F0EE}
.plaza-trend{font-weight:600}
.plaza-trend.up{color:var(--up)} .plaza-trend.down{color:var(--down)}

.readout{text-align:right;min-width:84px}
.readout .corte{
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-variant-numeric:tabular-nums;
  font-size:2rem;line-height:1;color:var(--amber-ink);
  background:linear-gradient(transparent 64%,#F6E2B3 64%);padding:0 .12em;
}
.readout .corte-lbl{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin:.3rem 0 0}
.readout--empty .corte{font-size:1rem;color:var(--down);background:none;font-weight:600}

.empty{padding:1.4rem;border:1px dashed var(--line-strong);border-radius:var(--radius);
  color:var(--ink-soft);background:var(--paper-2)}

/* Colofón */
.colophon{max-width:880px;margin:2rem auto 4rem;padding:1.4rem 1.25rem 0;border-top:1px solid var(--line-strong)}
.colophon p{font-size:.86rem;color:var(--ink-soft);max-width:70ch}
.colophon .muted{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--line-strong)}
.colophon em{color:var(--ink)}

@media (max-width:520px){
  .row{grid-template-columns:1.8rem 1fr;grid-template-areas:"rank main" "read read";row-gap:.6rem}
  .rank{grid-area:rank} .row__main{grid-area:main} .readout{grid-area:read;text-align:left;display:flex;align-items:baseline;gap:.6rem}
  .readout .corte-lbl{margin:0}
}

/* ---------- Idioma + topbar ---------- */
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.langs{display:flex;gap:.25rem;flex-shrink:0}
.lang{font-family:"IBM Plex Mono",monospace;font-size:.74rem;font-weight:600;cursor:pointer;
  background:transparent;color:var(--ink-soft);border:1px solid var(--line-strong);
  border-radius:999px;padding:.2rem .6rem;transition:.15s;letter-spacing:.04em}
.lang.is-active{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}

/* ---------- Ajustes ORS ---------- */
.settings{margin-top:.85rem;border-top:1px dashed var(--line-strong);padding-top:.7rem}
.settings summary{cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:.74rem;
  letter-spacing:.04em;color:var(--teal-ink);list-style:none;display:flex;align-items:center;gap:.4rem}
.settings summary::before{content:"⚙";font-size:.95rem}
.settings summary::-webkit-details-marker{display:none}
.settings[open] summary{margin-bottom:.6rem}
.settings__body label{margin-bottom:.3rem}
.hint{font-size:.78rem;color:var(--ink-soft);margin:.5rem 0 0;line-height:1.45}

/* ---------- Responsive: móvil/PC ---------- */
@media (min-width:760px){
  .controls{padding:1.3rem}
  .field--city .city-row{max-width:none}
}
@media (max-width:560px){
  .masthead__inner{padding:2rem 1rem 1.6rem}
  .page{padding:1.2rem 1rem 1rem}
  .controls{padding:.95rem}
  .city-row{flex-direction:column}
  .city-row .btn{width:100%;padding:.7rem}
  .modes{flex-wrap:wrap}
  .summary{grid-template-columns:1fr 1fr}
  .lede{font-size:.97rem}
}
@media (max-width:380px){
  .summary{grid-template-columns:1fr}
}