/* File: src/MeshHealth.Dashboard/asset/css/globals.css */
/* Layout maestro — DEBE cargarse ÚLTIMO (después de styles, themes, responsive).
 * Orden en HTML:
 *   1. styles-enterprise.css  2. styles.css  3. themes.css
 *   4. responsive.css         5. globals.css (este archivo)
 */
:root {
  /* Escala global de densidad: cuadros ~30 % más compactos */
  --mesh-density: 0.7;
  /* Topbar: altura legible independiente de la densidad del contenido */
  --mesh-topbar-density: 1;
  --mesh-topbar-control-h: 2.5rem;
  --mesh-topbar-pad-y: 0.625rem;
  --mesh-topbar-height: calc(var(--mesh-topbar-control-h) + var(--mesh-topbar-pad-y) * 2);

  /* max-w-7xl mx-auto px-6 */
  --mesh-layout-max-width: 80rem;
  --mesh-layout-pad-x: calc(1.5rem * var(--mesh-density));
  --mesh-layout-pad-top: calc(0.75rem * var(--mesh-density));
  --mesh-view-gap: calc(1rem * var(--mesh-density));
  --mesh-gap-grid: calc(0.75rem * var(--mesh-density));
  --mesh-gap-grid-lg: calc(1rem * var(--mesh-density));
  --mesh-padding-panel-x: calc(1rem * var(--mesh-density));
  --mesh-padding-panel-y: calc(0.75rem * var(--mesh-density));
  /* Espacio entre línea divisoria y contenido debajo */
  --mesh-divider-gap: calc(0.5rem * var(--mesh-density));

  --mesh-page-gutter: var(--mesh-layout-pad-x);
  --mesh-page-gutter-top: var(--mesh-layout-pad-top);
  --mesh-topbar-pad-x: var(--mesh-layout-pad-x);
  --mesh-content-inset-x: var(--mesh-layout-pad-x);
  /* Cuerpo más angosto que la topbar — como el diagrama de layout */
  --mesh-body-narrow-x: calc(0.75rem * var(--mesh-density));

  /* ── Sistema de bordes global (única fuente de verdad) ─────────────── */
  --mesh-border-width: 1px;
  --mesh-border-color: var(--mesh-border-strong, #334155);
  --mesh-border-surface: var(--mesh-border-strong, #334155);
  --mesh-radius: calc(0.75rem * var(--mesh-density));
  --mesh-radius-sm: calc(0.5rem * var(--mesh-density));
  --mesh-radius-lg: calc(0.875rem * var(--mesh-density));
  --mesh-radius-pill: 9999px;
  --mesh-focus-ring: 0 0 0 2px color-mix(in srgb, var(--mesh-accent, #14b8a6) 22%, transparent);
}

.enterprise-main > .mesh-layout {
  flex: 1 1 auto;
  min-height: 0;
}

/* ── Contenedor maestro (topbar + contenido alineados) ─────────────────── */
.mesh-layout {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--mesh-layout-max-width);
  margin-inline: auto;
  padding-inline: var(--mesh-layout-pad-x);
  padding-top: var(--mesh-layout-pad-top);
  gap: var(--mesh-view-gap, 1rem);
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.mesh-layout > .enterprise-topbar,
.mesh-layout > .enterprise-content {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  box-sizing: border-box;
}

.mesh-layout > .enterprise-topbar {
  border: 1px solid var(--mesh-border, #1f2937);
  border-radius: var(--mesh-radius, 0.75rem);
  background: var(--mesh-topbar-bg, var(--mesh-bg-sidebar, #111827));
  padding-inline: var(--mesh-padding-panel-x);
  overflow: visible;
  color: var(--mesh-text, #f1f5f9);
  transition: background 0.3s ease, border-color 0.25s ease, color 0.2s ease;
}

/* Body: escalón visible respecto a la topbar (más angosto) */
.mesh-layout > .enterprise-content {
  padding: 0;
  padding-inline: var(--mesh-body-narrow-x);
  padding-bottom: calc(var(--mesh-layout-pad-x) + var(--mesh-safe-bottom, 0px));
  box-sizing: border-box;
}

/* Mismo ancho y sin márgenes laterales extra en cada vista */
.enterprise-content > [data-view]:not(.hidden) > *,
.enterprise-content.device-page > .device-section-tabs,
.enterprise-content.device-page > .device-section-panel {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  box-sizing: border-box;
}

/* Cuerpo de paneles: inset en los 4 lados (nunca pegado al borde) */
.panel > .device-cards-grid,
.panel .device-cards-grid,
.panel > #usuarios-cards-grid,
.panel #usuarios-cards-grid,
.panel .sec-usuarios-pane > #usuarios-cards-grid,
.panel .sec-usuarios-pane > .sec-form,
.panel > .fleet-groups-list,
.panel > .fleet-groups-empty,
.panel > .fleet-group-create,
.panel > .fleet-devices-toolbar,
.panel > .ml-learning-grid,
.panel > .ml-learning-columns,
.panel > .repair-cards-grid,
.panel > .repair-log-panel,
.panel > .sec-form,
.panel > .sec-form--create-user,
.panel > .sec-token-result,
.panel > .divide-y,
.panel > .h-56,
.panel > .h-52,
.panel > .mesh-grid-2,
.panel > .supervision-health-body,
.panel > .perf-grid,
.panel > .mesh-stack-table-wrap,
.panel > .mesh-table-scroll,
.panel .mesh-stack-table-wrap,
.panel .mesh-table-scroll {
  padding: var(--mesh-padding-panel-y) var(--mesh-padding-panel-x);
  box-sizing: border-box;
}

.panel > .fleet-devices-toolbar,
.panel .fleet-devices-toolbar--panel {
  padding-bottom: 0.625rem;
}

.panel > .ml-learning-grid {
  padding-top: 0;
}

.panel > .ml-learning-columns {
  padding-bottom: var(--mesh-padding-panel-y);
}

/* ── Separación: contenido bajo línea superior (tabs, filtros, cabecera) ── */
.sec-usuarios-panel > .sec-usuarios-pane {
  padding-top: var(--mesh-divider-gap);
}

/* device-page: el gap del layout ya separa tabs del panel */
.panel > .panel-header + .device-cards-grid,
.panel > .panel-header + #usuarios-cards-grid,
.panel > .panel-header + .mesh-stack-table-wrap,
.panel > .panel-header + .mesh-table-scroll,
.panel > .panel-header + .divide-y,
.panel > .panel-header + .sec-form,
.panel > .panel-header + .fleet-devices-toolbar,
.panel > .panel-header + .ml-learning-grid,
.panel > .panel-header + .repair-cards-grid,
.panel > .panel-header + .fleet-groups-list,
.panel > .panel-header + .fleet-group-create,
.panel > .sec-inventario-filters + .mesh-stack-table-wrap,
.panel > .sec-inventario-filters + .sec-inventario-table-wrap,
.panel > .fleet-devices-toolbar--panel + .device-cards-grid,
.panel .sec-inventario-filters + .mesh-stack-table-wrap {
  padding-top: calc(var(--mesh-padding-panel-y) + var(--mesh-divider-gap));
}

.panel .sec-usuarios-pane > .panel-header + #usuarios-cards-grid {
  padding-top: calc(var(--mesh-padding-panel-y) + var(--mesh-divider-gap));
}

.panel > .panel-header + .device-predictive-list {
  padding-top: calc(var(--mesh-padding-panel-y) + var(--mesh-divider-gap));
}

/* Vista detalle dispositivo: mismo ritmo vertical que el resto de menús */
.enterprise-content.device-page {
  display: flex !important;
  flex-direction: column;
  gap: var(--mesh-view-gap);
  align-items: stretch;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Stack vertical uniforme en cada vista del dashboard */
.enterprise-content > [data-view]:not(.hidden) {
  display: flex !important;
  flex-direction: column;
  gap: var(--mesh-view-gap);
  align-items: stretch;
  align-self: stretch;
  justify-self: stretch;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.enterprise-content > [data-view]:not(.hidden) > .mesh-grid-stats,
.enterprise-content > [data-view]:not(.hidden) > .mesh-grid-2,
.enterprise-content > [data-view]:not(.hidden) > .mesh-grid-3,
.enterprise-content > [data-view]:not(.hidden) > .panel,
.enterprise-content > [data-view]:not(.hidden) > section.panel,
.enterprise-content > [data-view]:not(.hidden) > .sec-tokens-grid,
.enterprise-content > [data-view]:not(.hidden) > .sec-usuarios-admin-hint,
.enterprise-content > [data-view]:not(.hidden) > .sec-usuarios-panel,
.enterprise-content > [data-view]:not(.hidden) > .fleet-devices-panel,
.enterprise-content > [data-view]:not(.hidden) > .fleet-repair-panel,
.enterprise-content > [data-view]:not(.hidden) > .sec-inventario-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Paneles anidados (rejillas, pestañas): mismo ancho en todos los menús */
.enterprise-content > [data-view]:not(.hidden) .panel,
.enterprise-content > [data-view]:not(.hidden) section.panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.enterprise-content > [data-view]:not(.hidden) .mesh-grid-2,
.enterprise-content > [data-view]:not(.hidden) .mesh-grid-3,
.enterprise-content > [data-view]:not(.hidden) .device-cards-grid,
.enterprise-content > [data-view]:not(.hidden) .repair-cards-grid,
.enterprise-content > [data-view]:not(.hidden) .ml-learning-grid,
.enterprise-content > [data-view]:not(.hidden) .ml-learning-columns,
.enterprise-content > [data-view]:not(.hidden) .fleet-groups-list,
.enterprise-content > [data-view]:not(.hidden) .mesh-stack-table-wrap,
.enterprise-content > [data-view]:not(.hidden) .sec-inventario-table-wrap,
.enterprise-content > [data-view]:not(.hidden) .mesh-table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.enterprise-content > [data-view]:not(.hidden) .mesh-stack-table-wrap,
.enterprise-content > [data-view]:not(.hidden) .sec-inventario-table-wrap,
.enterprise-content > [data-view]:not(.hidden) .mesh-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Rejillas de contenido: mismo gap en todas las vistas */
.mesh-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mesh-gap-grid-lg);
  width: 100%;
  min-width: 0;
  margin: 0;
}

.mesh-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mesh-gap-grid-lg);
  width: 100%;
  min-width: 0;
  margin: 0;
}

@media (min-width: 1024px) {
  .mesh-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mesh-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Tarjetas KPI: rejilla horizontal compacta (Resumen, Usuarios, Inventario, Tokens) ─ */
.mesh-grid-stats,
.enterprise-content > [data-view]:not(.hidden) > .mesh-grid-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--mesh-gap-grid, 1rem);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .mesh-grid-stats,
  .enterprise-content > [data-view]:not(.hidden) > .mesh-grid-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.mesh-grid-stats > .stat-card {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.0625rem;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0.5rem 0.75rem !important;
}

.mesh-grid-stats .stat-value {
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 700;
  line-height: 1.2 !important;
}

.enterprise-content .stat-card {
  padding: 0.5rem 0.75rem;
}

.enterprise-content .stat-value {
  font-size: 1rem;
  line-height: 1.2;
}

/* ── Barra de herramientas: una fila alineada ──────────────────────────── */
.fleet-devices-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .fleet-devices-toolbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--mesh-topbar-control-h, 2.5rem);
  }
}

.fleet-devices-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  min-width: 0;
  flex: 0 1 auto;
}

.fleet-devices-toolbar-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .fleet-devices-toolbar-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
}

.fleet-devices-toolbar-actions .fleet-groups-filter-chips {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

/* ── Búsqueda en toolbar / panel (altura y borde unificados) ───────────── */
.mesh-toolbar-search,
.inventario-search-input {
  width: 100%;
  min-width: 0;
  min-height: var(--mesh-topbar-control-h, 2.5rem);
  height: var(--mesh-topbar-control-h, 2.5rem);
  padding: 0 0.875rem;
  border-radius: var(--mesh-radius, 0.5rem);
  border: 1px solid var(--mesh-border, #334155);
  background: var(--mesh-bg-input, #0f172a);
  color: var(--mesh-text, #f1f5f9);
  font-size: 0.8125rem;
  box-sizing: border-box;
}

.mesh-toolbar-search::placeholder,
.inventario-search-input::placeholder {
  color: var(--mesh-text-dim, #64748b);
}

.mesh-toolbar-search:focus,
.inventario-search-input:focus {
  outline: none;
  border-color: var(--mesh-accent, #14b8a6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mesh-accent, #14b8a6) 22%, transparent);
}

@media (min-width: 768px) {
  .mesh-toolbar-search,
  .inventario-search-input {
    width: min(16rem, 28vw);
    flex-shrink: 0;
  }

  .fleet-devices-toolbar-actions .mesh-toolbar-search,
  .fleet-devices-toolbar-actions .inventario-search-input {
    width: min(14rem, 22vw);
  }

  .panel-header.fleet-groups-header .mesh-toolbar-search,
  .panel-header.fleet-groups-header .inventario-search-input {
    width: min(16rem, 24vw);
    margin-left: auto;
  }
}

/* ── Cabeceras de panel con acciones alineadas ─────────────────────────── */
.panel-header.fleet-groups-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.panel-header.fleet-groups-header > div:first-child {
  flex: 1 1 12rem;
  min-width: 0;
}

/* ── Formularios: misma grilla y espaciado vertical ────────────────────── */
.fleet-group-create {
  display: flex;
  flex-direction: column;
  gap: var(--mesh-view-gap);
}

.fleet-group-create-grid {
  gap: var(--mesh-gap-grid);
}

.fleet-group-create-actions {
  margin-top: 0;
  gap: 0.75rem;
}

.enterprise-content > [data-view]:not(.hidden) .fleet-group-create .sec-field--scopes {
  margin-top: 0;
}

/* Paneles sin margen extra (el gap del layout maestro separa bloques) */
.fleet-groups-panel {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  :root {
    --mesh-layout-pad-x: 1rem;
    --mesh-page-gutter: 1rem;
    --mesh-body-narrow-x: 0.5rem;
  }

  .fleet-devices-toolbar-actions .mesh-toolbar-search,
  .fleet-devices-toolbar-actions .inventario-search-input,
  .panel-header.fleet-groups-header .mesh-toolbar-search,
  .panel-header.fleet-groups-header .inventario-search-input {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SISTEMA DE BORDES GLOBAL — todos los componentes heredan estas reglas
   ══════════════════════════════════════════════════════════════════════════ */

/* Evita artefactos en esquinas (línea extra) con borde + sombra */
.panel,
.stat-card,
.ml-stat-card,
.device-card,
.device-hero-card,
.fleet-group-card,
.login-card,
.info-card,
.mesh-layout > .enterprise-topbar {
  background-clip: padding-box;
}
.stat-card,
.device-card,
.ml-stat-card,
.perf-card,
.sec-inventario-stat,
.mesh-user-card,
.sec-usuarios-admin-hint,
.mesh-layout > .enterprise-topbar,
.device-hero-card,
.device-summary-stack,
.fleet-group-card,
.equipment-control-card,
.repair-log-panel,
.sec-token-result,
.sec-token-value,
.sec-scope-group-block,
.login-card,
.info-card,
.storage-health-card,
.repair-card,
.device-spec-card,
.mc-panel,
.tm-sidebar,
.tm-content-panel {
  border-width: var(--mesh-border-width);
  border-style: solid;
  border-color: var(--mesh-border-surface);
  border-radius: var(--mesh-radius);
}

/* Bloques apilados sin esquinas internas (solo paneles anidados) */
.panel .panel {
  border-radius: 0;
}

.device-summary-stack {
  overflow: visible;
}

/* Menú de usuario (topbar): el desplegable no debe recortarse ni tratarse como input */
.enterprise-topbar,
.topbar-actions,
.topbar-user-menu,
.topbar-theme-menu,
.topbar-theme-group,
.mesh-layout > .enterprise-topbar {
  overflow: visible !important;
}

.topbar-user-menu {
  position: relative;
  z-index: 40;
}

.topbar-theme-menu {
  position: relative;
  z-index: 30;
  overflow: visible !important;
}

.topbar-user-dropdown {
  position: absolute;
  z-index: 200;
  border-width: var(--mesh-border-width, 1px);
  border-style: solid;
  border-color: var(--mesh-border);
  border-radius: var(--mesh-radius);
  box-sizing: border-box;
  background: var(--mesh-bg-panel);
  color: var(--mesh-text);
}

.topbar-user-dropdown-item {
  border: none;
  border-radius: var(--mesh-radius-sm);
}

/* Controles: botones, inputs, selectores */
.sec-btn-ghost,
.topbar-action,
.topbar-user-btn,
.sidebar-toggle,
.theme-select,
.theme-select--topbar,
.fleet-group-btn,
.fleet-group-field input[type="text"],
.fleet-group-field input[type="email"],
.fleet-group-field input[type="password"],
.fleet-group-field input[type="color"],
.fleet-group-field .sec-select,
.sec-field input,
.sec-field select,
.sec-select,
.mesh-toolbar-search,
.inventario-search-input,
.fleet-repair-select,
.device-group-select,
.device-rename-btn,
.device-delete-btn,
.login-field input,
.fleet-group-field select,
.sec-scope-check,
.device-section-tab {
  border-width: var(--mesh-border-width);
  border-style: solid;
  border-color: var(--mesh-border-color);
  border-radius: var(--mesh-radius);
}

.sec-btn-primary,
.sec-btn-link,
.nav-item,
.sidebar-logout,
.device-section-tab.active {
  border-radius: var(--mesh-radius);
}

.sec-btn-primary {
  border: none;
}

/* Píldoras, badges y chips */
.badge,
.fleet-group-chip,
.sec-status-pill,
.sec-role-pill,
.sec-scope-pill,
.ml-learning-badge,
.predictive-count-badge,
.device-online-badge,
.device-group-badge,
.ws-status-pill,
.live-monitor-badge,
.health-bar,
.health-bar-fill,
.perf-bar,
.sec-inventario-group-pill {
  border-radius: var(--mesh-radius-pill);
}

/* Elementos circulares (gauges, donuts) */
.health-ring,
.health-donut,
.device-hero-gauge {
  border-radius: 50%;
}

/* Separadores internos de paneles */
.panel-header {
  border-bottom-width: var(--mesh-border-width);
  border-bottom-style: solid;
  border-bottom-color: var(--mesh-border-surface);
}

.mesh-stack-table thead tr,
.sec-inventario-thead-row {
  border-bottom-width: var(--mesh-border-width);
  border-bottom-style: solid;
  border-bottom-color: var(--mesh-border-surface);
}

/* Focus visible unificado */
.mesh-app button:focus-visible,
.mesh-app input:focus-visible,
.mesh-app select:focus-visible,
.mesh-app textarea:focus-visible {
  outline: none;
  border-color: var(--mesh-accent, #14b8a6);
  box-shadow: var(--mesh-focus-ring);
}

/* Scrollbar */
.mesh-app ::-webkit-scrollbar-thumb {
  border-radius: var(--mesh-radius);
}

/* ── Densidad compacta: paneles y tarjetas ~30 % más pequeños en todos los menús ── */
.mesh-grid-stats .stat-label,
.enterprise-content .stat-label {
  font-size: calc(0.6875rem * var(--mesh-density, 0.7));
  line-height: 1.2;
}

.mesh-grid-stats .stat-value,
.enterprise-content .stat-value {
  font-size: calc(1.125rem * var(--mesh-density, 0.7));
}

.stat-card {
  padding: var(--mesh-padding-panel-y) var(--mesh-padding-panel-x);
}

.panel-head {
  gap: calc(0.625rem * var(--mesh-density, 0.7));
}

.panel-title-icon-wrap {
  width: calc(2.125rem * var(--mesh-density, 0.7));
  height: calc(2.125rem * var(--mesh-density, 0.7));
  border-radius: calc(0.5625rem * var(--mesh-density, 0.7));
}

.panel-head-text .panel-title {
  font-size: calc(0.9375rem * var(--mesh-density, 0.7));
}

.panel-head-text .panel-subtitle {
  font-size: calc(0.75rem * var(--mesh-density, 0.7));
  margin-top: calc(0.125rem * var(--mesh-density, 0.7));
  line-height: 1.35;
}

.device-card {
  padding: calc(0.875rem * var(--mesh-density, 0.7)) calc(1rem * var(--mesh-density, 0.7)) calc(0.75rem * var(--mesh-density, 0.7));
}

.device-card-name {
  font-size: calc(0.9375rem * var(--mesh-density, 0.7));
}

.device-card-user {
  margin-bottom: calc(0.5rem * var(--mesh-density, 0.7));
  font-size: calc(0.75rem * var(--mesh-density, 0.7));
}

.device-card-health-row {
  margin-bottom: calc(0.625rem * var(--mesh-density, 0.7));
}

.device-metric-value {
  font-size: calc(1.125rem * var(--mesh-density, 0.7));
}

.device-cards-grid {
  gap: calc(0.75rem * var(--mesh-density, 0.7));
}

.device-cards-empty {
  padding: calc(1.5rem * var(--mesh-density, 0.7)) calc(1rem * var(--mesh-density, 0.7));
}

.fleet-group-card {
  padding: calc(0.75rem * var(--mesh-density, 0.7));
}

.repair-card {
  padding: calc(0.75rem * var(--mesh-density, 0.7)) calc(0.875rem * var(--mesh-density, 0.7));
}

.repair-cards-grid {
  gap: calc(0.625rem * var(--mesh-density, 0.7));
}

.ml-stat-card {
  padding: calc(0.625rem * var(--mesh-density, 0.7));
}

.ml-stat-card strong {
  font-size: calc(1.0625rem * var(--mesh-density, 0.7));
}

.health-donut--sm {
  width: max(5.75rem, calc(6.25rem * var(--mesh-density, 0.7) / 0.7 * 0.92));
  height: max(5.75rem, calc(6.25rem * var(--mesh-density, 0.7) / 0.7 * 0.92));
}

.health-donut--lg {
  width: max(7rem, calc(7.5rem * var(--mesh-density, 0.7) / 0.7 * 0.94));
  height: max(7rem, calc(7.5rem * var(--mesh-density, 0.7) / 0.7 * 0.94));
}

.supervision-health-body {
  gap: calc(1rem * var(--mesh-density, 0.7));
  padding-top: calc(0.75rem * var(--mesh-density, 0.7));
}

.supervision-grade-lg {
  font-size: calc(1.5rem * var(--mesh-density, 0.7));
}

.perf-grid {
  gap: calc(0.75rem * var(--mesh-density, 0.7));
  padding: calc(0.75rem * var(--mesh-density, 0.7)) calc(1rem * var(--mesh-density, 0.7)) calc(1rem * var(--mesh-density, 0.7));
}

.perf-card {
  padding: calc(0.625rem * var(--mesh-density, 0.7));
}

.device-hero-card {
  gap: calc(1rem * var(--mesh-density, 0.7));
  padding: calc(0.875rem * var(--mesh-density, 0.7)) calc(1.125rem * var(--mesh-density, 0.7));
}

.device-hero-gauge {
  width: max(6.5rem, calc(7.5rem * var(--mesh-density, 0.7) / 0.7 * 0.92));
  height: max(6.5rem, calc(7.5rem * var(--mesh-density, 0.7) / 0.7 * 0.92));
}

.health-gauge {
  width: calc(6.5rem * var(--mesh-density, 0.7));
  height: calc(6.5rem * var(--mesh-density, 0.7));
}

.health-gauge--lg {
  width: calc(7rem * var(--mesh-density, 0.7));
  height: calc(7rem * var(--mesh-density, 0.7));
}

.health-gauge--sm {
  width: calc(4.75rem * var(--mesh-density, 0.7));
  height: calc(4.75rem * var(--mesh-density, 0.7));
}

.storage-empty-state {
  min-height: calc(7rem * var(--mesh-density, 0.7));
  padding: calc(0.875rem * var(--mesh-density, 0.7)) calc(0.75rem * var(--mesh-density, 0.7)) calc(0.375rem * var(--mesh-density, 0.7));
}

.device-predictive-item,
.device-incident-item,
.incident-item {
  padding: calc(0.5rem * var(--mesh-density, 0.7)) calc(0.75rem * var(--mesh-density, 0.7));
}

.sec-inventario-stat-value {
  font-size: calc(1rem * var(--mesh-density, 0.7));
}

.panel .h-56 {
  height: calc(11rem * var(--mesh-density, 0.7));
}

.panel .h-52 {
  height: calc(10rem * var(--mesh-density, 0.7));
}

.device-telemetry-chart-wrap {
  min-height: calc(10rem * var(--mesh-density, 0.7));
}

.info-card,
.token-card,
.user-card,
.alert-item {
  padding: calc(0.75rem * var(--mesh-density, 0.7)) calc(0.875rem * var(--mesh-density, 0.7));
}

.mesh-stack-table td,
.mesh-stack-table th,
.enterprise-table td,
.enterprise-table th {
  padding: calc(0.5rem * var(--mesh-density, 0.7)) calc(0.75rem * var(--mesh-density, 0.7));
}

#alert-incidents-list,
.device-incident-list {
  gap: calc(0.75rem * var(--mesh-density, 0.7));
  padding: calc(0.75rem * var(--mesh-density, 0.7)) calc(1rem * var(--mesh-density, 0.7)) calc(1rem * var(--mesh-density, 0.7));
}

/* Estados vacíos y celdas de tabla más compactos */
.mesh-app .px-5 {
  padding-left: calc(1.25rem * var(--mesh-density, 0.7)) !important;
  padding-right: calc(1.25rem * var(--mesh-density, 0.7)) !important;
}

.mesh-app .py-8 {
  padding-top: calc(2rem * var(--mesh-density, 0.7)) !important;
  padding-bottom: calc(2rem * var(--mesh-density, 0.7)) !important;
}

.mesh-app .py-3 {
  padding-top: calc(0.75rem * var(--mesh-density, 0.7)) !important;
  padding-bottom: calc(0.75rem * var(--mesh-density, 0.7)) !important;
}

.remote-terminal-wrap {
  min-height: calc(320px * var(--mesh-density, 0.7));
}

.nav-item {
  min-height: calc(2.75rem * var(--mesh-density, 0.7));
  padding: calc(0.5rem * var(--mesh-density, 0.7)) calc(0.625rem * var(--mesh-density, 0.7));
}

.enterprise-brand,
.mesh-lockup--compact {
  padding: calc(1rem * var(--mesh-density, 0.7)) calc(0.875rem * var(--mesh-density, 0.7));
}

/* ═══════════════════════════════════════════════════════════════════════════
   Integración final de temas — carga al final, gana sobre Tailwind + legacy
   ═══════════════════════════════════════════════════════════════════════════ */

body.mesh-app {
  background: var(--mesh-bg) !important;
  color: var(--mesh-text) !important;
}

body.mesh-app .text-white,
body.mesh-app .mesh-text-primary {
  color: var(--mesh-text) !important;
}

body.mesh-app .mesh-link,
body.mesh-app .text-mesh-teal,
body.mesh-app .sec-btn-link,
body.mesh-app .ack-btn {
  color: var(--mesh-accent-hover) !important;
}

body.mesh-app .mesh-link:hover,
body.mesh-app .ack-btn:hover {
  color: var(--mesh-accent) !important;
}

body.mesh-app .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--mesh-border) !important;
}

body.mesh-app .border-slate-800,
body.mesh-app .border-slate-800\/50 {
  border-color: var(--mesh-border) !important;
}

body.mesh-app .enterprise-main {
  background: var(--mesh-bg);
}

body.mesh-app .login-card {
  box-shadow: 0 24px 64px -16px var(--mesh-shadow);
}

body.mesh-app .toast {
  background: var(--mesh-bg-elevated);
  border-color: var(--mesh-border-strong);
  color: var(--mesh-text);
  box-shadow: 0 12px 40px var(--mesh-shadow);
}

body.mesh-app .predictive-alert-card,
body.mesh-app .device-predictive-alerts .predictive-alert-item {
  background: color-mix(in srgb, var(--mesh-bg-card) 92%, var(--mesh-accent) 8%);
  border-color: color-mix(in srgb, var(--mesh-border) 70%, var(--mesh-accent) 30%);
}

body.mesh-app .alert-item,
body.mesh-app .device-predictive-item,
body.mesh-app .incident-item,
body.mesh-app .device-incident-item {
  border: 1px solid color-mix(in srgb, var(--mesh-border) 70%, var(--mesh-accent) 30%);
  border-radius: var(--mesh-radius-sm, 0.5rem);
  background: linear-gradient(145deg, color-mix(in srgb, var(--mesh-accent) 8%, var(--mesh-bg-panel)) 0%, var(--mesh-bg-card) 100%);
}

body.mesh-app .alert-badge-predict {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.45);
}

body.mesh-app .alert-badge-done,
body.mesh-app .incident-status--ok {
  background: rgba(163, 230, 53, 0.22);
  color: #bef264;
  border-color: rgba(163, 230, 53, 0.5);
}

body.mesh-app .sec-btn-primary,
body.mesh-app .login-submit {
  color: #fff !important;
  border: none;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--mesh-accent) 35%, transparent);
}

body.mesh-app .nav-item.active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mesh-accent) 18%, transparent);
}

body.mesh-app .enterprise-content {
  color: var(--mesh-text);
}

body.mesh-app a:not(.nav-item):not(.device-card):not(.repair-card):not(.sec-btn) {
  color: var(--mesh-accent-hover);
}

body.mesh-app .hover\:text-teal-300:hover {
  color: var(--mesh-accent) !important;
}

body.mesh-app .panel,
body.mesh-app .stat-card {
  backdrop-filter: saturate(1.05);
}

body.mesh-app .theme-select,
body.mesh-app .theme-select--sidebar {
  background: var(--mesh-bg-input);
  border-color: var(--mesh-border-strong);
  color: var(--mesh-text);
}

body.mesh-app .theme-select--topbar {
  background: transparent;
  border-color: transparent;
  color: transparent;
  opacity: 0;
}

body.mesh-app .theme-select:focus {
  border-color: var(--mesh-accent);
  box-shadow: var(--mesh-focus-ring);
}

/* Opciones visibles en el desplegable nativo de Windows */
.theme-select option,
.theme-select--topbar option,
.theme-select--sidebar option {
  background-color: var(--mesh-bg-panel, #102038);
  color: var(--mesh-text, #e8f1fc);
}

/* Transición suave al cambiar tema (solo superficies principales) */
body.mesh-app .enterprise-shell,
body.mesh-app .enterprise-sidebar,
body.mesh-app .enterprise-main,
body.mesh-app .mesh-layout > .enterprise-topbar,
body.mesh-app .panel,
body.mesh-app .stat-card,
body.mesh-app .device-card,
body.mesh-app .nav-item,
body.mesh-app .login-card,
body.mesh-app .tm-shell,
body.mesh-app .tm-sidebar {
  transition: background-color 0.35s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}