/*
  El aspecto (CSS) de web/index.html. Lo pide el navegador porque el HTML lo nombra:
    <link rel="stylesheet" href="static/css/estilo.css">
  y el servidor lo sirve desde la carpeta web/ (src/contador/app.py: app.mount("/static", …)).
  Claro u oscuro según el sistema (prefers-color-scheme), sin nada de JS.
*/

:root {
  --fondo: #f6f5f2;
  --tarjeta: #ffffff;
  --texto: #1d1b18;
  --suave: #6b665e;
  --acento: #b3261e;
  --borde: #e2ded6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #14120f;
    --tarjeta: #1e1b17;
    --texto: #f2eee6;
    --suave: #a8a196;
    --acento: #ef6b5e;
    --borde: #34302a;
  }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  text-align: center;
}

.apps {                                   /* ⠿ arriba a la izquierda */
  position: absolute;
  top: .75rem;
  left: .75rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .75rem;
  color: var(--suave);
}
.apps:hover { background: var(--tarjeta); color: var(--texto); }
.apps:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.apps svg { width: 1.4rem; height: 1.4rem; }

h1 { margin: 0 0 .5rem; font-size: 1.4rem; color: var(--suave); font-weight: 600; }

.valor {
  margin: 0;
  font-size: clamp(5rem, 22vw, 8rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;     /* todas las cifras del mismo ancho: el número no «baila» */
  line-height: 1.1;
}

.botones { display: flex; gap: 1rem; justify-content: center; margin: 1.5rem 0 .75rem; }

button {
  width: 5.5rem;
  height: 5.5rem;                         /* grandes: fáciles de pulsar con el dedo */
  border: 1px solid var(--borde);
  border-radius: 1.25rem;
  background: var(--tarjeta);
  color: var(--texto);
  font: inherit;
  font-size: 2.5rem;
  cursor: pointer;
}
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
#sumar { background: var(--acento); border-color: var(--acento); color: #fff; }

.conexion { color: var(--suave); font-size: .9rem; }
.conexion::before {                       /* el puntito: un círculo dibujado con CSS, no un carácter */
  content: "";
  display: inline-block;
  width: .55em;
  height: .55em;
  margin-right: .4em;
  border-radius: 50%;
  background: var(--borde);
}
.conexion.en-vivo::before { background: #2e9d57; }
.conexion.caida::before { background: var(--acento); }

.ayuda {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  text-align: left;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 1rem;
}
.ayuda h2 { font-size: 1rem; margin: .75rem 0 .25rem; }
.ayuda ul { padding-left: 1.2rem; margin: .25rem 0; }
code { font: .85em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

@media (prefers-reduced-motion: reduce) {
  button:active { transform: none; }
}