:root {
  --wj-surface-0: #f5f7fb;
  --wj-surface-1: #ffffff;
  --wj-surface-2: #f0f3f8;
  --wj-text-1: #111827;
  --wj-text-2: #667085;
  --wj-border-1: #d6dbe5;
  --wj-border-focus: #2563eb;
  --wj-danger: #b42318;
  --wj-space-1: 4px;
  --wj-space-2: 8px;
  --wj-space-3: 12px;
  --wj-space-4: 16px;
  --wj-space-5: 24px;
  --wj-radius-sm: 8px;
  --wj-radius-md: 12px;
  --wj-radius-lg: 18px;
  --wj-shadow-1: 0 8px 24px rgba(15, 23, 42, 0.08);
  --wj-z-content: 0;
  --wj-z-sticky: 10;
  --wj-z-overlay: 40;
  --wj-z-toast: 60;
  --wj-safe-top: env(safe-area-inset-top, 0px);
  --wj-safe-right: env(safe-area-inset-right, 0px);
  --wj-safe-bottom: env(safe-area-inset-bottom, 0px);
  --wj-safe-left: env(safe-area-inset-left, 0px);
  color-scheme: light;
}

[data-theme="dark"] {
  --wj-surface-0: #0f1115;
  --wj-surface-1: #171a21;
  --wj-surface-2: #20242d;
  --wj-text-1: #f4f6fb;
  --wj-text-2: #aab2c0;
  --wj-border-1: #353b47;
  --wj-border-focus: #7aa2ff;
  --wj-danger: #ff8b83;
  --wj-shadow-1: 0 12px 28px rgba(0, 0, 0, 0.32);
  color-scheme: dark;
}

.wj-button {
  min-height: 40px;
  border: 1px solid var(--wj-border-1);
  border-radius: var(--wj-radius-md);
  background: var(--wj-surface-1);
  color: var(--wj-text-1);
  padding: 0 var(--wj-space-4);
  font: inherit;
  cursor: pointer;
}

.wj-button:focus-visible,
.wj-field-control:focus-visible {
  outline: 2px solid var(--wj-border-focus);
  outline-offset: 2px;
}

.wj-field {
  display: grid;
  gap: var(--wj-space-2);
}

.wj-field-control {
  min-height: 42px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--wj-border-1);
  border-radius: var(--wj-radius-md);
  background: var(--wj-surface-1);
  color: var(--wj-text-1);
  padding: var(--wj-space-2) var(--wj-space-3);
  font: inherit;
}


html, body { margin: 0; min-height: 100%; background: var(--wj-surface-0); color: var(--wj-text-1); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#app-shell { min-height: 100dvh; display: grid; background: var(--wj-surface-0); }
#app-nav { background: var(--wj-surface-1); border-right: 1px solid var(--wj-border-1); }
#app-content { min-width: 0; min-height: 0; overflow: auto; padding: var(--wj-space-5); padding-bottom: calc(var(--wj-space-5) + var(--wj-safe-bottom)); }
#app-overlay-root { position: relative; z-index: var(--wj-z-overlay); }
#app-feedback-root { position: fixed; right: calc(var(--wj-space-4) + var(--wj-safe-right)); bottom: calc(var(--wj-space-4) + var(--wj-safe-bottom)); z-index: var(--wj-z-toast); }

#app-shell[data-layout="desktop"] { grid-template-columns: 240px minmax(0, 1fr); }
#app-shell[data-layout="tablet"] { grid-template-columns: 88px minmax(0, 1fr); }
#app-shell[data-layout="mobile"] { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
#app-shell[data-layout="mobile"] #app-nav { grid-row: 2; border-right: 0; border-top: 1px solid var(--wj-border-1); padding-bottom: var(--wj-safe-bottom); }

.wj-workspace { display: grid; min-height: 100%; background: var(--wj-surface-1); border: 1px solid var(--wj-border-1); border-radius: var(--wj-radius-lg); overflow: hidden; }
#app-shell[data-layout="desktop"] .wj-workspace { grid-template-columns: minmax(320px, 40%) minmax(0, 1fr); }
#app-shell[data-layout="tablet"] .wj-workspace { grid-template-columns: minmax(280px, 44%) minmax(0, 1fr); }
#app-shell[data-layout="mobile"] .wj-workspace { display: block; }
#app-shell[data-layout="mobile"] .wj-workspace[data-detail-open="true"] [data-workspace-master] { display: none; }
#app-shell[data-layout="mobile"] .wj-workspace[data-detail-open="false"] [data-workspace-detail] { display: none; }
[data-workspace-master], [data-workspace-detail] { min-width: 0; min-height: 0; overflow: auto; }
[data-workspace-detail] { border-left: 1px solid var(--wj-border-1); }
#app-shell[data-layout="mobile"] [data-workspace-detail] { border-left: 0; }


[data-domain="inicio"] { display: grid; gap: var(--wj-space-5); max-width: 1440px; margin: 0 auto; }
[data-domain="inicio"] .inicio-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--wj-space-4); }
[data-domain="inicio"] .inicio-hero h1 { margin: var(--wj-space-1) 0; font-size: clamp(28px, 3vw, 42px); }
[data-domain="inicio"] .inicio-hero p, [data-domain="inicio"] small { color: var(--wj-text-2); }
[data-domain="inicio"] .inicio-live { display: grid; min-width: 132px; padding: var(--wj-space-3); border: 1px solid var(--wj-border-1); border-radius: var(--wj-radius-md); background: var(--wj-surface-1); }
[data-domain="inicio"] .inicio-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wj-space-3); }
[data-domain="inicio"] .inicio-kpi { display: grid; justify-items: start; min-height: 112px; padding: var(--wj-space-4); }
[data-domain="inicio"] .inicio-kpi strong { font-size: 32px; }
[data-domain="inicio"] .inicio-grid { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: var(--wj-space-3); }
[data-domain="inicio"] .inicio-card { min-width: 0; padding: var(--wj-space-4); border: 1px solid var(--wj-border-1); border-radius: var(--wj-radius-lg); background: var(--wj-surface-1); }
[data-domain="inicio"] .inicio-card h2, [data-domain="inicio"] .inicio-quick h2 { margin-top: 0; }
[data-domain="inicio"] .inicio-completion { font-size: 42px; }
[data-domain="inicio"] [data-attention], [data-domain="inicio"] [data-centers] { display: grid; gap: var(--wj-space-2); }
[data-domain="inicio"] .inicio-row, [data-domain="inicio"] .inicio-quick-card { min-height: 44px; border: 1px solid var(--wj-border-1); border-radius: var(--wj-radius-md); background: var(--wj-surface-1); color: var(--wj-text-1); text-align: left; padding: var(--wj-space-3); cursor: pointer; }
[data-domain="inicio"] .inicio-center { padding: var(--wj-space-2) 0; border-bottom: 1px solid var(--wj-border-1); }
[data-domain="inicio"] [data-quick] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wj-space-3); }
@media (max-width: 1100px) { [data-domain="inicio"] .inicio-kpis { grid-template-columns: repeat(2, 1fr); } [data-domain="inicio"] .inicio-grid { grid-template-columns: 1fr 1fr; } [data-domain="inicio"] [data-quick] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { [data-domain="inicio"] .inicio-hero { align-items: stretch; flex-direction: column; } [data-domain="inicio"] .inicio-kpis, [data-domain="inicio"] .inicio-grid, [data-domain="inicio"] [data-quick] { grid-template-columns: 1fr; } }