@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Superficies */
  --bg-base:        #111214;
  --bg-surface:     #1C1D20;
  --bg-elevated:    #252629;
  --bg-overlay:     rgba(0,0,0,0.6);

  /* Bordes */
  --border-subtle:  #2E2F33;
  --border-default: #3A3B40;
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      14px;

  /* Marca / Acento coral */
  --brand-500:      #E8785A;
  --brand-400:      #ED957C;
  --brand-600:      #D45F42;

  /* Semántica */
  --success-bg:     rgba(100, 140, 107, 0.15);
  --success-fg:     #7FB98A;
  --warning-bg:     rgba(195, 162, 80, 0.15);
  --warning-fg:     #C9A84C;
  --danger-bg:      rgba(188, 80, 75, 0.15);
  --danger-fg:      #D96E6A;
  --info-bg:        rgba(117, 179, 200, 0.15);
  --info-fg:        #75B3C8;

  /* Prioridades */
  --priority-critical: #D96E6A;
  --priority-high:     #E8785A;
  --priority-medium:   #C9A84C;
  --priority-low:      #7FB98A;

  /* Tipografía */
  --text-primary:   #F0F0F2;
  --text-secondary: #9A9BA0;
  --text-muted:     #5E5F65;
  --font-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* Escala tipográfica */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;

  /* Data Viz */
  --viz-coral:  #ED957C;
  --viz-sage:   #8BA982;
  --viz-cyan:   #75B3C8;
  --viz-purple: #8A7DAB;
  --viz-amber:  #C9A84C;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.6);

  /* Layout */
  --sidebar-w:  240px;
  --header-h:   56px;
}

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

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Utilidades */
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-base   { font-size: var(--text-base); }
.text-md     { font-size: var(--text-md); }
.text-lg     { font-size: var(--text-lg); }
.text-xl     { font-size: var(--text-xl); }
.text-2xl    { font-size: var(--text-2xl); }
.text-3xl    { font-size: var(--text-3xl); }

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-brand     { color: var(--brand-500); }
.text-success   { color: var(--success-fg); }
.text-warning   { color: var(--warning-fg); }
.text-danger    { color: var(--danger-fg); }
.text-info      { color: var(--info-fg); }

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.font-mono { font-family: var(--font-mono); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

.grid { display: grid; }

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

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 9999px; }

.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.ml-auto { margin-left: auto; }
.mr-2 { margin-right: 8px; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }

.surface { background: var(--bg-surface); }
.elevated { background: var(--bg-elevated); }
.border { border: 1px solid var(--border-default); }
.border-subtle { border: 1px solid var(--border-subtle); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.hidden { display: none !important; }
.invisible { visibility: hidden; }
.opacity-50 { opacity: 0.5; }

.cursor-pointer { cursor: pointer; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }

.select-none { user-select: none; }

@media print {
  #sidebar, #app-header { display: none !important; }
  #app-content { margin: 0 !important; padding: 12px !important; }
  body { background: white; color: black; }
  * { -webkit-print-color-adjust: exact; }
}