:root{
  color-scheme:dark;
  --bg:#0a0a0a; --fg:#ffffff; --mut:#a3a6ad;
  --surface-card:#101114; --surface-btn:#0c0d11; --surface-raise:#0f0f12;
  --bd-strong:#22242a; --bd-soft:#191a1e;
  --shadow:0 6px 16px rgba(0,0,0,.40),0 0 0 1px var(--bd-soft) inset;
  --sa-top:env(safe-area-inset-top); --sa-right:env(safe-area-inset-right);
  --sa-bottom:env(safe-area-inset-bottom); --sa-left:env(safe-area-inset-left);
  --gutter:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,system-ui,Segoe UI,Roboto,Arial;overflow:hidden}

/* Layout base (landscape OK) */
.wrap{
  display:grid; grid-template-rows:auto 38svh 1fr; gap:10px; height:100dvh;
  padding: calc(max(var(--gutter), calc(var(--sa-top) + 10px)))
           calc(max(12px,        calc(var(--sa-right) + 12px)))
           calc(max(var(--gutter), calc(var(--sa-bottom) + 12px)))
           calc(max(14px,        calc(var(--sa-left) + 14px)));
}

/* Top bar */
.top{display:flex;align-items:center;justify-content:space-between;min-height:48px;
  padding-left:calc(var(--sa-left)+6px);padding-right:calc(var(--sa-right)+6px)}
.clock{font-size:clamp(22px,6svh,34px);font-variant-numeric:tabular-nums}
.status{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--mut)}
.net.ok{color:#38d39f}.net.bad{color:#ff6b6b}

/* Middle grid */
.mid{display:grid;grid-template-columns:1.15fr 0.70fr 1.15fr;gap:10px;align-items:stretch;min-height:0}
.card{background:var(--surface-card);border-radius:12px;box-shadow:var(--shadow);
  padding:8px;display:flex;flex-direction:column;justify-content:center;min-height:0;
  outline:1px solid var(--bd-strong)}

/* ===== WEATHER ===== */
.w-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.w-left{display:flex;align-items:center;gap:8px}
.w-icon{font-size:24px}
.w-temp{font-size:clamp(22px,4.6svh,32px);font-weight:700}
.w-cond{
  color:var(--mut);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 100%;
}

/* Lluvia / Viento */
.w-pills{display:flex;gap:8px;white-space:nowrap}
.pill{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:14px;background:var(--surface-btn);
  color:var(--fg);box-shadow:0 0 0 1px var(--bd-strong) inset,0 10px 18px rgba(0,0,0,.35);font-size:12px;line-height:1}
.pill b{font-weight:600}
.pill.w-mini span{font-size:16px;line-height:1}

/* Fila de previsión */
.w-forecast{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.w-forecast .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.w-forecast .lbl{font-size:12px;font-weight:600;color:#e9eaee}

/* Píldora contenedora + slots */
.slots-wrap{display:flex;gap:8px;padding:5px 8px;border-radius:12px;
  background:var(--surface-btn); box-shadow:0 0 0 1px var(--bd-strong) inset;}
.slots{display:flex;gap:8px}
.slot{display:flex;align-items:center;gap:6px;min-width:48px;height:28px}
.slot .ico{font-size:15px;line-height:1}
.slot .txt{display:flex;flex-direction:column;line-height:1}
.slot .txt .h{font-size:12px;font-weight:700}
.slot .txt .t{font-size:12px;color:var(--mut)}

/* ===== GAUGE ===== */
.gauge{display:flex;align-items:center;justify-content:center;min-height:0}
.semi{position:relative;width:100%;max-width:240px;height:120px;margin:auto}
.semi svg{width:100%;height:100%;display:block}
.readout{position:absolute;left:0;right:0;bottom:24px;text-align:center}
.speed{font-size:clamp(26px,5.6svh,40px);font-weight:700;line-height:1}
.unit{font-size:12px;color:var(--mut)}

/* ===== COMPASS ===== */
.compassCard{overflow:hidden}
.compGrid{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.compInfo{display:flex;flex-direction:column;gap:8px;width:44%}
.compDial{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56%;gap:4px}
.compass.circ{width:100%;height:auto;display:block;max-width:100px}
@media (orientation:landscape){.compass.circ{max-width:90px}}
#cardinals text{font-size:15px!important;font-weight:700!important;fill:#f0f2f6!important}
.compReadCenter{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px}
.compReadCenter #bearingDir{font-weight:700}

/* ===== BUTTONS (landscape OK) ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:12px;
  min-height:0;
}
.btn{
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  text-decoration:none;color:var(--fg);
  border-radius:18px;background:var(--surface-btn);
  box-shadow:0 8px 18px rgba(0,0,0,.50),0 0 0 1px var(--bd-strong) inset;
  outline:1px solid #2a2c32;
  padding:12px 12px;
  width:100%; height:100%;
}
.btn .icon{width:clamp(24px,6svh,40px);height:clamp(24px,6svh,40px);display:block}
.btn span{font-size:clamp(15px,2.6svh,19px);color:#e9eaee;line-height:1.15}
.btn:active{transform:scale(.98);background:var(--surface-raise)}

@media (orientation:landscape){
  .grid{ gap:10px; }
  .btn{ min-height:72px; }
  .btn span{ font-size:clamp(15px,2.5svh,18px); }
  @media (max-height:420px){
    .btn{ min-height:68px; padding:10px 10px; }
    .btn span{ font-size:clamp(14px,2.4svh,17px); }
  }
}

/* Estados */
.dot{width:8px;height:8px;border-radius:50%}
.dot.ok{background:#38d39f}.dot.warn{background:#ffd65a}.dot.bad{background:#ff6b6b}


/* ===== PORTRAIT ===== */
@media (orientation:portrait){

  /* Estructura + safe area inferior para que no se corten los botones */
  .wrap{
    gap:14px;
    padding: 14px 14px calc(var(--sa-bottom) + 12px) 14px;
    grid-template-rows: auto auto 1fr;
  }

  /* Top: solo FECHA a la derecha */
  .top{ padding-top:calc(var(--sa-top) + 6px); justify-content:flex-end; }
  .top .clock{ display:none; }
  .top .status{ font-size:0; gap:0; }
  .top .status .date{ display:block; font-size:16px; margin-left:0; }
  .top .status .city, .top .status .net{ display:none; }

  /* La fila media SIEMPRE en una sola columna */
  .mid{
    display:grid;
    grid-template-columns: 1fr !important;
    grid-auto-rows:auto;
    gap:12px;
    min-height:0;
  }
  .mid > .card{ grid-column:1 / -1; min-width:0; }
  .weather, .gauge, .compassCard{ min-width:0; }
  .compGrid, .compGrid > *{ min-width:0; }

  /* Gauge: compacto y centrado */
  .gauge .semi{
    max-width:248px;
    height:124px;
    margin:6px auto 8px;
  }
  .gauge .readout{ bottom:20px; }

  /* Previsiones: tamaño armonizado (ligeramente menor) */
  .w-rows{ min-width:0; }
  .w-rows .row{
    display:flex; align-items:center; gap:10px; min-width:0;
  }
  .w-rows .slots{
    display:flex; gap:8px; min-width:0; flex-wrap:nowrap;
  }
  .w-rows .slot{ flex:0 0 auto; transform:scale(0.92); }

  /* Botonera: 2 columnas x 3 filas de IGUAL altura */
  .grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(3,1fr);
    gap:12px;
    align-content:stretch;
  }
  .grid > .btn{
    width:100%; height:100%;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:6px; padding:0; box-sizing:border-box; min-height:0;
  }
  .btn .icon{ width:30px; height:30px; flex:0 0 auto; }
  .btn span{
    font-size:15px; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    height:1.2em; display:flex; align-items:center; justify-content:center;
  }

  /* iPhones más “cortos”: un pelín más compactos */
  @media (max-height:780px){
    .gauge .semi{ max-width:236px; height:118px; }
    .btn .icon{ width:28px; height:28px; }
    .btn span{ font-size:14.5px; }
    .wrap{ padding-bottom:calc(var(--sa-bottom) + 8px); }
  }
}
/* Ocultar píldoras cuando no apliquen */
.hide {
  display: none !important;
}

/* Mini slot compacto (hora y temp igual altura, icono discreto) */
.w-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.w-mini .w-emoji {
  font-size: 18px;
  line-height: 1;
}

.w-mini .w-hour {
  font-weight: 700;
  font-size: 13px;
}

.w-mini .w-t {
  color: var(--mut);
  font-size: 12px;
}