/* La página de Beni: letra grande, mucho contraste y un botón principal por pantalla, para que cualquiera la use sola. */

:root {
  --fondo: #f6f3ee;
  --superficie: #ffffff;
  --texto: #1f1d1a;
  --texto-suave: #5d5850;
  --borde: #ddd6cb;
  --principal: #2f5bd3;
  --principal-encima: #2549ad;
  --texto-sobre-principal: #ffffff;
  --peligro: #b3261e;
  --peligro-encima: #8f1e18;
  --aviso-fondo: #fff4d6;
  --aviso-borde: #e8c766;
  --foco: #f2a900;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #1c1b19;
    --superficie: #282623;
    --texto: #f3efe8;
    --texto-suave: #b9b2a6;
    --borde: #45413b;
    --principal: #7d9ef2;
    --principal-encima: #9bb5f6;
    --texto-sobre-principal: #10162a;
    --peligro: #f2867e;
    --peligro-encima: #f6a59f;
    --aviso-fondo: #3a3220;
    --aviso-borde: #8a7434;
  }
}

* { box-sizing: border-box; }

/* Lo escondido se esconde siempre, aunque su clase diga cómo mostrarlo (las pantallas usan display: flex) */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 19px;
  line-height: 1.5;
}

main {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.marca {
  font-weight: 700;
  font-size: 22px;
  color: var(--principal);
  margin: 0 0 24px;
}

h1 { font-size: 30px; line-height: 1.2; margin: 0 0 16px; }
h2 { font-size: 22px; margin: 32px 0 4px; }
.grande { font-size: 21px; }
.suave { color: var(--texto-suave); font-size: 17px; }

.pantalla { display: flex; flex-direction: column; gap: 12px; }

.boton {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border-radius: 14px;
  border: 2px solid transparent;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.05s;
}
.boton:active { transform: scale(0.99); }
.boton:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }

.principal { background: var(--principal); color: var(--texto-sobre-principal); }
.principal:hover:not(:disabled) { background: var(--principal-encima); }

.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.secundario:hover:not(:disabled) { border-color: var(--texto-suave); }

.peligro { background: var(--peligro); color: #ffffff; }
.peligro:hover:not(:disabled) { background: var(--peligro-encima); }

.peligro-suave { background: transparent; color: var(--peligro); border-color: transparent; }
.peligro-suave:hover:not(:disabled) { border-color: var(--peligro); }

.acciones { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }

.casilla {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  min-height: 64px;
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: 14px;
  font-size: 21px;
  cursor: pointer;
}
.casilla:hover { border-color: var(--texto-suave); }
.casilla input { width: 28px; height: 28px; cursor: pointer; accent-color: var(--principal); }

.aviso {
  padding: 14px 16px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: var(--aviso-fondo);
  border: 2px solid var(--aviso-borde);
}

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista li {
  padding: 12px 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  font-size: 17px;
}