/* === tokens.css === */
/* ============================================================
   Design tokens — paleta moderna e sóbria
   Primário: laranja contábil refinado · Secundário: verde água
   ============================================================ */

:root {
  /* ---- cores: marca ---- */
  --evtc-color-primary:        #E07A2C;
  --evtc-color-primary-hover:  #C26517;
  --evtc-color-primary-active: #A85610;
  --evtc-color-primary-soft:   #FDF1E6;
  --evtc-color-primary-tint:   #FBE7D5;

  --evtc-color-secondary:        #2BA4A0;
  --evtc-color-secondary-hover:  #228883;
  --evtc-color-secondary-active: #196A66;
  --evtc-color-secondary-soft:   #E6F5F4;
  --evtc-color-secondary-tint:   #C8EAE8;

  /* ---- cores: superfícies (off-white levemente quente) ---- */
  --evtc-color-bg-app:     #FAF9F7;
  --evtc-color-bg-surface: #FFFFFF;
  --evtc-color-bg-muted:   #F4F2EE;
  --evtc-color-bg-hover:   #FDF1E6;     /* hover suave alinha com primária */

  /* ---- cores: bordas (warm-grey) ---- */
  --evtc-color-border:        #ECE7DF;
  --evtc-color-border-strong: #D6CFC2;
  --evtc-color-divider:       #F1ECE3;

  /* ---- cores: texto ---- */
  --evtc-color-text:        #1B1A18;
  --evtc-color-text-muted:  #5C5A56;
  --evtc-color-text-subtle: #8B8884;
  --evtc-color-text-faint:  #B6B2AB;

  /* ---- numéricos (verde para positivo, laranja-vermelho para negativo) ---- */
  --evtc-color-positive: #1F7A4F;
  --evtc-color-negative: #B83A2A;

  /* ---- status: tints suaves, texto profundo ---- */
  --evtc-color-status-ok-bg:     #E6F4EA;
  --evtc-color-status-ok-text:   #1F6E3D;
  --evtc-color-status-warn-bg:   #FEF4D7;
  --evtc-color-status-warn-text: #8C5C00;
  --evtc-color-status-error-bg:  #FCE9E9;
  --evtc-color-status-error-text:#A8261C;
  --evtc-color-status-success-bg:  #E6F4EA;
  --evtc-color-status-success-text:#1F6E3D;
  --evtc-color-status-neutral-bg:  #F1ECE3;
  --evtc-color-status-neutral-text:#5C5A56;

  /* ---- realces estruturais ---- */
  --evtc-color-row-elim:     var(--evtc-color-secondary-soft);
  --evtc-color-row-minority: var(--evtc-color-primary-soft);

  --evtc-color-callout-info-bg:     var(--evtc-color-primary-soft);
  --evtc-color-callout-info-border: var(--evtc-color-primary);
  --evtc-color-callout-warn-bg:     #FEF4D7;
  --evtc-color-callout-warn-border: #D89A12;

  /* ---- tipografia ---- */
  --evtc-font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --evtc-font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, "Roboto Mono", monospace;

  --evtc-text-xs:   0.72rem;
  --evtc-text-sm:   0.81rem;
  --evtc-text-md:   0.88rem;
  --evtc-text-base: 0.94rem;
  --evtc-text-lg:   1.05rem;
  --evtc-text-xl:   1.25rem;
  --evtc-text-2xl:  1.6rem;
  --evtc-text-3xl:  2rem;

  --evtc-line-tight:   1.25;
  --evtc-line-base:    1.5;
  --evtc-line-relaxed: 1.7;

  --evtc-letter-tag:  0.025em;
  --evtc-letter-loose: 0.04em;

  --evtc-weight-regular: 400;
  --evtc-weight-medium:  500;
  --evtc-weight-semi:    600;
  --evtc-weight-bold:    700;

  /* ---- espaçamento ---- */
  --evtc-space-1: 0.25rem;
  --evtc-space-2: 0.5rem;
  --evtc-space-3: 0.75rem;
  --evtc-space-4: 1rem;
  --evtc-space-5: 1.25rem;
  --evtc-space-6: 1.75rem;
  --evtc-space-8: 2.5rem;

  /* ---- bordas e raios ---- */
  --evtc-radius-sm:   4px;
  --evtc-radius-md:   8px;
  --evtc-radius-lg:   12px;
  --evtc-radius-xl:   16px;
  --evtc-radius-pill: 999px;

  /* ---- sombras (mais suaves, modernas) ---- */
  --evtc-shadow-sm:        0 1px 2px rgba(28, 24, 19, 0.04);
  --evtc-shadow-card:      0 1px 2px rgba(28, 24, 19, 0.04), 0 4px 16px rgba(28, 24, 19, 0.04);
  --evtc-shadow-popover:   0 4px 16px rgba(28, 24, 19, 0.08), 0 1px 4px rgba(28, 24, 19, 0.04);
  --evtc-shadow-focus:     0 0 0 3px rgba(224, 122, 44, 0.18);
  --evtc-shadow-focus-sec: 0 0 0 3px rgba(43, 164, 160, 0.18);

  /* ---- transições ---- */
  --evtc-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --evtc-dur-fast: 120ms;
  --evtc-dur-base: 180ms;
}

/* === base.css === */
/* Reset/base mínimo. Carregado uma vez no preview. */

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

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--evtc-font-sans);
  font-size: var(--evtc-text-base);
  font-weight: var(--evtc-weight-regular);
  color: var(--evtc-color-text);
  background: var(--evtc-color-bg-app);
  line-height: var(--evtc-line-base);
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--evtc-weight-semi);
  letter-spacing: -0.011em;
  color: var(--evtc-color-text);
  margin: 0;
}

a {
  color: var(--evtc-color-primary);
  text-decoration: none;
  transition: color var(--evtc-dur-fast) var(--evtc-ease-out);
}
a:hover { color: var(--evtc-color-primary-hover); }

code {
  background: var(--evtc-color-bg-muted);
  padding: 0.1em 0.4em;
  border-radius: var(--evtc-radius-sm);
  font-family: var(--evtc-font-mono);
  font-size: 0.88em;
  color: var(--evtc-color-text);
  border: 1px solid var(--evtc-color-border);
}

::selection {
  background: var(--evtc-color-primary-tint);
  color: var(--evtc-color-text);
}

/* === components/button.css === */
.evtc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--evtc-space-2);
  padding: 0.55rem 1rem;
  border: 1px solid var(--evtc-color-primary);
  background: var(--evtc-color-primary);
  color: #fff;
  border-radius: var(--evtc-radius-md);
  font-size: var(--evtc-text-md);
  font-weight: var(--evtc-weight-medium);
  font-family: inherit;
  cursor: pointer;
  line-height: 1.2;
  letter-spacing: 0;
  box-shadow: var(--evtc-shadow-sm);
  transition: background-color var(--evtc-dur-fast) var(--evtc-ease-out),
              border-color var(--evtc-dur-fast) var(--evtc-ease-out),
              box-shadow var(--evtc-dur-fast) var(--evtc-ease-out),
              color var(--evtc-dur-fast) var(--evtc-ease-out),
              transform var(--evtc-dur-fast) var(--evtc-ease-out);
}
.evtc-btn:hover {
  background: var(--evtc-color-primary-hover);
  border-color: var(--evtc-color-primary-hover);
}
.evtc-btn:active {
  background: var(--evtc-color-primary-active);
  border-color: var(--evtc-color-primary-active);
  transform: translateY(1px);
}
.evtc-btn:focus-visible {
  outline: none;
  box-shadow: var(--evtc-shadow-focus);
}
.evtc-btn:disabled,
.evtc-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.evtc-btn:disabled:hover,
.evtc-btn[disabled]:hover {
  background: var(--evtc-color-primary);
  border-color: var(--evtc-color-primary);
}

/* Ghost (outline) */
.evtc-btn--ghost {
  background: transparent;
  color: var(--evtc-color-primary);
  border-color: var(--evtc-color-primary);
  box-shadow: none;
}
.evtc-btn--ghost:hover {
  background: var(--evtc-color-primary-soft);
  color: var(--evtc-color-primary-hover);
  border-color: var(--evtc-color-primary-hover);
}
.evtc-btn--ghost.evtc-btn--neutral {
  color: var(--evtc-color-text-muted);
  border-color: var(--evtc-color-border-strong);
}
.evtc-btn--ghost.evtc-btn--neutral:hover {
  background: var(--evtc-color-bg-muted);
  color: var(--evtc-color-text);
  border-color: var(--evtc-color-text-subtle);
}

/* Secondary (verde água) */
.evtc-btn--secondary {
  background: var(--evtc-color-secondary);
  border-color: var(--evtc-color-secondary);
}
.evtc-btn--secondary:hover {
  background: var(--evtc-color-secondary-hover);
  border-color: var(--evtc-color-secondary-hover);
}
.evtc-btn--secondary:active {
  background: var(--evtc-color-secondary-active);
  border-color: var(--evtc-color-secondary-active);
}
.evtc-btn--secondary:focus-visible {
  box-shadow: var(--evtc-shadow-focus-sec);
}
.evtc-btn--secondary.evtc-btn--ghost {
  background: transparent;
  color: var(--evtc-color-secondary);
  border-color: var(--evtc-color-secondary);
}
.evtc-btn--secondary.evtc-btn--ghost:hover {
  background: var(--evtc-color-secondary-soft);
  color: var(--evtc-color-secondary-hover);
  border-color: var(--evtc-color-secondary-hover);
}

/* Danger */
.evtc-btn--danger {
  background: var(--evtc-color-status-error-text);
  border-color: var(--evtc-color-status-error-text);
}
.evtc-btn--danger:hover {
  background: #8E1F16;
  border-color: #8E1F16;
}

/* Sizes */
.evtc-btn--sm {
  padding: 0.35rem 0.7rem;
  font-size: var(--evtc-text-sm);
}
.evtc-btn--lg {
  padding: 0.75rem 1.4rem;
  font-size: var(--evtc-text-base);
}

/* === components/pill.css === */
.evtc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.15rem 0.6rem;
  border-radius: var(--evtc-radius-pill);
  background: var(--evtc-color-status-neutral-bg);
  color: var(--evtc-color-status-neutral-text);
  font-size: var(--evtc-text-xs);
  font-weight: var(--evtc-weight-medium);
  font-family: inherit;
  letter-spacing: 0.01em;
  vertical-align: middle;
  line-height: 1.5;
  white-space: nowrap;
}
.evtc-pill--ok       { background: var(--evtc-color-status-ok-bg);     color: var(--evtc-color-status-ok-text); }
.evtc-pill--warn     { background: var(--evtc-color-status-warn-bg);   color: var(--evtc-color-status-warn-text); }
.evtc-pill--fix      { background: var(--evtc-color-status-error-bg);  color: var(--evtc-color-status-error-text); }
.evtc-pill--primary  { background: var(--evtc-color-primary-soft);     color: var(--evtc-color-primary-hover); }
.evtc-pill--secondary{ background: var(--evtc-color-secondary-soft);   color: var(--evtc-color-secondary-hover); }

.evtc-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: var(--evtc-radius-sm);
  background: var(--evtc-color-bg-muted);
  color: var(--evtc-color-text-muted);
  font-size: var(--evtc-text-xs);
  font-weight: var(--evtc-weight-medium);
  margin-right: 2px;
  font-family: inherit;
  border: 1px solid var(--evtc-color-border);
}

/* === components/stat-card.css === */
.evtc-stat-row {
  display: flex;
  gap: var(--evtc-space-4);
  flex-wrap: wrap;
}
.evtc-stat {
  background: var(--evtc-color-bg-surface);
  padding: var(--evtc-space-4) var(--evtc-space-5);
  border: 1px solid var(--evtc-color-border);
  border-radius: var(--evtc-radius-lg);
  min-width: 160px;
  flex: 1 1 auto;
  box-shadow: var(--evtc-shadow-sm);
  transition: box-shadow var(--evtc-dur-base) var(--evtc-ease-out),
              border-color var(--evtc-dur-base) var(--evtc-ease-out);
}
.evtc-stat:hover {
  box-shadow: var(--evtc-shadow-card);
  border-color: var(--evtc-color-border-strong);
}
.evtc-stat__label {
  font-size: var(--evtc-text-xs);
  color: var(--evtc-color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--evtc-letter-loose);
  font-weight: var(--evtc-weight-medium);
  margin-bottom: var(--evtc-space-2);
}
.evtc-stat__value {
  font-size: var(--evtc-text-2xl);
  font-weight: var(--evtc-weight-semi);
  font-variant-numeric: tabular-nums;
  font-family: var(--evtc-font-mono);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--evtc-color-text);
}
.evtc-stat__value--positive { color: var(--evtc-color-positive); }
.evtc-stat__value--negative { color: var(--evtc-color-negative); }
.evtc-stat__caption {
  font-size: var(--evtc-text-sm);
  color: var(--evtc-color-text-subtle);
  margin-top: var(--evtc-space-1);
}

/* === components/table.css === */
.evtc-table {
  width: 100%;
  background: var(--evtc-color-bg-surface);
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--evtc-text-md);
  border: 1px solid var(--evtc-color-border);
  border-radius: var(--evtc-radius-lg);
  overflow: hidden;
  box-shadow: var(--evtc-shadow-sm);
}
.evtc-table th,
.evtc-table td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--evtc-color-divider);
  vertical-align: middle;
}
.evtc-table tbody tr:last-child td { border-bottom: 0; }

.evtc-table th {
  background: var(--evtc-color-bg-muted);
  position: sticky;
  top: 0;
  font-weight: var(--evtc-weight-semi);
  font-size: var(--evtc-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--evtc-letter-loose);
  color: var(--evtc-color-text-muted);
  border-bottom: 1px solid var(--evtc-color-border);
}

.evtc-table td.evtc-table__num,
.evtc-table th.evtc-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--evtc-font-mono);
  font-size: var(--evtc-text-sm);
}
.evtc-table td.evtc-table__code {
  font-family: var(--evtc-font-mono);
  font-size: var(--evtc-text-sm);
  color: var(--evtc-color-text-muted);
}

.evtc-table tbody tr {
  transition: background-color var(--evtc-dur-fast) var(--evtc-ease-out);
}
.evtc-table tr.evtc-table__row--clickable { cursor: pointer; }
.evtc-table tr.evtc-table__row--clickable:hover { background: var(--evtc-color-bg-hover); }

.evtc-table tr.evtc-table__row--minority { background: var(--evtc-color-row-minority); }
.evtc-table tr.evtc-table__row--minority:hover { background: var(--evtc-color-primary-tint); }
.evtc-table tr.evtc-table__row--elim { background: var(--evtc-color-row-elim); }
.evtc-table tr.evtc-table__row--elim:hover { background: var(--evtc-color-secondary-tint); }

.evtc-num--positive { color: var(--evtc-color-positive); font-weight: var(--evtc-weight-medium); }
.evtc-num--negative { color: var(--evtc-color-negative); font-weight: var(--evtc-weight-medium); }

/* === components/form-field.css === */
.evtc-field { margin-bottom: var(--evtc-space-4); }
.evtc-field__label {
  display: block;
  font-size: var(--evtc-text-xs);
  color: var(--evtc-color-text-muted);
  font-weight: var(--evtc-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--evtc-letter-loose);
  margin-bottom: var(--evtc-space-2);
}
.evtc-input,
.evtc-select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--evtc-color-border-strong);
  border-radius: var(--evtc-radius-md);
  font-size: var(--evtc-text-md);
  font-family: inherit;
  background: var(--evtc-color-bg-surface);
  color: var(--evtc-color-text);
  line-height: 1.4;
  transition: border-color var(--evtc-dur-fast) var(--evtc-ease-out),
              box-shadow var(--evtc-dur-fast) var(--evtc-ease-out);
}
.evtc-input::placeholder { color: var(--evtc-color-text-faint); }
.evtc-input:hover,
.evtc-select:hover {
  border-color: var(--evtc-color-text-subtle);
}
.evtc-input:focus,
.evtc-select:focus,
.evtc-input:focus-visible,
.evtc-select:focus-visible {
  outline: none;
  border-color: var(--evtc-color-primary);
  box-shadow: var(--evtc-shadow-focus);
}
.evtc-input:disabled,
.evtc-select:disabled {
  background: var(--evtc-color-bg-muted);
  color: var(--evtc-color-text-subtle);
  cursor: not-allowed;
}

.evtc-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--evtc-space-4);
  align-items: end;
}

/* === components/callout.css === */
.evtc-callout {
  background: var(--evtc-color-callout-info-bg);
  border: 1px solid var(--evtc-color-primary-tint);
  border-left: 4px solid var(--evtc-color-callout-info-border);
  padding: var(--evtc-space-4) var(--evtc-space-5);
  border-radius: 0 var(--evtc-radius-md) var(--evtc-radius-md) 0;
  font-size: var(--evtc-text-md);
  color: var(--evtc-color-text);
  line-height: var(--evtc-line-base);
}
.evtc-callout strong { font-weight: var(--evtc-weight-semi); }
.evtc-callout p { margin: 0.4rem 0 0; }
.evtc-callout p:first-child { margin-top: 0; }

.evtc-callout--warn {
  background: var(--evtc-color-callout-warn-bg);
  border-color: #F2DDA7;
  border-left-color: var(--evtc-color-callout-warn-border);
}
.evtc-callout--ok {
  background: var(--evtc-color-status-success-bg);
  border-color: #C5E5CF;
  border-left-color: var(--evtc-color-status-success-text);
  color: var(--evtc-color-status-success-text);
}
.evtc-callout--error {
  background: var(--evtc-color-status-error-bg);
  border-color: #F2C9C5;
  border-left-color: var(--evtc-color-status-error-text);
  color: var(--evtc-color-status-error-text);
}
.evtc-callout--secondary {
  background: var(--evtc-color-secondary-soft);
  border-color: var(--evtc-color-secondary-tint);
  border-left-color: var(--evtc-color-secondary);
}

/* === components/nav.css === */
.evtc-nav {
  margin-bottom: var(--evtc-space-6);
  font-size: var(--evtc-text-md);
  display: flex;
  gap: var(--evtc-space-2);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--evtc-space-2) var(--evtc-space-3);
  background: var(--evtc-color-bg-surface);
  border: 1px solid var(--evtc-color-border);
  border-radius: var(--evtc-radius-lg);
  box-shadow: var(--evtc-shadow-sm);
}
.evtc-nav__link {
  color: var(--evtc-color-text-muted);
  text-decoration: none;
  padding: 0.4rem 0.8rem;
  border-radius: var(--evtc-radius-md);
  font-weight: var(--evtc-weight-medium);
  transition: background-color var(--evtc-dur-fast) var(--evtc-ease-out),
              color var(--evtc-dur-fast) var(--evtc-ease-out);
}
.evtc-nav__link:hover {
  text-decoration: none;
  color: var(--evtc-color-text);
  background: var(--evtc-color-bg-muted);
}
.evtc-nav__link--active {
  color: var(--evtc-color-primary);
  background: var(--evtc-color-primary-soft);
  font-weight: var(--evtc-weight-semi);
}
.evtc-nav__link--active:hover {
  background: var(--evtc-color-primary-tint);
  color: var(--evtc-color-primary-hover);
}

/* Seletor de competência embutido na nav. Empurra para o canto direito. */
.evtc-period {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--evtc-space-2);
  font-size: var(--evtc-text-sm);
}
.evtc-period__label {
  color: var(--evtc-color-text-subtle);
  font-weight: var(--evtc-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--evtc-letter-loose);
  font-size: var(--evtc-text-xs);
}
.evtc-period__select {
  min-width: 200px;
  padding: 0.4rem 0.6rem;
  font-size: var(--evtc-text-sm);
}
.evtc-period__badges {
  display: inline-flex;
  gap: var(--evtc-space-1);
}

/* === components/panel.css === */
.evtc-panel {
  background: var(--evtc-color-bg-surface);
  padding: var(--evtc-space-5) var(--evtc-space-6);
  border: 1px solid var(--evtc-color-border);
  border-radius: var(--evtc-radius-lg);
  margin-bottom: var(--evtc-space-5);
  box-shadow: var(--evtc-shadow-sm);
}
.evtc-panel__title {
  margin: 0 0 var(--evtc-space-2);
  font-size: var(--evtc-text-xl);
  font-weight: var(--evtc-weight-semi);
  letter-spacing: -0.011em;
  color: var(--evtc-color-text);
}
.evtc-panel__subtitle {
  color: var(--evtc-color-text-muted);
  font-size: var(--evtc-text-md);
  margin-bottom: var(--evtc-space-5);
  line-height: var(--evtc-line-base);
}
.evtc-panel__footer {
  margin-top: var(--evtc-space-5);
  padding-top: var(--evtc-space-4);
  border-top: 1px solid var(--evtc-color-divider);
  font-size: var(--evtc-text-sm);
  color: var(--evtc-color-text-muted);
}

/* === components/tabs.css === */
.evtc-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--evtc-color-border);
  margin-bottom: var(--evtc-space-5);
  overflow-x: auto;
}
.evtc-tab {
  padding: var(--evtc-space-3) var(--evtc-space-4);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: var(--evtc-text-md);
  font-weight: var(--evtc-weight-medium);
  color: var(--evtc-color-text-muted);
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-family: inherit;
  margin-bottom: -1px; /* sobrepõe o border do container */
  transition: color var(--evtc-dur-fast) var(--evtc-ease-out),
              border-color var(--evtc-dur-fast) var(--evtc-ease-out),
              background-color var(--evtc-dur-fast) var(--evtc-ease-out);
  white-space: nowrap;
  border-radius: var(--evtc-radius-sm) var(--evtc-radius-sm) 0 0;
}
.evtc-tab:hover {
  color: var(--evtc-color-text);
  background: var(--evtc-color-bg-muted);
}
.evtc-tab--active {
  color: var(--evtc-color-primary);
  border-bottom-color: var(--evtc-color-primary);
  font-weight: var(--evtc-weight-semi);
  background: transparent;
}
.evtc-tab--active:hover {
  color: var(--evtc-color-primary-hover);
  background: var(--evtc-color-primary-soft);
}
.evtc-tab--disabled {
  color: var(--evtc-color-text-faint);
  cursor: not-allowed;
}
.evtc-tab--disabled:hover {
  color: var(--evtc-color-text-faint);
  background: transparent;
}

/* === components/lookup.css === */
.evtc-lookup { position: relative; }
.evtc-lookup__results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--evtc-color-bg-surface);
  border: 1px solid var(--evtc-color-border);
  max-height: 260px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: var(--evtc-shadow-popover);
  border-radius: var(--evtc-radius-md);
  padding: 4px;
}
.evtc-lookup__item {
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  font-size: var(--evtc-text-md);
  border-radius: var(--evtc-radius-sm);
  transition: background-color var(--evtc-dur-fast) var(--evtc-ease-out);
}
.evtc-lookup__item:hover { background: var(--evtc-color-primary-soft); }
.evtc-lookup__item-code {
  font-family: var(--evtc-font-mono);
  font-size: var(--evtc-text-sm);
  color: var(--evtc-color-primary);
  margin-right: var(--evtc-space-2);
  font-weight: var(--evtc-weight-medium);
}

/* === components/pager.css === */
.evtc-pager {
  margin-top: var(--evtc-space-5);
  display: flex;
  gap: var(--evtc-space-3);
  align-items: center;
  font-size: var(--evtc-text-sm);
  color: var(--evtc-color-text-muted);
}
.evtc-pager__separator {
  opacity: 0.4;
  color: var(--evtc-color-text-faint);
}

/* === components/tree.css === */
/* Tree (organograma) — hierarchical navigation with selectable nodes. */

.evtc-tree {
  font-family: var(--evtc-font-sans);
  font-size: var(--evtc-text-md);
  line-height: 1.6;
  color: var(--evtc-color-text);
}

.evtc-tree__node {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--evtc-space-2);
  padding: 0.3rem 0.6rem;
  border-radius: var(--evtc-radius-md);
  user-select: none;
  transition: background-color var(--evtc-dur-fast) var(--evtc-ease-out);
}

.evtc-tree__node:hover {
  background: var(--evtc-color-bg-muted);
}

.evtc-tree__node--selected {
  background: var(--evtc-color-primary-soft);
  font-weight: var(--evtc-weight-semi);
  color: var(--evtc-color-primary-hover);
}
.evtc-tree__node--selected:hover {
  background: var(--evtc-color-primary-tint);
}

.evtc-tree__name { flex: 1 1 auto; }

.evtc-tree__meta {
  font-size: var(--evtc-text-xs);
  color: var(--evtc-color-text-subtle);
  font-family: var(--evtc-font-mono);
}

.evtc-tree__children {
  margin-left: 1.25rem;
  border-left: 1px solid var(--evtc-color-border);
  padding-left: var(--evtc-space-3);
}

.evtc-tree__badge {
  font-size: var(--evtc-text-xs);
  font-weight: var(--evtc-weight-medium);
  padding: 0.05rem 0.5rem;
  border-radius: var(--evtc-radius-pill);
  background: var(--evtc-color-status-neutral-bg);
  color: var(--evtc-color-text-subtle);
}

.evtc-tree__badge--ppa {
  background: var(--evtc-color-secondary-soft);
  color: var(--evtc-color-secondary-hover);
}

/* === components/detail-panel.css === */
/* DetailPanel — right-side editor for a selected tree node. */

.evtc-detail-panel {
  background: var(--evtc-color-bg-surface);
  border: 1px solid var(--evtc-color-border);
  border-radius: var(--evtc-radius-lg);
  padding: var(--evtc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--evtc-space-4);
  box-shadow: var(--evtc-shadow-sm);
}

.evtc-detail-panel__title {
  font-size: var(--evtc-text-lg);
  font-weight: var(--evtc-weight-semi);
  border-bottom: 1px solid var(--evtc-color-divider);
  padding-bottom: var(--evtc-space-3);
  margin: 0;
  letter-spacing: -0.011em;
}

.evtc-detail-panel__section {
  display: flex;
  flex-direction: column;
  gap: var(--evtc-space-2);
  padding-top: var(--evtc-space-3);
  border-top: 1px solid var(--evtc-color-divider);
}

.evtc-detail-panel__section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.evtc-detail-panel__section-label {
  font-size: var(--evtc-text-xs);
  color: var(--evtc-color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--evtc-letter-loose);
  font-weight: var(--evtc-weight-semi);
}

.evtc-detail-panel__actions {
  display: flex;
  gap: var(--evtc-space-2);
  border-top: 1px solid var(--evtc-color-divider);
  padding-top: var(--evtc-space-4);
}

/* === components/timeline.css === */
/* Timeline — histórico cronológico de eventos. */

.evtc-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--evtc-space-5);
  font-size: var(--evtc-text-md);
}

.evtc-timeline__year {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--evtc-space-4);
  align-items: start;
}

.evtc-timeline__year-label {
  font-family: var(--evtc-font-mono);
  font-size: var(--evtc-text-xl);
  font-weight: var(--evtc-weight-semi);
  color: var(--evtc-color-primary);
  letter-spacing: -0.02em;
  padding-top: 0.15rem;
}

.evtc-timeline__events {
  display: flex;
  flex-direction: column;
  gap: var(--evtc-space-2);
  border-left: 2px solid var(--evtc-color-border);
  padding-left: var(--evtc-space-4);
  position: relative;
}

.evtc-timeline__event {
  display: flex;
  align-items: center;
  gap: var(--evtc-space-3);
  padding: var(--evtc-space-2) 0;
  position: relative;
}

.evtc-timeline__event::before {
  content: "";
  position: absolute;
  left: calc(var(--evtc-space-4) * -1 - 5px);
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--evtc-color-primary);
  border: 2px solid var(--evtc-color-bg-surface);
  box-shadow: 0 0 0 1px var(--evtc-color-border);
}

.evtc-timeline__date {
  font-family: var(--evtc-font-mono);
  font-size: var(--evtc-text-sm);
  color: var(--evtc-color-text-muted);
  min-width: 80px;
}

.evtc-timeline__text {
  flex: 1;
}