/* Verde Ferro. El verde de la pantalla es --verde: si cambia, cambiar también VERDE en app.js. */
:root {
  --verde: #00C400;
  --verde-escudo: #00632C;
  --verde-texto: #00632C;
  --tinta: #0B1F14;
  --gris: #56645B;
  --niebla: #EEF6F1;
  --linea: #D3E4D9;
  --ambar: #D99400;
  --ambar-texto: #8A5A00;
  --blanco: #ffffff;
  --negro: #000000;
}

[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--blanco);
  color: var(--tinta);
}

html.modo-verde, html.modo-verde body { background: var(--verde); }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

.inicio {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 440px;
  min-height: 100vh;
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  text-align: center;
}

.cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.escudo {
  display: block;
  width: 91px;
  height: 104px;
}

.lema {
  margin: 18px 0 0;
  line-height: 0;
}

.lema img {
  display: block;
  width: 341px;
  max-width: 100%;
  height: auto;
}

.bajada {
  margin: 10px 0 0;
  color: var(--gris);
  font-size: 15px;
  font-weight: 600;
}

.brillo {
  width: 100%;
  margin-top: 26px;
  padding: 18px 20px 20px;
  border-radius: 22px;
  background: var(--niebla);
}

.sol {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--ambar);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.brillo-titulo {
  margin: 4px 0 8px;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.tips {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--gris);
  font-size: 16px;
  line-height: 1.55;
}

.interruptor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}

.interruptor input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.interruptor-pista {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  border-radius: 15px;
  background: var(--linea);
  transition: background 0.15s;
}

.interruptor-pista::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: 0 1px 3px rgba(11, 31, 20, 0.3);
  transition: transform 0.15s;
}

.interruptor input:checked + .interruptor-pista { background: var(--verde-escudo); }
.interruptor input:checked + .interruptor-pista::after { transform: translateX(22px); }
.interruptor input:focus-visible + .interruptor-pista { outline: 3px solid var(--tinta); outline-offset: 2px; }

.aviso {
  margin: 10px 0 0;
  color: var(--ambar-texto);
  font-size: 14px;
}

.prender {
  width: 100%;
  min-height: 92px;
  margin-top: 22px;
  padding: 16px;
  border: 0;
  border-radius: 22px;
  background: var(--verde);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.14);
  color: var(--tinta);
  font: inherit;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.prender:active {
  transform: translateY(2px);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14);
}

.prender:focus-visible,
.instalar:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

.estado {
  margin: 14px 0 0;
  color: var(--gris);
  font-size: 15px;
}

.estado.lista {
  color: var(--verde-texto);
  font-weight: 600;
}

.guia {
  margin: 12px 0 0;
  font-size: 15px;
}

.instalar {
  min-height: 48px;
  margin-top: 12px;
  padding: 0 28px;
  border: 2px solid var(--verde-escudo);
  border-radius: 14px;
  background: transparent;
  color: var(--verde-texto);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
}

.pie {
  margin-top: auto;
  padding-top: 24px;
  color: var(--gris);
  font-size: 13px;
}

.verde {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--verde);
  cursor: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.salir {
  position: absolute;
  left: 50%;
  bottom: max(40px, env(safe-area-inset-bottom));
  min-width: 200px;
  min-height: 64px;
  padding: 0 32px;
  border: 0;
  border-radius: 14px;
  background: var(--negro);
  color: var(--blanco);
  font: inherit;
  font-size: 24px;
  font-weight: 900;
  transform: translateX(-50%);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .interruptor-pista,
  .interruptor-pista::after { transition: none; }
}