/* Base: colores, botones y etiquetas comunes a todas las páginas. */
:root {
    --fondo: #000;
    --panel: #16181d;
    --panel-2: #23262e;
    --borde: #343844;
    --texto: #f2f3f5;
    --tenue: #9aa0ad;
    --acento: #4c8dff;
    --ok: #2fbf71;
    --rec: #ff3b3b;
    --alerta: #ffb020;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
}

body {
    background: var(--fondo);
    color: var(--texto);
    font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

[hidden] {
    display: none !important;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 .5rem;
}

h2 {
    font-size: 1.15rem;
    margin: 0 0 .5rem;
}

.nota {
    color: var(--tenue);
    font-size: .9rem;
}

.error {
    color: var(--rec);
}

.btn {
    appearance: none;
    border: 1px solid var(--borde);
    background: var(--panel-2);
    color: var(--texto);
    font: inherit;
    padding: .55rem .9rem;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    white-space: nowrap;
}

.btn:hover {
    border-color: var(--acento);
}

.btn:disabled {
    opacity: .4;
    cursor: default;
}

.btn.grande {
    font-size: 1.15rem;
    padding: .9rem 1.4rem;
    background: var(--acento);
    border-color: var(--acento);
}

.btn.chico {
    font-size: .85rem;
    padding: .45rem .7rem;
}

.btn[aria-pressed="true"] {
    background: var(--acento);
    border-color: var(--acento);
}

.chip {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(22, 24, 29, .85);
    border: 1px solid var(--borde);
    font-size: .8rem;
    color: var(--tenue);
}

.chip.alerta {
    color: #000;
    background: var(--alerta);
    border-color: var(--alerta);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.chip.ok {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 50%, transparent);
}

.chip.modo[data-modo="acelerando"] {
    color: var(--ok);
    border-color: var(--ok);
}

.chip.modo[data-modo="desacelerando"] {
    color: var(--alerta);
    border-color: var(--alerta);
}

.reloj {
    color: var(--rec);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}