/* Sismos México — tokens y componentes compartidos (tema sismógrafo, sin azul por defecto) */
:root {
  --bg:      #14110f;   /* carbón */
  --bg-2:    #1b1714;
  --bg-3:    #241e1a;
  --linea:   #3a2f28;
  --texto:   #f1e6d0;   /* crema */
  --texto-2: #b9aa90;
  --texto-3: #85786a;
  --ambar:   #ff9f1c;
  --magma:   #e63946;
  --amarillo:#ffe066;
  --ok:      #9bc53d;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radio: 6px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--texto); }
body { font-family: var(--mono); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--ambar); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: .04em; }
small, .tenue { color: var(--texto-2); }
.num { font-variant-numeric: tabular-nums; }

button, input, select {
  font: inherit; color: var(--texto); background: var(--bg-3);
  border: 1px solid var(--linea); border-radius: var(--radio);
}
input, select { padding: 6px 8px; width: 100%; min-width: 0; }
input:focus, select:focus { border-color: var(--ambar); outline: none; }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.8) sepia(.6) saturate(2) hue-rotate(350deg); }
button { cursor: pointer; padding: 6px 10px; }
button:hover { border-color: var(--ambar); }
button.primario { background: var(--ambar); color: #1a1209; border-color: var(--ambar); font-weight: 700; }
button.primario:hover { background: #ffb34d; }
input[type=checkbox] { width: auto; accent-color: var(--ambar); }

/* Escala de magnitud (leyenda) */
.escala-mag {
  height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #ffe066 0%, #ff9f1c 33%, #f4722b 66%, #e63946 100%);
}

/* Aviso legal */
.aviso {
  border: 1px solid var(--magma); border-left-width: 4px; background: rgba(230, 57, 70, .08);
  padding: 8px 10px; border-radius: var(--radio); color: var(--texto); font-size: 12px;
}
.aviso strong { color: var(--ambar); }

/* Barra de scroll discreta */
* { scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }