:root {
  --fondo: #f4f5f7;
  --tarjeta: #ffffff;
  --texto: #15181d;
  --tenue: #667080;
  --borde: #e2e5ea;
  --acento: #4f46e5;
  --acento-texto: #ffffff;
  --bien: #15803d;
  --bien-fondo: #e7f6ec;
  --mal: #b91c1c;
  --mal-fondo: #fdecec;
  --aviso: #a16207;
  --aviso-fondo: #fdf6e3;
  --sombra: 0 1px 2px rgba(15, 20, 30, .06), 0 2px 8px rgba(15, 20, 30, .04);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1114;
    --tarjeta: #181b20;
    --texto: #e8eaee;
    --tenue: #8b93a1;
    --borde: #262a31;
    --acento: #818cf8;
    --acento-texto: #0f1114;
    --bien: #4ade80;
    --bien-fondo: #132a1c;
    --mal: #f87171;
    --mal-fondo: #2e1515;
    --aviso: #fbbf24;
    --aviso-fondo: #2b230f;
    --sombra: none;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
.tenue { color: var(--tenue); }
.error { color: var(--mal); margin: .5rem 0 0; }

.marca { display: flex; align-items: center; gap: .5rem; font-weight: 650; letter-spacing: -.01em; }
.logo {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--acento); color: var(--acento-texto); font-weight: 800; font-size: 14px;
}

.entrada { max-width: 380px; margin: 0 auto; padding: 18vh 20px 40px; }
.entrada .marca { font-size: 1.35rem; }
.entrada .sub { color: var(--tenue); margin: .25rem 0 2rem; }
.entrada label { display: block; font-size: .85rem; color: var(--tenue); margin-bottom: .35rem; }
.entrada input {
  width: 100%; padding: .8rem .9rem; border-radius: 12px; border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--texto); font-family: ui-monospace, Menlo, monospace;
  letter-spacing: .04em;
}
.entrada button { width: 100%; margin-top: .9rem; }

button {
  border: 0; border-radius: 12px; padding: .75rem 1rem; cursor: pointer;
  background: var(--acento); color: var(--acento-texto); font-weight: 600;
}
button.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
button:disabled { opacity: .5; cursor: default; }
.botones { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }

#app { max-width: 640px; margin: 0 auto; padding: 0 16px calc(84px + env(safe-area-inset-bottom)); }
.cabecera {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(14px + env(safe-area-inset-top)) 0 6px; position: sticky; top: 0;
  background: var(--fondo); z-index: 2;
}
.cabecera #actualizado { font-size: .8rem; }
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue);
     font-weight: 650; margin: 1.4rem 0 .6rem; }
.cuenta {
  display: inline-block; min-width: 1.4em; padding: 0 .45em; border-radius: 99px; text-align: center;
  background: var(--acento); color: var(--acento-texto); font-size: .75rem;
}
.cuenta:empty { display: none; }
.pista { font-size: .85rem; margin: -.2rem 0 .8rem; }

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px;
  padding: 14px 16px; box-shadow: var(--sombra); margin-bottom: 10px;
}
.vacio { color: var(--tenue); text-align: center; padding: 22px 12px; }

.flag .arriba { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: .4rem; }
.chip {
  font-size: .72rem; font-weight: 650; padding: .12rem .5rem; border-radius: 99px;
  border: 1px solid var(--borde); color: var(--tenue); white-space: nowrap;
}
.chip.humano { color: var(--aviso); background: var(--aviso-fondo); border-color: transparent; }
.chip.auto { color: var(--acento); border-color: var(--acento); }
.chip.fuera { font-style: italic; opacity: .7; }
.flag .pregunta { font-weight: 600; font-size: 1rem; margin: 0 0 .25rem; }
.flag .pregunta a { color: inherit; text-decoration: none; }
.flag .lado { font-size: .92rem; }
.flag .lado b { font-weight: 700; }
.flag .detalle { font-size: .84rem; color: var(--tenue); margin-top: .35rem; }
.flag .botones button { flex: 1; }
.flag.destacado { outline: 2px solid var(--acento); outline-offset: 2px; }

.fila { display: flex; justify-content: space-between; gap: .8rem; padding: .5rem 0;
        border-top: 1px solid var(--borde); align-items: baseline; }
.fila:first-child { border-top: 0; padding-top: 0; }
.fila:last-child { padding-bottom: 0; }
.fila .izq { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fila .der { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.pequeno { font-size: .8rem; }

.res { font-size: .75rem; font-weight: 650; padding: .1rem .45rem; border-radius: 6px; }
.res.bien { color: var(--bien); background: var(--bien-fondo); }
.res.mal { color: var(--mal); background: var(--mal-fondo); }
.res.neutro { color: var(--tenue); background: var(--fondo); }

.barra { height: 8px; border-radius: 4px; background: var(--fondo); overflow: hidden; margin: .5rem 0 .6rem; }
.barra > div { height: 100%; background: var(--acento); }
.barra.bien > div { background: var(--bien); }
.barra.mal > div { background: var(--mal); }
.vara h3 { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .5rem; }
.punto.bien { background: var(--bien); }
.punto.mal { background: var(--mal); }
.punto.neutro { background: var(--tenue); }

.modo h3 { margin: 0 0 .5rem; font-size: .95rem; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.cifra .v { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cifra .n { font-size: .75rem; color: var(--tenue); }
.modo .lectura { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--borde); }
.modo .lectura:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.modo .titulo-lectura { font-size: .8rem; color: var(--tenue); margin-bottom: .35rem; }

.pestanas {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center;
  background: var(--tarjeta); border-top: 1px solid var(--borde);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); z-index: 3;
}
.pestanas a {
  flex: 1; max-width: 200px; text-align: center; padding: .6rem 0; color: var(--tenue);
  text-decoration: none; font-weight: 600; font-size: .9rem; border-radius: 10px;
}
.pestanas a.activa { color: var(--acento); background: var(--fondo); }