@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-display: swap; src: url(../shared/fonts/barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url(../shared/fonts/barlow-700.woff2) format("woff2"); }

:root {
  --chasis: #1c2127;
  --placa: #262d35;
  --placa-alta: #323b45;
  --pozo: #11151a;
  --texto: #ece7dc;
  --tenue: #9aa5b1;
  --ambar: #ffb43c;
  --cian: #54c7ec;
  --ok: #7ddc9a;
  --alerta: #ff7a66;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: radial-gradient(120% 60% at 50% 0%, #232a32 0%, var(--chasis) 60%);
  color: var(--texto);
  font: 500 1.0625rem/1.4 "Barlow Semi Condensed", system-ui, sans-serif;
  padding: env(safe-area-inset-top) 1rem calc(1.5rem + env(safe-area-inset-bottom));
}
h1, h2, p { margin: 0; }
h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 700; }
b { font-weight: 700; }
.tenue { color: var(--tenue); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }

.pantalla { max-width: 30rem; margin: 0 auto; }

/* Placa: superficie metálica sobre la que van los controles */
.placa {
  background: linear-gradient(180deg, var(--placa-alta), var(--placa));
  border-radius: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 1px 0 #000, 0 14px 22px -14px rgba(0, 0, 0, .8);
  padding: 1.1rem;
  margin-top: 1rem;
}
.placa > h2 { margin-bottom: .9rem; }

/* Piloto: lámpara que se enciende */
.piloto {
  --c: var(--ambar);
  flex: none;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4d535a, #1a1d21 70%);
  box-shadow: inset 0 1px 2px #000, 0 0 0 2px #0d1014, 0 1px 0 2px rgba(255, 255, 255, .08);
  transition: background .25s, box-shadow .25s;
}
.piloto.on {
  background: radial-gradient(circle at 35% 30%, #fff, var(--c) 50%, color-mix(in srgb, var(--c), #000 45%));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), 0 0 0 2px #0d1014, 0 0 16px 4px color-mix(in srgb, var(--c), transparent 45%);
}
.piloto.agua { --c: var(--cian); }
.piloto.ok { --c: var(--ok); }
.piloto.mal { --c: var(--alerta); }

/* Login */
#login { padding-top: 12vh; }
#form-login { display: grid; gap: 1rem; }
label { display: grid; gap: .35rem; font-weight: 700; }
input:not([type=range]):not([type=checkbox]) {
  font: inherit; font-size: 1.1rem; color: var(--texto);
  min-height: 3rem; padding: 0 .9rem;
  background: var(--pozo);
  border: 1px solid #000; border-radius: .6rem;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .07);
}
.casilla { display: flex; align-items: center; gap: .65rem; font-weight: 500; min-height: 2.75rem; }
.casilla input { width: 1.4rem; height: 1.4rem; accent-color: var(--ambar); margin: 0; }
.msg-error { color: var(--alerta); font-weight: 700; }

button { font: inherit; font-weight: 700; color: var(--texto); cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
.primario {
  min-height: 3.25rem; border: 0; border-radius: .7rem;
  background: linear-gradient(180deg, #ffc566, var(--ambar));
  color: #1c2127; font-size: 1.15rem;
  box-shadow: 0 4px 0 #a06a12, 0 8px 12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .08s, box-shadow .08s;
}
.primario:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #a06a12, 0 3px 6px rgba(0, 0, 0, .5); }
.primario:disabled { opacity: .6; }

/* Cabecera y avisos */
.cabecera { display: flex; align-items: center; gap: .75rem; padding-top: 1rem; }
.cabecera h1 { margin-right: auto; }
.estado-esp { display: flex; align-items: center; gap: .55rem; font-weight: 700; }
.chico {
  min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: .6rem;
  background: linear-gradient(180deg, #3a4450, #2c343d);
  box-shadow: 0 3px 0 #11151a, inset 0 1px 0 rgba(255, 255, 255, .12);
}
.chico:active { transform: translateY(2px); box-shadow: 0 1px 0 #11151a; }
.aviso {
  margin-top: 1rem; padding: .75rem 1rem; border-radius: .7rem;
  background: var(--pozo); border-left: 4px solid var(--alerta); font-weight: 700;
}
.aviso.info { border-left-color: var(--ambar); }
.toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: calc(100% - 2rem); padding: .75rem 1.1rem; border-radius: .7rem;
  background: #0b0e11; border: 1px solid var(--alerta); font-weight: 700; box-shadow: 0 10px 24px rgba(0, 0, 0, .6);
}

/* Displays: pozos hundidos con lectura */
.displays { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.display {
  display: grid; gap: .1rem; padding: .7rem .85rem;
  background: var(--pozo); border-radius: .5rem;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .07);
}
.d-nombre { color: var(--tenue); }
.d-valor b { font-size: 2.4rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.d-valor small { margin-left: .3rem; font-size: 1.05rem; color: var(--tenue); }
.d-aviso { font-size: .9rem; color: var(--alerta); visibility: hidden; }
.display.viejo .d-valor b { color: var(--tenue); }
.display.viejo .d-aviso { visibility: visible; }

/* Luces: pulsadores que se hunden */
.fila-led { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; row-gap: .6rem; align-items: center; }
.fila-led + .fila-led { margin-top: 1.25rem; }
.f-nombre { font-size: 1.15rem; }
.f-estado { grid-column: 2; margin-top: -.5rem; }
.selector { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.selector button {
  min-height: 3.25rem; border: 0; border-radius: .6rem;
  background: linear-gradient(180deg, #3a4450, #2c343d);
  box-shadow: 0 4px 0 #11151a, 0 6px 8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .08s, box-shadow .08s, color .15s;
}
.selector button[aria-checked=true], .selector button:active:not(:disabled) {
  transform: translateY(4px);
  background: #20262d; color: var(--ambar);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .75);
}

/* Persianas: faders */
.fader + .fader { margin-top: 1.1rem; }
.fader label { display: flex; justify-content: space-between; align-items: baseline; }
.fader input[type=range] {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 3.25rem; margin: .1rem 0; background: transparent; touch-action: pan-y;
}
.fader input[type=range]::-webkit-slider-runnable-track {
  height: .55rem; border-radius: .3rem;
  background: linear-gradient(90deg, #8a97a5 var(--p, 0%), var(--pozo) var(--p, 0%));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .08);
}
.fader input[type=range]::-moz-range-track {
  height: .55rem; border-radius: .3rem;
  background: linear-gradient(90deg, #8a97a5 var(--p, 0%), var(--pozo) var(--p, 0%));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .08);
}
.fader input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.9rem; height: 3rem; margin-top: -1.225rem; border: 0; border-radius: .4rem;
  background: linear-gradient(90deg, transparent calc(50% - 1px), var(--ambar) calc(50% - 1px), var(--ambar) calc(50% + 1px), transparent calc(50% + 1px)),
              linear-gradient(180deg, #55616e, #2f3740);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.fader input[type=range]::-moz-range-thumb {
  width: 1.9rem; height: 3rem; border: 0; border-radius: .4rem;
  background: linear-gradient(90deg, transparent calc(50% - 1px), var(--ambar) calc(50% - 1px), var(--ambar) calc(50% + 1px), transparent calc(50% + 1px)),
              linear-gradient(180deg, #55616e, #2f3740);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.extremos { display: flex; justify-content: space-between; font-size: .95rem; }

/* Ventilador y grifo */
.fila-sw { display: flex; align-items: center; gap: 1rem; }
.fila-sw > div { margin-right: auto; }
.fila-sw h2 { margin: 0; }
.ico-fan { width: 2.25rem; height: 2.25rem; color: var(--tenue); flex: none; transform-origin: 50% 50%; }
.ico-fan.gira { color: var(--texto); animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.interruptor {
  position: relative; flex: none; width: 6rem; height: 3.5rem; padding: 0; border: 0; border-radius: 1.75rem;
  background: var(--pozo);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .08);
}
.palanca {
  position: absolute; top: .3rem; left: .3rem; width: 2.9rem; height: 2.9rem; border-radius: 1.45rem;
  background: linear-gradient(180deg, #55616e, #2f3740);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .18s ease-out, background .18s;
}
.interruptor[aria-checked=true] .palanca {
  transform: translateX(2.4rem);
  background: linear-gradient(180deg, #ffc566, var(--ambar));
}
.pie { margin-top: 1rem; font-size: .95rem; }

/* Sin ESP32 o sin servidor: los controles se apagan */
.sin-control .selector button, .sin-control .fader input, .sin-control .interruptor { opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}