/* Estilo inspirado en iOS (colores y tipografia del sistema) */
:root {
  --bg: #f2f2f7;
  --card: #ffffff;
  --txt: #000000;
  --sec: #8e8e93;
  --sep: rgba(60, 60, 67, .18);
  --azul: #007aff;
  --verde: #34c759;
  --rojo: #ff3b30;
  --bar: rgba(242, 242, 247, .8);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1c1c1e;
    --txt: #ffffff;
    --sec: #8e8e93;
    --sep: rgba(84, 84, 88, .55);
    --azul: #0a84ff;
    --verde: #30d158;
    --rojo: #ff453a;
    --bar: rgba(0, 0, 0, .75);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none;
  overscroll-behavior-y: contain;
  touch-action: manipulation;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Todo en una sola pantalla, sin scroll */
html, body { height: 100%; overflow: hidden; }
body { display: flex; flex-direction: column; height: 100dvh; }

header {
  flex: none;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--sep);
  display: flex; align-items: center; justify-content: space-between;
}
h1 { margin: 0; font-size: clamp(22px, 4.2dvh, 30px); font-weight: 700; letter-spacing: .3px; }

.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sec); }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sec); }
.estado.on { color: var(--verde); }
.estado.on::before { background: var(--verde); }

main {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}

.aviso {
  flex: none; margin: 0; padding: 8px 12px; border-radius: 12px;
  background: color-mix(in srgb, #ff9f0a 18%, var(--card));
  color: #ff9f0a; font-size: 13px; font-weight: 500;
}

/* 4 filas que se reparten el alto disponible */
.grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); gap: 8px;
}
.card:last-child { grid-column: 1 / -1; }
.card {
  background: var(--card); border-radius: 18px; padding: 10px 14px;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 0; overflow: hidden;
}
.lbl { font-size: 12px; font-weight: 600; color: var(--sec); text-transform: uppercase; letter-spacing: .3px; }
.val { font-size: clamp(28px, 6.2dvh, 48px); font-weight: 700; letter-spacing: -.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.uni { font-size: 13px; color: var(--sec); font-weight: 500; }

#humedad { color: #32ade6; }
#temperatura { color: #ff9500; }
#ec { color: #af52de; }
#ph { color: #34c759; }
#n, #p, #k { color: var(--txt); }

.actualizado { flex: none; text-align: center; color: var(--sec); font-size: 12px; margin: 0; }

button {
  flex: none; width: 100%; min-height: 48px; padding: 12px; font: inherit; font-size: 17px; font-weight: 600;
  border: 0; border-radius: 14px; background: var(--azul); color: #fff;
  transition: opacity .15s, transform .15s;
}
button:active { opacity: .6; transform: scale(.98); }
button:disabled { background: var(--sec); opacity: .5; }