/* merlin-ui.css — COPIA LITERAL del CSS del portal y del admin de Merlin Autosys (bloque merlin-ui:start/end + extras). NO se edita a mano:
   se resincroniza desde merlinautosys-web (marca/sincroniza-ui.py) copiando los mismos rangos. Fithealth solo añade tokens en theme.css. */
/* merlin-ui:start */
/* ==========================================================================
   CASCARÓN DE LA APP — COPIA LITERAL de merlin-app/www/styles.css
   Generado por marca/sincroniza-ui.py. NO editar a mano: se regenera.
   ========================================================================== */
/* Las tipografias de marca, servidas desde la propia unidad — nunca desde un CDN. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/Archivo.woff2) format('woff2');}
@font-face{font-family:'PlexMono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/PlexMono.woff2) format('woff2');}

:root {
  --ff-display: 'Archivo', system-ui, sans-serif;
  --ff-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --ff-mono: 'PlexMono', ui-monospace, Menlo, monospace;
  --m-brand: #2A6EDD;
  --m-brand-dark: #2059B8;
  /* El azul de marca da 4.21:1 como texto pequeno sobre papel — por debajo del 4.5 de AA.
     Este es el mismo azul a ojo pero medido a 4.84:1, y es el que va en TEXTO. */
  --m-brand-txt: #407DE1;
  --m-brand-soft: rgba(42, 110, 221, 0.14);
  --m-brand-softer: rgba(42, 110, 221, 0.06);
  --m-brand-border: rgba(42, 110, 221, 0.28);
  --m-bg: #000000;
  --m-bg-2: #1C1C1E;
  --m-bg-3: #2C2C2E;
  --m-bg-sidebar: #0A0A0A;
  --m-text: #F5F5F7;
  --m-text-soft: #98989D;
  --m-text-dim: #636366;
  --m-border: rgba(84, 84, 88, 0.42);
  --m-border-strong: rgba(84, 84, 88, 0.62);
  /* Fondo hundido dentro de una tarjeta (el detalle del plan). Es mas oscuro que la
     superficie en oscuro y apenas un velo en claro: no es el mismo gris en los dos. */
  --m-inset: rgba(0, 0, 0, 0.2);
  --m-green: #30D158;
  --m-red: #FF453A;
  --m-yellow: #FFD60A;
  --m-blue: #64D2FF;
  --m-orange: #FF9F0A;
  --m-purple: #BF5AF2;
  --radius-sm: 11px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --sidebar-w: 240px;
  --glass: rgba(28, 28, 30, 0.72);
  --glass-border: rgba(84, 84, 88, 0.42);
  --transition: 220ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.34);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.46);
}

[data-theme="light"] {
  --m-brand: #2A6EDD;
  --m-brand-dark: #2059B8;
  --m-brand-txt: #2164D1;
  --m-brand-soft: rgba(42, 110, 221, 0.10);
  /* Era rgba(0,122,255,...) — el azul de iOS, resto del diseno anterior al 27-jul. */
  --m-brand-softer: rgba(42, 110, 221, 0.03);
  --m-brand-border: rgba(42, 110, 221, 0.20);
  --m-bg: #F2F2F7;
  --m-bg-2: #FFFFFF;
  --m-bg-3: #E5E5EA;
  --m-bg-sidebar: #FFFFFF;
  --m-text: #1C1C1E;
  --m-text-soft: #6E6E73;
  --m-text-dim: #8E8E93;
  --m-border: rgba(60, 60, 67, 0.13);
  --m-border-strong: rgba(60, 60, 67, 0.24);
  --m-inset: rgba(0, 0, 0, 0.03);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(60, 60, 67, 0.13);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.10);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Inter", sans-serif;
  background: var(--m-bg);
  color: var(--m-text);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

.hidden { display: none !important; }

/* ========== LOGIN ========== */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--m-bg);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--m-bg-2);
  border: 1px solid var(--m-brand-border);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
}

.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo img { width: auto; height: 64px; object-fit: contain; margin-bottom: 16px; }
.login-logo h1 { font-size: 32px; font-weight: 700; letter-spacing: 4px; color: var(--m-brand); margin: 0; }
.login-logo p { font-size: 12px; color: var(--m-text-soft); letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }

.login-form input {
  width: 100%;
  background: var(--m-bg);
  border: 1px solid var(--m-border-strong);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  color: var(--m-text);
  font-size: 15px;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}
.login-form input:focus { border-color: var(--m-brand); }
.login-form button {
  width: 100%;
  background: var(--m-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s;
  font-family: inherit;
}
.login-form button:hover { background: var(--m-brand-dark); }

.login-error {
  margin-top: 12px;
  padding: 10px;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: var(--radius-sm);
  color: var(--m-red);
  font-size: 13px;
  text-align: center;
  display: none;
}
.login-error.show { display: block; }

.login-footer {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  color: var(--m-text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--m-brand);
  box-shadow: 0 0 8px var(--m-brand);
  display: inline-block;
  flex-shrink: 0;
}

/* ========== APP LAYOUT ========== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ========== SIDEBAR ========== */
.sidebar {
  background: var(--m-bg-sidebar);
  border-right: 1px solid var(--m-border);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 10;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--m-border);
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--m-brand-soft);
  display: grid;
  place-items: center;
  color: var(--m-brand);
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
}

.brand-text small {
  display: block;
  font-size: 9px;
  color: var(--m-text-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.brand-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--m-brand);
  letter-spacing: 1px;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-label {
  font-size: 10px;
  color: var(--m-text-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0 8px 6px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--m-text-soft);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
  transition: all 0.15s;
  text-decoration: none; /* el nav admite <a> (Avatar), no solo <button> */
}

.nav-item i {
  font-size: 16px;
  flex-shrink: 0;
}

.nav-item span:not(.badge-pro):not(.badge-ok):not(.badge-soon) {
  flex: 1;
}

.nav-item:hover {
  background: var(--m-brand-softer);
  color: var(--m-text);
}

.nav-item.active {
  background: var(--m-brand-soft);
  color: var(--m-brand);
  font-weight: 500;
}

.nav-item.active i {
  color: var(--m-brand);
}

.nav-item-ai {
  position: relative;
}

.badge-pro, .badge-ok, .badge-soon {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.badge-pro {
  background: rgba(176, 132, 235, 0.15);
  color: var(--m-purple);
}

.badge-ok {
  background: var(--m-brand-soft);
  color: var(--m-brand);
}

.badge-soon {
  background: rgba(255, 217, 102, 0.15);
  color: var(--m-yellow);
}

.sidebar-footer {
  margin-top: auto;
}

.remote-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--m-brand-softer);
  border: 1px solid var(--m-brand-border);
  border-radius: var(--radius-sm);
}

.remote-status-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--m-brand);
}

.remote-status-sub {
  font-size: 10px;
  color: var(--m-text-soft);
}

/* ========== MOBILE MENU ========== */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  width: 40px;
  height: 40px;
  padding: 0; /* el padding por defecto del <button> en iOS (1px 6px) descentraba el icono */
  line-height: 1;
  background: var(--m-bg-2);
  border: 1px solid var(--m-border);
  border-radius: var(--radius-sm);
  color: var(--m-text);
  cursor: pointer;
  z-index: 50;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* ========== MAIN ========== */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  background: var(--m-bg);
  z-index: 5;
}

.topbar-date {
  font-size: 11px;
  color: var(--m-text-soft);
}
/* Solo la primera letra. Con text-transform:capitalize salia "Martes, 28 De Julio":
   capitalize toca TODAS las palabras, y en castellano toLocaleDateString devuelve
   "martes, 28 de julio" — la preposicion no lleva mayuscula. Es el tipo de detalle que
   hace que una pantalla parezca sin revisar. */
.topbar-date::first-letter { text-transform: uppercase; }

.topbar h1 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 2px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--m-bg-2);
  border: none;
  color: var(--m-text-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  position: relative;
  transition: all 0.15s;
}

.icon-btn:hover {
  background: var(--m-brand-soft);
  color: var(--m-brand);
}

.badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--m-red);
  border-radius: 50%;
  border: 2px solid var(--m-bg);
}

.user-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--m-brand-soft);
  color: var(--m-brand);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

/* ========== USER DROPDOWN ========== */
.user-dropdown {
  position: absolute;
  top: 72px;
  right: 28px;
  background: var(--m-bg-2);
  border: 1px solid var(--m-border-strong);
  border-radius: var(--radius-md);
  min-width: 260px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  z-index: 20;
}

.dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--m-border);
  margin-bottom: 8px;
}

.user-badge-big {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--m-brand-soft);
  color: var(--m-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
}

.dropdown-name {
  font-size: 14px;
  font-weight: 600;
}

.dropdown-plan {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.dropdown-sub {
  font-size: 11px;
  color: var(--m-text-soft);
}

.plan-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 1px;
  background: var(--m-brand-soft);
  color: var(--m-brand);
}

.dropdown-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--m-text);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
}

.dropdown-item:hover {
  background: var(--m-brand-softer);
}

.dropdown-item i {
  font-size: 15px;
  color: var(--m-text-soft);
}

.dropdown-divider {
  height: 1px;
  background: var(--m-border);
  margin: 4px 0;
}

.dropdown-danger {
  color: var(--m-red);
}

.dropdown-danger i {
  color: var(--m-red);
}

/* ========== CONTENT ========== */
.content {
  padding: 24px 28px 40px;
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.view { display: none; }
.view.active { display: block; }
/* m-view-in: usado solo por el desplegable "Avanzado" del sidebar (NO por las vistas:
   animar la entrada de vista sacaba a la luz el swap de contenido viejo→nuevo y parecía un glitch). */
@keyframes m-view-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.view-header {
  margin-bottom: 24px;
}

.view-header h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}

.view-subtitle {
  font-size: 13px;
  color: var(--m-text-soft);
}

/* ========== HERO CARDS (home) ========== */
.hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.hero-card {
  background: var(--m-bg-2);
  border: 1px solid var(--m-border);
  border-radius: 14px;
  padding: 18px;
}

.hero-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hero-card-label {
  font-size: 11px;
  color: var(--m-text-soft);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 500;
}

.hero-card-header i {
  font-size: 16px;
  color: var(--m-brand);
}

#weather-icon { color: var(--m-blue); }
#hero-power i { color: var(--m-yellow); }

.hero-card-value {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}

.hero-card-sub {
  font-size: 12px;
  color: var(--m-text-soft);
}

/* ========== SECTION ========== */
.section {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}

.section-header h3 {
  font-size: 15px;
  font-weight: 600;
}

.tab-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--m-bg-2);
  border-radius: var(--radius-sm);
}

.tab-btn {
  padding: 5px 12px;
  background: transparent;
  color: var(--m-text-soft);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.tab-btn.active {
  background: var(--m-brand-soft);
  color: var(--m-brand);
  font-weight: 500;
}

/* ========== METRIC CARDS ========== */
.energy-summary, .status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.metric-card {
  background: var(--m-bg-2);
  border: 1px solid var(--m-border);
  border-radius: 14px;
  padding: 18px;
}

.metric-card-green { border-color: var(--m-brand-border); }
.metric-card-red { border-color: rgba(255, 107, 107, 0.3); }

.metric-label {
  font-size: 11px;
  color: var(--m-text-soft);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
}

.metric-value {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}

.metric-green { color: var(--m-brand); }
.metric-red { color: var(--m-red); }

.metric-sub {
  font-size: 11px;
  color: var(--m-text-soft);
}

/* ========== CARDS ========== */
.card {
  background: var(--m-bg-2);
  border: 1px solid var(--m-border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}

.card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
}

.card-subtitle {
  font-size: 12px;
  color: var(--m-text-soft);
  margin-top: 2px;
}

.chart-card {
  padding: 20px;
}

.chart-tall {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 220px;
  padding: 8px 0 0 0;
}

.chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.chart-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.chart-bar {
  width: 100%;
  max-width: 32px;
  background: var(--m-brand-soft);
  border-radius: 999px 999px 0 0;
  min-height: 2px;
  transition: all 0.3s;
  position: relative;
  cursor: pointer;
}

.chart-bar.current { background: var(--m-brand); }
.chart-bar:hover { opacity: 0.8; }

.chart-bar-value {
  font-size: 9px;
  color: var(--m-text-dim);
  text-align: center;
  padding: 3px 0 1px 0;
  white-space: nowrap;
  overflow: hidden;
  min-height: 16px;
}

.chart-bar-value.has-value { color: var(--m-text-soft); }

.chart-label {
  font-size: 10px;
  color: var(--m-text-dim);
  text-align: center;
  padding: 6px 0 0 0;
  border-top: 1px solid var(--m-border);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.chart-bar:hover::after {
  content: attr(data-value);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--m-bg-3);
  color: var(--m-text);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  margin-bottom: 4px;
  z-index: 10;
  border: 1px solid var(--m-border-strong);
}

/* ========== EMPTY STATE ========== */
.empty-state {
  text-align: center;
  padding: 40px 20px;
}

.empty-state i {
  font-size: 36px;
  color: var(--m-text-dim);
  display: block;
  margin-bottom: 12px;
}

.empty-state h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.empty-state p {
  font-size: 12px;
  color: var(--m-text-soft);
}

/* ========== INFO GRID ========== */
.info-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--m-border);
  font-size: 13px;
}

.info-row:last-child { border-bottom: none; }

.info-label {
  color: var(--m-text-soft);
}

.info-value {
  font-weight: 500;
}

.info-ok {
  color: var(--m-brand);
}

/* ========== SETTINGS ========== */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--m-border);
  gap: 16px;
}

.settings-row:last-child { border-bottom: none; }

.settings-label {
  font-size: 14px;
  font-weight: 500;
}

.settings-sub {
  font-size: 12px;
  color: var(--m-text-soft);
  margin-top: 2px;
}

/* ========== BUTTONS ========== */
.btn-primary {
  background: var(--m-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  transition: background 0.15s;
}

.btn-primary:hover { background: var(--m-brand-dark); }

.btn-secondary {
  background: var(--m-bg-3);
  color: var(--m-text);
  border: 1px solid var(--m-border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
}

.btn-secondary:hover { border-color: var(--m-brand-border); }

/* ===== UNIFIED SIDEBAR (A.1) ===== */
.sidebar-logo { width: auto; height: 40px; object-fit: contain; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; }
.brand-text small { display: none; }
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: 4px; color: var(--m-brand); }
.brand-sub { font-size: 10px; letter-spacing: 6px; color: var(--m-text-dim); text-transform: uppercase; }
.brand-mark { display: none; }

/* ========== APPLE REFINEMENTS ========== */
.card, .room-card, .climate-card, .light-card, .device-row, .security-row,
.alarm-card, .chart-bar, .nav-item, .tab-btn, .toggle, button, select, input,
.sidebar, .topbar, .modal-card, .dropdown-item {
  transition: all var(--transition);
}

.card:hover, .room-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.modal-card {
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
}

.sidebar {
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.btn-primary {
  background: var(--m-brand) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.btn-primary:hover {
  background: var(--m-brand-dark) !important;
  transform: scale(1.02);
}
.btn-primary:active {
  transform: scale(0.98);
}

/* Apple-style toggle */
.toggle {
  width: 51px !important;
  height: 31px !important;
  border-radius: 999px !important;
  background: var(--m-bg-3) !important;
  border: none !important;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.toggle.on {
  background: var(--m-green) !important;
}
.toggle.on::after {
  transform: translateX(20px);
}

/* Smoother scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--m-text-dim); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--m-text-soft); }

/* Input Apple style */
input[type="text"], input[type="password"], input[type="number"], input[type="email"],
select, textarea {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--m-border-strong) !important;
  background: var(--m-bg) !important;
  color: var(--m-text) !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  outline: none !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--m-brand) !important;
  box-shadow: 0 0 0 3px var(--m-brand-soft) !important;
}

/* Nav items Apple feel */
.nav-item {
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
}
.nav-item.active {
  background: var(--m-brand-soft) !important;
  color: var(--m-brand) !important;
}
.nav-item:hover:not(.active) {
  background: var(--m-bg-3) !important;
}

/* ===== TIPOGRAFIA DE MARCA =====
   El mismo bloque que ya llevan el portal y el admin. Hasta el 28-jul la unidad declaraba
   los colores correctos pero NINGUNA de las dos tipografias de marca: los titulares iban
   en la del sistema y las etiquetas no eran el eyebrow monoespaciado. Compartir la paleta
   y no la letra es justo lo que hace que dos pantallas se sigan viendo de dos empresas. */
h1, h2, h3, .card-title, .ai-welcome-title { font-family: var(--ff-display); letter-spacing: -.02em; }

/* Etiquetilla monoespaciada en MAYUSCULAS — el "eyebrow" de la landing. */
.mono, th, .sidebar-label { font-family: var(--ff-mono); font-weight: 500;
  text-transform: uppercase; letter-spacing: .15em; font-variant-numeric: tabular-nums; }

/* La marca del lateral, con los mismos valores que el admin: el nombre hereda el color de
   texto (no va en azul) y el espaciado se mide en em, no en px. */
.brand-name { font-family: var(--ff-display); font-size: 15px; font-weight: 700;
  letter-spacing: .06em; color: var(--m-text); }
.brand-sub { font-family: var(--ff-mono); font-size: 10px; color: var(--m-text-dim);
  letter-spacing: .15em; margin-top: -2px; text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════════════════════
   ACABADO — que esto se vea como merlinautosys.com
   El lenguaje sale de `.bar` de la landing: superficie translucida sobre el
   fondo, blur con saturacion, y una linea de 1px que la separa. Nada de esto
   estaba aqui: la barra era opaca y el lateral no cuadraba con ella.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. El lateral y la barra superior cierran a la MISMA altura ──
   El borde del lateral caia a 76px (20 de padding + 40 de logo + 16) y el de la
   barra a ~85px, porque esta se dimensionaba por su contenido. Se fija la misma
   altura en las dos y las dos lineas se encuentran. */
.sidebar { padding: 0 16px 20px; }
.sidebar-header {
  height: 84px;
  margin: 0 -16px;
  padding: 0 20px;
  box-sizing: border-box;
  padding-bottom: 0;
}
.topbar {
  min-height: 84px;
  padding: 0 28px;
  box-sizing: border-box;
}

/* ── 2. El gloss ──
   Mismo efecto que la barra de la landing: la superficie deja pasar el fondo. */
.topbar {
  background: color-mix(in srgb, var(--m-bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
}
.sidebar {
  background: color-mix(in srgb, var(--m-bg-sidebar) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
}
/* Las tarjetas llevan la sombra de la landing (--sh-1), que es lo que las
   despega del fondo sin dibujarles un borde duro. */
.hero-card, .room-card, .quick-card, .card {
  box-shadow: 0 .5px 1px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.05);
}


/* ── 4. Todas las tarjetas de area, la MISMA altura ──
   El intento anterior daba a cada una su alto natural, y la estancia con algo
   encendido quedaba visiblemente mas alta que la de al lado: la rejilla se veia
   rota. Ahora todas miden lo mismo y lo que distingue a la activa es el color,
   no el tamaño. */
.rooms-grid { align-items: stretch; }
.room-card,
.room-card.quiet {
  min-height: 104px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.room-card.quiet .room-icon-box { width: 38px; height: 38px; }
.room-card.active {
  border-color: var(--m-brand-border);
  background: linear-gradient(180deg, var(--m-brand-softer), var(--m-bg-2));
}

@media (prefers-reduced-motion: reduce) {
  .topbar, .sidebar { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* La fila de indicadores reserva SIEMPRE el alto de una pastilla, este llena o
   vacia. Es lo que hace que la estancia con algo encendido y la que esta en
   reposo midan exactamente lo mismo, sin dejar un hueco mayor del necesario. */
.room-pills { min-height: 34px; }
.room-card, .room-card.quiet { min-height: 116px; }

/* ── Sin barra separadora bajo la marca ──
   Habia un border-bottom en el lateral y otro en la barra superior, y por poco que se
   desviaran uno del otro se veia el escalon. Quitando el del lateral no hay dos lineas
   que cuadrar: la de la barra cruza entera y la marca queda flotando sobre el fondo. */
.sidebar-header { border-bottom: none !important; }

/* ── Gloss que SE VE ──
   El intento anterior mezclaba el color de fondo consigo mismo: sobre #000 un velo negro
   translucido es invisible por definicion. El cristal tiene que ser MAS CLARO que lo que
   hay detras — es la superficie la que se ve, no el fondo. Se usa la superficie de las
   tarjetas con transparencia, que es justo lo que hace la barra de la landing sobre su
   papel claro. */
.topbar {
  background: color-mix(in srgb, var(--m-bg-2) 76%, transparent);
  border-bottom: 1px solid var(--m-border);
}
.sidebar {
  background: color-mix(in srgb, var(--m-bg-2) 46%, transparent);
  border-right: 1px solid var(--m-border);
}
[data-theme="light"] .topbar { background: color-mix(in srgb, #fff 78%, transparent); }
[data-theme="light"] .sidebar { background: color-mix(in srgb, #fff 62%, transparent); }

/* La marca, centrada en los mismos 84px que el saludo de la barra. */
.sidebar-header { display: flex; align-items: center; }
.topbar { display: flex; align-items: center; }

/* Menos aire en las tarjetas de area: la fila reservada era mas alta de lo necesario y
   las estancias en reposo quedaban con un hueco que llamaba mas que su contenido. */
.room-pills { min-height: 28px; }
.room-card, .room-card.quiet { min-height: 96px; gap: 8px; }
/* merlin-ui:end */

/* ===== extra del portal Merlin (merlinautosys-web/portal/index.html, líneas 20-263): planes, tarjetas, formularios ===== */
*{margin:0;padding:0;box-sizing:border-box}
/* ═══════════════════════════════════════════════════════════════════════════
   MARCA MERLIN — bloque canonico. Identico en merlinautosys.com, el portal de
   cliente y el panel de admin. Si cambias un valor aqui, cambialo en los tres.
   Fuente de verdad y explicacion de cada token: merlinautosys-web/marca/README.md
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ AUTH SCREENS ═══ */
.auth-tabs{display:flex;gap:.5rem;margin-bottom:1.75rem;background:var(--m-bg);border-radius:var(--radius-sm);padding:4px}
.auth-tab{flex:1;padding:.6rem;text-align:center;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;cursor:pointer;transition:.2s;color:var(--m-text-dim);border:none;background:none}
.auth-tab.active{background:var(--m-bg-3);color:var(--m-text)}
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-size:.8rem;font-weight:600;color:var(--m-text-soft);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.04em}
.form-group input:not([type=checkbox]){width:100%;padding:.7rem .85rem;background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--radius-sm);color:var(--m-text);font-family:inherit;font-size:.9rem;transition:.2s;outline:none}
.form-group input:focus{border-color:var(--m-brand);box-shadow:0 0 0 3px var(--m-brand-soft)}
.form-group input::placeholder{color:var(--m-text-dim)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.auth-footer{text-align:center;margin-top:1.25rem;font-size:.8rem;color:var(--m-text-dim)}
.auth-footer a{color:var(--m-brand);cursor:pointer;text-decoration:none}
.auth-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:var(--m-red);padding:.6rem .85rem;border-radius:var(--radius-sm);font-size:.82rem;margin-bottom:1rem;display:none}
.auth-success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:var(--m-green);padding:.6rem .85rem;border-radius:var(--radius-sm);font-size:.82rem;margin-bottom:1rem;display:none}

/* ═══ MAIN APP ═══ */
.app{display:none;min-height:100vh}











/* Nav */

/* Sections */
.section{display:none}
.section.active{display:block}
/* Descubre */
.disc-hero{padding:.5rem 0 1.5rem}
.disc-kicker{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--m-brand);margin-bottom:.5rem}
.disc-hero h2{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.15;margin:0 0 .6rem;letter-spacing:-.02em}
.disc-hero p{color:var(--m-text-soft);max-width:60ch;margin:0}
.disc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin-bottom:1.5rem}
.disc-card{background:var(--m-bg-2);border:1px solid var(--m-border);border-radius:var(--radius-md);padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;transition:.2s}
.disc-card:hover{border-color:var(--m-brand);transform:translateY(-2px)}
.disc-card i{display:block;width:26px;height:26px;color:var(--m-brand)}
.disc-card svg{width:26px;height:26px}
.disc-card h3{font-size:1rem;margin:.25rem 0 0}
.disc-card p{font-size:.85rem;color:var(--m-text-soft);margin:0;flex:1}
.disc-say{font-size:.82rem;font-style:italic;color:var(--m-text);background:var(--m-bg);border-left:2px solid var(--m-brand);padding:.5rem .75rem;border-radius:0 6px 6px 0;margin-top:.5rem}
.disc-links{display:grid;grid-template-columns:repeat(5,1fr);padding-top:.35rem}
.disc-tile{display:flex;align-items:center;gap:.6rem;padding:.55rem 1rem;color:var(--m-text);text-decoration:none;font-size:.92rem;font-weight:500;border-left:1px solid var(--m-border);transition:.15s}
.disc-tile:first-child{border-left:none;padding-left:0}
.disc-tile:hover{color:var(--m-brand)}
.disc-tile i{display:flex;color:var(--m-brand)}
.disc-tile svg{width:18px;height:18px}
.disc-tile span{display:none}
@media (max-width:700px){.disc-links{grid-template-columns:repeat(2,1fr);row-gap:.4rem}.disc-tile:nth-child(odd){border-left:none;padding-left:0}}
.disc-by-link{display:block;padding-top:0}
.disc-by-link a{display:inline-flex;align-items:center;gap:.5rem;color:var(--m-text);text-decoration:none;font-size:.9rem;font-weight:500;white-space:nowrap}
.disc-by-link a svg{width:20px;height:20px;color:var(--m-brand)}
.disc-by-link a:hover{color:var(--m-brand)}
.disc-by{display:flex;gap:2rem;align-items:center;margin-top:1rem}
.disc-by-mark{flex:0 0 auto;padding-right:2rem;border-right:1px solid var(--m-border)}
.disc-by-logo{height:36px;width:auto;display:block;margin-top:.5rem;filter:brightness(0) invert(1)}
[data-theme="light"] .disc-by-logo{filter:none}
.disc-by-body{flex:1;min-width:0}
.disc-by-body p{margin:0;font-size:.9rem;color:var(--m-text-soft)}
@media (max-width:760px){.disc-by{flex-direction:column;align-items:flex-start;gap:1rem}.disc-by-mark{padding:0;border-right:none}}
.disc-cta{margin-top:1.5rem;background:linear-gradient(135deg,var(--m-brand),#1b4fa8);color:#fff;border-radius:var(--radius-md);padding:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between}
.disc-cta h3{margin:0 0 .25rem;font-size:1.1rem}
.disc-cta p{margin:0;opacity:.9;font-size:.9rem;max-width:58ch}
.disc-cta a{background:#fff;color:var(--m-brand);padding:.6rem 1.1rem;border-radius:999px;font-weight:600;text-decoration:none;white-space:nowrap}

/* Cards */
.card-title .icon{width:20px;height:20px;color:var(--m-brand)}

/* Stats row */

/* Status badges */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:20px;font-size:.72rem;font-weight:600}
.badge-active{background:rgba(34,197,94,.12);color:var(--m-green)}
.badge-offline{background:rgba(239,68,68,.12);color:var(--m-red)}
.badge-pending{background:rgba(234,179,8,.12);color:var(--m-yellow)}
.badge-suspended{background:rgba(249,115,22,.12);color:var(--m-orange)}
.badge-plan{background:var(--m-brand-soft);color:var(--m-brand);text-transform:uppercase;letter-spacing:.03em}

/* Device cards */

/* Activate */
.activate-box{background:var(--m-bg-2);box-shadow:var(--sh-1);border:1px dashed var(--m-border-strong);border-radius:var(--radius-md);padding:2.5rem;text-align:center;margin-bottom:1.5rem}
.activate-box h3{font-size:1.05rem;font-weight:700;margin-bottom:.5rem}
.activate-box p{color:var(--m-text-soft);font-size:.85rem;margin-bottom:1.25rem}
.activate-input-row{display:flex;gap:.5rem;max-width:380px;margin:0 auto}
.activate-input-row input{flex:1;padding:.7rem .85rem;background:var(--m-bg-2);border:1px solid var(--m-border);border-radius:var(--radius-sm);color:var(--m-text);font-variant-numeric:tabular-nums;font-size:1rem;text-align:center;letter-spacing:.15em;text-transform:uppercase;outline:none}
.activate-input-row input:focus{border-color:var(--m-brand);box-shadow:0 0 0 3px var(--m-brand-soft)}
.activate-input-row button{padding:.7rem 1.25rem;background:var(--m-brand);color:#fff;border:none;border-radius:var(--radius-sm);font-family:inherit;font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap}
.activate-input-row button:hover{background:var(--m-brand-dark)}

/* Profile form */
.profile-form{max-width:500px}
.profile-form .form-group{margin-bottom:1.25rem}
.profile-actions{display:flex;gap:.75rem;margin-top:1.5rem}
.btn-save{padding:.65rem 1.25rem;background:var(--m-brand);color:#fff;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:.2s}
.btn-save:hover{background:var(--m-brand-dark)}

/* AI Usage */
.usage-bar-container{margin-top:1rem}
.usage-bar-header{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:.4rem}
.usage-bar-header span:first-child{color:var(--m-text-soft)}
.usage-bar-header span:last-child{font-variant-numeric:tabular-nums;font-size:.78rem}
.usage-bar{height:10px;background:var(--m-bg);border-radius:999px;overflow:hidden}
.usage-bar-fill{height:100%;border-radius:999px;transition:width .5s,background .5s}
.usage-bar-fill{background:var(--m-green)}
.usage-bar-fill.warn{background:var(--m-orange)}
.usage-bar-fill.danger{background:var(--m-red)}
.usage-bar-fill.warn{background:linear-gradient(90deg,var(--m-yellow),var(--m-orange))}
.usage-bar-fill.danger{background:linear-gradient(90deg,var(--m-orange),var(--m-red))}

/* Plans */
.plans-grid-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;align-items:stretch}
.plans-grid{margin-top:1.5rem}
@media(max-width:900px){.plans-grid-inner{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.plans-grid-inner{grid-template-columns:1fr}}
.plan-card{background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--radius-md);padding:1.5rem;text-align:center;transition:.2s;position:relative;display:flex;flex-direction:column}
.plan-card:hover{border-color:var(--m-border-strong);transform:translateY(-2px)}
.plan-card.recommended{border-color:var(--m-brand);box-shadow:0 0 0 1px var(--m-brand),0 8px 24px rgba(10,132,255,.1)}
.plan-card.recommended::before{content:'Más popular';position:absolute;top:-.6rem;left:50%;transform:translateX(-50%);background:var(--m-brand);color:#fff;font-size:.65rem;font-weight:700;padding:.15rem .75rem;border-radius:20px;letter-spacing:.03em;white-space:nowrap}
.plan-card.current::after{content:'TU PLAN';position:absolute;top:.75rem;right:.75rem;background:var(--m-green);color:#fff;font-size:.55rem;font-weight:700;padding:.15rem .5rem;border-radius:999px;letter-spacing:.03em}
.plan-name{font-size:1.1rem;font-weight:700;margin-bottom:.25rem;text-transform:capitalize}
.plan-price{font-size:1.8rem;font-weight:700;color:var(--m-brand);margin-bottom:.15rem}
.plan-price span{font-size:.85rem;font-weight:400;color:var(--m-text-dim)}
.plan-vat{font-size:.78rem;color:var(--m-text-dim);margin:-.1rem 0 .6rem}
.plan-features{list-style:none;text-align:left;margin:1rem 0;font-size:.82rem;color:var(--m-text-soft)}
.plan-features li{padding:.3rem 0;padding-left:1.2rem;position:relative}
.plan-features li::before{content:'✓';position:absolute;left:0;color:var(--m-green);font-weight:700}
.plan-btn{width:100%;padding:.65rem;border-radius:var(--radius-sm);font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:.2s;border:1px solid var(--m-border);background:var(--m-bg-2);color:var(--m-text);margin-top:auto}
.plan-btn:hover{border-color:var(--m-brand);color:var(--m-brand)}
.plan-btn.primary{background:var(--m-brand);color:#fff;border-color:var(--m-brand)}
.plan-btn.primary:hover{background:var(--m-brand-dark)}
.plan-btn.current-btn{opacity:.5;cursor:default;background:var(--m-bg-3);border-color:var(--m-border)}
.plan-btn.current-btn:hover{border-color:var(--m-border);color:var(--m-text)}

/* Password */
.password-section{max-width:420px}

/* Toast */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--m-bg-2);border:1px solid var(--m-border);border-radius:var(--radius-sm);padding:.85rem 1.25rem;font-size:.85rem;z-index:999;transform:translateY(120%);transition:transform .3s,opacity .3s;display:flex;align-items:center;gap:.5rem;opacity:0;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
.toast.success{border-color:rgba(34,197,94,.4)}
.toast.error{border-color:rgba(239,68,68,.4)}
.toast .dot{width:8px;height:8px;border-radius:50%}
.toast.success .dot{background:var(--m-green)}
.toast.error .dot{background:var(--m-red)}

/* Loader */
.loader{display:inline-block;width:16px;height:16px;border:2px solid var(--m-border);border-top-color:var(--m-brand);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}


/* Mobile */
@media(max-width:640px){
  .stats-row{grid-template-columns:1fr 1fr}
  .device-info{grid-template-columns:1fr}
  .topbar-user{display:none}
  .activate-input-row{flex-direction:column}
}

/* ── MARCA: va al final para que mande sobre las reglas de arriba ── */
/* Titulares en Archivo, como la landing. El cuerpo se queda en la tipografia del
   sistema: es una interfaz, no una portada. */
/* Etiquetilla monoespaciada en mayusculas — el "eyebrow" de la landing. */

/* ── Elevación, como en la landing ───────────────────────────────────────
   Las tarjetas del portal eran cajas planas con borde; las de la web llevan
   dos sombras (una de contacto, muy corta, y otra difusa que las despega del
   papel). Es lo que hace que la web parezca de otra categoría con los mismos
   colores. Mismos valores que --sh-1 y --sh-2 de merlinautosys.com. */
:root{
  --sh-1:0 .5px 1px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.05);
  --sh-2:0 1px 2px rgba(0,0,0,.05), 0 12px 34px -8px rgba(0,0,0,.12);
}
.plan-card, .auth-box{ box-shadow:var(--sh-1); }
.btn-save, .plan-btn{ box-shadow:var(--sh-1); transition:transform .12s ease, opacity .15s ease; }
.btn-save:active, .plan-btn:active{ transform:scale(.97); }
.plan-card.current{ box-shadow:var(--sh-2); }
/* El campo enfocado, con el mismo halo azul que el chat de la web. */
.form-group input:focus, .activate-input-row input:focus{
  border-color:var(--m-brand); box-shadow:0 0 0 4px rgba(42,110,221,.16); outline:none; }

/* ── Pie: MISMA estructura que la landing, no solo el mismo aspecto ──────
   <footer> pone el borde y el aire; el .foot-in de dentro reparte con
   space-between. Con tres hijos —logo, dominio, enlaces— eso deja el dominio
   CENTRADO. Con margin-left:auto en los enlaces quedaba pegado al logo, que es
   exactamente en lo que se notaba que no eran el mismo pie. */
footer.foot{border-top:1px solid var(--m-border);padding-block:1.6rem;margin-top:2rem}
.foot-in{max-width:1340px;margin-inline:auto;padding-inline:clamp(1.1rem,3.5vw,2.4rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot-in .logo{height:24px;width:42px;flex:none;opacity:.75;
  background:url(/assets/logo.png) left center/contain no-repeat}
.foot-in .mono{color:var(--m-text-soft);font-family:var(--ff-mono);font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;font-size:.66rem}
.foot-legal{display:inline-flex;gap:1rem;margin-left:1rem}
.foot-legal svg{vertical-align:-3px}
.foot-legal a{color:var(--m-text-soft);text-decoration:none;font-size:.8rem;
  border-bottom:1px solid transparent}
.foot-legal a:hover{color:var(--m-brand-txt);border-bottom-color:currentColor}
@media (max-width:600px){.foot-legal{width:100%;margin-top:.4rem}}

/* ==========================================================================
   CABECERA Y PIE - COPIA LITERAL de merlinautosys.com
   Generado por marca/copia-literal.py. NO editar a mano: se regenera.
   ========================================================================== */
:root{
  --paper:var(--m-bg); --ink:var(--m-text); --surface:var(--m-bg-2);
  --muted:var(--m-text-soft); --line:var(--m-border);
  --cobalt:var(--m-brand); --accent-txt:var(--m-brand-txt); --on-accent:#fff;
  --r-sm:var(--radius-sm); --r-md:var(--radius-md); --r-lg:var(--radius-lg);
}
.logo{background:url(/assets/logo.png) left center/contain no-repeat; display:block;}
.wrap{max-width:1340px; margin-inline:auto; padding-inline:clamp(1.1rem,3.5vw,2.4rem);}
.lang{position:relative; display:inline-flex;}
.lang::after{content:''; position:absolute; right:.55rem; top:50%; width:5px; height:5px; border-right:1.4px solid var(--muted); border-bottom:1.4px solid var(--muted); transform:translateY(-70%) rotate(45deg); pointer-events:none;}
.lang select{font-family:var(--ff-mono); font-weight:500; font-size:.58rem; text-transform:uppercase; letter-spacing:.12em; padding:.42rem 1.5rem .42rem .55rem; border-radius:2px; cursor:pointer; background:transparent; color:var(--muted); border:1px solid var(--line); appearance:none; min-width:8.7rem;}
.cta{display:inline-flex; align-items:center; gap:.55rem; background:var(--cobalt); color:var(--on-accent); text-decoration:none; border:1px solid var(--cobalt); font-family:inherit; font-weight:700; font-size:.9rem; letter-spacing:-.01em; padding:.8rem 1.3rem; border-radius:2px; cursor:pointer; transition:opacity .15s ease;}
.cta:hover{opacity:.87;}
.cta.sm{padding:.55rem .9rem; font-size:.82rem;}
footer{border-top:1px solid var(--line); padding-block:1.6rem;}
.foot-in{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.foot-in .logo{height:24px; width:42px; flex:none; opacity:.75;}
footer span{color:var(--muted);}
.cta, .btn{font-weight:600; letter-spacing:-.01em; box-shadow:var(--sh-1);}
.lang select, header select{height:var(--ctl-h); border-radius:var(--r-sm); background:var(--surface); box-shadow:var(--sh-1); border-color:transparent;}
.cta{height:var(--ctl-h); border-radius:var(--r-sm); box-shadow:var(--sh-1);}
.foot-legal{display:inline-flex; gap:1rem; margin-left:1rem;}
.foot-legal a{color:var(--muted); text-decoration:none; font-size:.8rem; border-bottom:1px solid transparent;}
.foot-legal a:hover{color:var(--accent-txt); border-bottom-color:currentColor;}
@media (max-width:600px){.foot-legal{margin-left:0; width:100%; margin-top:.4rem;}}
/* El boton de la barra toma el CUERPO del .cta de la web; el color lo pone aqui porque
   la accion es cerrar sesion, no "Habla con Merlin". */

/* ===== extra del admin Merlin (merlin-backend/admin/index.html, líneas 12-1304): stats, tablas, modales ===== */
*{margin:0;padding:0;box-sizing:border-box}
/* ═══════════════════════════════════════════════════════════════════════════
   MARCA MERLIN — bloque canonico. Identico en merlinautosys.com, el portal de
   cliente y el panel de admin. Si cambias un valor aqui, cambialo en los tres.
   Fuente de verdad y explicacion de cada token: merlinautosys-web/marca/README.md
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ LOGIN ═══ */

/* ═══ APP LAYOUT ═══ */

/* ═══ MAIN ═══ */
.sec-head h2{font-size:20px;font-weight:700}
.sec-head .info{color:var(--m-text-dim);font-size:12px}

/* ═══ STATS ═══ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}
.stat-card{background:var(--m-bg-2);border:1px solid var(--m-border);border-radius:var(--radius-md);padding:18px 20px}
.stat-card .label{font-size:11px;color:var(--m-text-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.stat-card .value{font-size:28px;font-weight:700}
.stat-card .value.green{color:var(--m-green)}
.stat-card .value.red{color:var(--m-red)}
.stat-card .value.blue{color:var(--m-brand)}
.stat-card .value.orange{color:var(--m-orange)}

/* ═══ TABLE ═══ */
table{width:100%;border-collapse:collapse;background:var(--m-bg-2);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--m-border);table-layout:auto}
th{text-align:left;padding:11px 16px;font-size:11px;text-transform:uppercase;color:var(--m-text-dim);background:var(--m-bg-3);font-weight:600;letter-spacing:.04em}
td{padding:11px 16px;font-size:13px;border-top:1px solid var(--m-border)}
tr:hover td{background:rgba(255,255,255,.02)}

/* ═══ BADGES ═══ */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.badge.active{background:rgba(34,197,94,.12);color:var(--m-green)}
.badge.offline{background:rgba(255,107,107,.12);color:var(--m-red)}
.badge.pending{background:rgba(255,217,102,.12);color:var(--m-yellow)}
.badge.suspended{background:rgba(107,114,128,.15);color:var(--m-text-dim)}
.badge.basic{background:rgba(153,153,170,.12);color:var(--m-text-soft)}
.badge.connect{background:rgba(46,123,255,.12);color:var(--m-brand)}
.badge.pro{background:rgba(176,132,235,.12);color:var(--m-purple)}
.badge.business{background:rgba(255,159,74,.12);color:var(--m-orange)}
.badge.enterprise{background:rgba(34,197,94,.12);color:var(--m-green)}

/* ═══ BUTTONS ═══ */
.btn{padding:7px 14px;border-radius:var(--radius-sm);border:1px solid var(--m-border-strong);background:var(--m-bg-3);color:var(--m-text-soft);font-size:13px;cursor:pointer;transition:.15s;font-family:inherit}
.btn:hover{border-color:var(--m-brand);color:var(--m-brand)}

/* ═══ SECTIONS ═══ */
.section{display:none}
.section.active{display:block}
.section-title{font-size:15px;font-weight:600;margin-bottom:14px}

/* ═══ MODAL ═══ */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:100;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:var(--m-bg-2);border:1px solid var(--m-border-strong);border-radius:var(--radius-lg);padding:28px;width:440px;max-height:80vh;overflow-y:auto}
.modal h3{font-size:17px;font-weight:700;margin-bottom:20px}
.modal label{display:block;font-size:12px;color:var(--m-text-dim);margin-bottom:4px;margin-top:14px;text-transform:uppercase;letter-spacing:.04em}
.modal input,.modal select{width:100%;padding:10px 14px;background:var(--m-bg-3);border:1px solid var(--m-border-strong);border-radius:var(--radius-sm);color:var(--m-text);font-size:14px;outline:none;font-family:inherit}
.modal input:focus,.modal select:focus{border-color:var(--m-brand)}
.modal-actions{display:flex;gap:10px;margin-top:24px;justify-content:flex-end}
.empty{text-align:center;padding:48px 20px;color:var(--m-text-dim)}
.time-ago{color:var(--m-text-dim);font-size:12px}

/* ═══ TOAST ═══ */
.toast{position:fixed;bottom:24px;right:24px;background:var(--m-bg-2);border:1px solid var(--m-border-strong);border-radius:var(--radius-sm);padding:12px 18px;font-size:13px;z-index:999;transform:translateY(120%);transition:transform .3s,opacity .3s;display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
.toast.success{border-color:rgba(34,197,94,.4)}
.toast.error{border-color:rgba(255,107,107,.4)}
.toast .dot{width:8px;height:8px;border-radius:50%}
.toast.success .dot{background:var(--m-green)}
.toast.error .dot{background:var(--m-red)}

/* merlin-ui:start */
/* ==========================================================================
   CASCARÓN DE LA APP — COPIA LITERAL de merlin-app/www/styles.css
   Generado por marca/sincroniza-ui.py. NO editar a mano: se regenera.
   ========================================================================== */
/* Las tipografias de marca, servidas desde la propia unidad — nunca desde un CDN. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/Archivo.woff2) format('woff2');}
@font-face{font-family:'PlexMono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/PlexMono.woff2) format('woff2');}

:root {
  --ff-display: 'Archivo', system-ui, sans-serif;
  --ff-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --ff-mono: 'PlexMono', ui-monospace, Menlo, monospace;
  --m-brand: #2A6EDD;
  --m-brand-dark: #2059B8;
  /* El azul de marca da 4.21:1 como texto pequeno sobre papel — por debajo del 4.5 de AA.
     Este es el mismo azul a ojo pero medido a 4.84:1, y es el que va en TEXTO. */
  --m-brand-txt: #407DE1;
  --m-brand-soft: rgba(42, 110, 221, 0.14);
  --m-brand-softer: rgba(42, 110, 221, 0.06);
  --m-brand-border: rgba(42, 110, 221, 0.28);
  --m-bg: #000000;
  --m-bg-2: #1C1C1E;
  --m-bg-3: #2C2C2E;
  --m-bg-sidebar: #0A0A0A;
  --m-text: #F5F5F7;
  --m-text-soft: #98989D;
  --m-text-dim: #636366;
  --m-border: rgba(84, 84, 88, 0.42);
  --m-border-strong: rgba(84, 84, 88, 0.62);
  /* Fondo hundido dentro de una tarjeta (el detalle del plan). Es mas oscuro que la
     superficie en oscuro y apenas un velo en claro: no es el mismo gris en los dos. */
  --m-inset: rgba(0, 0, 0, 0.2);
  --m-green: #30D158;
  --m-red: #FF453A;
  --m-yellow: #FFD60A;
  --m-blue: #64D2FF;
  --m-orange: #FF9F0A;
  --m-purple: #BF5AF2;
  --radius-sm: 11px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --sidebar-w: 240px;
  --glass: rgba(28, 28, 30, 0.72);
  --glass-border: rgba(84, 84, 88, 0.42);
  --transition: 220ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.34);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.46);
}

[data-theme="light"] {
  --m-brand: #2A6EDD;
  --m-brand-dark: #2059B8;
  --m-brand-txt: #2164D1;
  --m-brand-soft: rgba(42, 110, 221, 0.10);
  /* Era rgba(0,122,255,...) — el azul de iOS, resto del diseno anterior al 27-jul. */
  --m-brand-softer: rgba(42, 110, 221, 0.03);
  --m-brand-border: rgba(42, 110, 221, 0.20);
  --m-bg: #F2F2F7;
  --m-bg-2: #FFFFFF;
  --m-bg-3: #E5E5EA;
  --m-bg-sidebar: #FFFFFF;
  --m-text: #1C1C1E;
  --m-text-soft: #6E6E73;
  --m-text-dim: #8E8E93;
  --m-border: rgba(60, 60, 67, 0.13);
  --m-border-strong: rgba(60, 60, 67, 0.24);
  --m-inset: rgba(0, 0, 0, 0.03);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(60, 60, 67, 0.13);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.10);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Inter", sans-serif;
  background: var(--m-bg);
  color: var(--m-text);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

.hidden { display: none !important; }

/* ========== LOGIN ========== */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--m-bg);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--m-bg-2);
  border: 1px solid var(--m-brand-border);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
}

.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo img { width: auto; height: 64px; object-fit: contain; margin-bottom: 16px; }
.login-logo h1 { font-size: 32px; font-weight: 700; letter-spacing: 4px; color: var(--m-brand); margin: 0; }
.login-logo p { font-size: 12px; color: var(--m-text-soft); letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }

.login-form input {
  width: 100%;
  background: var(--m-bg);
  border: 1px solid var(--m-border-strong);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  color: var(--m-text);
  font-size: 15px;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}
.login-form input:focus { border-color: var(--m-brand); }
.login-form button {
  width: 100%;
  background: var(--m-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s;
  font-family: inherit;
}
.login-form button:hover { background: var(--m-brand-dark); }

.login-error {
  margin-top: 12px;
  padding: 10px;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: var(--radius-sm);
  color: var(--m-red);
  font-size: 13px;
  text-align: center;
  display: none;
}
.login-error.show { display: block; }

.login-footer {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  color: var(--m-text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--m-brand);
  box-shadow: 0 0 8px var(--m-brand);
  display: inline-block;
  flex-shrink: 0;
}

/* ========== APP LAYOUT ========== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ========== SIDEBAR ========== */
.sidebar {
  background: var(--m-bg-sidebar);
  border-right: 1px solid var(--m-border);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 10;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--m-border);
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--m-brand-soft);
  display: grid;
  place-items: center;
  color: var(--m-brand);
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
}

.brand-text small {
  display: block;
  font-size: 9px;
  color: var(--m-text-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.brand-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--m-brand);
  letter-spacing: 1px;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-label {
  font-size: 10px;
  color: var(--m-text-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0 8px 6px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--m-text-soft);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
  transition: all 0.15s;
  text-decoration: none; /* el nav admite <a> (Avatar), no solo <button> */
}

.nav-item i {
  font-size: 16px;
  flex-shrink: 0;
}

.nav-item span:not(.badge-pro):not(.badge-ok):not(.badge-soon) {
  flex: 1;
}

.nav-item:hover {
  background: var(--m-brand-softer);
  color: var(--m-text);
}

.nav-item.active {
  background: var(--m-brand-soft);
  color: var(--m-brand);
  font-weight: 500;
}

.nav-item.active i {
  color: var(--m-brand);
}

.nav-item-ai {
  position: relative;
}

.badge-pro, .badge-ok, .badge-soon {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.badge-pro {
  background: rgba(176, 132, 235, 0.15);
  color: var(--m-purple);
}

.badge-ok {
  background: var(--m-brand-soft);
  color: var(--m-brand);
}

.badge-soon {
  background: rgba(255, 217, 102, 0.15);
  color: var(--m-yellow);
}

.sidebar-footer {
  margin-top: auto;
}

.remote-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--m-brand-softer);
  border: 1px solid var(--m-brand-border);
  border-radius: var(--radius-sm);
}

.remote-status-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--m-brand);
}

.remote-status-sub {
  font-size: 10px;
  color: var(--m-text-soft);
}

/* ========== MOBILE MENU ========== */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  width: 40px;
  height: 40px;
  padding: 0; /* el padding por defecto del <button> en iOS (1px 6px) descentraba el icono */
  line-height: 1;
  background: var(--m-bg-2);
  border: 1px solid var(--m-border);
  border-radius: var(--radius-sm);
  color: var(--m-text);
  cursor: pointer;
  z-index: 50;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* ========== MAIN ========== */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  background: var(--m-bg);
  z-index: 5;
}

.topbar-date {
  font-size: 11px;
  color: var(--m-text-soft);
}
/* Solo la primera letra. Con text-transform:capitalize salia "Martes, 28 De Julio":
   capitalize toca TODAS las palabras, y en castellano toLocaleDateString devuelve
   "martes, 28 de julio" — la preposicion no lleva mayuscula. Es el tipo de detalle que
   hace que una pantalla parezca sin revisar. */
.topbar-date::first-letter { text-transform: uppercase; }

.topbar h1 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 2px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--m-bg-2);
  border: none;
  color: var(--m-text-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  position: relative;
  transition: all 0.15s;
}

.icon-btn:hover {
  background: var(--m-brand-soft);
  color: var(--m-brand);
}

.badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--m-red);
  border-radius: 50%;
  border: 2px solid var(--m-bg);
}

.user-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--m-brand-soft);
  color: var(--m-brand);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

/* ========== USER DROPDOWN ========== */
.user-dropdown {
  position: absolute;
  top: 72px;
  right: 28px;
  background: var(--m-bg-2);
  border: 1px solid var(--m-border-strong);
  border-radius: var(--radius-md);
  min-width: 260px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  z-index: 20;
}

.dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--m-border);
  margin-bottom: 8px;
}

.user-badge-big {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--m-brand-soft);
  color: var(--m-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
}

.dropdown-name {
  font-size: 14px;
  font-weight: 600;
}

.dropdown-plan {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.dropdown-sub {
  font-size: 11px;
  color: var(--m-text-soft);
}

.plan-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 1px;
  background: var(--m-brand-soft);
  color: var(--m-brand);
}

.dropdown-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--m-text);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
}

.dropdown-item:hover {
  background: var(--m-brand-softer);
}

.dropdown-item i {
  font-size: 15px;
  color: var(--m-text-soft);
}

.dropdown-divider {
  height: 1px;
  background: var(--m-border);
  margin: 4px 0;
}

.dropdown-danger {
  color: var(--m-red);
}

.dropdown-danger i {
  color: var(--m-red);
}

/* ========== CONTENT ========== */
.content {
  padding: 24px 28px 40px;
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.view { display: none; }
.view.active { display: block; }
/* m-view-in: usado solo por el desplegable "Avanzado" del sidebar (NO por las vistas:
   animar la entrada de vista sacaba a la luz el swap de contenido viejo→nuevo y parecía un glitch). */
@keyframes m-view-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.view-header {
  margin-bottom: 24px;
}

.view-header h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}

.view-subtitle {
  font-size: 13px;
  color: var(--m-text-soft);
}

/* ========== HERO CARDS (home) ========== */
.hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.hero-card {
  background: var(--m-bg-2);
  border: 1px solid var(--m-border);
  border-radius: 14px;
  padding: 18px;
}

.hero-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hero-card-label {
  font-size: 11px;
  color: var(--m-text-soft);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 500;
}

.hero-card-header i {
  font-size: 16px;
  color: var(--m-brand);
}

#weather-icon { color: var(--m-blue); }
#hero-power i { color: var(--m-yellow); }

.hero-card-value {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}

.hero-card-sub {
  font-size: 12px;
  color: var(--m-text-soft);
}

/* ========== SECTION ========== */
.section {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}

.section-header h3 {
  font-size: 15px;
  font-weight: 600;
}

.tab-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--m-bg-2);
  border-radius: var(--radius-sm);
}

.tab-btn {
  padding: 5px 12px;
  background: transparent;
  color: var(--m-text-soft);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.tab-btn.active {
  background: var(--m-brand-soft);
  color: var(--m-brand);
  font-weight: 500;
}

/* ========== METRIC CARDS ========== */
.energy-summary, .status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.metric-card {
  background: var(--m-bg-2);
  border: 1px solid var(--m-border);
  border-radius: 14px;
  padding: 18px;
}

.metric-card-green { border-color: var(--m-brand-border); }
.metric-card-red { border-color: rgba(255, 107, 107, 0.3); }

.metric-label {
  font-size: 11px;
  color: var(--m-text-soft);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
}

.metric-value {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}

.metric-green { color: var(--m-brand); }
.metric-red { color: var(--m-red); }

.metric-sub {
  font-size: 11px;
  color: var(--m-text-soft);
}

/* ========== CARDS ========== */
.card {
  background: var(--m-bg-2);
  border: 1px solid var(--m-border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}

.card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
}

.card-subtitle {
  font-size: 12px;
  color: var(--m-text-soft);
  margin-top: 2px;
}

.chart-card {
  padding: 20px;
}

.chart-tall {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 220px;
  padding: 8px 0 0 0;
}

.chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.chart-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.chart-bar {
  width: 100%;
  max-width: 32px;
  background: var(--m-brand-soft);
  border-radius: 999px 999px 0 0;
  min-height: 2px;
  transition: all 0.3s;
  position: relative;
  cursor: pointer;
}

.chart-bar.current { background: var(--m-brand); }
.chart-bar:hover { opacity: 0.8; }

.chart-bar-value {
  font-size: 9px;
  color: var(--m-text-dim);
  text-align: center;
  padding: 3px 0 1px 0;
  white-space: nowrap;
  overflow: hidden;
  min-height: 16px;
}

.chart-bar-value.has-value { color: var(--m-text-soft); }

.chart-label {
  font-size: 10px;
  color: var(--m-text-dim);
  text-align: center;
  padding: 6px 0 0 0;
  border-top: 1px solid var(--m-border);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.chart-bar:hover::after {
  content: attr(data-value);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--m-bg-3);
  color: var(--m-text);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  margin-bottom: 4px;
  z-index: 10;
  border: 1px solid var(--m-border-strong);
}

/* ========== EMPTY STATE ========== */
.empty-state {
  text-align: center;
  padding: 40px 20px;
}

.empty-state i {
  font-size: 36px;
  color: var(--m-text-dim);
  display: block;
  margin-bottom: 12px;
}

.empty-state h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.empty-state p {
  font-size: 12px;
  color: var(--m-text-soft);
}

/* ========== INFO GRID ========== */
.info-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--m-border);
  font-size: 13px;
}

.info-row:last-child { border-bottom: none; }

.info-label {
  color: var(--m-text-soft);
}

.info-value {
  font-weight: 500;
}

.info-ok {
  color: var(--m-brand);
}

/* ========== SETTINGS ========== */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--m-border);
  gap: 16px;
}

.settings-row:last-child { border-bottom: none; }

.settings-label {
  font-size: 14px;
  font-weight: 500;
}

.settings-sub {
  font-size: 12px;
  color: var(--m-text-soft);
  margin-top: 2px;
}

/* ========== BUTTONS ========== */
.btn-primary {
  background: var(--m-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  transition: background 0.15s;
}

.btn-primary:hover { background: var(--m-brand-dark); }

.btn-secondary {
  background: var(--m-bg-3);
  color: var(--m-text);
  border: 1px solid var(--m-border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
}

.btn-secondary:hover { border-color: var(--m-brand-border); }

/* ===== UNIFIED SIDEBAR (A.1) ===== */
.sidebar-logo { width: auto; height: 40px; object-fit: contain; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; }
.brand-text small { display: none; }
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: 4px; color: var(--m-brand); }
.brand-sub { font-size: 10px; letter-spacing: 6px; color: var(--m-text-dim); text-transform: uppercase; }
.brand-mark { display: none; }

/* ========== APPLE REFINEMENTS ========== */
.card, .room-card, .climate-card, .light-card, .device-row, .security-row,
.alarm-card, .chart-bar, .nav-item, .tab-btn, .toggle, button, select, input,
.sidebar, .topbar, .modal-card, .dropdown-item {
  transition: all var(--transition);
}

.card:hover, .room-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.modal-card {
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
}

.sidebar {
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.btn-primary {
  background: var(--m-brand) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.btn-primary:hover {
  background: var(--m-brand-dark) !important;
  transform: scale(1.02);
}
.btn-primary:active {
  transform: scale(0.98);
}

/* Apple-style toggle */
.toggle {
  width: 51px !important;
  height: 31px !important;
  border-radius: 999px !important;
  background: var(--m-bg-3) !important;
  border: none !important;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.toggle.on {
  background: var(--m-green) !important;
}
.toggle.on::after {
  transform: translateX(20px);
}

/* Smoother scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--m-text-dim); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--m-text-soft); }

/* Input Apple style */
input[type="text"], input[type="password"], input[type="number"], input[type="email"],
select, textarea {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--m-border-strong) !important;
  background: var(--m-bg) !important;
  color: var(--m-text) !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  outline: none !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--m-brand) !important;
  box-shadow: 0 0 0 3px var(--m-brand-soft) !important;
}

/* Nav items Apple feel */
.nav-item {
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
}
.nav-item.active {
  background: var(--m-brand-soft) !important;
  color: var(--m-brand) !important;
}
.nav-item:hover:not(.active) {
  background: var(--m-bg-3) !important;
}

/* ===== TIPOGRAFIA DE MARCA =====
   El mismo bloque que ya llevan el portal y el admin. Hasta el 28-jul la unidad declaraba
   los colores correctos pero NINGUNA de las dos tipografias de marca: los titulares iban
   en la del sistema y las etiquetas no eran el eyebrow monoespaciado. Compartir la paleta
   y no la letra es justo lo que hace que dos pantallas se sigan viendo de dos empresas. */
h1, h2, h3, .card-title, .ai-welcome-title { font-family: var(--ff-display); letter-spacing: -.02em; }

/* Etiquetilla monoespaciada en MAYUSCULAS — el "eyebrow" de la landing. */
.mono, th, .sidebar-label { font-family: var(--ff-mono); font-weight: 500;
  text-transform: uppercase; letter-spacing: .15em; font-variant-numeric: tabular-nums; }

/* La marca del lateral, con los mismos valores que el admin: el nombre hereda el color de
   texto (no va en azul) y el espaciado se mide en em, no en px. */
.brand-name { font-family: var(--ff-display); font-size: 15px; font-weight: 700;
  letter-spacing: .06em; color: var(--m-text); }
.brand-sub { font-family: var(--ff-mono); font-size: 10px; color: var(--m-text-dim);
  letter-spacing: .15em; margin-top: -2px; text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════════════════════
   ACABADO — que esto se vea como merlinautosys.com
   El lenguaje sale de `.bar` de la landing: superficie translucida sobre el
   fondo, blur con saturacion, y una linea de 1px que la separa. Nada de esto
   estaba aqui: la barra era opaca y el lateral no cuadraba con ella.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. El lateral y la barra superior cierran a la MISMA altura ──
   El borde del lateral caia a 76px (20 de padding + 40 de logo + 16) y el de la
   barra a ~85px, porque esta se dimensionaba por su contenido. Se fija la misma
   altura en las dos y las dos lineas se encuentran. */
.sidebar { padding: 0 16px 20px; }
.sidebar-header {
  height: 84px;
  margin: 0 -16px;
  padding: 0 20px;
  box-sizing: border-box;
  padding-bottom: 0;
}
.topbar {
  min-height: 84px;
  padding: 0 28px;
  box-sizing: border-box;
}

/* ── 2. El gloss ──
   Mismo efecto que la barra de la landing: la superficie deja pasar el fondo. */
.topbar {
  background: color-mix(in srgb, var(--m-bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
}
.sidebar {
  background: color-mix(in srgb, var(--m-bg-sidebar) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
}
/* Las tarjetas llevan la sombra de la landing (--sh-1), que es lo que las
   despega del fondo sin dibujarles un borde duro. */
.hero-card, .room-card, .quick-card, .card {
  box-shadow: 0 .5px 1px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.05);
}


/* ── 4. Todas las tarjetas de area, la MISMA altura ──
   El intento anterior daba a cada una su alto natural, y la estancia con algo
   encendido quedaba visiblemente mas alta que la de al lado: la rejilla se veia
   rota. Ahora todas miden lo mismo y lo que distingue a la activa es el color,
   no el tamaño. */
.rooms-grid { align-items: stretch; }
.room-card,
.room-card.quiet {
  min-height: 104px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.room-card.quiet .room-icon-box { width: 38px; height: 38px; }
.room-card.active {
  border-color: var(--m-brand-border);
  background: linear-gradient(180deg, var(--m-brand-softer), var(--m-bg-2));
}

@media (prefers-reduced-motion: reduce) {
  .topbar, .sidebar { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* La fila de indicadores reserva SIEMPRE el alto de una pastilla, este llena o
   vacia. Es lo que hace que la estancia con algo encendido y la que esta en
   reposo midan exactamente lo mismo, sin dejar un hueco mayor del necesario. */
.room-pills { min-height: 34px; }
.room-card, .room-card.quiet { min-height: 116px; }

/* ── Sin barra separadora bajo la marca ──
   Habia un border-bottom en el lateral y otro en la barra superior, y por poco que se
   desviaran uno del otro se veia el escalon. Quitando el del lateral no hay dos lineas
   que cuadrar: la de la barra cruza entera y la marca queda flotando sobre el fondo. */
.sidebar-header { border-bottom: none !important; }

/* ── Gloss que SE VE ──
   El intento anterior mezclaba el color de fondo consigo mismo: sobre #000 un velo negro
   translucido es invisible por definicion. El cristal tiene que ser MAS CLARO que lo que
   hay detras — es la superficie la que se ve, no el fondo. Se usa la superficie de las
   tarjetas con transparencia, que es justo lo que hace la barra de la landing sobre su
   papel claro. */
.topbar {
  background: color-mix(in srgb, var(--m-bg-2) 76%, transparent);
  border-bottom: 1px solid var(--m-border);
}
.sidebar {
  background: color-mix(in srgb, var(--m-bg-2) 46%, transparent);
  border-right: 1px solid var(--m-border);
}
[data-theme="light"] .topbar { background: color-mix(in srgb, #fff 78%, transparent); }
[data-theme="light"] .sidebar { background: color-mix(in srgb, #fff 62%, transparent); }

/* La marca, centrada en los mismos 84px que el saludo de la barra. */
.sidebar-header { display: flex; align-items: center; }
.topbar { display: flex; align-items: center; }

/* Menos aire en las tarjetas de area: la fila reservada era mas alta de lo necesario y
   las estancias en reposo quedaban con un hueco que llamaba mas que su contenido. */
.room-pills { min-height: 28px; }
.room-card, .room-card.quiet { min-height: 96px; gap: 8px; }
/* merlin-ui:end */
/* ── AJUSTES LOCALES del admin sobre el cascarón de la app ── */
.main{padding:0;position:relative}
.main>.section{padding:24px 28px 40px;max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box}
.sec-head{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:20px}
.sec-head h2{display:none} /* el título ya va en la barra superior, como en el dashboard */
.icon-btn svg,.mobile-menu-btn svg{width:18px;height:18px}
.dropdown-item svg{width:16px;height:16px;color:var(--m-text-soft);flex:none}
.dropdown-danger svg{color:var(--m-red)}
.btn.btn-primary:hover{color:#fff}
/* ── MARCA: va al final para que mande sobre las reglas de arriba ── */
/* Titulares en Archivo, como la landing. El cuerpo se queda en la tipografia del
   sistema: es una interfaz, no una portada. */
/* Etiquetilla monoespaciada en mayusculas — el "eyebrow" de la landing. */

/* ===== móvil: copia literal de merlinautosys-web/portal/mobile.css (sidebar plegado, tablas) ===== */
/* MERLIN Mobile — Universal responsive for Dashboard, Wizard, Admin Portal, Client Portal */

/* ═══ TABLET (max 900px) ═══ */
@media (max-width: 900px) {
  /* Dashboard/Wizard */
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -260px; width: 260px; transition: left 0.25s; z-index: 100; box-shadow: 0 0 32px rgba(0,0,0,0.5); }
  .sidebar.open { left: 0; }
  .mobile-menu-btn { display: flex; }
  .topbar { padding: 16px 16px 16px 64px; }
  .content { padding: 20px 16px 32px; }
  .hero-cards, .energy-summary, .status-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .user-dropdown { right: 16px; top: 64px; }
  .modal-content, .modal-card { width: 95vw; max-width: 95vw; max-height: 90vh; margin: 5vh auto; }
  .climate-list, .lighting-list, .security-list, .media-list { grid-template-columns: 1fr; }
  .history-controls { flex-direction: column; gap: 8px; }
  .history-search-wrap { width: 100%; }

  /* Client Portal */
  .main-content { padding: 16px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .plans-grid { grid-template-columns: 1fr; gap: 12px; }
  .nav-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }

  /* Admin */
  .main { margin-left: 0 !important; padding: 16px; }
}

/* ═══ PHONE (max 600px) ═══ */
@media (max-width: 600px) {
  body { font-size: 14px; }

  /* ── Dashboard/Wizard topbar ── */
  .topbar { padding: 12px 12px 12px 12px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
  .topbar-greeting { min-width: 0; flex: 1; overflow: hidden; margin-left: 48px; }
  .topbar-greeting h1, .topbar h1 { font-size: 17px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-date { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions { gap: 4px; flex-shrink: 0; }
  .icon-btn { width: 34px; height: 34px; font-size: 16px; }
  .user-badge { width: 32px; height: 32px; font-size: 13px; }
  .mobile-menu-btn { top: 12px; left: 12px; width: 36px; height: 36px; z-index: 50; position: fixed; }
  .content { padding: 16px 12px 80px; }
  .view-header h2 { font-size: 20px; }
  .view-subtitle { font-size: 12px; }
  /* History search: keep icon inside, no overlap */
  .history-search-wrap { position: relative !important; }
  .history-search-wrap i.ti-search { position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: none !important; opacity: 0.5 !important; z-index: 2; font-size: 16px; }
  .history-search-wrap input { padding-left: 40px !important; }

  /* ── Hero cards ── */
  .hero-cards { grid-template-columns: 1fr; gap: 8px; }
  .hero-card { padding: 14px 16px; }
  .hero-card-value { font-size: 28px; }
  .hero-card-label { font-size: 10px; }

  /* ── Rooms ── */
  .rooms-grid, .cards-grid { grid-template-columns: 1fr; gap: 8px; }
  .room-card { padding: 14px; }
  .room-name { font-size: 14px; }
  .room-pills { gap: 4px; }
  .room-pill { font-size: 11px; padding: 3px 8px; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tab-switch { width: 100%; }
  .tab-btn { flex: 1; font-size: 12px; padding: 6px 8px; }

  /* ── Energy ── */
  .energy-summary { grid-template-columns: 1fr; gap: 8px; }
  .metric-card, .stat-card { padding: 14px; }
  .metric-value, .stat-value { font-size: 24px; }
  .metric-label, .stat-label { font-size: 10px; }
  .energy-period-tabs { gap: 0; }
  .energy-tab { font-size: 12px; padding: 8px 12px; }
  .chart-tall, .chart-card { min-height: 200px; }
  .chart-label { font-size: 8px; }
  .chart-bar-val { font-size: 8px; }

  /* ── Climate ── */
  .climate-card { padding: 14px; }
  .climate-card-title { font-size: 14px; }
  .climate-target-value { font-size: 28px; }
  .climate-target-btn { width: 36px; height: 36px; font-size: 18px; }
  .climate-modes { gap: 4px; flex-wrap: wrap; }
  .climate-mode-btn { padding: 8px 10px; font-size: 11px; min-width: 56px; }

  /* ── Lighting ── */
  .light-card { padding: 14px; }
  .light-card-title { font-size: 14px; }
  .brightness-value { font-size: 12px; min-width: 36px; }

  /* ── Security ── */
  .security-row { padding: 10px 12px; }
  .security-row-name { font-size: 13px; }
  .security-row-icon { width: 32px; height: 32px; font-size: 15px; }
  .alarm-card { padding: 14px; }
  .alarm-modes { flex-direction: column; gap: 6px; }

  /* ── AI Chat ── */
  .ai-welcome-title { font-size: 18px; }
  .ai-welcome-sub { font-size: 12px; padding: 0 8px; }
  .ai-suggestions { flex-wrap: wrap; gap: 6px; justify-content: center; }
  .ai-suggestion { font-size: 12px; padding: 6px 12px; }
  .ai-input-bar { padding: 8px 12px; gap: 6px; }
  .ai-input-bar input { font-size: 14px; padding: 8px 12px; }
  .ai-msg-bubble { font-size: 13px; max-width: 85%; }
  .ai-token-bar-wrap { font-size: 11px; padding: 6px 12px; }

  /* ── Status ── */
  .status-grid { grid-template-columns: 1fr; gap: 8px; }
  .info-row { padding: 10px 0; }
  .info-label, .info-value { font-size: 12px; }

  /* ── Account ── */
  .plan-card { padding: 16px; }
  .plan-card-name { font-size: 22px; }
  .plan-card-actions { flex-direction: column; gap: 8px; }
  .plan-card-actions .btn-primary, .plan-card-actions .btn-secondary { width: 100%; text-align: center; justify-content: center; }
  .benefits-list li { font-size: 13px; }

  /* ── Settings ── */
  .settings-row { flex-direction: column; gap: 10px; align-items: flex-start; }

  /* ── History ── */
  .history-entity-list { max-height: 200px; }
  .history-entity-btn { font-size: 12px; padding: 6px 10px; }

  /* ── Modals — bottom sheet style ── */
  .modal-content, .modal-card { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 16px 16px 0 0; margin: auto 0 0; position: fixed; bottom: 0; left: 0; right: 0; }
  .modal-body { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-small { width: 100vw; max-width: 100vw; }
  .icon-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .icon-pick { width: 44px; height: 44px; font-size: 18px; }

  /* ── Device rows ── */
  .device-row { padding: 10px 12px; gap: 8px; }
  .device-icon { width: 32px; height: 32px; font-size: 14px; }
  .device-name { font-size: 13px; }
  .device-state { font-size: 11px; }
  .cover-controls { gap: 4px; }
  .cover-btn { width: 32px; height: 32px; font-size: 14px; }
  .toggle { min-width: 48px; min-height: 28px; }
  .user-dropdown { left: 12px; right: 12px; width: auto; max-width: none; }
  .status-bar { font-size: 11px; padding: 8px 12px; }
  .card { padding: 14px; border-radius: 12px; }
  .card-title { font-size: 14px; }
  .card-subtitle { font-size: 11px; }

  /* ── Wizard specific ── */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 600px; }
  .filter-bar { width: 100%; }
  .filter-bar select { width: 100%; }
  .view-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .view-header .btn-primary { width: 100%; justify-content: center; }
  .config-card { margin-bottom: 12px; }
  .config-card-header { flex-direction: column; gap: 8px; }
  .config-card-body { padding: 14px; }
  .form-row { flex-direction: column; gap: 8px; }
  .form-group input, .form-group select { font-size: 14px; }

  /* Wizard automations */
  .preset-grid { grid-template-columns: 1fr; }
  .preset-card { padding: 14px; }
  .auto-builder { padding: 14px; }
  .preset-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .preset-tab { white-space: nowrap; font-size: 12px; }
  .block-card { padding: 10px; }

  /* Wizard integrations */
  .integration-card { flex-direction: column; gap: 10px; }
  .int-actions { justify-content: flex-start; }

  /* Wizard logs */
  .logs-filters { flex-direction: column; gap: 8px; }
  .logs-filters select { width: 100%; }
  .log-entry { gap: 8px; }
  .log-time { font-size: 10px; }
  .system-log-wrap { font-size: 11px; }

  /* ── Client Portal ── */
  .topbar { padding: 0 12px; height: 48px; }
  .topbar-left img { width: 24px; height: 24px; }
  .topbar-left h2 { font-size: 14px; }
  .topbar-right { gap: 8px; }
  .topbar-user { font-size: 11px; display: none; }
  .btn-logout { font-size: 11px; padding: 5px 10px; }
  .main-content { padding: 12px; }
  .nav-tabs { gap: 0; overflow-x: auto; }
  .nav-tab { font-size: 12px; padding: 10px 12px; white-space: nowrap; }
  .stats-row { grid-template-columns: 1fr; gap: 8px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 24px; }
  .device-card { padding: 16px; }
  .device-info { grid-template-columns: 1fr; gap: 8px; }
  .device-info-item { padding: 6px 0; }
  .plans-grid { grid-template-columns: 1fr; gap: 12px; }
  .plan-card { padding: 20px; }
  .plan-price { font-size: 24px; }
  .plan-features { font-size: 12px; }
  .profile-form { gap: 10px; }
  .profile-form input { font-size: 14px; }
  .profile-actions { flex-direction: column; gap: 8px; }
  .usage-bar-header { font-size: 11px; }
  .activate-input-row { flex-direction: column; gap: 8px; }
  .activate-input-row input { width: 100%; }
  .activate-input-row button { width: 100%; }

  /* Client Portal auth */
  .auth-container { padding: 12px; }
  .auth-box { padding: 20px; max-width: 100%; }
  .auth-logo img { width: 48px; height: 48px; }
  .auth-logo h1 { font-size: 1.3rem; }
  .auth-tabs { gap: 4px; }

  /* ── Admin Portal ── */
  .sidebar { width: 220px; left: -230px; }
  .sidebar.open { left: 0; }
  .main { margin-left: 0 !important; padding: 16px 12px; }
  .section-title { font-size: 18px; }
  .stats { grid-template-columns: 1fr; gap: 8px; }
  .stat-card .label { font-size: 10px; }
  table { font-size: 12px; }
  table th, table td { padding: 8px 6px; }
  .modal-overlay .modal-card { width: 95vw; }
  .modal-card { padding: 16px; }

  /* ── SCADA móvil ── */
  /* Editor del Wizard */
  section[data-view="scada"] > div { padding: 12px !important; }
  section[data-view="scada"] [id="se-props"] { display: none !important; }
  /* Toolbar superior - apila en columna */
  section[data-view="scada"] > div > div:first-child { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  section[data-view="scada"] > div > div:first-child > div:first-child { width: 100%; }
  section[data-view="scada"] input#se-name { width: 100% !important; box-sizing: border-box; font-size: 13px !important; }
  /* Canvas (editor) */
  section[data-view="scada"] #se-canvas { min-height: 320px !important; max-height: 70vh; max-width: 100%; }
  /* Viewer del Dashboard */
  section[data-view="scada"] #sc-canvas { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* Botones toolbar más compactos */
  section[data-view="scada"] button { padding: 6px 10px !important; font-size: 12px !important; }
  section[data-view="scada"] button i { font-size: 13px !important; }
}

/* ═══ VERY SMALL PHONES (max 380px) ═══ */
@media (max-width: 380px) {
  .content { padding: 12px 8px 80px; }
  .hero-card-value { font-size: 24px; }
  .room-card { padding: 12px; }
  .topbar-greeting h1 { font-size: 15px; }
  .climate-target-value { font-size: 24px; }
  .ai-suggestions { gap: 4px; }
  .ai-suggestion { font-size: 11px; padding: 5px 10px; }
  .icon-grid { grid-template-columns: repeat(4, 1fr); }
  .auth-box { padding: 16px; }
  .plan-card { padding: 14px; }
}

/* ═══ LANDSCAPE PHONE ═══ */
@media (max-height: 500px) and (orientation: landscape) {
  .content { padding: 12px 16px 24px; }
  .hero-cards { grid-template-columns: repeat(3, 1fr); }
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
  .modal-content, .modal-card { max-height: 95vh; }
  .modal-body { max-height: 50vh; }
}

/* ═══ PWA / STANDALONE ═══ */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
  .sidebar { padding-top: env(safe-area-inset-top); }
  .topbar { padding-top: calc(12px + env(safe-area-inset-top)); }
  .status-bar { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .ai-input-bar { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* ═══ TOUCH DEVICES ═══ */
@media (hover: none) and (pointer: coarse) {
  .nav-item { padding: 12px 14px; min-height: 44px; }
  .toggle { min-width: 51px; min-height: 31px; }
  .climate-target-btn { min-width: 44px; min-height: 44px; }
  .cover-btn { min-width: 40px; min-height: 40px; }
  .icon-pick { min-width: 44px; min-height: 44px; }
  .room-card:hover, .nav-item:hover, .card:hover { transform: none; }
  .brightness-slider::-webkit-slider-thumb { width: 28px; height: 28px; }
  .modal-body, .history-entity-list, .ai-messages { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
  /* Client portal */
  .nav-tab { min-height: 44px; }
  .btn-primary, .btn-secondary, .btn-save { min-height: 44px; }
  .plan-btn { min-height: 44px; }
}