:root{
  /* ===== Colores editables ===== */
  --page_bg:  #FFFAC4;   /* fondo de toda la página */
  --head_bg:  #FFEBA8;   /* fondo del header (topbar) */
  --device_bg:#FFD04D;   /* fondo del cuadro de dispositivo */
  --relay_bg: #FFFFFF;   /* fondo de los cuadros de relé */

  /* ===== Base ===== */
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:rgba(17,24,39,.10);
  --shadow:0 10px 25px rgba(17,24,39,.06);
  --radius:18px;

  --accent:#ff8a3d;
  --accent2:#ffb36b;

  --ok:#16a34a;
  --bad:#ef4444;

  /* Botones (pill) */
  --pill_bg: rgba(255,255,255,.75);
  --pill_text: #FFBB00;
  --pill_radius: 12px;
  --pill_w: 120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: var(--page_bg);
}

a{color:inherit; text-decoration:none}
.container{max-width:1080px; margin:0 auto; padding:22px}
@media(max-width:620px){ .container{padding:16px} }

/* ===== TOPBAR ===== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background: var(--head_bg);
  border:1px solid rgba(17,24,39,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* BRAND / LOGO */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

/* Logo por background-image */
.brand .logo{
  width:170px;
  height:82px;
  background:transparent;
  background-image:url("/assets/logo2.png");
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
  border:none;
  box-shadow:none;
}

/* ===== NAV ===== */
.nav{
  display:flex;
  gap:10px;
  align-items:center;
  margin-left:auto;
  flex-wrap:nowrap;
}

/* Botones */
.pill{
  height:42px;
  line-height:42px;
  padding:0 14px;

  border-radius:var(--pill_radius);
  border:1px solid var(--border);
  background:var(--pill_bg);
  font-weight:900;
  color:var(--pill_text);

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
}

/* mismo ancho */
.nav .pill{
  width:var(--pill_w);
  min-width:var(--pill_w);
}

/* ===== GRID/CARDS (si se usan) ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media(max-width:920px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .grid{grid-template-columns:1fr} }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.title{font-weight:950; font-size:16px}
.muted{color:var(--muted); font-weight:750; font-size:13px}

/* ===== SWITCH (global) ===== */
.switch{position:relative;width:56px;height:32px;display:inline-block;vertical-align:middle;flex:0 0 56px}
.switch input{display:none}
.switch .slider{position:absolute;inset:0;border-radius:999px;background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.22);transition:.18s}
.switch .knob{position:absolute;top:50%;left:4px;transform:translateY(-50%);width:24px;height:24px;border-radius:999px;background:var(--bad);border:1px solid rgba(17,24,39,.12);box-shadow:0 10px 18px rgba(17,24,39,.10);transition:.18s}
.switch input:checked + .slider{background:rgba(22,163,74,.16);border-color:rgba(22,163,74,.22)}
.switch input:checked + .slider .knob{left:28px;background:var(--ok)}
.switch, .switch .slider, .switch .knob{cursor:pointer}
.switch input:disabled + .slider, .switch input:disabled + .slider .knob{cursor:not-allowed;opacity:.55}

/* =========================================================
   MOBILE HEAD (único bloque, NO se pisa con otros)
   - logo alto visible
   - botones verticales a la derecha
   - sin agrandar el head
   ========================================================= */
@media(max-width:700px){

  /* Pasamos a grid para controlar altura y evitar “stretch + wrap” */
  .topbar{
    display:grid;
    grid-template-columns: 1fr auto; /* logo | botones */
    align-items:center;
    gap:10px;
    padding:12px;
  }

  .brand{
    width:auto;
  }

  /* ✅ Logo SIEMPRE visible: NO width:auto */
  .brand .logo{
    width:140px;
    height:52px;   /* altura “app”, no duplica el head */
  }

  .nav{
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:8px;
    margin-left:0;
  }

  .nav .pill{
    width:90px;
    min-width:90px;
  }
}