/* File: src/MeshHealth.Dashboard/asset/css/styles.css */
/* styles-enterprise.css se carga antes vía <link> en index.html / device.html */

/* Permite animar el anillo conic-gradient del health score */
@property --score-deg {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --donut-deg {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.stat-card {
  background: var(--mesh-bg-card, #111827);
  border: 1px solid var(--mesh-border, #1f2937);
  border-radius: var(--mesh-radius, 0.75rem);
  padding: var(--mesh-padding-panel-y, 0.525rem) var(--mesh-padding-panel-x, 0.7rem);
  box-shadow: 0 8px 24px -14px var(--mesh-shadow, rgba(0, 0, 0, 0.28));
  transition: background 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.stat-label {
  font-size: calc(0.75rem * var(--mesh-density, 0.7));
  color: var(--mesh-text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.stat-value {
  font-size: calc(1.125rem * var(--mesh-density, 0.7));
  font-weight: 700;
  color: var(--mesh-text, #f1f5f9);
  margin: 0;
  line-height: 1.2;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.badge-connected    { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
.badge-disconnected { background: rgba(239,68,68,0.15);  color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.badge-never        { background: rgba(100,116,139,0.15); color: var(--mesh-text-muted); border: 1px solid rgba(100,116,139,0.3); }
.badge-unknown      { background: rgba(51,65,85,0.5); color: var(--mesh-text-muted); }

.badge-excellent { background: rgba(16,185,129,0.15); color: #6ee7b7; }
.badge-good      { background: rgba(59,130,246,0.15);  color: #93c5fd; }
.badge-fair      { background: rgba(234,179,8,0.15);   color: #fde047; }
.badge-poor      { background: rgba(249,115,22,0.15);  color: #fdba74; }
.badge-critical  { background: rgba(239,68,68,0.15);   color: #fca5a5; }

.health-ring {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: block;
  --score-deg: 0deg;
  --score-color: #22c55e;
  background: conic-gradient(var(--score-color) var(--score-deg), #1e293b 0deg);
  position: relative;
}
.health-ring::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--mesh-bg-panel);
}
.health-ring-value {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  font-weight: 700;
  color: var(--mesh-text);
  line-height: 1;
  text-align: center;
  letter-spacing: -0.02em;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.health-bar {
  height: 6px;
  border-radius: 9999px;
  background: #334155;
  overflow: hidden;
  width: 80px;
  display: inline-block;
  vertical-align: middle;
}
.health-bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.5s ease;
}

.alert-item {
  padding: 0.75rem 1.25rem;
  transition: background 0.15s;
}
.alert-item:hover { background: color-mix(in srgb, var(--mesh-border-strong) 35%, var(--mesh-bg-card)); }
.alert-item--link {
  cursor: pointer;
}
.alert-item--link:focus-visible {
  outline: 2px solid rgba(45, 212, 191, 0.55);
  outline-offset: -2px;
}
.alert-item--link .ack-btn {
  cursor: pointer;
}
.alert-severity-CRITICAL { border-left: 2px solid #ef4444; }
.alert-severity-HIGH     { border-left: 2px solid #ef4444; }
.alert-severity-MEDIUM   { border-left: 2px solid #eab308; }
.alert-severity-LOW      { border-left: 2px solid #22c55e; }

.alert-predictive { background: rgba(168, 85, 247, 0.05); }
.alert-severity-pill {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}
/* Baja=verde · Media=amarillo · Alta/Crítica=rojo */
.alert-severity-pill.severity-CRITICAL { background: rgba(239, 68, 68, 0.22); color: #f87171; }
.alert-severity-pill.severity-HIGH { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.alert-severity-pill.severity-MEDIUM { background: rgba(234, 179, 8, 0.22); color: #facc15; }
.alert-severity-pill.severity-LOW { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.alert-badge-predict {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.45);
}
.alert-badge-repair {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--mesh-accent, #14b8a6) 14%, transparent);
  color: var(--mesh-accent-hover, #2dd4bf);
  border: 1px solid color-mix(in srgb, var(--mesh-accent, #14b8a6) 35%, transparent);
  animation: alert-repair-pulse 1.4s ease-in-out infinite;
}
.alert-badge-pending {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: rgba(251, 191, 36, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.35);
}
.alert-badge-done {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: rgba(163, 230, 53, 0.22);
  color: #bef264;
  border: 1px solid rgba(163, 230, 53, 0.5);
}
@keyframes alert-repair-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.alert-conf {
  font-size: 0.625rem;
  color: var(--mesh-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Historial de incidentes predictivos */
.device-incident-list,
#alert-incidents-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 1rem 1rem;
}

.incident-history-dropdown {
  width: 100%;
}

.incident-history-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  user-select: none;
}

.incident-history-summary::-webkit-details-marker {
  display: none;
}

.incident-history-summary-text {
  flex: 1;
  min-width: 0;
}

.incident-history-summary .panel-title,
.incident-history-summary .panel-subtitle {
  margin: 0;
}

.incident-history-count {
  flex-shrink: 0;
  min-width: 1.5rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.incident-history-inline-spinner {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(148, 163, 184, 0.25);
  border-top-color: #2dd4bf;
  border-radius: 50%;
  animation: login-spin 0.75s linear infinite;
}

.incident-history-inline-spinner[hidden] {
  display: none;
}

.incident-history-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.75rem 1rem;
  text-align: center;
}

.incident-history-loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid rgba(148, 163, 184, 0.22);
  border-top-color: #2dd4bf;
  border-radius: 50%;
  animation: login-spin 0.75s linear infinite;
}

.incident-history-loading-text {
  margin: 0;
  font-size: 0.8125rem;
  color: #94a3b8;
}

.incident-history-chevron {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  margin-top: -0.2rem;
}

.incident-history-dropdown[open] .incident-history-chevron {
  transform: rotate(225deg);
  margin-top: 0.15rem;
}

.incident-history-summary:hover {
  background: rgba(148, 163, 184, 0.06);
}

.incident-item,
.device-incident-item {
  background: linear-gradient(145deg, color-mix(in srgb, var(--mesh-accent) 8%, var(--mesh-bg-panel)) 0%, var(--mesh-bg-card) 55%, color-mix(in srgb, var(--mesh-accent-2, #6366f1) 6%, var(--mesh-bg-card)) 100%);
  border: 1px solid color-mix(in srgb, var(--mesh-accent) 28%, var(--mesh-border));
  border-left: 3px solid var(--mesh-accent, #14b8a6);
  border-radius: var(--mesh-radius, 0.5rem);
  padding: 0.875rem 1rem;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--mesh-accent) 8%, transparent);
}
.incident-item.alert-severity-CRITICAL,
.device-incident-item.alert-severity-CRITICAL {
  border-left-color: #ef4444;
  background: linear-gradient(145deg, color-mix(in srgb, #ef4444 14%, var(--mesh-bg-panel)) 0%, var(--mesh-bg-card) 60%);
  box-shadow: 0 6px 18px color-mix(in srgb, #ef4444 12%, transparent);
}
.incident-item.alert-severity-HIGH,
.device-incident-item.alert-severity-HIGH {
  border-left-color: #ef4444;
  background: linear-gradient(145deg, color-mix(in srgb, #ef4444 12%, var(--mesh-bg-panel)) 0%, var(--mesh-bg-card) 60%);
  box-shadow: 0 6px 18px color-mix(in srgb, #ef4444 10%, transparent);
}
.incident-item.alert-severity-MEDIUM,
.device-incident-item.alert-severity-MEDIUM {
  border-left-color: #eab308;
  background: linear-gradient(145deg, color-mix(in srgb, #eab308 12%, var(--mesh-bg-panel)) 0%, var(--mesh-bg-card) 60%);
}
.incident-item.alert-severity-LOW,
.device-incident-item.alert-severity-LOW {
  border-left-color: #22c55e;
  background: linear-gradient(145deg, color-mix(in srgb, #22c55e 10%, var(--mesh-bg-panel)) 0%, var(--mesh-bg-card) 60%);
}

.incident-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.hw-change-component {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted, #64748b);
}

.hw-change-slot {
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent, #d97706) 12%, transparent);
  color: var(--text, #1e293b);
}

.incident-status {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.4rem;
  border-radius: 0.25rem;
}
.incident-status--open { background: rgba(251, 191, 36, 0.22); color: #b45309; }
.incident-status--pending { background: rgba(251, 191, 36, 0.18); color: #d97706; }
.incident-status--running { background: rgba(56, 189, 248, 0.18); color: #0284c7; }
.incident-status--ok {
  background: rgba(163, 230, 53, 0.22);
  color: #65a30d;
}
.incident-status--fail { background: rgba(239, 68, 68, 0.18); color: #b91c1c; }
.incident-status--closed { background: rgba(148, 163, 184, 0.12); color: var(--mesh-text-muted); }
[data-theme="oscuro"] .incident-status--open,
[data-theme="midnight"] .incident-status--open { color: #fde047; }
[data-theme="oscuro"] .incident-status--pending,
[data-theme="midnight"] .incident-status--pending { color: #fbbf24; }
[data-theme="oscuro"] .incident-status--running,
[data-theme="midnight"] .incident-status--running { color: #7dd3fc; }
[data-theme="oscuro"] .incident-status--ok,
[data-theme="midnight"] .incident-status--ok { color: #bef264; }
[data-theme="oscuro"] .incident-status--fail,
[data-theme="midnight"] .incident-status--fail { color: #fca5a5; }

.incident-item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mesh-text, #f1f5f9);
  margin: 0 0 0.25rem;
}

.incident-item-desc,
.incident-device,
.incident-meta,
.incident-resolved-meta {
  font-size: 0.75rem;
  color: var(--mesh-text-muted, #94a3b8);
  margin: 0.25rem 0 0;
}

.incident-details {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: var(--mesh-text-muted, #94a3b8);
}
.incident-details summary {
  cursor: pointer;
  color: var(--mesh-accent-hover, #2dd4bf);
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.incident-plan {
  margin-top: 0.7rem;
}
.incident-plan-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.35rem 0.65rem;
  border-radius: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--mesh-accent) 40%, transparent);
  background: color-mix(in srgb, var(--mesh-accent) 14%, transparent);
  color: var(--mesh-accent-hover, #0f766e);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
  vertical-align: top;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.incident-plan-toggle:hover {
  background: color-mix(in srgb, var(--mesh-accent) 22%, transparent);
  border-color: var(--mesh-accent);
}
.incident-plan-toggle:focus-visible {
  outline: 2px solid var(--mesh-accent);
  outline-offset: 2px;
}
.incident-plan-toggle.is-open {
  background: linear-gradient(145deg, #5eead4 0%, #14b8a6 100%);
  color: #042f2e;
  border-color: #0f766e;
  box-shadow: 0 4px 12px color-mix(in srgb, #14b8a6 28%, transparent);
}
.incident-plan-chevron {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin: 0;
}
.incident-plan-toggle.is-open .incident-plan-chevron {
  transform: rotate(45deg);
}
/* Contenedor estable: sin translateY (evita que el texto “salte” al abrir o al re-render). */
.incident-plan-body {
  margin-top: 0.55rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--mesh-accent) 24%, var(--mesh-border));
  background: color-mix(in srgb, var(--mesh-accent) 8%, var(--mesh-bg-panel));
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--mesh-text);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.incident-plan-body.hidden {
  display: none;
}
.incident-plan-body.is-animating {
  animation: incident-plan-in 0.18s ease;
}
@keyframes incident-plan-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.incident-action-plan {
  margin: 0.375rem 0 0.5rem;
  padding-left: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style-position: outside;
}
.incident-action-plan li {
  margin: 0;
  padding: 0;
}
.incident-repair-tag code {
  font-size: 0.6875rem;
  color: var(--mesh-accent, #14b8a6);
}
.incident-repair-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.5rem;
}
.incident-repair-row .incident-repair-tag {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.incident-repair-run-btn {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 650;
  padding: 0.35rem 0.75rem;
  border-radius: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--mesh-accent, #14b8a6) 45%, var(--mesh-border, #2d3139));
  background: color-mix(in srgb, var(--mesh-accent, #14b8a6) 18%, var(--mesh-bg-panel, #1a1f2e));
  color: var(--mesh-accent, #5eead4);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.incident-repair-run-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mesh-accent, #14b8a6) 28%, var(--mesh-bg-panel, #1a1f2e));
  border-color: var(--mesh-accent, #14b8a6);
}
.incident-repair-run-btn:disabled,
.incident-repair-run-btn.is-running {
  opacity: 0.65;
  cursor: wait;
}
.incident-resolution-notes {
  font-size: 0.6875rem;
  color: var(--mesh-text-dim, #64748b);
  margin-top: 0.375rem;
  font-style: italic;
}

.predictive-count-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.device-predictive-alerts,
.device-alerts-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 85;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Una sola alerta: no ocupar media pantalla */
  max-height: min(28vh, 5.5rem);
  overflow: hidden;
  padding: 0.375rem 0.625rem calc(0.375rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, color-mix(in srgb, var(--mesh-bg, #0b1220) 96%, transparent) 55%, transparent);
  pointer-events: none;
}

.device-predictive-alerts:not(.hidden),
.device-alerts-dock:not(.hidden) {
  pointer-events: auto;
}

@media (min-width: 1024px) {
  .device-predictive-alerts,
  .device-alerts-dock,
  #live-alerts-dock {
    left: var(--mesh-sidebar-width, 15.5rem);
  }
}

.device-page.has-alerts-dock {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

.predictive-alert-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid var(--mesh-border);
  background: var(--mesh-bg-card);
  color: var(--mesh-text);
  border-left-width: 2px;
  animation: alert-pulse-in 0.3s ease-out;
  box-shadow: 0 4px 16px var(--mesh-shadow);
}

.predictive-alert-banner--link {
  cursor: pointer;
}

.predictive-alert-banner--link:focus-visible {
  outline: 2px solid rgba(45, 212, 191, 0.55);
  outline-offset: 2px;
}

.predictive-alert-banner--compact {
  align-items: flex-start;
  padding: 0.4375rem 0.5rem;
}

.predictive-alert-banner.alert-severity-CRITICAL { border-left-color: #ef4444; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(239, 68, 68, 0.12); }
.predictive-alert-banner.alert-severity-HIGH { border-left-color: #ef4444; }
.predictive-alert-banner.alert-severity-MEDIUM { border-left-color: #eab308; }
.predictive-alert-banner.alert-severity-LOW { border-left-color: #22c55e; }

.predictive-alert-icon {
  font-size: 0.8125rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.predictive-alert-body { flex: 1; min-width: 0; }

.predictive-alert-meta,
.predictive-alert-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.375rem;
  margin-bottom: 0.125rem;
}

.predictive-alert-row {
  margin-bottom: 0;
}

.predictive-alert-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mesh-text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 6rem;
  min-width: 0;
}

.predictive-alert-device {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  margin: 0.25rem 0 0;
}

.alert-device-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  color: var(--mesh-text-dim);
}

.alert-serial-badge {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--mesh-accent-hover, #2dd4bf);
  background: color-mix(in srgb, var(--mesh-accent, #14b8a6) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--mesh-accent-hover, #2dd4bf) 40%, transparent);
  padding: 0.15rem 0.45rem;
  border-radius: 0.3rem;
  letter-spacing: 0.04em;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mesh-accent, #14b8a6) 8%, transparent);
}

.alert-device-sep {
  color: #475569;
  font-weight: 600;
  user-select: none;
}

.alert-device-name {
  color: var(--mesh-text-muted);
  font-size: 0.6875rem;
}

.alert-meta-time {
  color: var(--mesh-text-dim);
  font-size: 0.6875rem;
}

.predictive-alert-desc {
  font-size: 0.6875rem;
  color: var(--mesh-text-muted);
  margin: 0.125rem 0 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.predictive-alert-banner--compact .predictive-alert-desc {
  margin-top: 0.0625rem;
}

.predictive-alert-banner--transient {
  position: relative;
  overflow: hidden;
}

.predictive-alert-banner.is-hiding {
  animation: alert-fade-out 0.28s ease forwards;
  pointer-events: none;
}

.predictive-alert-dismiss {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--mesh-text-muted);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.predictive-alert-dismiss:hover {
  color: var(--mesh-text);
  background: rgba(148, 163, 184, 0.15);
}

.predictive-alert-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--mesh-accent, #14b8a6);
  transform-origin: left center;
  animation: alert-timer-shrink linear forwards;
  opacity: 0.85;
}

@keyframes alert-timer-shrink {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes alert-fade-out {
  to {
    opacity: 0;
    transform: translateY(0.5rem);
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.predictive-alert-ack {
  flex-shrink: 0;
  font-size: 0.6875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--mesh-border-strong, #334155);
  color: var(--mesh-accent-hover, #5eead4);
  background: color-mix(in srgb, var(--mesh-accent, #14b8a6) 10%, transparent);
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  min-height: 1.625rem;
}

.predictive-alert-ack:hover {
  background: color-mix(in srgb, var(--mesh-accent, #14b8a6) 20%, transparent);
  border-color: var(--mesh-accent, #14b8a6);
}

@keyframes alert-pulse-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.agent-row {
  border-bottom: 1px solid color-mix(in srgb, var(--mesh-border-strong) 35%, var(--mesh-bg-card));
  transition: background 0.15s;
  cursor: pointer;
}
.agent-row:hover { background: color-mix(in srgb, var(--mesh-border-strong) 20%, var(--mesh-bg-card)); }

.toast {
  background: var(--mesh-bg-elevated);
  border: 1px solid var(--mesh-border);
  color: var(--mesh-text);
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 240px;
  animation: slide-in 0.25s ease-out;
}

@keyframes slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.repair-line-error { color: #f87171; }
.repair-line-ok    { color: #cbd5e1; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--mesh-bg-panel); }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

/* ── Layout Enterprise ───────────────────────────────────── */
.enterprise-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--mesh-bg, #0b1220);
  color: var(--mesh-text, #f1f5f9);
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  transition: background 0.35s ease, color 0.2s ease;
}

.enterprise-sidebar {
  width: var(--mesh-sidebar-width, 15.5rem);
  min-width: var(--mesh-sidebar-width, 15.5rem);
  background: var(--mesh-bg-sidebar, #111827);
  border-right: 1px solid var(--mesh-border, #1f2937);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  transition: background 0.35s ease, border-color 0.25s ease;
}

.enterprise-brand,
.mesh-lockup--compact {
  padding: 1rem 0.875rem;
  border-bottom: 1px solid var(--mesh-border, #1f2937);
}

/* ── Logo lockup MeshHealth Enterprise ───────────────────── */
.mesh-lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
}

.mesh-lockup-icon {
  flex-shrink: 0;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--mesh-accent, #14b8a6);
}

.mesh-lockup-icon--sm {
  width: 2.25rem;
  height: 2.25rem;
}

/* ── Logo animado MeshHealth (squircle + pulso) ───────────────────────────── */
.mesh-logo {
  display: block;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  aspect-ratio: 1;
  color: var(--mesh-accent, #14b8a6);
  overflow: visible;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.mesh-logo--live {
  filter:
    drop-shadow(0 4px 10px color-mix(in srgb, #4eaa93 35%, transparent))
    drop-shadow(0 10px 22px color-mix(in srgb, #6ec4ad 42%, transparent));
  animation: mesh-logo-breathe 1.9s ease-in-out infinite;
}

.mesh-lockup:hover .mesh-logo--live,
.mesh-logo--live:hover {
  filter:
    drop-shadow(0 6px 14px color-mix(in srgb, #4eaa93 40%, transparent))
    drop-shadow(0 14px 28px color-mix(in srgb, #6ec4ad 48%, transparent));
  transform: translateY(-1px) scale(1.04);
}

#login-brand .mesh-logo--live {
  width: 4.25rem;
  height: 4.25rem;
  filter:
    drop-shadow(0 8px 16px color-mix(in srgb, #4eaa93 40%, transparent))
    drop-shadow(0 16px 36px color-mix(in srgb, #6ec4ad 50%, transparent));
}

.device-topbar-logo.mesh-logo {
  width: 1.75rem;
  height: 1.75rem;
}

.mc-panel-logo.mesh-logo {
  width: 1.5rem;
  height: 1.5rem;
}

.mesh-lockup-icon,
.mesh-lockup-icon.mesh-logo {
  width: 2.75rem;
  height: 2.75rem;
}

.mesh-lockup-icon--sm,
.mesh-lockup-icon--sm.mesh-logo {
  width: 2.25rem;
  height: 2.25rem;
}

@keyframes mesh-logo-breathe {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .mesh-logo--live animate,
  .mesh-logo--live animateTransform {
    display: none !important;
  }
  .mesh-logo--live,
  #login-brand .mesh-logo--live {
    animation: none;
    filter: drop-shadow(0 4px 12px color-mix(in srgb, #6ec4ad 35%, transparent));
    transform: none;
  }
}


.mesh-lockup-text {
  min-width: 0;
  flex: 1;
}

.mesh-lockup-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 750;
  color: var(--mesh-text);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.mesh-lockup-edition {
  margin: 0.15rem 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--mesh-accent-2, #2dd4bf);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.mesh-tagline {
  margin: 0.5rem 0 0;
  font-size: 0.5625rem;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mesh-text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.mesh-tagline span {
  display: block;
}

.mesh-lockup--compact .mesh-lockup-title {
  font-size: 0.9375rem;
}

.mesh-lockup--compact .mesh-lockup-edition {
  font-size: 0.8125rem;
}

.mesh-lockup--compact .mesh-tagline {
  margin-top: 0.375rem;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

#login-brand {
  display: flex;
  justify-content: center;
  width: 100%;
}

#login-brand .mesh-lockup {
  margin-bottom: 1.25rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.875rem;
  width: 100%;
}

#login-brand .mesh-lockup-icon,
#login-brand .mesh-logo {
  margin-inline: auto;
}

#login-brand .mesh-lockup-text {
  flex: 0 1 auto;
  width: 100%;
  max-width: 18rem;
  text-align: center;
}

#login-brand .mesh-lockup-title {
  font-size: 1.625rem;
  text-align: center;
}

#login-brand .mesh-lockup-edition {
  font-size: 1.25rem;
  text-align: center;
}

#login-brand .mesh-tagline {
  font-size: 0.625rem;
  margin-top: 0.75rem;
  text-align: center;
  text-wrap: balance;
  max-width: 16rem;
  margin-inline: auto;
}

#login-brand .mesh-tagline span {
  display: block;
  text-align: center;
}

.enterprise-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid #1f2937;
}

.brand-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: linear-gradient(145deg, #2dd4bf 0%, #14b8a6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(45, 212, 191, 0.25);
}

.brand-logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  flex-shrink: 0;
  display: block;
}

.brand-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke: #0f172a;
}

.brand-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--mesh-text);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.brand-subtitle {
  font-size: 0.6875rem;
  color: #6b7280;
  margin-top: 0.125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.02em;
}

.enterprise-nav {
  flex: 1;
  padding: var(--mesh-padding-nav, 0.75rem 0.625rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
}

.enterprise-nav .nav-item {
  animation: nav-item-rise 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.enterprise-nav .nav-item:nth-child(1) { animation-delay: 0.03s; }
.enterprise-nav .nav-item:nth-child(2) { animation-delay: 0.07s; }
.enterprise-nav .nav-item:nth-child(3) { animation-delay: 0.11s; }
.enterprise-nav .nav-item:nth-child(4) { animation-delay: 0.15s; }
.enterprise-nav .nav-item:nth-child(5) { animation-delay: 0.19s; }
.enterprise-nav .nav-item:nth-child(6) { animation-delay: 0.23s; }
.enterprise-nav .nav-item:nth-child(7) { animation-delay: 0.27s; }
.enterprise-nav .nav-item:nth-child(8) { animation-delay: 0.31s; }
.enterprise-nav .nav-item:nth-child(9) { animation-delay: 0.35s; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.625rem;
  border: none;
  border-radius: var(--mesh-radius, 0.5rem);
  background: transparent;
  color: #9ca3af;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: color 0.22s ease, background 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
  text-align: left;
}

.nav-item .nav-icon-wrap {
  display: inline-flex;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-item:hover {
  color: #e5e7eb;
  background: rgba(31, 41, 55, 0.55);
}

.nav-item:not(.active):hover {
  transform: translateX(0.28rem);
}

.nav-item:hover .nav-icon-wrap {
  transform: scale(1.1);
}

.nav-item.active {
  color: var(--mesh-text);
  background: #1f2937;
  transform: translateX(0.5rem);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 55%;
  min-height: 1.25rem;
  border-radius: 0 3px 3px 0;
  background: #2dd4bf;
  transform-origin: center center;
  animation: nav-active-bar-in 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-item--pressed {
  transform: scale(0.97);
}

.nav-item.active.nav-item--pressed {
  transform: translateX(0.5rem) scale(0.97);
}

.nav-item--enter {
  animation: nav-item-activate 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-item--enter .nav-icon-wrap {
  animation: nav-icon-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes nav-active-bar-in {
  from {
    transform: translateY(-50%) scaleY(0.2);
    opacity: 0;
  }
  to {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
  }
}

@keyframes nav-item-activate {
  0% {
    transform: translateX(0);
    background: color-mix(in srgb, var(--mesh-accent, #14b8a6) 8%, transparent);
    box-shadow: inset 0 0 0 0 transparent;
  }
  45% {
    transform: translateX(0.35rem);
    background: color-mix(in srgb, var(--mesh-accent, #14b8a6) 16%, #1f2937);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mesh-accent, #14b8a6) 28%, transparent);
  }
  100% {
    transform: translateX(0.5rem);
    background: #1f2937;
    box-shadow: inset 0 0 0 0 transparent;
  }
}

@keyframes nav-icon-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes nav-item-rise {
  from {
    opacity: 0;
    filter: blur(3px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

.view-section-enter {
  animation: view-section-in 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.topbar-title--enter {
  animation: topbar-title-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes view-section-in {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes topbar-title-in {
  from {
    opacity: 0.35;
    transform: translateX(-0.35rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-item,
  .enterprise-nav .nav-item,
  .nav-item.active::before,
  .nav-item--enter,
  .nav-item--enter .nav-icon-wrap,
  .view-section-enter,
  .topbar-title--enter,
  .topbar-user-dropdown,
  .sec-usuarios-tab,
  .device-section-tab,
  .mc-tab {
    animation: none !important;
    transition: none !important;
  }

  .nav-item--pressed {
    transform: none;
  }

  .nav-item.active,
  .nav-item:not(.active):hover {
    transform: none;
  }

  .nav-item.active {
    padding-left: 1rem;
  }

  .nav-item:hover .nav-icon-wrap {
    transform: none;
  }
}

.nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  stroke-width: 1.75;
}

/* nav-icon dentro de .nav-icon-wrap usa themes.css */

.nav-label {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-badge {
  min-width: 1.625rem;
  height: 1.375rem;
  padding: 0 0.4375rem;
  border-radius: 0.375rem;
  background: #7f1d1d;
  color: #fecaca;
  font-size: 0.6875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  line-height: 1;
}

.nav-badge.hidden {
  display: none;
}

.sidebar-footer {
  padding: 0.875rem 1rem 1rem;
  border-top: 1px solid #1f2937;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex-shrink: 0;
  margin-top: auto;
}

.sidebar-prefs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #1f2937;
  background: color-mix(in srgb, var(--mesh-bg-elevated) 55%, transparent);
}

.sidebar-prefs-title {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mesh-text-dim);
}

.sidebar-prefs .theme-select-label {
  font-size: 0.75rem;
  color: var(--mesh-text-muted);
}

.theme-select--sidebar {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.sidebar-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #374151;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--mesh-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.sidebar-refresh:hover {
  color: #e5e7eb;
  border-color: #4b5563;
  background: rgba(31, 41, 55, 0.5);
}

.sidebar-refresh-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.ws-status-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.sidebar-logout {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #374151;
  background: transparent;
  color: #9ca3af;
  font-size: 0.8125rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.sidebar-logout:hover {
  color: #e5e7eb;
  border-color: #4b5563;
  background: rgba(31, 41, 55, 0.5);
}

.enterprise-main {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--mesh-bg);
  overflow-x: hidden;
  min-height: 0;
}

.enterprise-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mesh-topbar-inner-gap, 0.75rem);
  padding-block: var(--mesh-topbar-pad-y, 0.875rem);
  padding-top: calc(var(--mesh-topbar-pad-y, 0.875rem) + var(--mesh-safe-top, 0px));
  min-height: var(--mesh-topbar-height, 4.25rem);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-bottom: none;
  background: transparent;
  position: sticky;
  top: var(--mesh-layout-pad-top, 1rem);
  z-index: 50;
  flex-shrink: 0;
  isolation: isolate;
  flex-wrap: nowrap;
}

.topbar-title-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
}

.topbar-leading {
  display: flex;
  align-items: center;
  gap: var(--mesh-topbar-inner-gap, 0.75rem);
  min-width: 0;
  flex: 1 1 auto;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mesh-topbar-actions-gap, 0.625rem);
  flex-shrink: 0;
  margin-left: auto;
}

.topbar-theme-group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.topbar-theme-menu {
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}

.topbar-theme-btn,
.topbar-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--mesh-topbar-control-h, 2.5rem);
  height: auto;
  padding: 0.4375rem 0.625rem 0.4375rem 0.375rem;
  border: 1px solid var(--mesh-border, #334155);
  border-radius: var(--mesh-radius, 0.75rem);
  background: var(--mesh-bg-panel);
  color: var(--mesh-text);
  box-sizing: border-box;
}

.topbar-theme-btn {
  pointer-events: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.topbar-theme-menu:hover .topbar-theme-btn,
.topbar-theme-menu:focus-within .topbar-theme-btn {
  border-color: var(--mesh-border-strong, #475569);
  background: var(--mesh-bg-elevated);
}

.topbar-theme-avatar,
.topbar-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.topbar-user-avatar {
  color: #5eead4;
  background: rgba(20, 184, 166, 0.14);
  border: 1px solid rgba(20, 184, 166, 0.28);
}

.topbar-theme-avatar {
  color: var(--mesh-accent, #14b8a6);
  background: color-mix(in srgb, var(--mesh-accent, #14b8a6) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--mesh-accent, #14b8a6) 28%, transparent);
}

.topbar-theme-meta,
.topbar-user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.0625rem;
  min-width: 0;
  line-height: 1.25;
}

.topbar-theme-meta {
  align-items: center;
  text-align: center;
  min-width: 5.25rem;
  max-width: 7.5rem;
}

.topbar-user-meta {
  max-width: 9rem;
}

.topbar-theme-name {
  display: block;
  width: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mesh-text);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-theme-sublabel {
  display: block;
  width: 100%;
  font-size: 0.6875rem;
  line-height: 1.25;
  color: var(--mesh-text-dim);
  text-align: center;
  white-space: nowrap;
}

.theme-select--topbar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: inherit;
  background: transparent;
  color: transparent;
  opacity: 0;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: menulist;
  box-sizing: border-box;
  z-index: 2;
}

.theme-select--topbar:focus {
  outline: none;
}

.topbar-theme-menu:focus-within .topbar-theme-btn {
  border-color: var(--mesh-accent, #14b8a6);
  box-shadow: var(--mesh-focus-ring);
}

.topbar-lang-group {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.topbar-lang-label {
  font-size: 0.75rem;
  color: var(--mesh-text-muted, #94a3b8);
  white-space: nowrap;
}

.lang-select {
  min-height: var(--mesh-topbar-control-h, 2.5rem);
  padding: 0 0.625rem;
  border: 1px solid var(--mesh-border, #334155);
  border-radius: var(--mesh-radius, 0.75rem);
  background: var(--mesh-bg-panel);
  color: var(--mesh-text);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.topbar-action--refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: var(--mesh-topbar-control-h, 2.5rem);
  height: var(--mesh-topbar-control-h, 2.5rem);
  padding: 0 0.875rem;
  flex-shrink: 0;
  white-space: nowrap;
  position: relative;
  z-index: 6;
  cursor: pointer;
}

.topbar-action--refresh:disabled,
.topbar-action--refresh.is-refreshing {
  opacity: 0.75;
  cursor: wait;
}

.topbar-action--refresh.is-refreshing .topbar-action-icon {
  animation: mesh-refresh-spin 0.75s linear infinite;
}

@keyframes mesh-refresh-spin {
  to { transform: rotate(360deg); }
}

.topbar-user-menu {
  position: relative;
  flex-shrink: 0;
}

.topbar-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--mesh-topbar-control-h, 2.5rem);
  height: auto;
  padding: 0.4375rem 0.625rem 0.4375rem 0.375rem;
  border: 1px solid var(--mesh-border, #334155);
  border-radius: var(--mesh-radius, 0.75rem);
  background: var(--mesh-bg-panel);
  color: var(--mesh-text);
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.topbar-user-btn:hover {
  border-color: var(--mesh-border-strong, #475569);
  background: var(--mesh-bg-elevated);
  transform: translateY(-1px);
}

.topbar-user-btn[aria-expanded="true"] {
  border-color: var(--mesh-accent, #14b8a6);
  box-shadow: var(--mesh-focus-ring, 0 0 0 2px color-mix(in srgb, var(--mesh-accent, #14b8a6) 35%, transparent));
}

.topbar-user-btn[aria-expanded="true"] .topbar-user-chevron {
  transform: rotate(180deg);
}

.topbar-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mesh-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.topbar-user-role {
  font-size: 0.6875rem;
  line-height: 1.25;
  color: var(--mesh-text-dim);
  white-space: nowrap;
}

.topbar-user-chevron,
.topbar-theme-chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--mesh-text-muted);
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.topbar-user-dropdown {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  min-width: 13.5rem;
  padding: 0.375rem;
  border: 1px solid var(--mesh-border);
  border-radius: var(--mesh-radius, 0.75rem);
  background: var(--mesh-bg-panel);
  box-shadow: 0 12px 32px var(--mesh-shadow, rgba(0, 0, 0, 0.35));
  z-index: 200;
  transform-origin: top right;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.5rem) scale(0.96);
  transition:
    opacity 0.2s ease,
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.24s;
}

/* No usar display:none del .hidden global: rompería la animación y el menú. */
.topbar-user-dropdown.hidden {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.5rem) scale(0.96);
}

.topbar-user-dropdown.is-open {
  display: block !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.topbar-user-dropdown.is-open .topbar-user-dropdown-item {
  animation: menu-item-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.topbar-user-dropdown.is-open .topbar-user-dropdown-item:nth-child(2) { animation-delay: 0.04s; }
.topbar-user-dropdown.is-open .topbar-user-dropdown-item:nth-child(3) { animation-delay: 0.08s; }

@keyframes menu-item-in {
  from {
    opacity: 0;
    transform: translateX(0.4rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.topbar-user-dropdown-head {
  margin: 0;
  padding: 0.5rem 0.625rem;
  font-size: 0.75rem;
  color: var(--mesh-text-muted);
  border-bottom: 1px solid var(--mesh-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-user-dropdown-item {
  display: block;
  width: 100%;
  margin: 0.125rem 0 0;
  padding: 0.5625rem 0.625rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--mesh-text);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.topbar-user-dropdown-item:hover {
  background: color-mix(in srgb, var(--mesh-border-strong) 55%, var(--mesh-bg-card));
  transform: translateX(0.2rem);
}

.topbar-user-dropdown-item--danger {
  color: #fca5a5;
}

.topbar-user-dropdown-item--danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.topbar-action-text {
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.topbar-action {
  border-radius: var(--mesh-radius, 0.75rem);
  border: 1px solid var(--mesh-border);
  background: var(--mesh-bg-elevated);
  color: var(--mesh-text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar-action--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mesh-topbar-control-h, 2.5rem);
  height: var(--mesh-topbar-control-h, 2.5rem);
  padding: 0;
}

.topbar-action-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.topbar-action:hover:not(:disabled) {
  background: var(--mesh-nav-active-bg);
  border-color: var(--mesh-accent);
  color: var(--mesh-icon);
}

.topbar-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--mesh-text);
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enterprise-content {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-content: start;
  padding: 0;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  width: 100%;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
}

/* Todas las vistas ocupan la misma celda: sin hueco por secciones ocultas */
.enterprise-content > [data-view] {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.enterprise-content > [data-view].hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.enterprise-content > [data-view]:not(.hidden) {
  margin: 0;
  padding: 0;
}

/* sec-view-* heredan flex del bloque unificado en responsive.css */

/* ── Inventario responsive ───────────────────────────────────────────────── */
.sec-view-inventario {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.sec-view-usuarios {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.sec-inventario-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mesh-gap-grid, 1rem);
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .sec-inventario-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sec-inventario-stat {
  padding: 0.5rem 0.75rem;
  border-radius: var(--mesh-radius, 0.5rem);
  border: 1px solid var(--mesh-border);
  background: linear-gradient(180deg, var(--mesh-bg-card) 0%, var(--mesh-bg-elevated) 100%);
  color: var(--mesh-text);
}

.sec-inventario-stat-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mesh-text-muted);
  margin-bottom: 0.25rem;
}

.sec-inventario-stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--mesh-text);
  line-height: 1.2;
}

.sec-inventario-stat-value--ok { color: #34d399; }
.sec-inventario-stat-value--muted { color: var(--mesh-text-muted); }

.sec-inventario-panel {
  width: 100%;
}

.sec-inventario-table-wrap {
  max-height: min(62vh, calc(100dvh - var(--mesh-scroll-chrome, 14rem)));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#inventario-history-wrap .sec-inventario-table-wrap {
  overflow: visible;
  max-height: none;
}

.sec-inventario-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  flex-shrink: 0;
}

.sec-inventario-header-text {
  flex: 1 1 12rem;
  min-width: 0;
}

.sec-inventario-list-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.sec-inventario-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 18rem;
  max-width: 32rem;
  justify-content: flex-end;
}

.sec-inventario-launch-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sec-inventario-toolbar .sec-inventario-search,
.sec-inventario-toolbar .inventario-search-input {
  flex: 1 1 10rem;
  min-width: 0;
  width: 100%;
}

.sec-inventario-filters {
  padding: 0.75rem var(--mesh-padding-panel-x, 1.25rem) 0.875rem;
  margin: 0;
  border-bottom: 1px solid var(--mesh-border);
  box-sizing: border-box;
  gap: 0.75rem;
}

.sec-inventario-filters .fleet-devices-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}

.sec-inventario-table-wrap {
  border-top: none;
}

.sec-inventario-thead-row {
  color: var(--mesh-text-muted);
  border-bottom: 1px solid var(--mesh-border);
  background: color-mix(in srgb, var(--mesh-bg-elevated) 65%, transparent);
}

.sec-inventario-table tbody tr.sec-inventario-row {
  transition: background 0.12s ease;
}

.sec-inventario-table tbody tr.sec-inventario-row td {
  vertical-align: middle;
}

@media (min-width: 768px) {
  .sec-inventario-table-wrap .sec-inventario-table thead {
    display: none;
  }

  .sec-inventario-table-wrap .sec-inventario-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem 1rem;
  }

  .sec-inventario-table-wrap .sec-inventario-table tbody tr.sec-inventario-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.625rem 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mesh-border);
    border-radius: 0.625rem;
    background: color-mix(in srgb, var(--mesh-bg-elevated) 45%, transparent);
  }

  .sec-inventario-table-wrap .sec-inventario-table tbody tr.sec-inventario-row:hover {
    background: color-mix(in srgb, var(--mesh-border-strong) 35%, var(--mesh-bg-card));
  }

  .sec-inventario-table-wrap .sec-inventario-table tbody tr.sec-inventario-row td {
    display: block;
    width: auto;
    padding: 0;
    border: none;
    text-align: center;
  }

  .sec-inventario-table-wrap .sec-inventario-table tbody tr.sec-inventario-row td::before {
    display: none;
  }

  .sec-inventario-table-wrap .sec-inventario-table tbody tr.sec-inventario-row td:first-child .sec-inventario-equipo-name,
  .sec-inventario-table-wrap .sec-inventario-table tbody tr.sec-inventario-row td:first-child .sec-inventario-equipo-meta {
    text-align: center;
  }

  .sec-inventario-table-wrap .sec-inventario-table tbody tr.sec-inventario-row td.sec-inventario-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: none;
  }

  .sec-inventario-table-wrap .sec-inventario-table tbody tr.sec-inventario-empty {
    display: block;
    width: 100%;
    padding: 2rem 1rem;
    text-align: center;
    border: none;
    background: transparent;
  }
}

.sec-inventario-table tbody tr.sec-inventario-row:hover {
  background: color-mix(in srgb, var(--mesh-border-strong) 25%, var(--mesh-bg-card));
}

.sec-inventario-equipo-name {
  font-weight: 600;
  color: var(--mesh-text);
  line-height: 1.3;
}

.sec-inventario-equipo-meta {
  font-size: 0.75rem;
  color: var(--mesh-text-muted);
  margin-top: 0.125rem;
  line-height: 1.35;
}

.sec-inventario-group-pill {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--group-color, #64748b) 45%, transparent);
  background: color-mix(in srgb, var(--group-color, #64748b) 14%, transparent);
  color: var(--mesh-text);
}

.sec-inventario-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #14b8a6;
  border: 1px solid rgba(20, 184, 166, 0.35);
  background: rgba(20, 184, 166, 0.08);
  text-decoration: none;
  white-space: nowrap;
}

.sec-inventario-detail-btn:hover {
  background: rgba(20, 184, 166, 0.16);
  color: #5eead4;
}

.sec-inventario-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  margin-left: 0.375rem;
  border-radius: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sec-inventario-delete-btn:hover {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(248, 113, 113, 0.16);
}

.sec-inventario-delete-btn .device-delete-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.sec-inventario-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}

.sec-inventario-panel .panel-title,
.sec-inventario-panel .panel-subtitle {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.sec-inventario-subtitle {
  color: var(--mesh-text-muted);
  max-width: 36rem;
  line-height: 1.45;
}

.sec-inventario-search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--mesh-border);
  border-radius: var(--mesh-radius, 0.5rem);
  background: var(--mesh-bg-input);
  color: var(--mesh-text);
  font-size: 0.875rem;
}

.sec-inventario-search::placeholder {
  color: var(--mesh-text-dim);
}

.sec-inventario-search:focus {
  outline: none;
  border-color: #14b8a6;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2);
}

@media (max-width: 767px) {
  .sec-inventario-list-header {
    flex-direction: column;
  }

  .sec-inventario-toolbar {
    max-width: none;
    width: 100%;
  }

  .sec-inventario-table-wrap::after {
    display: none;
  }

  .sec-inventario-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .sec-inventario-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .sec-inventario-table tbody tr {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--mesh-border);
    border-radius: 0.625rem;
    background: color-mix(in srgb, var(--mesh-bg-elevated) 45%, transparent);
  }

  .sec-inventario-table tbody tr td {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: none;
    text-align: center;
  }

  .sec-inventario-table tbody tr td::before {
    content: attr(data-label);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mesh-text-dim);
  }

  .sec-inventario-table tbody tr td.sec-inventario-actions {
    flex-direction: row;
    justify-content: center;
    padding-top: 0.375rem;
    margin-top: 0.125rem;
    border-top: 1px solid color-mix(in srgb, var(--mesh-border-strong) 45%, var(--mesh-bg-card));
  }

  .sec-inventario-table tbody tr td.sec-inventario-actions::before {
    display: none;
  }

  .sec-inventario-table tbody tr.sec-inventario-empty td {
    display: block;
    width: 100%;
    padding: 2rem 1rem;
    text-align: center;
  }

  .sec-inventario-table tbody tr.sec-inventario-empty td::before {
    display: none;
  }
}

.panel {
  background: var(--mesh-bg-panel, #0f172a);
  border: 1px solid color-mix(in srgb, var(--mesh-border, #1e293b) 88%, var(--mesh-accent, #14b8a6) 12%);
  border-radius: var(--mesh-radius, 0.75rem);
  overflow: hidden;
  box-shadow: 0 10px 40px -12px var(--mesh-shadow, rgba(0, 0, 0, 0.28));
  transition: background 0.35s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.panel-header {
  padding: var(--mesh-padding-panel-y, 1rem) var(--mesh-padding-panel-x, 1.25rem);
  border-bottom: 1px solid var(--mesh-border, #1e293b);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--mesh-accent, #14b8a6) 7%, var(--mesh-bg-panel, #0f172a)) 0%,
    transparent 100%
  );
}

.panel-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
}

.panel-head-text {
  min-width: 0;
  flex: 1 1 auto;
}

.panel-head-text .panel-title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.panel-head-text .panel-subtitle {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.panel-title-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.6875rem;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--panel-icon-color, var(--mesh-accent, #14b8a6)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--panel-icon-color, var(--mesh-accent, #14b8a6)) 32%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--panel-icon-color, var(--mesh-accent, #14b8a6)) 14%, transparent);
}

.panel-title-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--panel-icon-color, var(--mesh-icon, #14b8a6));
  flex-shrink: 0;
}

.panel-icon--teal { --panel-icon-color: #14b8a6; }
.panel-icon--sky { --panel-icon-color: #38bdf8; }
.panel-icon--violet { --panel-icon-color: #a78bfa; }
.panel-icon--amber { --panel-icon-color: #fbbf24; }
.panel-icon--rose { --panel-icon-color: #f472b6; }
.panel-icon--cyan { --panel-icon-color: #22d3ee; }
.panel-icon--orange { --panel-icon-color: #fb923c; }
.panel-icon--purple { --panel-icon-color: #c084fc; }
.panel-icon--indigo { --panel-icon-color: #818cf8; }
.panel-icon--emerald { --panel-icon-color: #34d399; }

.fleet-devices-toolbar-left .panel-head {
  align-items: center;
}

.fleet-devices-toolbar-left .panel-title-icon-wrap {
  width: 2.125rem;
  height: 2.125rem;
}

.info-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.info-card-header .panel-head {
  flex: 1 1 auto;
  align-items: center;
}

.info-card-header .panel-head-text h3,
.info-card-header h3.panel-title {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0;
  color: var(--mesh-text);
}

.info-card-header .panel-title-icon-wrap {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.5625rem;
}

.panel-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mesh-text);
}

.panel-subtitle {
  font-size: 0.75rem;
  color: var(--mesh-text-dim);
  margin-top: 0.125rem;
}

/* ── Supervisión: salud y tendencias ─────────────────────── */
.supervision-title-with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* panel-title-icon: ver bloque .panel-head (títulos enriquecidos) */
.supervision-health-body {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-top: 0.875rem;
  flex-wrap: wrap;
}

.supervision-metric-body.supervision-health-body {
  align-items: center;
}
.health-donut-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.health-donut {
  --donut-deg: 0deg;
  --donut-color: #22c55e;
  --donut-hole-inset: 1.125rem;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background: conic-gradient(var(--donut-color) var(--donut-deg), var(--mesh-chart-track, #1e293b) 0deg);
  display: flex;
  transition: --donut-deg 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.health-donut::before {
  content: '';
  position: absolute;
  inset: var(--donut-hole-inset);
  border-radius: 50%;
  background: var(--mesh-bg-panel);
}

.health-donut-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.0625rem;
  max-width: calc(100% - var(--donut-hole-inset) * 2.4);
  padding: 0 0.125rem;
  text-align: center;
  line-height: 1.1;
}

.health-donut-score {
  display: block;
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--mesh-accent, #14b8a6);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.health-donut-grade {
  display: none;
}

.health-donut-grade--unit {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--mesh-text-muted);
  line-height: 1;
  margin-top: 0.0625rem;
}

.supervision-health-text {
  flex: 1;
  min-width: 0;
}

.supervision-grade-lg {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--mesh-accent, #14b8a6);
  margin: 0 0 0.375rem;
  line-height: 1.2;
}

.supervision-health-desc {
  font-size: 0.8125rem;
  color: var(--mesh-text-dim);
  line-height: 1.55;
  margin: 0;
  max-width: 42rem;
}

.health-donut--lg {
  width: 7.5rem;
  height: 7.5rem;
  --donut-hole-inset: 1.125rem;
}

.health-donut--lg .health-donut-score {
  font-size: 2rem;
}

.health-donut--sm {
  width: 6.25rem;
  height: 6.25rem;
  --donut-hole-inset: 0.875rem;
}

.health-donut--sm .health-donut-score {
  font-size: 1.5rem;
}

.supervision-metric-body {
  padding: 0.625rem 1rem 0.875rem;
}

.supervision-dist-legend {
  list-style: none;
  margin: 0.625rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  font-size: 0.75rem;
  color: var(--mesh-text-muted);
}

.supervision-dist-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.supervision-dist-legend strong {
  color: var(--mesh-text);
  font-weight: 600;
}

.supervision-dist-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.supervision-chart-wrap {
  height: 9.5rem;
  padding: 0.5rem 1rem 1rem;
}
.supervision-chart-wrap--bar {
  height: 11rem;
}
.supervision-trend-panel .panel-header {
  padding-bottom: 0.25rem;
}

/* ── Machine Learning panel ──────────────────────────────── */
.ml-learning-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: rgba(20, 184, 166, 0.15);
  color: #5eead4;
  border: 1px solid rgba(20, 184, 166, 0.35);
}
.ml-learning-badge--off {
  background: rgba(100, 116, 139, 0.15);
  color: var(--mesh-text-muted);
  border-color: #334155;
}
.ml-learning-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .ml-learning-grid { grid-template-columns: repeat(4, 1fr); }
}
.ml-stat-card {
  background: var(--mesh-bg-sidebar);
  border: 1px solid #1f2937;
  border-radius: var(--mesh-radius, 0.5rem);
  padding: 0.75rem;
}
.ml-stat-label {
  display: block;
  font-size: 0.625rem;
  color: var(--mesh-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.ml-stat-card strong {
  font-size: 1.25rem;
  color: var(--mesh-text);
  font-variant-numeric: tabular-nums;
}
.ml-learning-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  border-top: 1px solid var(--mesh-border);
}
@media (min-width: 1024px) {
  .ml-learning-columns { grid-template-columns: 1fr 1fr; }
}
.ml-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mesh-text-muted);
  margin: 1rem 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ml-list {
  max-height: 10rem;
  overflow-y: auto;
}
.ml-list-empty {
  font-size: 0.75rem;
  color: var(--mesh-text-dim);
  padding: 0.5rem 0;
}
.ml-list-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mesh-border);
}
.ml-list-item:last-child { border-bottom: none; }
.ml-list-main {
  display: block;
  font-size: 0.8125rem;
  color: var(--mesh-text);
}
.ml-list-meta {
  display: block;
  font-size: 0.6875rem;
  color: var(--mesh-text-dim);
  margin-top: 0.125rem;
}

/* ── Seguridad: usuarios y tokens ────────────────────────── */
.sec-form {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.sec-form--inline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.sec-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .sec-form-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}
.sec-field {
  min-width: 0;
}
.sec-field--full { grid-column: 1 / -1; }
.sec-field--check {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.25rem;
}
.sec-field--check label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--mesh-text);
  cursor: pointer;
}
.sec-field label {
  display: block;
  font-size: 0.75rem;
  color: var(--mesh-text-muted);
  margin-bottom: 0.375rem;
}
.sec-field input,
.sec-field select,
.sec-select {
  width: 100%;
  background-color: var(--mesh-bg-input);
  border: 1px solid var(--mesh-border);
  border-radius: var(--mesh-radius, 0.5rem);
  padding: 0.5625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--mesh-text);
  line-height: 1.35;
}

.sec-field select,
.sec-select {
  appearance: none;
  padding-right: 2.25rem;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
}

.sec-field select:hover,
.sec-select:hover {
  border-color: #475569;
}

.sec-field select option,
.sec-select option {
  background: var(--mesh-bg-panel);
  color: var(--mesh-text);
  padding: 0.5rem;
}

.sec-field input:focus,
.sec-field select:focus,
.sec-select:focus {
  outline: none;
  border-color: #14b8a6;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}
.sec-hint {
  font-size: 0.6875rem;
  color: var(--mesh-text-dim);
  margin: 0 0 0.375rem;
  line-height: 1.35;
}

.sec-field--scopes {
  margin-bottom: 0;
}

.sec-field--scopes > label {
  margin-bottom: 0.25rem;
}

.sec-field--scopes-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.sec-field--scopes-disabled .sec-scopes-panel {
  max-height: 8rem;
}

.sec-scopes-panel {
  border: 1px solid var(--mesh-border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--mesh-bg-panel) 90%, var(--mesh-bg-elevated) 10%);
  max-height: 18rem;
  overflow-y: auto;
}

.sec-scopes-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4375rem 0.75rem;
  background: color-mix(in srgb, var(--mesh-bg-elevated) 92%, transparent);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mesh-text-muted);
  border-bottom: 1px solid color-mix(in srgb, var(--mesh-border-strong) 45%, var(--mesh-bg-card));
}

.sec-scopes-group-actions {
  display: inline-flex;
  gap: 0.25rem;
}

.sec-scope-group-btn {
  padding: 0.125rem 0.4375rem;
  border: 1px solid rgba(51, 65, 85, 0.9);
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--mesh-bg-elevated) 60%, transparent);
  color: var(--mesh-text-muted);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.sec-scope-group-btn:hover {
  color: var(--mesh-text);
  border-color: #475569;
}

.sec-presets-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--mesh-border);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--mesh-bg-elevated) 45%, transparent);
}

.sec-presets-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mesh-text-muted);
  margin-right: 0.25rem;
}

.sec-presets-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.sec-preset-btn {
  padding: 0.3125rem 0.625rem;
  border: 1px solid rgba(45, 212, 191, 0.25);
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.08);
  color: #5eead4;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.sec-preset-btn:hover {
  background: rgba(20, 184, 166, 0.16);
  border-color: rgba(45, 212, 191, 0.45);
}

.sec-preset-btn--clear {
  margin-left: auto;
  border-color: rgba(148, 163, 184, 0.25);
  background: transparent;
  color: var(--mesh-text-muted);
}

.sec-preset-btn--clear:hover {
  color: var(--mesh-text);
  border-color: var(--mesh-text-dim);
}

.sec-scopes-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.375rem;
  padding: 0.5rem 0.625rem 0.625rem;
  background: transparent;
  border: none;
  border-radius: 0;
  max-height: none;
  overflow: visible;
}

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

.sec-scope-check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  margin: 0;
  border: 1px solid var(--mesh-border);
  border-radius: 0.4375rem;
  background: color-mix(in srgb, var(--mesh-bg-elevated) 55%, transparent);
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--mesh-text);
  transition: background 0.12s, border-color 0.12s;
}

.sec-scope-check input {
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  flex-shrink: 0;
  accent-color: #14b8a6;
  cursor: pointer;
}

.sec-scope-check:hover {
  background: color-mix(in srgb, var(--mesh-border-strong) 40%, var(--mesh-bg-card));
  border-color: #334155;
}

.sec-scope-check:has(input:checked) {
  background: rgba(20, 184, 166, 0.08);
  border-color: rgba(20, 184, 166, 0.35);
}

.sec-scope-check:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

.sec-scope-check input:disabled {
  cursor: not-allowed;
}

.sec-scope-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.sec-scope-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mesh-text);
  line-height: 1.35;
}

.sec-scope-desc {
  font-size: 0.6875rem;
  color: var(--mesh-text-muted);
  line-height: 1.35;
}

.sec-scope-summary {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sec-scope-group-block {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--mesh-bg-elevated) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--mesh-border-strong) 45%, var(--mesh-bg-card));
}

.sec-scope-group-title {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mesh-text-dim);
}

.sec-scope-group-items {
  font-size: 0.75rem;
  color: #cbd5e1;
  line-height: 1.4;
}

.sec-col-token-scopes {
  min-width: 10rem;
}

.sec-scopes-group {
  border-bottom: 1px solid var(--mesh-border);
}

.sec-scopes-group:last-child {
  border-bottom: none;
}

.sec-scope-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 16rem;
}

.sec-scope-pill {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(51, 65, 85, 0.55);
  background: color-mix(in srgb, var(--mesh-bg-elevated) 75%, transparent);
  color: var(--mesh-text-muted);
  white-space: nowrap;
}

.sec-scope-pill--all {
  color: #5eead4;
  border-color: rgba(20, 184, 166, 0.35);
  background: rgba(20, 184, 166, 0.1);
}

.sec-scope-pill--empty {
  color: var(--mesh-text-dim);
  font-style: italic;
  font-weight: 500;
}
.sec-btn-primary {
  background: #14b8a6;
  color: #0f172a;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: var(--mesh-radius, 0.5rem);
  border: none;
  cursor: pointer;
  align-self: flex-start;
  min-height: 2.5rem;
}
.sec-btn-primary:hover { background: #2dd4bf; }
.sec-btn-primary--sm {
  font-size: 0.8125rem;
  padding: 0.4375rem 0.875rem;
  min-height: 2.25rem;
}
.sec-btn-ghost {
  background: transparent;
  color: var(--mesh-text-muted);
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: var(--mesh-radius, 0.5rem);
  border: 1px solid var(--mesh-border);
  cursor: pointer;
}
.sec-btn-ghost:hover { color: var(--mesh-text); border-color: #475569; }
.sec-btn-link {
  background: none;
  border: none;
  color: #14b8a6;
  font-size: 0.8125rem;
  cursor: pointer;
}
.sec-btn-link:hover { text-decoration: underline; }
.sec-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sec-role-pill,
.sec-status-pill {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}
.sec-role-admin { background: rgba(20, 184, 166, 0.15); color: #5eead4; }
.sec-role-viewer { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.sec-status-pill.active { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.sec-status-pill.inactive { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.sec-token-result {
  margin: 0 var(--mesh-padding-panel-x, 1.25rem) var(--mesh-padding-panel-x, 1.25rem);
  padding: var(--mesh-padding-panel-y, 1rem);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--mesh-radius, 0.5rem);
}
.sec-token-warning {
  font-size: 0.8125rem;
  color: #fbbf24;
  margin: 0 0 0.75rem;
}
.sec-token-value {
  display: block;
  word-break: break-all;
  font-size: 0.75rem;
  color: var(--mesh-text);
  background: var(--mesh-bg-panel);
  padding: 0.75rem;
  border-radius: var(--mesh-radius-sm, 0.375rem);
  border: 1px solid var(--mesh-border);
}

/* ── Vista Usuarios: formularios y permisos (layout = Resumen: stat-card + panel + mesh-stack-table) ── */
.sec-view-tokens {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.mesh-stack-table .sec-scope-pills {
  max-width: none;
}

.sec-form--create-user {
  max-width: none;
  padding-top: 0;
}

.sec-form-row--fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}

@media (min-width: 768px) {
  .sec-form-row--fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sec-form-actions--create {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid color-mix(in srgb, var(--mesh-border-strong) 45%, var(--mesh-bg-card));
}

.sec-usuarios-editor {
  margin-top: 0;
  flex-shrink: 0;
}

.sec-usuarios-admin-hint {
  margin: 0;
  padding: 0.75rem var(--mesh-padding-panel-x, 1.25rem);
  border-radius: var(--mesh-radius, 0.75rem);
  border: 1px solid rgba(20, 184, 166, 0.22);
  background: rgba(20, 184, 166, 0.06);
  font-size: 0.8125rem;
  color: var(--mesh-text-muted);
  box-sizing: border-box;
}

.sec-usuarios-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.sec-usuarios-panel > .sec-usuarios-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.75rem var(--mesh-padding-panel-x, 1.25rem) 0.75rem;
  border-bottom: 1px solid var(--mesh-border);
  box-sizing: border-box;
}

.sec-usuarios-pane #usuarios-cards-grid {
  padding: var(--mesh-padding-panel-y, 1rem) var(--mesh-padding-panel-x, 1.25rem);
  box-sizing: border-box;
}

.sec-usuarios-pane {
  width: 100%;
  min-width: 0;
}

.sec-usuarios-pane > .panel-header {
  border-top: none;
}

.sec-usuarios-tab {
  padding: 0.5rem 1rem;
  border: 1px solid var(--mesh-border);
  border-radius: var(--mesh-radius, 0.5rem);
  margin: 0;
  background: transparent;
  color: var(--mesh-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.sec-usuarios-tab:hover {
  color: var(--mesh-text);
  border-color: #475569;
  transform: translateY(-1px);
}

.sec-usuarios-tab.active {
  color: #5eead4;
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.4);
  animation: menu-tab-activate 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mesh-accent, #14b8a6) 18%, transparent);
}

@keyframes menu-tab-activate {
  0% {
    transform: scale(0.96);
    opacity: 0.7;
  }
  55% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.sec-usuarios-list-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.sec-usuarios-header-text {
  min-width: 0;
  flex: 1 1 auto;
}

.sec-usuarios-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 14rem;
  max-width: 24rem;
}

.sec-usuarios-toolbar .sec-inventario-search {
  flex: 1 1 10rem;
  min-width: 0;
}

.mesh-user-provider {
  display: inline-flex;
  margin-left: 0.375rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.3rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mesh-text-dim);
  background: color-mix(in srgb, var(--mesh-bg-elevated) 55%, transparent);
  border: 1px solid rgba(51, 65, 85, 0.55);
}

.mesh-user-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0 1.25rem 0.5rem;
  font-size: 0.6875rem;
  color: var(--mesh-text-dim);
}

.mesh-user-self-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5eead4;
}

.sec-view-inventario .panel-header,
.sec-view-usuarios .panel-header,
.sec-view-tokens .panel-header {
  padding: var(--mesh-padding-panel-y, 1rem) var(--mesh-padding-panel-x, 1.25rem);
}

.sec-tokens-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mesh-view-gap, 1rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .sec-tokens-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sec-view-tokens .sec-tokens-grid > .panel:last-child .mesh-stack-table-wrap {
    max-height: min(62vh, calc(100dvh - var(--mesh-scroll-chrome, 14rem)));
    overflow: auto;
  }
}

.perf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 1rem 1.25rem 1.25rem;
}

@media (min-width: 1024px) {
  .perf-grid { grid-template-columns: repeat(4, 1fr); }
}

.perf-card {
  background: var(--mesh-bg-sidebar);
  border: 1px solid #1f2937;
  border-radius: var(--mesh-radius, 0.5rem);
  padding: 0.875rem;
}

.perf-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.perf-label {
  font-size: 0.75rem;
  color: var(--mesh-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.perf-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mesh-text);
}

.perf-chart-wrap {
  height: 3.5rem;
  margin-bottom: 0.5rem;
}

.perf-bar {
  height: 4px;
  border-radius: 999px;
  background: #334155;
  overflow: hidden;
}

.perf-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: #2dd4bf;
  transition: width 0.4s ease;
}

.perf-cpu .perf-bar-fill { background: #38bdf8; }
.perf-mem .perf-bar-fill { background: #a78bfa; }
.perf-disk .perf-bar-fill { background: #fbbf24; }
.perf-net .perf-bar-fill { background: #34d399; }

/* ── Grupos / empresas (vista Equipos) ───────────────────── */
.fleet-groups-panel {
  margin-bottom: 0;
}

.fleet-groups-header {
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}

.fleet-group-create-toggle {
  flex-shrink: 0;
  white-space: nowrap;
}

.fleet-group-create {
  padding-top: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--mesh-border, #1e293b);
}

.fleet-group-create-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}

@media (min-width: 768px) {
  .fleet-group-create-grid {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

.fleet-group-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--mesh-text-muted, #94a3b8);
}

.fleet-group-field input[type="text"],
.fleet-group-field input[type="email"],
.fleet-group-field input[type="password"] {
  padding: 0.5rem 0.75rem;
  border-radius: var(--mesh-radius, 0.5rem);
  border: 1px solid var(--mesh-border-strong, #334155);
  background: var(--mesh-bg-input, #0f172a);
  color: var(--mesh-text, #f1f5f9);
  font-size: 0.875rem;
}

.fleet-group-field .sec-select {
  width: 100%;
}

.fleet-group-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--mesh-text, #f1f5f9);
  cursor: pointer;
  min-height: 2.375rem;
}

.fleet-group-field--check {
  justify-content: flex-end;
}

.fleet-group-field-color input[type="color"] {
  width: 3rem;
  height: 2.375rem;
  padding: 0.125rem;
  border: 1px solid var(--mesh-border-strong, #334155);
  border-radius: 0.5rem;
  background: var(--mesh-bg-input, #0f172a);
  cursor: pointer;
}

.fleet-group-create-actions {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.fleet-group-create-hint {
  font-size: 0.75rem;
  color: var(--mesh-text-dim, #64748b);
  margin: 0;
  max-width: 42rem;
  line-height: 1.45;
}

.fleet-group-create .sec-field--scopes {
  margin-top: 0.25rem;
}

#tokens-create-panel .sec-token-result {
  border-top: 1px solid var(--mesh-border, #1e293b);
  margin-top: 0;
}

.tokens-expiry-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.tokens-expiry-row .sec-select {
  flex: 1 1 12rem;
  min-width: 0;
}

.tokens-expiry-row .sec-field-input {
  flex: 0 1 6rem;
  min-width: 5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--mesh-border);
  border-radius: var(--mesh-radius-sm, 0.5rem);
  background: var(--mesh-bg-input);
  color: var(--mesh-text);
  font-size: 0.875rem;
}

.sec-token-revoke-btn {
  color: #f87171 !important;
}

.sec-token-revoke-btn:hover {
  color: #fca5a5 !important;
}

.fleet-groups-empty {
  padding: 1.25rem;
  text-align: center;
  color: var(--mesh-text-dim, #64748b);
  font-size: 0.875rem;
}

.fleet-groups-list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.875rem;
  padding-top: 1rem;
}

@media (min-width: 900px) {
  .fleet-groups-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .fleet-groups-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fleet-group-card {
  border: 1px solid var(--mesh-border, #1e293b);
  border-radius: 0.625rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--group-color, #14b8a6) 6%, var(--mesh-bg-panel, #0f172a));
  border-left: 3px solid var(--group-color, #14b8a6);
}

.fleet-group-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}

.fleet-group-logo-preview-wrap {
  grid-column: 1 / -1;
}

.fleet-group-logo-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
  border-radius: 10px;
  background: var(--surface-2, rgba(15, 23, 42, 0.04));
}

.fleet-group-logo-preview img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  flex-shrink: 0;
}

.fleet-group-logo-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.fleet-group-logo-meta strong {
  font-size: 0.9rem;
  line-height: 1.2;
}

.fleet-group-logo-meta span {
  font-size: 0.75rem;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-group-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  flex-shrink: 0;
}

.fleet-group-chip-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 0.35rem;
  background: #fff;
}

.fleet-group-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background: var(--group-color, #14b8a6);
  margin-top: 0.375rem;
  flex-shrink: 0;
}

.fleet-group-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--mesh-text, #f8fafc);
  margin: 0;
  line-height: 1.3;
}

.fleet-group-desc {
  font-size: 0.75rem;
  color: var(--mesh-text-muted, #94a3b8);
  margin: 0.25rem 0 0;
  line-height: 1.4;
}

.fleet-group-stats {
  font-size: 0.8125rem;
  color: var(--mesh-text-dim, #64748b);
  margin: 0 0 0.875rem;
}

.fleet-group-stats-sep {
  margin: 0 0.25rem;
}

.fleet-group-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Resumen en tarjetas (Usuarios) — mismo grid que grupos de Equipos */
.mesh-summary-grid {
  padding: 1rem 1.25rem 1.25rem;
}

.mesh-summary-card {
  border: 1px solid var(--mesh-border, #1e293b);
  border-radius: 0.625rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--group-color, #14b8a6) 6%, var(--mesh-bg-panel, #0f172a));
  border-left: 3px solid var(--group-color, #14b8a6);
}

.mesh-summary-label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mesh-text-dim, #64748b);
}

.mesh-summary-value {
  margin: 0.35rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mesh-text, #f8fafc);
  line-height: 1.2;
}

.mesh-summary-value--ok { color: #34d399; }
.mesh-summary-value--accent { color: #5eead4; }

.mesh-user-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  background: var(--mesh-bg-panel, #111827);
  border: 1px solid #1f2937;
  border-radius: var(--mesh-radius, 0.75rem);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mesh-user-card:hover {
  border-color: color-mix(in srgb, var(--user-accent, #14b8a6) 45%, var(--mesh-border, #334155));
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
}

.mesh-user-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem 1rem;
  border-bottom: 1px solid var(--mesh-border, #1e293b);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--user-accent, #14b8a6) 8%, var(--mesh-bg-panel, #0f172a)) 0%,
    var(--mesh-bg-panel, #0f172a) 55%
  );
}

.mesh-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--user-accent, #14b8a6);
  background: color-mix(in srgb, var(--user-accent, #14b8a6) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--user-accent, #14b8a6) 35%, transparent);
}

.mesh-user-card-intro {
  min-width: 0;
  flex: 1 1 auto;
}

.mesh-user-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.mesh-user-name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--mesh-text, #f8fafc);
  line-height: 1.3;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mesh-user-status {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mesh-user-status.is-active {
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.mesh-user-presence {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mesh-muted, #94a3b8);
}

.mesh-user-presence.is-online {
  color: #34d399;
}

.mesh-user-presence-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #64748b;
  flex-shrink: 0;
}

.mesh-user-presence.is-online .mesh-user-presence-dot {
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}

.usuarios-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: min(70vh, 40rem);
  overflow: auto;
  padding: 0.25rem 0.15rem 0.75rem;
}

.usuarios-activity-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem 1rem;
  align-items: start;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--mesh-border, #334155) 80%, transparent);
  background: color-mix(in srgb, var(--mesh-panel, #0f172a) 92%, transparent);
}

.usuarios-activity-badge {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.45rem;
  border-radius: 0.375rem;
  white-space: nowrap;
  color: #67e8f9;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.25);
}

.usuarios-activity-badge--audit {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.28);
}

.usuarios-activity-main {
  min-width: 0;
}

.usuarios-activity-desc {
  margin: 0 0 0.2rem;
  font-size: 0.875rem;
  color: var(--mesh-text, #f8fafc);
  line-height: 1.35;
}

.usuarios-activity-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--mesh-muted, #94a3b8);
}

.usuarios-activity-time {
  font-size: 0.75rem;
  color: var(--mesh-muted, #94a3b8);
  white-space: nowrap;
  text-align: right;
}

.mesh-user-status.is-inactive {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.mesh-user-email {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--mesh-text-dim, #7c8aa0);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mesh-user-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mesh-user-role-badge--admin {
  color: #5eead4;
  background: rgba(20, 184, 166, 0.14);
  border: 1px solid rgba(20, 184, 166, 0.32);
}

.mesh-user-role-badge--viewer {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.32);
}

.mesh-user-permissions {
  padding: 0.875rem 1.25rem;
  flex: 1 1 auto;
}

.mesh-user-permissions-label {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mesh-text-dim, #64748b);
}

.mesh-user-permissions-body {
  min-height: 3.25rem;
}

.mesh-user-perm-tile {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--user-accent, #14b8a6) 28%, var(--mesh-border, #334155));
  background: color-mix(in srgb, var(--user-accent, #14b8a6) 8%, var(--mesh-bg-input, #0f172a));
}

.mesh-user-perm-tile--all {
  color: #5eead4;
}

.mesh-user-perm-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.mesh-user-perm-tile-text {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

.mesh-user-perm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.mesh-user-perm-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mesh-text-muted, #cbd5e1);
  background: color-mix(in srgb, var(--mesh-bg-elevated) 65%, transparent);
  border: 1px solid rgba(51, 65, 85, 0.65);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mesh-user-perm-chip--more {
  color: var(--user-accent, #14b8a6);
  border-color: color-mix(in srgb, var(--user-accent, #14b8a6) 35%, transparent);
  background: color-mix(in srgb, var(--user-accent, #14b8a6) 10%, transparent);
}

.mesh-user-perm-empty {
  margin: 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--mesh-text-dim, #64748b);
}

.mesh-user-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.25rem 1.125rem;
  border-top: 1px solid var(--mesh-border, #1e293b);
  background: rgba(11, 18, 32, 0.35);
}

.mesh-user-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--user-accent, #14b8a6) 55%, var(--mesh-border-strong, #334155));
  background: color-mix(in srgb, var(--user-accent, #14b8a6) 12%, transparent);
  color: color-mix(in srgb, var(--user-accent, #14b8a6) 85%, #f8fafc);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mesh-user-edit-btn svg {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
}

.mesh-user-edit-btn:hover {
  background: color-mix(in srgb, var(--user-accent, #14b8a6) 22%, transparent);
  border-color: var(--user-accent, #14b8a6);
  color: var(--mesh-text, #f8fafc);
}

.mesh-user-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mesh-user-delete-btn svg {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
}

.mesh-user-delete-btn:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: #ef4444;
  color: #fecaca;
}

#usuarios-cards-grid.device-cards-grid,
.usuarios-cards-grid.device-cards-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  #usuarios-cards-grid.device-cards-grid,
  .usuarios-cards-grid.device-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  #usuarios-cards-grid.device-cards-grid,
  .usuarios-cards-grid.device-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem;
  }
}

.mesh-user-editor {
  margin-top: 0;
}

.fleet-group-field--wide {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .fleet-group-field--wide {
    grid-column: span 2;
  }
}

.fleet-group-field--check .mesh-checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--mesh-border-strong, #334155);
  background: var(--mesh-bg-input, #0f172a);
  color: var(--mesh-text, #f1f5f9);
  font-size: 0.875rem;
  cursor: pointer;
}

.fleet-group-create .sec-select {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--mesh-border-strong, #334155);
  background: var(--mesh-bg-input, #0f172a);
  color: var(--mesh-text, #f1f5f9);
  font-size: 0.875rem;
  width: 100%;
}

.fleet-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.4375rem;
  border: 1px solid var(--mesh-border-strong, #334155);
  background: var(--mesh-bg-elevated, #0f172a);
  color: var(--mesh-text-muted, #94a3b8);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.fleet-group-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

.fleet-group-btn:hover {
  border-color: var(--mesh-accent, #14b8a6);
  color: var(--mesh-accent-hover, #2dd4bf);
}

.fleet-group-btn-download {
  color: var(--mesh-icon, var(--mesh-accent, #14b8a6));
}

.fleet-group-btn-danger:hover {
  border-color: #ef4444;
  color: #f87171;
}

/* fleet-devices-toolbar — ver globals.css (layout maestro) */

.fleet-devices-panel > .fleet-devices-toolbar--panel {
  margin: 0;
  padding-top: var(--mesh-padding-panel-y);
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--mesh-border);
}

.fleet-devices-panel > .device-cards-grid {
  padding: var(--mesh-padding-panel-y) var(--mesh-padding-panel-x);
  box-sizing: border-box;
}

.fleet-devices-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mesh-text, #f8fafc);
  margin: 0;
}

.fleet-devices-count {
  font-size: 0.8125rem;
  color: var(--mesh-text-dim, #64748b);
}

.fleet-groups-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.fleet-group-chip {
  padding: 0.3125rem 0.75rem;
  border-radius: var(--mesh-radius-pill, 9999px);
  border: 1px solid var(--mesh-border-strong, #334155);
  background: var(--mesh-bg-panel, #0f172a);
  color: var(--mesh-text-muted, #94a3b8);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.fleet-group-chip.active {
  border-color: var(--chip-color, var(--mesh-accent, #14b8a6));
  background: color-mix(in srgb, var(--chip-color, var(--mesh-accent, #14b8a6)) 16%, transparent);
  color: var(--mesh-text, #f8fafc);
}

.device-group-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--group-color, #64748b);
  background: color-mix(in srgb, var(--group-color, #64748b) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--group-color, #64748b) 35%, transparent);
  margin-bottom: 0.375rem;
}

.device-card-group-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.device-group-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--mesh-text-dim, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.device-group-select {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--mesh-border-strong, #334155);
  background: var(--mesh-bg-input, #0f172a);
  color: var(--mesh-text, #f1f5f9);
  font-size: 0.75rem;
}

/* ── Tarjetas de equipos ─────────────────────────────────── */
.device-cards-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

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

@media (min-width: 1280px) {
  .device-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem;
  }
}

.device-cards-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--mesh-text-dim);
  padding: 3rem 1rem;
  font-size: 0.875rem;
}

.device-card {
  background: var(--mesh-bg-card, #1a1f2e);
  border: 1px solid color-mix(in srgb, var(--mesh-border, #252b3b) 90%, var(--mesh-accent, #14b8a6) 10%);
  border-radius: var(--mesh-radius, 0.5rem);
  padding: calc(1.125rem * var(--mesh-density, 0.7)) calc(1.25rem * var(--mesh-density, 0.7)) calc(1rem * var(--mesh-density, 0.7));
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.3s ease;
  outline: none;
  position: relative;
}

.device-card.is-selected {
  border-color: color-mix(in srgb, #f87171 60%, var(--mesh-border, #252b3b));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #f87171 45%, transparent),
    0 0 18px color-mix(in srgb, #f87171 18%, transparent);
}

.device-card-select {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.35rem;
  border: 1px solid color-mix(in srgb, #f87171 55%, var(--mesh-border, #334155));
  background: color-mix(in srgb, var(--mesh-bg-card, #1a1f2e) 70%, #7f1d1d 30%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.device-card-select input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: #f87171;
  cursor: pointer;
}

.device-card.has-select {
  /* Checkbox absoluto (~2.3rem) + margen claro respecto al nombre */
  padding-left: 3.5rem !important;
}

.device-card.has-select .device-card-top,
.device-card.has-select .device-card-name-row {
  padding-left: 0;
  margin-left: 0;
}

.fleet-bulk-lock-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.95rem;
  border-radius: var(--mesh-radius, 0.5rem);
  border: 1px solid color-mix(in srgb, var(--mesh-border, #252b3b) 70%, #f87171 30%);
  background: color-mix(in srgb, var(--mesh-bg-card, #1a1f2e) 85%, #7f1d1d 15%);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.fleet-bulk-lock-bar.has-selection {
  border-color: color-mix(in srgb, #f87171 55%, var(--mesh-border, #252b3b));
  box-shadow: 0 0 0 1px color-mix(in srgb, #f87171 25%, transparent);
  background: color-mix(in srgb, var(--mesh-bg-card, #1a1f2e) 78%, #7f1d1d 22%);
}

.fleet-bulk-lock-bar.hidden {
  display: none !important;
}

.fleet-bulk-lock-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 12rem;
  flex: 1 1 14rem;
}

.fleet-bulk-lock-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--mesh-text, #e2e8f0);
  letter-spacing: 0.01em;
}

.fleet-bulk-lock-hint {
  font-size: 0.75rem;
  color: var(--mesh-text-muted, #94a3b8);
  line-height: 1.35;
}

.fleet-bulk-search-wrap {
  flex: 1 1 14rem;
  min-width: 12rem;
  max-width: 22rem;
}

.fleet-bulk-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid var(--mesh-border-strong, #334155);
  background: var(--mesh-bg-input, #0f172a);
  color: var(--mesh-text, #f1f5f9);
  font-size: 0.8125rem;
}

.fleet-bulk-search:focus {
  outline: none;
  border-color: #f87171;
  box-shadow: 0 0 0 1px color-mix(in srgb, #f87171 35%, transparent);
}

.fleet-bulk-search::-webkit-search-cancel-button {
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fleet-bulk-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--mesh-text-muted, #94a3b8);
  cursor: pointer;
  user-select: none;
}

.fleet-bulk-select-all input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #f87171;
  cursor: pointer;
}

.fleet-bulk-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mesh-text, #e2e8f0);
}

.fleet-bulk-lock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-left: auto;
}

.fleet-bulk-btn {
  border: none;
  border-radius: 0.4rem;
  padding: 0.42rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease, filter 0.15s ease;
}

.fleet-bulk-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.fleet-bulk-btn-lock {
  background: #dc2626;
  color: #fff;
}

.fleet-bulk-btn-lock:hover:not(:disabled) {
  filter: brightness(1.08);
}

.fleet-bulk-btn-unlock {
  background: #059669;
  color: #fff;
}

.fleet-bulk-btn-unlock:hover:not(:disabled) {
  filter: brightness(1.08);
}

.fleet-bulk-btn-clear {
  background: transparent;
  color: var(--mesh-text-muted, #94a3b8);
  border: 1px solid var(--mesh-border, #334155);
}

.fleet-bulk-btn-clear:hover:not(:disabled) {
  color: var(--mesh-text, #e2e8f0);
  border-color: color-mix(in srgb, var(--mesh-border, #334155) 60%, #f87171 40%);
}

.fleet-bulk-btn-delete {
  background: color-mix(in srgb, #7f1d1d 55%, var(--mesh-bg-elevated, #0f172a));
  color: #fecaca;
  border: 1px solid color-mix(in srgb, #f87171 45%, transparent);
}

.fleet-bulk-btn-delete:hover:not(:disabled) {
  background: color-mix(in srgb, #991b1b 70%, var(--mesh-bg-elevated, #0f172a));
  border-color: #f87171;
}

.fleet-bulk-menu {
  position: relative;
  display: inline-flex;
}

.fleet-bulk-menu-chevron {
  width: 0.9rem;
  height: 0.9rem;
  margin-left: 0.2rem;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.fleet-bulk-menu.is-open .fleet-bulk-menu-chevron {
  transform: rotate(180deg);
}

.fleet-bulk-menu #inventario-history-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.fleet-bulk-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 13.5rem;
  padding: 0.35rem;
  border: 1px solid var(--mesh-border, #334155);
  border-radius: var(--mesh-radius, 0.75rem);
  background: var(--mesh-bg-panel, #0f172a);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  z-index: 40;
}

.fleet-bulk-menu-dropdown.hidden {
  display: none !important;
}

.fleet-bulk-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--mesh-text, #e2e8f0);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.fleet-bulk-menu-item:hover:not(:disabled) {
  background: color-mix(in srgb, #f87171 14%, transparent);
}

.fleet-bulk-menu-item--danger {
  color: #fecaca;
}

.fleet-bulk-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sec-inventario-row-menu {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
  z-index: 2;
}

.sec-inventario-row-menu.is-open {
  z-index: 60;
}

.sec-inventario-row-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid var(--mesh-border, #334155);
  background: color-mix(in srgb, var(--mesh-bg-elevated, #0f172a) 80%, transparent);
  color: var(--mesh-text, #e2e8f0);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.sec-inventario-row-menu-btn:hover {
  border-color: color-mix(in srgb, var(--mesh-border, #334155) 50%, #94a3b8);
}

.sec-inventario-row-menu.is-open .fleet-bulk-menu-chevron {
  transform: rotate(180deg);
}

.sec-inventario-row-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  min-width: 11.5rem;
  padding: 0.35rem;
  border: 1px solid var(--mesh-border, #334155);
  border-radius: var(--mesh-radius, 0.75rem);
  background: var(--mesh-bg-panel, #0f172a);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  z-index: 70;
}

.sec-inventario-row-menu-dropdown.hidden {
  display: none !important;
}

@media (min-width: 768px) {
  .sec-inventario-table-wrap .sec-inventario-table tbody tr.sec-inventario-row td.sec-inventario-actions {
    display: flex !important;
    width: 100%;
    flex-basis: 100%;
    justify-content: center;
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid color-mix(in srgb, var(--mesh-border-strong) 45%, transparent);
  }
}

.inventario-bulk-bar {
  margin: 0.75rem var(--mesh-padding-panel-x, 1.25rem) 0.85rem;
}

.sec-inventario-check-col {
  width: 2.25rem;
  vertical-align: middle;
}

.sec-inventario-row-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}

.sec-inventario-row-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--mesh-accent, #14b8a6);
  cursor: pointer;
}

.sec-inventario-row.is-selected {
  background: color-mix(in srgb, var(--mesh-bg-card, #1a1f2e) 70%, #7f1d1d 30%);
}

.fleet-bulk-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.device-card:hover {
  border-color: var(--mesh-border-strong, #334155);
  box-shadow: 0 4px 24px var(--mesh-shadow, rgba(0, 0, 0, 0.25));
}

.device-card:focus-visible {
  border-color: var(--mesh-accent-hover, #2dd4bf);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mesh-accent, #14b8a6) 28%, transparent);
}

.device-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.device-card-name-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  flex: 1;
}

.device-card-name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--mesh-text, #ffffff);
  line-height: 1.3;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-rename-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--mesh-icon-muted, #64748b);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.device-rename-btn:hover {
  color: var(--mesh-icon, var(--mesh-accent, #14b8a6));
  border-color: var(--mesh-border-strong, #334155);
  background: color-mix(in srgb, var(--mesh-accent, #14b8a6) 10%, transparent);
}

.device-rename-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.device-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.device-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: transparent;
  color: #f87171;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.device-delete-btn:hover,
.device-hero-delete-btn:hover {
  color: #fca5a5;
  border-color: color-mix(in srgb, #ef4444 45%, var(--mesh-border-strong, #334155));
  background: color-mix(in srgb, #ef4444 12%, transparent);
}

.device-delete-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.device-hero-rename-btn {
  width: 1.875rem;
  height: 1.875rem;
}

.device-hero-rename-btn .device-rename-icon {
  width: 1rem;
  height: 1rem;
}

.device-card-user {
  font-size: 0.8125rem;
  color: #7c8aa0;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

.device-card-model {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.device-card-oem-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 3px;
  background: #fff;
  flex-shrink: 0;
  /* Evita parpadeo al revalidar la imagen en re-renders residuales */
  image-rendering: auto;
  contain: layout paint;
}

.device-card-oem-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0;
  color: #0f172a;
  background: linear-gradient(145deg, #e2e8f0, #94a3b8);
}

.sec-inventario-equipo-model {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
}

.sec-inventario-equipo-model .device-card-oem-logo {
  width: 16px;
  height: 16px;
}

.device-online-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.device-online-badge.online {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.22);
}

.device-online-badge.offline {
  background: rgba(51, 65, 85, 0.45);
  color: var(--mesh-text-muted);
  border: 1px solid rgba(71, 85, 105, 0.5);
}

.device-wifi-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.device-card-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.device-health-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.device-health-pill .dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.device-health-pill.excellent,
.device-health-pill.good {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
}

.device-health-pill.excellent .dot,
.device-health-pill.good .dot {
  background: #34d399;
}

.device-health-pill.fair {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
}

.device-health-pill.fair .dot {
  background: #fbbf24;
}

.device-health-pill.poor {
  background: rgba(249, 115, 22, 0.14);
  color: #fb923c;
}

.device-health-pill.poor .dot {
  background: #fb923c;
}

.device-health-pill.critical {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
}

.device-health-pill.critical .dot {
  background: #f87171;
}

.device-health-pill.unknown {
  background: rgba(51, 65, 85, 0.5);
  color: var(--mesh-text-muted);
}

.device-health-pill.unknown .dot {
  background: #64748b;
}

.device-card-updated {
  font-size: 0.75rem;
  color: var(--mesh-text-dim);
  white-space: nowrap;
}

.device-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding-top: 0.125rem;
}

.device-metric {
  text-align: left;
}

.device-metric-value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--mesh-text);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.device-metric-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--mesh-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.125rem;
}

/* ── Vista detalle de dispositivo ─────────────────────────── */
.device-page {
  display: flex;
  flex-direction: column;
  gap: var(--mesh-view-gap, 1rem);
  width: 100%;
  max-width: 100%;
}

.device-health-flow {
  display: flex;
  flex-direction: column;
  gap: var(--mesh-gap-grid-lg, 1rem);
}

.device-block {
  margin: 0;
}

/* Bloque superior: tarjetas separadas (sin bordes compartidos) */
.device-summary-stack {
  display: flex;
  flex-direction: column;
  gap: var(--mesh-gap-grid, 0.75rem);
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.device-summary-stack .device-hero-card {
  border: 1px solid var(--mesh-border, #252b3b);
  border-radius: var(--mesh-radius, 0.75rem);
  background: var(--mesh-bg-card);
}

.device-summary-stack .device-equipment-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mesh-gap-grid, 0.75rem);
  border-bottom: none;
}

@media (min-width: 768px) {
  .device-summary-stack .device-equipment-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.device-summary-stack .equipment-control-card {
  border-radius: var(--mesh-radius, 0.75rem);
}

.device-summary-stack .equipment-control-lock {
  border: 1px solid color-mix(in srgb, #ef4444 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, #ef4444 16%, var(--mesh-bg-panel)) 0%, color-mix(in srgb, #f43f5e 10%, var(--mesh-bg-card)) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 12%, transparent), 0 8px 20px color-mix(in srgb, #ef4444 12%, transparent);
}

.device-summary-stack .equipment-control-unlock {
  border: 1px solid color-mix(in srgb, #10b981 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, #10b981 16%, var(--mesh-bg-panel)) 0%, color-mix(in srgb, #34d399 10%, var(--mesh-bg-card)) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, #10b981 12%, transparent), 0 8px 20px color-mix(in srgb, #10b981 12%, transparent);
}

.device-summary-stack .device-spec-grid {
  gap: var(--mesh-gap-grid, 0.75rem);
}

.device-summary-stack .device-spec-card {
  border: 1px solid var(--mesh-border, #252b3b);
  border-radius: var(--mesh-radius, 0.75rem);
  background: var(--mesh-bg-card);
}

.device-hero-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--mesh-bg-card);
  border: 1px solid #252b3b;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
}

.device-hero-gauge {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
  --score-deg: 0deg;
  --score-color: #22c55e;
  background: conic-gradient(var(--score-color) var(--score-deg), #1e293b 0deg);
  position: relative;
}

.device-hero-gauge::before {
  content: '';
  position: absolute;
  inset: 0.625rem;
  border-radius: 50%;
  background: var(--mesh-bg-panel);
}

.device-hero-gauge-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  width: 56%;
  text-align: center;
  line-height: 1.05;
  overflow: visible;
  margin: 0;
  padding: 0;
}

.device-hero-score {
  display: block;
  width: 100%;
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  font-weight: 700;
  color: var(--mesh-text);
  line-height: 1;
  text-align: center;
  letter-spacing: -0.02em;
  margin: 0;
  padding: 0;
}

.device-hero-grade {
  display: block;
  width: 100%;
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--mesh-text-muted);
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.device-hero-info {
  flex: 1;
  min-width: 0;
}

.device-hero-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.375rem;
}

.device-hero-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mesh-text);
  letter-spacing: -0.02em;
}

.device-hero-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: #7c8aa0;
  line-height: 1.5;
}

.device-hero-meta-muted {
  color: #4b5563;
}

.device-hero-last {
  font-size: 0.8125rem;
  color: var(--mesh-text-dim);
  margin-top: 0.5rem;
}

.device-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mesh-gap-grid, 0.75rem);
}

@media (min-width: 900px) {
  .device-spec-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.device-spec-card {
  background: var(--mesh-bg-card);
  border: 1px solid #252b3b;
  border-radius: 0.75rem;
  padding: 1rem 1.125rem;
}

.device-spec-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.device-spec-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--mesh-icon-muted, #64748b);
  flex-shrink: 0;
}

.device-spec-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mesh-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.device-spec-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mesh-text);
  line-height: 1.2;
}

.device-spec-detail {
  font-size: 0.75rem;
  color: var(--mesh-text-dim);
  margin-top: 0.25rem;
  line-height: 1.35;
}

.device-telemetry-panel {
  margin-bottom: 0;
}

.device-telemetry-chart-wrap {
  height: 14rem;
  padding: 0.5rem 1rem 1.25rem;
}

.device-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mesh-gap-grid, 0.75rem);
  align-items: stretch;
  border: none;
  border-radius: 0;
  overflow: visible;
}

@media (min-width: 900px) {
  .device-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mesh-gap-grid-lg, 1rem);
  }
}

.info-card {
  background: var(--mesh-bg-card, #161b22);
  border: 1px solid var(--mesh-border, #252b3b);
  border-radius: var(--mesh-radius, 0.75rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 0 8px 24px -14px var(--mesh-shadow, rgba(0, 0, 0, 0.28));
  background-clip: padding-box;
}

.info-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--mesh-border, #252b3b);
}

.info-card-header h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--mesh-text);
}

.info-card-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--mesh-icon, var(--mesh-accent, #14b8a6));
  flex-shrink: 0;
}

.info-card-body {
  padding: 0 1.25rem 1rem;
  flex: 1;
  min-height: 0;
}

.info-card-body .device-peripheral-badges {
  padding: 0;
}

.info-card-empty {
  color: var(--mesh-text-dim);
  font-size: 0.8125rem;
  padding: 0.5rem 0;
}

.info-card-hint {
  color: var(--mesh-text-muted);
  font-size: 0.75rem;
  margin: 0.75rem 0 0;
}

.device-hw-modules {
  margin-top: 0.75rem;
}

.info-card--tall .info-card-body {
  max-height: 320px;
  overflow-y: auto;
}

.info-count-badge {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--mesh-text-muted);
  background: rgba(148, 163, 184, 0.12);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}

.software-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.software-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(37, 43, 59, 0.45);
  font-size: 0.75rem;
  line-height: 1.35;
}

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

.software-name {
  color: var(--mesh-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.software-meta {
  color: #8b949e;
  flex-shrink: 0;
  text-align: right;
  max-width: 45%;
}

.software-more {
  color: var(--mesh-text-dim);
  font-size: 0.75rem;
  padding-top: 0.5rem;
  font-style: italic;
}

.software-warn {
  margin-top: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  font-size: 0.75rem;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(37, 43, 59, 0.8);
  font-size: 0.8125rem;
}

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

.info-row-key {
  color: #8b949e;
  flex-shrink: 0;
}

.info-row-val {
  color: var(--mesh-text);
  text-align: right;
  max-width: 62%;
  word-break: break-word;
  line-height: 1.4;
}

.info-row-val .info-row-link {
  color: var(--mesh-accent, #14b8a6);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.info-row-val .info-row-muted {
  color: var(--mesh-text-muted, #94a3b8);
  font-size: 0.92em;
}

.device-peripheral-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.device-data-frozen {
  opacity: 0.82;
}

.device-data-frozen::after {
  content: none;
}

.tm-sidebar-empty {
  color: var(--mesh-text-dim);
  font-size: 0.8125rem;
  padding: 1rem 0.75rem;
  line-height: 1.5;
}

.peripheral-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid;
}

.peripheral-badge.ok {
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
}

.peripheral-badge.error {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}

.peripheral-badge-icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.device-repair-panel {
  margin-bottom: 0.5rem;
}

.device-repair-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.repair-cancel-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.repair-card.running {
  outline: 2px solid color-mix(in srgb, #f59e0b 70%, transparent);
  position: relative;
}

.repair-card.running::after {
  content: 'En curso — clic para cancelar';
  display: block;
  margin-top: 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fbbf24;
}

.repair-header-icon {
  color: var(--mesh-icon, var(--mesh-accent, #14b8a6));
}

.repair-cards-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.875rem;
  padding-top: 1rem;
}

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

.repair-card--offline {
  border-color: rgba(56, 189, 248, 0.35);
}

.repair-card--offline:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.2);
}

.repair-card--admin {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(160deg, #2a261f 0%, #24262d 100%);
}

.repair-card--admin:hover:not(:disabled) {
  border-color: rgba(245, 158, 11, 0.7);
  background: linear-gradient(160deg, #322b1f 0%, #2a2d35 100%);
}

.repair-card-badge {
  display: inline-block;
  margin-top: 0.15rem;
  margin-left: 1.625rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 0.25rem;
  padding: 0.15rem 0.4rem;
}

.repair-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem 1.125rem;
  background: #24262d;
  border: 1px solid #2d3139;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  color: inherit;
}

.repair-card-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.repair-card:hover:not(:disabled) {
  border-color: #3d4451;
  background: #2a2d35;
}

.repair-card:disabled,
.repair-card.running {
  opacity: 0.55;
  cursor: wait;
}

.repair-card-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--mesh-icon, var(--mesh-accent, #14b8a6));
  flex-shrink: 0;
}

.repair-card-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--mesh-text);
  line-height: 1.3;
}

.repair-card-desc {
  font-size: 0.75rem;
  color: #9ca3af;
  line-height: 1.45;
  padding-left: 1.625rem;
}

.fleet-repair-panel .panel-header {
  justify-content: space-between;
}

.fleet-repair-target {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 12rem;
}

.fleet-repair-target-label {
  font-size: 0.6875rem;
  color: var(--mesh-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fleet-repair-combobox {
  position: relative;
  min-width: 16rem;
  max-width: 22rem;
}

.fleet-repair-select,
.fleet-repair-search {
  width: 100%;
  background: var(--mesh-bg-sidebar);
  border: 1px solid var(--mesh-border);
  border-radius: 0.5rem;
  color: var(--mesh-text);
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  min-width: 14rem;
  box-sizing: border-box;
}

.fleet-repair-search::-webkit-search-cancel-button {
  cursor: pointer;
}

.fleet-repair-select:focus,
.fleet-repair-search:focus {
  outline: none;
  border-color: #2dd4bf;
}

.fleet-repair-agent-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 14rem;
  overflow-y: auto;
  background: var(--mesh-bg-elevated, var(--mesh-bg-sidebar));
  border: 1px solid var(--mesh-border-strong, var(--mesh-border));
  border-radius: 0.5rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.fleet-repair-agent-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  cursor: pointer;
  color: var(--mesh-text);
  font-size: 0.8125rem;
}

.fleet-repair-agent-option:hover,
.fleet-repair-agent-option.is-selected {
  background: color-mix(in srgb, #2dd4bf 16%, transparent);
}

.fleet-repair-agent-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.fleet-repair-agent-status {
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: var(--mesh-text-dim);
}

.fleet-repair-agent-option.is-online .fleet-repair-agent-status {
  color: #34d399;
}

.fleet-repair-agent-empty {
  padding: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--mesh-text-dim);
}

.repair-log-panel {
  margin: 0;
  padding: 0.875rem 1rem;
  background: var(--mesh-bg-input);
  border: 1px solid var(--mesh-border);
  border-radius: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--mesh-text-muted);
  max-height: 10rem;
  overflow-y: auto;
  white-space: pre-wrap;
}

.repair-log-placeholder {
  color: #475569;
}

/* ── Pantalla de login ───────────────────────────────────── */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(ellipse at 50% 0%, rgba(20, 184, 166, 0.08) 0%, transparent 55%),
    rgba(11, 18, 32, 0.97);
  backdrop-filter: blur(8px);
}

.mesh-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.mesh-modal.hidden {
  display: none !important;
}

.mesh-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 22, 0.72);
  backdrop-filter: blur(4px);
}

.mesh-modal-card {
  position: relative;
  width: min(100%, 26rem);
  background: #12192b;
  border: 1px solid var(--mesh-border);
  border-radius: 0.85rem;
  padding: 1.35rem 1.35rem 1.15rem;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

.mesh-modal-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.mesh-modal-text {
  margin: 0 0 0.65rem;
  color: var(--mesh-text);
  font-size: 0.9rem;
}

.mesh-modal-warn {
  margin: 0 0 1rem;
  color: var(--mesh-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.mesh-modal-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  color: var(--mesh-text-muted);
}

.mesh-modal-card input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  border-radius: 0.5rem;
  border: 1px solid var(--mesh-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--mesh-text);
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.65rem;
}

.mesh-modal-error {
  color: #f87171;
  font-size: 0.8rem;
  margin: 0 0 0.65rem;
}

.mesh-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.sec-btn-danger {
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(220, 38, 38, 0.25);
  color: #fecaca;
  border-radius: 0.5rem;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  font-weight: 600;
}

.sec-btn-danger:hover {
  background: rgba(220, 38, 38, 0.4);
}

.login-card {
  width: 100%;
  max-width: 26rem;
  background: #12192b;
  border: 1px solid var(--mesh-border);
  border-radius: 1rem;
  padding: 2rem 2rem 1.75rem;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  text-align: center;
  width: 100%;
}

.login-subtitle {
  margin: 0.35rem auto 1.35rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--mesh-text-dim);
  text-align: center;
  text-wrap: balance;
  max-width: 22rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.login-field label {
  display: block;
  font-size: 0.8125rem;
  color: var(--mesh-text-muted);
  margin-bottom: 0.375rem;
}

.login-field input {
  width: 100%;
  background: #1a2332;
  border: 1px solid var(--mesh-border);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  color: var(--mesh-text);
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-field input:focus {
  outline: none;
  border-color: #2dd4bf;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
}

.login-password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-password-wrap input {
  padding-right: 2.75rem;
}

.login-pass-toggle {
  position: absolute;
  right: 0.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--mesh-text-dim);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.login-pass-toggle:hover {
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.12);
}

.login-pass-toggle-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.login-error {
  font-size: 0.8125rem;
  color: #f87171;
}

.login-error.hidden {
  display: none;
}

.login-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--mesh-border);
}

.login-submit {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.6875rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: linear-gradient(145deg, #2dd4bf 0%, #14b8a6 100%);
  color: var(--mesh-text);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.login-submit:hover {
  filter: brightness(1.06);
}

.login-submit:active {
  transform: scale(0.99);
}

.login-form.login-form--busy {
  display: none;
}

.login-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 0 1.5rem;
  text-align: center;
}

.login-loading.hidden {
  display: none;
}

.login-loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid rgba(148, 163, 184, 0.22);
  border-top-color: #2dd4bf;
  border-radius: 50%;
  animation: login-spin 0.75s linear infinite;
}

@keyframes login-spin {
  to {
    transform: rotate(360deg);
  }
}

.login-loading-text {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--mesh-text);
}

.login-loading-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--mesh-text-dim);
}

.login-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  filter: none;
}

/* ─── Tema y topbar ───────────────────────────────────────────────────────── */
.theme-select-label {
  font-size: 0.75rem;
  color: var(--mesh-text-dim);
  white-space: nowrap;
}
.theme-select {
  font-size: 0.8125rem;
  color: var(--mesh-text);
  background: var(--mesh-bg-panel);
  border: 1px solid var(--mesh-border);
  border-radius: 0.375rem;
  padding: 0.4rem 1.75rem 0.4rem 0.625rem;
  width: auto;
  min-width: 7.5rem;
  max-width: 9.5rem;
  flex-shrink: 0;
}
.device-topbar {
  gap: var(--mesh-topbar-inner-gap, 0.75rem);
}
.device-topbar-left {
  display: flex;
  align-items: center;
  gap: var(--mesh-topbar-inner-gap, 0.75rem);
  min-width: 0;
  flex: 1 1 auto;
}
.device-topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mesh-topbar-actions-gap, 0.625rem);
  flex-shrink: 0;
  flex-wrap: nowrap;
  margin-left: auto;
}
.device-topbar-logo {
  border-radius: 0.375rem;
}

.live-monitor-badge {
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid var(--mesh-border);
}
.live-monitor-badge.live-on {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(16, 185, 129, 0.08);
}
.live-monitor-badge.live-off {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.06);
}

.device-section-tab {
  background: transparent;
  border: none;
  cursor: pointer;
}
.device-section-panel.hidden { display: none; }

/* Inventario completo: hardware y software */
.device-inventory-flow {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 1200px;
}

.device-inventory-head {
  margin-bottom: 0;
}

.device-inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 0.75rem;
}

.device-inv-card {
  border: 1px solid #252b3b;
  border-radius: 0.75rem;
  background: var(--mesh-bg-card);
  overflow: hidden;
  min-width: 0;
}

.device-inv-card--wide {
  grid-column: 1 / -1;
}

.device-inv-card-title {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mesh-text);
  border-bottom: 1px solid #252b3b;
  background: color-mix(in srgb, var(--mesh-bg-elevated) 45%, transparent);
}

.device-inv-card-body {
  padding: 0.25rem 1rem 0.75rem;
}

.device-inv-card-body .info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.device-inv-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -0.25rem;
  padding: 0 0.25rem 0.25rem;
}

.device-inv-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.device-inv-table--software {
  min-width: 28rem;
}

.device-inv-table th,
.device-inv-table td {
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid rgba(37, 43, 59, 0.85);
  vertical-align: top;
}

.device-inv-table th {
  color: #8b949e;
  font-weight: 600;
  white-space: nowrap;
  background: color-mix(in srgb, var(--mesh-bg-elevated) 50%, transparent);
  position: sticky;
  top: 0;
  z-index: 1;
}

.device-inv-table td {
  color: var(--mesh-text);
  line-height: 1.35;
}

.device-inv-table tbody tr:last-child td {
  border-bottom: none;
}

.device-inv-table tbody tr:hover td {
  background: rgba(59, 130, 246, 0.04);
}

.device-inv-sw-name {
  font-weight: 500;
  max-width: 22rem;
  word-break: break-word;
}

.device-inv-status {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: capitalize;
}

.device-inv-status.ok {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}

.device-inv-status.warn {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
}

.device-inventory-software-panel {
  margin-top: 0.25rem;
}

.device-inventory-software-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.device-inventory-software-toolbar {
  padding: 0 1rem 0.75rem;
}

.device-inventory-search {
  width: 100%;
  max-width: 28rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #252b3b;
  border-radius: 0.5rem;
  background: var(--mesh-bg-panel);
  color: var(--mesh-text);
  font-size: 0.875rem;
}

.device-inventory-search::placeholder {
  color: var(--mesh-text-dim);
}

.device-inventory-search:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.device-inv-table-wrap--software {
  padding: 0 1rem 1rem;
}

.device-inventory-warn {
  margin: 0 1rem 0.75rem;
}

.device-inventory-loading {
  grid-column: 1 / -1;
  padding: 1.5rem;
  text-align: center;
}

.device-inv-link {
  font-size: inherit;
}

.device-predictive-risks-panel {
  border-color: rgba(245, 158, 11, 0.2);
}

.device-predictive-risks-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.device-predictive-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: calc(var(--mesh-padding-panel-y, 1rem) + var(--mesh-divider-gap, 0.75rem))
    var(--mesh-padding-panel-x, 1.25rem)
    var(--mesh-padding-panel-y, 1rem);
  max-height: min(42vh, calc(100dvh - var(--mesh-scroll-chrome, 14rem)));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.device-predictive-item {
  border: 1px solid #252b3b;
  border-left-width: 3px;
  border-radius: 0.625rem;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--mesh-bg-elevated) 45%, transparent);
}

.device-predictive-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.device-predictive-item-title {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mesh-text);
}

.device-predictive-item-desc {
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
  color: var(--mesh-text-muted);
  line-height: 1.45;
}

.device-predictive-ack {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
}

.device-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid #252b3b;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--mesh-bg-panel);
}

.device-quick-actions .mesh-remote-tile,
.device-quick-actions .device-quick-btn {
  flex: 1 1 auto;
  min-width: 5.5rem;
  border: none;
  border-radius: 0;
  /* Separador visible en todos (no solo en el activo). */
  border-right: 1px solid color-mix(in srgb, var(--mesh-accent, #14b8a6) 32%, var(--mesh-border, #252b3b));
  background: transparent;
  box-shadow: none;
}

.device-quick-actions .mesh-remote-tile:last-child,
.device-quick-actions .device-quick-btn:last-child {
  border-right: none;
}

.device-quick-actions .mesh-remote-tile:hover,
.device-quick-actions .device-quick-btn:hover {
  background: color-mix(in srgb, var(--mesh-border-strong, #334155) 40%, var(--mesh-bg-card));
  transform: none;
  /* Evitar que themes.css quite/repinte el separador al hacer hover. */
  border-color: transparent;
  border-right-color: color-mix(in srgb, var(--mesh-accent, #14b8a6) 32%, var(--mesh-border, #252b3b));
  box-shadow: none;
}
.device-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #cbd5e1;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid var(--mesh-border);
  background: var(--mesh-bg-panel);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.device-quick-btn svg { width: 1.125rem; height: 1.125rem; color: var(--mesh-icon, var(--mesh-accent, #14b8a6)); }
.device-quick-btn:hover { border-color: #334155; background: var(--mesh-bg-elevated); }

.mesh-remote-launcher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.mesh-remote-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 7rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid var(--mesh-border);
  background: linear-gradient(180deg, var(--mesh-bg-elevated) 0%, color-mix(in srgb, var(--mesh-bg-panel) 88%, var(--mesh-bg-elevated) 12%) 100%);
  color: var(--mesh-text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.mesh-remote-tile svg { width: 2rem; height: 2rem; color: var(--mesh-icon, var(--mesh-accent, #14b8a6)); }
.mesh-remote-tile:hover { border-color: var(--mesh-accent, #14b8a6); transform: translateY(-1px); }
.mesh-remote-tile.active { border-color: var(--mesh-accent, #14b8a6); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mesh-accent, #14b8a6) 25%, transparent); }

.device-quick-actions.mesh-remote-launcher {
  gap: 0;
}

.device-quick-actions .mesh-remote-tile {
  min-width: 5.5rem;
  padding: 0.875rem 0.65rem;
  border-radius: 0;
  border: none;
  border-right: 1px solid color-mix(in srgb, var(--mesh-accent, #14b8a6) 32%, var(--mesh-border, #252b3b));
  background: transparent;
  box-shadow: none;
}

.device-quick-actions .mesh-remote-tile:hover,
.device-quick-actions .mesh-remote-tile.active {
  border-color: transparent;
  border-right-color: color-mix(in srgb, var(--mesh-accent, #14b8a6) 32%, var(--mesh-border, #252b3b));
  background: color-mix(in srgb, var(--mesh-border-strong, #334155) 40%, var(--mesh-bg-card));
  transform: none;
  box-shadow: none;
}

.device-quick-actions .mesh-remote-tile.active {
  background: color-mix(in srgb, var(--mesh-accent, #14b8a6) 14%, transparent);
  font-weight: 600;
}

/* Mantener separador entre CMD y Reparaciones (CMD no es :last-child). */
.device-quick-actions > :last-child {
  border-right: none;
}

.device-quick-actions .device-quick-btn {
  justify-content: center;
  padding: 0.875rem 0.65rem;
}

/* ─── Disco / batería ───────────────────────────────────────────────────── */
.device-storage-section {
  width: 100%;
}

.device-storage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mesh-view-gap, 1.5rem);
  width: 100%;
}

@media (min-width: 900px) {
  .device-storage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

/* Disco + batería lado a lado; en columna estrecha la lista de discos va arriba */
@media (min-width: 900px) {
  .disk-hds {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .disk-hds-list {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
    gap: 0.4rem;
  }
  .disk-hds-item {
    flex: 1 1 11rem;
    max-width: 100%;
  }
}

/* ─── Disco estilo Hard Disk Sentinel ───────────────────────────────────── */
.disk-hds {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  min-height: 0;
}
@media (min-width: 720px) and (max-width: 899px) {
  .disk-hds {
    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
  }
}
.disk-hds-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 28rem;
  overflow: auto;
  padding-right: 0.15rem;
}
.disk-hds-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.7rem;
  border-radius: 0.55rem;
  border: 1px solid var(--mesh-border);
  background: var(--mesh-bg-inset);
  color: var(--mesh-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.disk-hds-item:hover {
  border-color: var(--mesh-accent);
  background: color-mix(in srgb, var(--mesh-accent) 8%, var(--mesh-bg-card));
}
.disk-hds-item.is-selected {
  border-color: var(--mesh-accent);
  background: color-mix(in srgb, var(--mesh-accent) 12%, var(--mesh-bg-card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mesh-accent) 20%, transparent);
}
.disk-hds-item-icon {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}
.disk-hds-item-icon--warn {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}
.disk-hds-item-icon--crit {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}
.disk-hds-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.disk-hds-item-title {
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--mesh-text, #e2e8f0);
  word-break: break-word;
}
.disk-hds-item-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.68rem;
}
.disk-hds-item-label { color: var(--mesh-text-dim, #94a3b8); }
.disk-hds-item-value { font-weight: 650; color: var(--mesh-text); }
.disk-hds-item-value--warn { color: #fbbf24; }
.disk-hds-item-value--crit { color: #f87171; }
.disk-hds-item-value--ok { color: #4ade80; }

.disk-hds-bar {
  height: 0.38rem;
  border-radius: 999px;
  background: rgba(51, 65, 85, 0.9);
  overflow: hidden;
}
.disk-hds-bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.45s ease;
}
.disk-hds-bar-fill--ok {
  background: linear-gradient(90deg, #16a34a, #4ade80);
}
.disk-hds-bar-fill--warn {
  background: linear-gradient(90deg, #d97706, #fbbf24);
}
.disk-hds-bar-fill--crit {
  background: linear-gradient(90deg, #dc2626, #f87171);
}
.disk-hds-bar-fill--muted {
  background: #64748b;
}

.disk-hds-overview {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.disk-hds-overview-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.disk-hds-overview-title strong {
  font-size: 0.95rem;
  color: var(--mesh-text, #f1f5f9);
}
.disk-hds-overview-title span {
  font-size: 0.75rem;
  color: var(--mesh-text-dim, #94a3b8);
}

.disk-hds-score-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: color-mix(in srgb, var(--mesh-bg-elevated) 45%, transparent);
}
.disk-hds-score-icon {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #22c55e;
}
.disk-hds-score-icon--warn { background: #f59e0b; }
.disk-hds-score-icon--crit { background: #ef4444; }
.disk-hds-score-icon--muted { background: #64748b; }
.disk-hds-score-main { min-width: 0; }
.disk-hds-score-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
}
.disk-hds-score-head strong { font-variant-numeric: tabular-nums; }
.disk-hds-grade {
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 5.5rem;
  text-align: right;
}
.disk-hds-grade--ok { color: #4ade80; }
.disk-hds-grade--warn { color: #fbbf24; }
.disk-hds-grade--crit { color: #f87171; }
.disk-hds-grade--muted { color: #94a3b8; }

.disk-hds-temp-chip {
  align-self: flex-start;
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: color-mix(in srgb, var(--mesh-border-strong) 40%, var(--mesh-bg-card));
}
.disk-hds-temp-chip--ok { border-color: rgba(74, 222, 128, 0.35); color: #bbf7d0; }
.disk-hds-temp-chip--warn { border-color: rgba(251, 191, 36, 0.4); color: #fde68a; }
.disk-hds-temp-chip--crit { border-color: rgba(248, 113, 113, 0.45); color: #fecaca; }
.disk-hds-temp-chip--muted { color: #94a3b8; }

.disk-hds--gauge {
  grid-template-columns: 1fr;
}
.disk-hds-list--chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: none;
}
.disk-hds-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: color-mix(in srgb, var(--mesh-bg-elevated) 55%, transparent);
  color: inherit;
  cursor: pointer;
  font-size: 0.72rem;
}
.disk-hds-chip strong {
  font-variant-numeric: tabular-nums;
  color: #7dd3fc;
}
.disk-hds-chip.is-selected {
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(15, 23, 42, 0.7));
}
.disk-hds-chip-name {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.disk-hds-overview--gauge {
  gap: 0.65rem;
}

.disk-hds-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.disk-hds-wear-src {
  margin-left: 0.25rem;
  font-size: 0.7rem;
  opacity: 0.75;
  font-weight: 500;
}

.disk-hds-summary {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  border: 1px solid color-mix(in srgb, #22c55e 40%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, #22c55e 22%, var(--mesh-bg-panel)) 0%, color-mix(in srgb, #16a34a 14%, var(--mesh-bg-card)) 100%);
  color: var(--mesh-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #22c55e 12%, transparent);
}
.disk-hds-summary--warn {
  border-color: color-mix(in srgb, #f59e0b 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 20%, var(--mesh-bg-panel)) 0%, color-mix(in srgb, #d97706 12%, var(--mesh-bg-card)) 100%);
  color: var(--mesh-text);
}
.disk-hds-summary--crit {
  border-color: color-mix(in srgb, #ef4444 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, #ef4444 20%, var(--mesh-bg-panel)) 0%, color-mix(in srgb, #dc2626 12%, var(--mesh-bg-card)) 100%);
  color: var(--mesh-text);
}
.disk-hds-summary--muted {
  border-color: var(--mesh-border);
  background: color-mix(in srgb, var(--mesh-accent) 8%, var(--mesh-bg-panel));
  color: var(--mesh-text-muted);
}

.device-storage-grid .storage-health-card.panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--mesh-accent) 28%, var(--mesh-border));
  border-radius: var(--mesh-radius, 0.75rem);
  overflow: hidden;
  background: linear-gradient(165deg, color-mix(in srgb, var(--mesh-accent) 10%, var(--mesh-bg-panel)) 0%, var(--mesh-bg-panel) 45%, color-mix(in srgb, var(--mesh-accent-2) 8%, var(--mesh-bg-card)) 100%);
  color: var(--mesh-text);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--mesh-accent) 10%, transparent);
}

#battery-health-card.storage-health-card.panel {
  border-color: color-mix(in srgb, #10b981 30%, var(--mesh-border));
  background: linear-gradient(165deg, color-mix(in srgb, #10b981 12%, var(--mesh-bg-panel)) 0%, var(--mesh-bg-panel) 45%, color-mix(in srgb, #34d399 8%, var(--mesh-bg-card)) 100%);
  box-shadow: 0 10px 28px color-mix(in srgb, #10b981 10%, transparent);
}

.storage-health-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin: 0;
  border-bottom: none;
}

.storage-health-header-text {
  flex: 1 1 14rem;
  min-width: 0;
}

.storage-health-kpis {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.storage-kpi-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  min-width: 7.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.625rem;
  border: 1px solid rgba(56, 189, 248, 0.28);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, color-mix(in srgb, var(--mesh-bg-elevated) 50%, transparent) 100%);
}

.storage-kpi-chip--battery {
  border-color: rgba(52, 211, 153, 0.28);
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, color-mix(in srgb, var(--mesh-bg-elevated) 50%, transparent) 100%);
}

.storage-kpi-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mesh-text-muted);
}

.storage-kpi-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #5eead4;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.storage-kpi-chip--disk .storage-kpi-value {
  color: #7dd3fc;
}

.storage-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid var(--mesh-border);
  background: color-mix(in srgb, var(--mesh-bg-elevated) 65%, transparent);
  color: var(--mesh-text-muted);
}

.storage-sync-pill::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.storage-sync-pill--live {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(16, 185, 129, 0.08);
}

.storage-sync-pill--wait {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.06);
}

.storage-sync-pill--offline {
  color: var(--mesh-text-muted);
  border-color: #334155;
}

.storage-health-body {
  flex: 1 1 auto;
  padding: var(--mesh-padding-panel-y, 1rem) var(--mesh-padding-panel-x, 1.25rem);
  padding-top: calc(var(--mesh-padding-panel-y, 1rem) + var(--mesh-divider-gap, 0.75rem));
  border-top: 1px solid color-mix(in srgb, var(--mesh-accent) 22%, var(--mesh-border));
  background: color-mix(in srgb, var(--mesh-accent) 6%, transparent);
}

#battery-health-card .storage-health-body {
  border-top-color: color-mix(in srgb, #10b981 28%, var(--mesh-border));
  background: color-mix(in srgb, #10b981 7%, transparent);
}

.storage-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.625rem;
  padding: 1.25rem 1rem 0.5rem;
  min-height: 10rem;
}

.storage-empty-state .health-gauge {
  margin-bottom: 0.25rem;
}

.storage-empty-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mesh-text);
}

.storage-empty-hint {
  margin: 0;
  max-width: 22rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--mesh-text-dim);
}

.storage-health-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.storage-health-index { font-size: 0.8125rem; color: var(--mesh-text-muted); }
.storage-health-index strong { color: var(--mesh-accent-hover, #2dd4bf); }
.storage-health-inner {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.25rem 0 0;
}

.battery-info-heading {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mesh-accent);
}

#battery-health-card .battery-info-heading {
  color: #059669;
}
[data-theme="oscuro"] #battery-health-card .battery-info-heading,
[data-theme="midnight"] #battery-health-card .battery-info-heading {
  color: #34d399;
}

.storage-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0.75rem 0 0.35rem;
  padding: 0.75rem 0.85rem;
  background: color-mix(in srgb, var(--mesh-accent) 8%, var(--mesh-bg-panel));
  border: 1px solid color-mix(in srgb, var(--mesh-accent) 22%, var(--mesh-border));
  border-radius: 0.65rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mesh-accent) 6%, transparent);
}

#battery-health-card .storage-metric-grid {
  background: color-mix(in srgb, #10b981 10%, var(--mesh-bg-panel));
  border-color: color-mix(in srgb, #10b981 24%, var(--mesh-border));
}

.storage-metric-item dt {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mesh-accent);
  margin-bottom: 0.15rem;
  font-weight: 650;
}

#battery-health-card .storage-metric-item dt {
  color: #059669;
}
[data-theme="oscuro"] #battery-health-card .storage-metric-item dt,
[data-theme="midnight"] #battery-health-card .storage-metric-item dt {
  color: #6ee7b7;
}

/* ─── Gauges radiales disco / batería ───────────────────────────────────── */
.storage-health-visual {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.storage-health-visual--solo {
  justify-content: center;
  margin-bottom: 0.5rem;
}

.storage-health-visual-body {
  flex: 1 1 auto;
  min-width: 0;
}

.storage-drive-card--hero .storage-health-visual {
  margin-bottom: 1rem;
}

.health-gauge {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 7.75rem;
  height: 7.75rem;
}

.health-gauge--sm {
  width: 5.75rem;
  height: 5.75rem;
}

.health-gauge--lg {
  width: 9.25rem;
  height: 9.25rem;
}

.health-gauge-svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
  overflow: visible;
}

.health-gauge-track {
  fill: none;
  stroke: #1e293b;
  stroke-width: 9;
}

.health-gauge-track--dashed {
  stroke-dasharray: 6 8;
  opacity: 0.65;
}

.health-gauge-track--inner {
  stroke-width: 6.5;
  opacity: 0.9;
}

.health-gauge-fill {
  fill: none;
  stroke: #22c55e;
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.health-gauge-fill--inner {
  stroke: #38bdf8;
  stroke-width: 6.5;
  filter: drop-shadow(0 0 4px color-mix(in srgb, #38bdf8 45%, transparent));
}

.health-gauge-fill--ok,
.health-gauge-fill--inner.health-gauge-fill--ok {
  stroke: #22c55e;
  filter: drop-shadow(0 0 5px color-mix(in srgb, #22c55e 45%, transparent));
}

.health-gauge-fill--warn,
.health-gauge-fill--inner.health-gauge-fill--warn {
  stroke: #eab308;
  filter: drop-shadow(0 0 5px color-mix(in srgb, #eab308 45%, transparent));
}

.health-gauge-fill--crit,
.health-gauge-fill--inner.health-gauge-fill--crit {
  stroke: #ef4444;
  filter: drop-shadow(0 0 5px color-mix(in srgb, #ef4444 45%, transparent));
}

.health-gauge-fill.is-complete {
  stroke-linecap: butt;
}

.health-gauge--ok .health-gauge-fill:not(.health-gauge-fill--inner) {
  stroke: #22c55e;
}

.health-gauge--warn .health-gauge-fill:not(.health-gauge-fill--inner) {
  stroke: #eab308;
}

.health-gauge--crit .health-gauge-fill:not(.health-gauge-fill--inner) {
  stroke: #ef4444;
}

.health-gauge--muted .health-gauge-fill:not(.health-gauge-fill--inner) {
  stroke: #64748b;
}

.health-gauge--ok .health-gauge-num { color: #22c55e; }
.health-gauge--warn .health-gauge-num { color: #eab308; }
.health-gauge--crit .health-gauge-num { color: #ef4444; }

.health-gauge--loading .health-gauge-fill--pulse {
  stroke: #334155;
  animation: health-gauge-pulse 1.4s ease-in-out infinite;
}

.health-gauge--empty .health-gauge-track--dashed {
  stroke: #475569;
}

/* Texto centrado con el mismo grid que el SVG (sin absolute/translate) */
.health-gauge-center {
  grid-area: 1 / 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56%;
  height: auto;
  margin: 0;
  padding: 0;
  gap: 0.08rem;
  pointer-events: none;
  box-sizing: border-box;
  text-align: center;
  line-height: 1;
}

.health-gauge--dual .health-gauge-center {
  width: 44%;
}

.health-gauge--sm .health-gauge-center {
  width: 54%;
}

.health-gauge-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mesh-text);
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.health-gauge-num {
  display: inline-block;
  line-height: 1;
}

.health-gauge-pct {
  display: inline-block;
  font-size: 0.62em;
  font-weight: 650;
  line-height: 1;
  margin-left: 0.04em;
  opacity: 0.92;
}

.health-gauge--lg .health-gauge-value {
  font-size: 1.2rem;
}

.health-gauge--sm .health-gauge-value {
  font-size: 0.88rem;
}

.health-gauge--dual .health-gauge-value {
  font-size: 0.98rem;
}

.health-gauge-value--muted {
  color: var(--mesh-text-dim);
  display: block;
}

.health-gauge-label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.health-gauge--lg .health-gauge-label {
  font-size: 0.58rem;
}

.health-gauge--sm .health-gauge-label {
  font-size: 0.5rem;
  letter-spacing: 0.04em;
}

.health-gauge-sublabel {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.48rem;
  color: #64748b;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.health-gauge--dual .health-gauge-sublabel {
  font-size: 0.45rem;
}

.health-gauge-skeleton {
  display: block;
  width: 2.25rem;
  height: 1rem;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
  animation: health-gauge-shimmer 1.2s ease-in-out infinite;
}

.storage-empty-hint {
  text-align: center;
  margin-top: 0.5rem;
}

@keyframes health-gauge-pulse {
  0%, 100% { stroke-dashoffset: 72; opacity: 0.45; }
  50% { stroke-dashoffset: 38; opacity: 1; }
}

@keyframes health-gauge-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 479px) {
  .storage-health-visual:not(.storage-health-visual--solo) {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .storage-health-visual:not(.storage-health-visual--solo) .health-gauge {
    margin: 0 auto;
  }
}

.storage-row-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mesh-text);
  margin-bottom: 0.5rem;
}
.storage-row-head strong { color: #2dd4bf; }
.storage-progress {
  height: 0.5rem;
  background: var(--mesh-bg-elevated);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 0.625rem;
}
.storage-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #14b8a6, #2dd4bf);
  border-radius: 9999px;
}
.storage-badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.5rem; }
.storage-badge {
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid var(--mesh-border);
}
.storage-badge.ok {
  color: #0f766e;
  background: color-mix(in srgb, #14b8a6 18%, transparent);
  border-color: color-mix(in srgb, #14b8a6 40%, transparent);
}
.storage-badge.warn {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  border-color: color-mix(in srgb, #f59e0b 42%, transparent);
}
.storage-badge.crit {
  color: #b91c1c;
  background: color-mix(in srgb, #ef4444 16%, transparent);
  border-color: color-mix(in srgb, #ef4444 40%, transparent);
}
.storage-badge.muted {
  color: var(--mesh-accent);
  background: color-mix(in srgb, var(--mesh-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--mesh-accent) 28%, transparent);
}
[data-theme="oscuro"] .storage-badge.ok,
[data-theme="midnight"] .storage-badge.ok { color: #5eead4; }
[data-theme="oscuro"] .storage-badge.warn,
[data-theme="midnight"] .storage-badge.warn { color: #fbbf24; }
[data-theme="oscuro"] .storage-badge.crit,
[data-theme="midnight"] .storage-badge.crit { color: #fca5a5; }
[data-theme="oscuro"] .storage-badge.muted,
[data-theme="midnight"] .storage-badge.muted { color: #7dd3fc; }
.storage-drives-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.storage-drive-card {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--mesh-accent) 18%, var(--mesh-border));
}
.storage-drive-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.storage-meta-footer {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--mesh-accent) 18%, var(--mesh-border));
}
.storage-progress-fill--ok { background: linear-gradient(90deg, #14b8a6, #2dd4bf); }
.storage-progress-fill--warn { background: linear-gradient(90deg, #d97706, #fbbf24); }
.storage-progress-fill--crit { background: linear-gradient(90deg, #dc2626, #f87171); }
.storage-progress-fill--muted { background: #475569; }
.storage-model, .storage-meta { font-size: 0.75rem; color: var(--mesh-text-muted); }
.storage-meta-muted { font-size: 0.6875rem; color: var(--mesh-text-dim); margin-top: 0.25rem; }

.battery-info-block {
  margin-top: 0.85rem;
}
.battery-info-block:first-of-type {
  margin-top: 0.65rem;
}
.battery-info-heading {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mesh-accent);
}
.battery-info-block .storage-metric-grid {
  margin-top: 0;
}

.storage-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0.75rem 0 0.35rem;
  padding: 0.75rem 0.85rem;
  background: color-mix(in srgb, var(--mesh-accent) 8%, var(--mesh-bg-panel));
  border: 1px solid color-mix(in srgb, var(--mesh-accent) 22%, var(--mesh-border));
  border-radius: 0.65rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mesh-accent) 6%, transparent);
}
.storage-metric-item { min-width: 0; }
.storage-metric-item--empty dd {
  color: var(--mesh-text-dim);
  opacity: 0.75;
}
.storage-metric-item dt {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mesh-accent);
  margin-bottom: 0.15rem;
  font-weight: 650;
}
#battery-health-card .storage-metric-grid {
  background: color-mix(in srgb, #10b981 10%, var(--mesh-bg-panel));
  border-color: color-mix(in srgb, #10b981 24%, var(--mesh-border));
}
#battery-health-card .storage-metric-item dt {
  color: #059669;
}
[data-theme="oscuro"] #battery-health-card .storage-metric-item dt,
[data-theme="midnight"] #battery-health-card .storage-metric-item dt {
  color: #6ee7b7;
}
.storage-metric-item dd {
  font-size: 0.8125rem;
  color: var(--mesh-text);
  margin: 0;
  word-break: break-word;
}
@media (min-width: 900px) {
  .storage-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─── Control bloqueo / desbloqueo (vista equipo) ─────────────────────────── */
.device-equipment-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mesh-gap-grid, 0.75rem);
}

@media (min-width: 768px) {
  .device-equipment-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.equipment-control-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--mesh-radius, 0.75rem);
  border: 1px solid var(--mesh-border, #252b3b);
  background: var(--mesh-bg-card, #161b22);
}

.device-block.tm-shell,
.device-block.device-telemetry-panel {
  border-color: var(--mesh-border, #252b3b);
  border-radius: var(--mesh-radius, 0.75rem);
}

.equipment-control-lock {
  border-color: color-mix(in srgb, #ef4444 40%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, #ef4444 14%, var(--mesh-bg-panel)) 0%, color-mix(in srgb, #f43f5e 8%, var(--mesh-bg-card)) 100%);
}
.device-summary-stack .equipment-control-lock {
  background: linear-gradient(135deg, color-mix(in srgb, #ef4444 18%, var(--mesh-bg-panel)) 0%, color-mix(in srgb, #fb7185 10%, var(--mesh-bg-card)) 100%);
}

.equipment-control-unlock {
  border-color: color-mix(in srgb, #10b981 40%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, #10b981 14%, var(--mesh-bg-panel)) 0%, color-mix(in srgb, #34d399 8%, var(--mesh-bg-card)) 100%);
}
.device-summary-stack .equipment-control-unlock {
  background: linear-gradient(135deg, color-mix(in srgb, #10b981 18%, var(--mesh-bg-panel)) 0%, color-mix(in srgb, #6ee7b7 10%, var(--mesh-bg-card)) 100%);
}

.equipment-control-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  flex-shrink: 0;
}

.equipment-control-lock .equipment-control-icon {
  background: color-mix(in srgb, #ef4444 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 35%, transparent);
}

.equipment-control-unlock .equipment-control-icon {
  background: color-mix(in srgb, #10b981 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #10b981 35%, transparent);
}

.equipment-control-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.equipment-control-lock .equipment-control-icon svg { color: #ef4444; }
.equipment-control-unlock .equipment-control-icon svg { color: #059669; }

[data-theme="oscuro"] .equipment-control-lock .equipment-control-icon svg,
[data-theme="midnight"] .equipment-control-lock .equipment-control-icon svg { color: #fca5a5; }
[data-theme="oscuro"] .equipment-control-unlock .equipment-control-icon svg,
[data-theme="midnight"] .equipment-control-unlock .equipment-control-icon svg { color: #6ee7b7; }

.equipment-control-body {
  flex: 1;
  min-width: 0;
}

.equipment-control-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--mesh-text);
  margin: 0 0 0.2rem;
}

.equipment-control-lock .equipment-control-title { color: #b91c1c; }
.equipment-control-unlock .equipment-control-title { color: #047857; }
[data-theme="oscuro"] .equipment-control-lock .equipment-control-title,
[data-theme="midnight"] .equipment-control-lock .equipment-control-title { color: #fecaca; }
[data-theme="oscuro"] .equipment-control-unlock .equipment-control-title,
[data-theme="midnight"] .equipment-control-unlock .equipment-control-title { color: #a7f3d0; }

.equipment-control-desc {
  font-size: 0.75rem;
  color: var(--mesh-text-muted);
  line-height: 1.4;
  margin: 0;
}

.equipment-control-btn {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.55rem 1.1rem;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
}

.equipment-control-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.equipment-control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.equipment-control-btn-lock {
  color: #ffffff;
  background: linear-gradient(145deg, #fb7185 0%, #e11d48 100%);
  border-color: #be123c;
  box-shadow: 0 4px 14px color-mix(in srgb, #ef4444 40%, transparent);
}

.equipment-control-btn-unlock {
  color: #ffffff;
  background: linear-gradient(145deg, #4ade80 0%, #059669 100%);
  border-color: #047857;
  box-shadow: 0 4px 14px color-mix(in srgb, #10b981 40%, transparent);
}

.equipment-lock-status {
  grid-column: 1 / -1;
  margin: 0 0 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
  color: #fecaca;
}

.equipment-lock-status--section {
  margin-bottom: 1rem;
}

.equipment-lock-status.hidden {
  display: none;
}

.equipment-lock-status strong {
  color: #fff;
  font-weight: 600;
}

.equipment-lock-status code {
  font-family: ui-monospace, monospace;
  font-size: 0.875rem;
  color: #fde68a;
}

/* ─── Arriendo ───────────────────────────────────────────────────────────── */
.rental-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.rental-card {
  padding: 1.25rem;
  border-radius: 0.85rem;
  border: 1px solid var(--mesh-border);
  background: var(--mesh-bg-panel);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.rental-lock {
  background: linear-gradient(160deg, color-mix(in srgb, #ef4444 18%, var(--mesh-bg-panel)) 0%, var(--mesh-bg-panel) 70%);
  border-color: color-mix(in srgb, #ef4444 45%, var(--mesh-border));
  box-shadow: 0 8px 22px color-mix(in srgb, #ef4444 16%, transparent);
}
.rental-unlock {
  background: linear-gradient(160deg, color-mix(in srgb, #10b981 18%, var(--mesh-bg-panel)) 0%, var(--mesh-bg-panel) 70%);
  border-color: color-mix(in srgb, #10b981 45%, var(--mesh-border));
  box-shadow: 0 8px 22px color-mix(in srgb, #10b981 16%, transparent);
}
.rental-card:hover {
  transform: translateY(-1px);
}
.rental-card svg {
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.55rem;
  stroke-width: 2;
}
.rental-lock svg { color: #fb7185; filter: drop-shadow(0 0 8px color-mix(in srgb, #ef4444 45%, transparent)); }
.rental-unlock svg { color: #34d399; filter: drop-shadow(0 0 8px color-mix(in srgb, #10b981 45%, transparent)); }
.rental-card h4 { font-size: 0.9375rem; font-weight: 700; color: var(--mesh-text); margin-bottom: 0.375rem; }
.rental-card p { font-size: 0.75rem; color: var(--mesh-text-dim); line-height: 1.45; margin-bottom: 0.875rem; }
.rental-btn {
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.55rem 1.15rem;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
}
.rental-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.rental-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.rental-btn-lock {
  color: #ffffff;
  background: linear-gradient(145deg, #fb7185 0%, #e11d48 100%);
  border-color: #be123c;
  box-shadow: 0 4px 14px color-mix(in srgb, #ef4444 42%, transparent);
}
.rental-btn-unlock {
  color: #ffffff;
  background: linear-gradient(145deg, #4ade80 0%, #059669 100%);
  border-color: #047857;
  box-shadow: 0 4px 14px color-mix(in srgb, #10b981 42%, transparent);
}

/* ─── Log de reparaciones ────────────────────────────────────────────────── */
.repair-run {
  border: 1px solid var(--mesh-border);
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  margin-bottom: 0.75rem;
  background: color-mix(in srgb, var(--mesh-bg-panel) 90%, var(--mesh-bg-elevated) 10%);
}
.repair-run--ok { border-left: 3px solid #10b981; }
.repair-run--fail { border-left: 3px solid #ef4444; }
.repair-run-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.repair-run-badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  flex-shrink: 0;
}
.repair-run-badge.ok { color: #fff; background: rgba(16,185,129,0.85); }
.repair-run-badge.fail { color: #fff; background: rgba(239,68,68,0.85); }
.repair-run-title { font-size: 0.9375rem; font-weight: 600; color: var(--mesh-text); }
.repair-run-sub { font-size: 0.75rem; color: var(--mesh-text-dim); margin-top: 0.125rem; }
.repair-run-summary { font-size: 0.8125rem; color: var(--mesh-text-muted); margin: 0.5rem 0; }
.repair-run-steps { font-size: 0.75rem; color: var(--mesh-text-muted); padding-left: 1.25rem; }
.repair-run-error { font-size: 0.8125rem; color: #fca5a5; margin-top: 0.5rem; }
.repair-log-empty { font-size: 0.8125rem; color: var(--mesh-text-dim); }

/* ─── Acceso remoto estilo MeshCentral ───────────────────────────────────── */
.mc-remote-shell {
  border: 1px solid color-mix(in srgb, var(--mesh-accent) 28%, var(--mesh-border));
  border-radius: 0.65rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mesh-accent) 10%, var(--mesh-bg-panel)) 0%, var(--mesh-bg-panel) 100%);
  overflow: hidden;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--mesh-accent) 10%, transparent);
}
.mc-tabs {
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mesh-accent) 16%, var(--mesh-bg-elevated)) 0%, var(--mesh-bg-elevated) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--mesh-accent) 24%, var(--mesh-border));
}
.mc-tab {
  padding: 0.55rem 1.1rem;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--mesh-text-muted);
  background: transparent;
  border: none;
  border-right: 1px solid color-mix(in srgb, var(--mesh-accent) 18%, var(--mesh-border));
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mc-tab:hover {
  background: color-mix(in srgb, var(--mesh-accent) 14%, transparent);
  color: var(--mesh-text);
  transform: translateY(-1px);
}

.mc-tab.active {
  background: linear-gradient(145deg, var(--mesh-accent-2) 0%, var(--mesh-accent) 100%);
  color: var(--mesh-on-accent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--mesh-accent-hover) 70%, transparent);
  animation: menu-tab-activate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.mc-panel { background: color-mix(in srgb, var(--mesh-accent) 4%, var(--mesh-bg-panel)); }
.mc-panel.hidden { display: none; }
.mc-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mesh-accent) 14%, var(--mesh-bg-elevated)) 0%, var(--mesh-bg-elevated) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--mesh-accent) 22%, var(--mesh-border));
}
.mc-panel-head-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.mc-panel-head-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
.mc-panel-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mesh-text);
  margin: 0;
}
.mc-panel-logo { border-radius: 4px; }
.mc-conn-label {
  font-size: 0.6875rem;
  color: var(--mesh-text-muted);
}
.mc-conn-label.connected { color: #34d399; }
.mc-status-text {
  font-size: 0.75rem;
  color: var(--mesh-text-dim);
  margin: 0;
}
.mc-status-bar {
  font-size: 0.75rem;
  color: var(--mesh-text-dim);
  margin: 0;
  padding: 0.45rem 1rem;
  background: color-mix(in srgb, var(--mesh-accent) 8%, var(--mesh-bg-inset));
  border-bottom: 1px solid color-mix(in srgb, var(--mesh-accent) 18%, var(--mesh-border));
}
.mc-status-error { color: #f87171; }

.mc-files-toolbar,
.mc-term-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mesh-accent) 16%, var(--mesh-bg-elevated)) 0%, var(--mesh-bg-elevated) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--mesh-accent) 28%, var(--mesh-border));
}
.mc-toolbar-sep {
  width: 1px;
  height: 1.25rem;
  background: color-mix(in srgb, var(--mesh-accent) 35%, var(--mesh-border));
  margin: 0 0.25rem;
}
.mc-tool-btn {
  font-size: 0.75rem;
  font-weight: 650;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--mesh-accent) 28%, var(--mesh-border));
  background: color-mix(in srgb, var(--mesh-accent) 10%, var(--mesh-bg-card));
  color: var(--mesh-text);
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
.mc-tool-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mesh-accent) 20%, var(--mesh-bg-card));
  border-color: var(--mesh-accent);
  transform: translateY(-1px);
}
.mc-tool-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mc-tool-primary,
.mc-tool-btn.is-active {
  border-color: color-mix(in srgb, var(--mesh-accent) 65%, #0f766e);
  color: #042f2e;
  background: linear-gradient(145deg, #5eead4 0%, #14b8a6 100%);
  box-shadow: 0 4px 14px color-mix(in srgb, #14b8a6 32%, transparent);
}
.mc-tool-btn.mc-shell-pulse {
  animation: mc-shell-select 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);
}
@keyframes mc-shell-select {
  0% { transform: scale(0.9); filter: brightness(1.25); }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}
.mc-tool-danger { border-color: #7f1d1d; color: #fca5a5; }

.mc-files-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--mesh-accent) 8%, var(--mesh-bg-inset));
  border-bottom: 1px solid color-mix(in srgb, var(--mesh-accent) 20%, var(--mesh-border));
}
.mc-crumb {
  background: none;
  border: none;
  color: var(--mesh-accent-hover, #2dd4bf);
  cursor: pointer;
  padding: 0.125rem 0.25rem;
  font-size: inherit;
}
.mc-crumb:hover { text-decoration: underline; }
.mc-crumb.active { color: var(--mesh-text); cursor: default; }
.mc-crumb-sep { color: var(--mesh-text-dim); }

.mc-files-table-wrap {
  max-height: 420px;
  overflow: auto;
}
.mc-files-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.mc-files-table thead {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mesh-accent) 16%, var(--mesh-bg-elevated)) 0%, var(--mesh-bg-elevated) 100%);
  z-index: 1;
}
.mc-files-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  color: var(--mesh-text-muted);
  font-weight: 500;
  border-bottom: 1px solid #2a2a2a;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.mc-files-table th.sorted { color: #7ec8ff; }
.mc-files-table th.sorted::after {
  content: attr(data-dir);
  font-size: 0.625rem;
  margin-left: 0.25rem;
  text-transform: uppercase;
}
.mc-files-table td {
  padding: 0.4rem 0.75rem;
  color: var(--mesh-text);
  border-bottom: 1px solid #1e1e1e;
}
.mc-col-size, .mc-col-date, .mc-col-type {
  color: var(--mesh-text-muted);
  white-space: nowrap;
}
.mc-col-size { width: 6rem; }
.mc-col-date { width: 10rem; }
.mc-col-type { width: 8rem; }

.mc-file-row { cursor: pointer; transition: background 0.1s; }
.mc-file-row:hover { background: rgba(30, 87, 153, 0.15); }
.mc-file-row.selected { background: rgba(30, 87, 153, 0.28); }
.mc-file-row.is-dir .mc-file-name { color: #7ec8ff; }
.mc-file-icon { margin-right: 0.5rem; }
.mc-files-empty {
  text-align: center;
  color: var(--mesh-text-dim);
  padding: 2rem !important;
}

#remote-terminal {
  height: 420px;
  padding: 0.35rem;
  background: linear-gradient(165deg, #07111f 0%, #0a1628 55%, #0b1a2e 100%);
  border-top: 1px solid color-mix(in srgb, var(--mesh-accent) 22%, transparent);
  overflow: hidden;
}
#remote-terminal .xterm {
  height: 100%;
  padding: 0.35rem 0.5rem;
}
#remote-terminal .xterm-viewport {
  background: transparent !important;
}
#remote-panel-terminal.mc-panel {
  border: 1px solid color-mix(in srgb, var(--mesh-accent) 28%, var(--mesh-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--mesh-accent) 8%, var(--mesh-bg-panel)) 0%, var(--mesh-bg-panel) 100%);
  overflow: hidden;
}
#remote-panel-terminal .mc-panel-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--mesh-accent) 14%, var(--mesh-bg-elevated)) 0%, var(--mesh-bg-elevated) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--mesh-accent) 22%, var(--mesh-border));
}
.remote-desktop-wrap {
  position: relative;
  background: linear-gradient(165deg, color-mix(in srgb, var(--mesh-accent) 18%, #0b1220) 0%, #0f172a 55%, color-mix(in srgb, var(--mesh-accent-2, #6366f1) 12%, #020617) 100%);
  overflow: auto;
  flex: 1 1 auto;
  min-height: 320px;
}
.mc-desktop-panel {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 0 !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mesh-accent) 10%, var(--mesh-bg-panel)) 0%, var(--mesh-bg-panel) 100%);
  border: 1px solid color-mix(in srgb, var(--mesh-accent) 28%, var(--mesh-border));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--mesh-accent) 12%, transparent);
}
.mc-desktop-panel.hidden { display: none !important; }
.mc-desktop-shell {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  height: min(82vh, 920px);
  border: 1px solid color-mix(in srgb, var(--mesh-accent) 30%, var(--mesh-border));
  background: color-mix(in srgb, var(--mesh-accent) 6%, var(--mesh-bg-card));
  border-radius: 0.65rem;
  overflow: hidden;
}
.mc-desktop-topbar,
.mc-desktop-bottombar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.75rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mesh-accent) 16%, var(--mesh-bg-elevated)) 0%, var(--mesh-bg-elevated) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--mesh-accent) 22%, var(--mesh-border));
  flex-shrink: 0;
  flex-wrap: wrap;
}
.mc-desktop-bottombar {
  border-bottom: none;
  border-top: 1px solid color-mix(in srgb, var(--mesh-accent) 22%, var(--mesh-border));
}
.mc-desktop-topbar-left,
.mc-desktop-topbar-right,
.mc-desktop-bottombar-left,
.mc-desktop-bottombar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.mc-desktop-topbar-center,
.mc-desktop-bottombar-center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-desktop-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mesh-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-desktop-btn {
  font-size: 0.75rem;
  font-weight: 650;
  padding: 0.35rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--mesh-accent) 35%, var(--mesh-border));
  background: color-mix(in srgb, var(--mesh-accent) 12%, var(--mesh-bg-card));
  color: var(--mesh-text);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.mc-desktop-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mesh-accent) 22%, var(--mesh-bg-card));
  border-color: var(--mesh-accent);
}
.mc-desktop-btn-primary {
  background: linear-gradient(145deg, #5eead4 0%, #14b8a6 100%);
  border-color: #0f766e;
  color: #042f2e;
  font-weight: 700;
  box-shadow: 0 4px 12px color-mix(in srgb, #14b8a6 30%, transparent);
}
.mc-desktop-btn-primary:hover:not(:disabled) {
  filter: brightness(1.06);
}
.mc-desktop-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.mc-desktop-conn {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mesh-text-muted);
}
.mc-desktop-conn.is-on { color: #4ade80; }
.mc-desktop-conn.is-wait { color: #fbbf24; }
.mc-desktop-conn.is-off { color: var(--mesh-text-muted); }
.mc-desktop-conn.is-err { color: #f87171; }
.mc-desktop-select {
  font-size: 0.75rem;
  padding: 0.28rem 0.45rem;
  border-radius: 3px;
  border: 1px solid #555;
  background: #f5f5f5;
  color: #111;
}
.mc-desktop-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--mesh-text);
  cursor: pointer;
  user-select: none;
}
.mc-desktop-stats {
  font-size: 0.75rem;
  font-family: ui-monospace, monospace;
  color: #cbd5e1;
  white-space: nowrap;
}
.mc-desktop-viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  background: linear-gradient(160deg, color-mix(in srgb, var(--mesh-accent) 14%, #0b1220) 0%, #0f172a 50%, color-mix(in srgb, #6366f1 10%, #020617) 100%);
}
.mc-desktop-viewport.is-fit {
  overflow: hidden;
}
.mc-desktop-viewport.is-fit #remote-desktop-canvas {
  /* El tamaño exacto lo calcula applyDesktopFit() (contain ancho+alto). */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  image-rendering: auto;
}
.mc-desktop-shell:fullscreen {
  width: 100vw;
  height: 100vh;
  max-height: none;
}
.mc-desktop-shell:fullscreen .mc-desktop-viewport {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
.remote-desktop-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  white-space: pre-line;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--mesh-text);
  background: linear-gradient(165deg, color-mix(in srgb, var(--mesh-accent) 22%, rgba(8, 12, 22, 0.92)) 0%, rgba(8, 12, 22, 0.88) 100%);
  pointer-events: none;
}
.remote-desktop-overlay.hidden { display: none; }
.remote-desktop-overlay.is-waiting { color: #99f6e4; }
.remote-desktop-overlay.is-error { color: #fecaca; }
.remote-desktop-overlay .mc-desktop-overlay-hint {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--mesh-accent) 55%, #cbd5e1);
  max-width: 28rem;
}
.mc-status-text.mc-status-error,
.mc-status-bar.mc-status-error {
  color: #f87171;
}
#remote-desktop-canvas {
  display: block;
  flex-shrink: 0;
  max-width: none;
  height: auto;
  cursor: default;
  background: color-mix(in srgb, var(--mesh-accent) 8%, #020617);
  image-rendering: auto;
}
#remote-desktop-canvas.can-control {
  cursor: none;
}
.mc-desktop-viewport.is-fit #remote-desktop-canvas {
  /* overridden by applyDesktopFit */
}
.remote-desktop-local-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 22px;
  height: 22px;
  pointer-events: none;
  transform: translate(-2px, -1px);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
  will-change: left, top;
}
.remote-desktop-local-cursor.is-hidden {
  display: none;
}
.remote-desktop-local-cursor svg {
  display: block;
  overflow: visible;
}

.panel-highlight {
  animation: panel-flash 1.3s ease;
}
@keyframes panel-flash {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 2px rgba(20,184,166,0.45); }
}

.hidden { display: none !important; }

/* Plataforma enterprise */
.platform-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.platform-card {
  border: 1px solid var(--mesh-border, #2a3344);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--mesh-bg-subtle, color-mix(in srgb, var(--mesh-bg-elevated) 35%, transparent));
}
.platform-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.platform-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
  color: var(--mesh-text-muted, #94a3b8);
}
.platform-pill.ok { background: rgba(20, 184, 166, 0.18); color: #5eead4; }
.platform-pill.off { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.platform-meta { font-size: 0.75rem; color: var(--mesh-text-muted, #94a3b8); margin: 0.35rem 0 0; }
.platform-steps { margin: 0.5rem 0 0 1.1rem; font-size: 0.8rem; color: var(--mesh-text, #e2e8f0); }
.platform-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.platform-table th, .platform-table td {
  text-align: left;
  padding: 0.45rem 0.35rem;
  border-bottom: 1px solid var(--mesh-border, #2a3344);
}
.platform-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.platform-stat {
  min-width: 110px;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--mesh-border, #2a3344);
  background: var(--mesh-bg-subtle, color-mix(in srgb, var(--mesh-bg-elevated) 35%, transparent));
}
.platform-stat span { display: block; font-size: 0.7rem; color: var(--mesh-text-muted, #94a3b8); }
.platform-stat b { font-size: 1.05rem; color: var(--mesh-text, #f1f5f9); }



.mesh-modal-copy-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.mesh-modal-copy-row input {
  flex: 1;
  min-width: 0;
}
.sec-hint--create-pass {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.85;
}