/* TAUROOS Design System — tokens + components
 * Adaptado do NEWPINGO ds-tokens.css. Mesma estrutura, mesmas classes.
 * Única substituição substantiva: paleta de marca azul → vermelho TAUROOS (#B8170E).
 */
:root {
  /* === MARCA TAUROOS === */
  --brand-primary:        #B8170E;  /* Vermelho do logo */
  --brand-primary-hover:  #95110A;
  --brand-primary-active: #7A0F0A;
  --brand-primary-soft:   #FBE3E1;
  --brand-primary-ring:   rgba(184, 23, 14, 0.20);
  --brand-deep:           #7A0F0A;
  --brand-navy:           #1F2329;  /* Charcoal premium */

  /* === STATUS SEMÂNTICAS === */
  --success:        #21A551;
  --success-hover:  #1B8B43;
  --success-soft:   #E8F5EA;
  --success-text:   #1F7A2A;

  --danger:         #DC2626;  /* Distinto do brand para evitar conflito */
  --danger-hover:   #B91C1C;
  --danger-soft:    #FEE2E2;
  --danger-text:    #991B1B;

  --warning:        #F0B73E;
  --warning-hover:  #D9A02E;
  --warning-soft:   #FFF4D5;
  --warning-text:   #8A6300;

  --info:           var(--brand-primary);
  --info-soft:      var(--brand-primary-soft);
  --info-text:      var(--brand-deep);

  /* === SURFACES (LIGHT) === */
  --bg-app:        #F4F6FA;
  --bg-app-alt:    #EFF3F7;
  --surface:       #FFFFFF;
  --surface-hover: #F4F6FA;
  --surface-selected: #FBE3E1;
  --surface-subtle:#F8F9FB;
  --border:        #DADEE3;
  --border-strong: #C0C0C0;
  --border-focus:  var(--brand-primary);
  --divider:       #EDEFF3;

  /* === TEXTO === */
  --text-heading:   #1F2329;  /* Charcoal — nunca vermelho */
  --text-primary:   #1F2937;
  --text-secondary: #595959;
  --text-tertiary:  #8A8A8A;
  --text-on-brand:  #FFFFFF;
  --text-on-dark:   #FFFFFF;
  --text-link:      var(--brand-primary);

  /* === SIDEBAR (charcoal premium + red accent) === */
  --sidebar-bg:           #1F2329;
  --sidebar-bg-section:   #2A2F36;
  --sidebar-item-hover:   rgba(255, 255, 255, 0.06);
  --sidebar-item-active:  rgba(184, 23, 14, 0.20);
  --sidebar-item-active-bar: var(--brand-primary);
  --sidebar-text:         #FFFFFF;
  --sidebar-text-muted:   #9CA3AF;
  --sidebar-divider:      rgba(255, 255, 255, 0.08);
  --sidebar-width:        240px;
  --sidebar-width-collapsed: 64px;
  --sidebar-brand-bg:     #FFFFFF;
  --sidebar-brand-text:   var(--brand-deep);

  /* === TIPOGRAFIA === */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-4xl:  28px;
  --text-5xl:  32px;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --lh-tight:  1.2;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-table:  1.4;

  /* === ESPAÇAMENTO === */
  --space-1:  4px;  --space-2:  8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* === RAIOS === */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* === SOMBRAS === */
  --shadow-sm:    0 1px 2px rgba(15, 30, 60, 0.04);
  --shadow-md:    0 4px 12px rgba(15, 30, 60, 0.08);
  --shadow-lg:    0 12px 32px rgba(15, 30, 60, 0.12);
  --shadow-focus: 0 0 0 3px var(--brand-primary-ring);

  /* === Z-INDEX === */
  --z-base:      1;
  --z-rail:      100;
  --z-sidebar:   110;
  --z-header:    120;
  --z-dropdown:  500;
  --z-overlay:   900;
  --z-modal:     1000;
  --z-toast:     1500;
  --z-tooltip:   2000;

  /* === CATEGORIAS PECUÁRIAS (TAUROOS) === */
  --cat-femea:    #E94B7C;
  --cat-macho:    #2687E9;
  --cat-bezerro:  #F0B73E;
  --cat-bezerra:  #F58FA8;
  --cat-novilha:  #B85042;
  --cat-vaca:     #7A0F0A;
  --cat-garrote:  #4F7042;
  --cat-boi:      #1F2329;

  --mov-compra:   var(--brand-primary);
  --mov-venda:    var(--success);
  --mov-transf:   var(--warning);
  --mov-nasc:     #4F7042;
  --mov-morte:    var(--danger);

  /* === BANCOS === */
  --bank-sicoob:    #00AE4D;
  --bank-safra:     #005C36;
  --bank-santander: #EC0000;
  --bank-original:  #FF6900;
  --bank-itau:      #EC7000;
  --bank-bradesco:  #CC092F;
  --bank-bb:        #FFE500;
  --bank-bb-text:   #000000;
  --bank-caixa:     #003DA5;
  --bank-inter:     #FF7A00;
  --bank-nubank:    #8A05BE;
}

/* === DARK MODE === */
[data-theme="dark"] {
  --bg-app:        #0F1419;
  --bg-app-alt:    #131822;
  --surface:       #1A2030;
  --surface-hover: #232B3D;
  --surface-selected: rgba(184, 23, 14, 0.18);
  --surface-subtle:#1E2433;

  --border:        #2A3245;
  --border-strong: #3A4358;
  --divider:       #232B3D;

  --text-heading:   #F1F5F9;
  --text-primary:   #E5E9F0;
  --text-secondary: #A0A8B8;
  --text-tertiary:  #6B7388;

  --brand-primary-soft: rgba(184, 23, 14, 0.18);
  --success-soft: rgba(33, 165, 81, 0.16);
  --success-text: #5DCF7A;
  --danger-soft:  rgba(220, 38, 38, 0.16);
  --danger-text:  #F08089;
  --warning-soft: rgba(240, 183, 62, 0.16);
  --warning-text: #F0C66B;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body, .ts-root {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-app);
  font-feature-settings: "cv11", "ss01";
}
.ts-root h1, .ts-root h2, .ts-root h3, .ts-root h4 {
  margin: 0;
  color: var(--text-heading);
  line-height: var(--lh-snug);
}

/* ===================================================================
 * COMPONENTES — mesma estrutura do NEWPINGO, apenas tokens TAUROOS
 * ================================================================ */

/* Botões */
.ds-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font: var(--fw-semi) var(--text-md)/1 var(--font-body);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  white-space: nowrap;
}
.ds-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ds-btn[disabled]     { opacity: 0.5; cursor: not-allowed; }
.ds-btn--primary   { background: var(--brand-primary); color: var(--text-on-brand); }
.ds-btn--primary:hover  { background: var(--brand-primary-hover); }
.ds-btn--primary:active { background: var(--brand-primary-active); }
.ds-btn--success   { background: var(--success); color: var(--text-on-brand); }
.ds-btn--success:hover { background: var(--success-hover); }
.ds-btn--secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border-strong); }
.ds-btn--secondary:hover { background: var(--surface-hover); }
.ds-btn--ghost     { background: transparent; color: var(--brand-primary); }
.ds-btn--ghost:hover { background: var(--brand-primary-soft); }
.ds-btn--danger    { background: var(--danger); color: var(--text-on-brand); }
.ds-btn--danger:hover { background: var(--danger-hover); }
.ds-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.ds-btn--lg { height: 48px; padding: 0 var(--space-6); font-size: var(--text-lg); }

/* Pills (filtros) */
.ds-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 32px; padding: 0 var(--space-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-full); font-size: var(--text-base);
  color: var(--text-primary); cursor: pointer;
}
.ds-pill:hover { background: var(--surface-hover); }
.ds-pill[aria-pressed="true"] {
  background: var(--brand-primary-soft); border-color: var(--brand-primary); color: var(--info-text);
}

/* Inputs */
.ds-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ds-label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-secondary); }
.ds-input, .ds-select, .ds-textarea {
  height: 40px; padding: 0 var(--space-3);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: var(--text-md)/1 var(--font-body); color: var(--text-primary);
  transition: border-color 120ms, box-shadow 120ms;
}
.ds-textarea { height: auto; padding: var(--space-3); min-height: 96px; }
.ds-input::placeholder { color: var(--text-tertiary); }
.ds-input:focus-visible, .ds-select:focus-visible, .ds-textarea:focus-visible {
  outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus);
}
.ds-input[aria-invalid="true"] { border-color: var(--danger); }
.ds-input--money {
  font-variant-numeric: tabular-nums; text-align: right; font-weight: var(--fw-medium);
}
.ds-helper { font-size: var(--text-sm); color: var(--text-secondary); }
.ds-helper--error { color: var(--danger); }

/* Card */
.ds-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
}
.ds-card__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.ds-card__title    { font-size: var(--text-lg); font-weight: var(--fw-semi); color: var(--text-heading); }
.ds-card__subtitle { font-size: var(--text-sm); color: var(--text-secondary); }

/* KPI Card */
.ds-kpi-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ds-kpi-card__label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-secondary); }
.ds-kpi-card__value {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-3xl); font-weight: var(--fw-semi); line-height: var(--lh-tight);
  color: var(--text-heading);
}
.ds-kpi-card__value--positive { color: var(--success); }
.ds-kpi-card__value--negative { color: var(--danger); }
.ds-kpi-card__value--warning  { color: var(--warning-text); }
.ds-kpi-card__value--info     { color: var(--brand-primary); }
.ds-kpi-card__value .ds-money-prefix {
  font-size: 0.55em; font-weight: var(--fw-medium); margin-right: 4px;
  color: var(--text-secondary);
}
.ds-kpi-card__footer { font-size: var(--text-sm); color: var(--text-secondary); }

/* Table */
.ds-table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.ds-table thead th {
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) var(--space-4); text-align: left;
  font-size: var(--text-base); font-weight: var(--fw-semi); color: var(--text-secondary);
  white-space: nowrap;
}
.ds-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--divider);
  color: var(--text-primary); line-height: var(--lh-table);
}
.ds-table tbody tr:hover td { background: var(--surface-hover); }
.ds-table tbody tr[aria-selected="true"] td { background: var(--surface-selected); }
.ds-table tbody tr.ds-row--overdue td:first-child { border-left: 3px solid var(--danger); }
.ds-col--money {
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.ds-table__foot td {
  background: var(--surface-subtle); font-weight: var(--fw-semi); color: var(--text-heading);
}

/* Badge */
.ds-badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--fw-semi);
  line-height: 1.4; white-space: nowrap;
}
.ds-badge--success  { background: var(--success-soft); color: var(--success-text); }
.ds-badge--danger   { background: var(--danger-soft);  color: var(--danger-text);  }
.ds-badge--warning  { background: var(--warning-soft); color: var(--warning-text); }
.ds-badge--info     { background: var(--brand-primary-soft); color: var(--info-text); }
.ds-badge--neutral  { background: var(--bg-app-alt); color: var(--text-secondary); }
.ds-badge--lucro    { background: var(--success-soft); color: var(--success-text); }
.ds-badge--prejuizo { background: var(--danger-soft); color: var(--danger-text); }

/* Tabs */
.ds-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); }
.ds-tabs__item {
  padding: var(--space-3) var(--space-4); font-size: var(--text-md);
  font-weight: var(--fw-medium); color: var(--text-secondary);
  border: 0; border-bottom: 2px solid transparent; cursor: pointer; background: none;
}
.ds-tabs__item:hover { color: var(--text-primary); }
.ds-tabs__item[aria-selected="true"] {
  color: var(--brand-primary);
  font-weight: var(--fw-semi);
  border-bottom-color: var(--brand-primary);
}

/* App Shell */
.ds-shell { display: flex; min-height: 100%; }
.ds-rail {
  width: var(--sidebar-width); flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text); display: flex; flex-direction: column;
}
.ds-rail__brand {
  height: 64px; padding: 0 var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  border-bottom: 1px solid var(--sidebar-divider);
  font-weight: var(--fw-bold); font-size: var(--text-lg);
}
.ds-rail__logo {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  background: var(--sidebar-brand-bg); color: var(--sidebar-brand-text);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: var(--text-md);
}
.ds-rail__section {
  padding: var(--space-4) var(--space-5) var(--space-2);
  font-size: var(--text-xs); font-weight: var(--fw-semi);
  letter-spacing: 0.04em; color: var(--sidebar-text-muted); text-transform: uppercase;
}
.ds-rail__item {
  display: flex; align-items: center; gap: var(--space-3);
  height: 40px; padding: 0 var(--space-5);
  color: var(--sidebar-text); font-size: var(--text-md);
  text-decoration: none; cursor: pointer;
  border-left: 3px solid transparent;
}
.ds-rail__item:hover { background: var(--sidebar-item-hover); }
.ds-rail__item--active {
  background: var(--sidebar-item-active);
  border-left-color: var(--sidebar-item-active-bar);
  font-weight: var(--fw-semi);
}
.ds-rail__icon { width: 18px; height: 18px; opacity: 0.9; }

.ds-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ds-header {
  height: 64px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-6);
}
.ds-header__crumb { font-size: var(--text-sm); color: var(--text-secondary); }
.ds-header__crumb b { color: var(--text-primary); font-weight: var(--fw-semi); }
.ds-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.ds-avatar {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--brand-primary-soft); color: var(--info-text);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-semi); font-size: var(--text-sm);
}

.ds-page {
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5);
}
.ds-page__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
}
.ds-page__title    { font-size: var(--text-3xl); font-weight: var(--fw-semi); color: var(--text-heading); }
.ds-page__subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 4px; }

/* Modal */
.ds-modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 30, 60, 0.40);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6); z-index: var(--z-modal);
}
.ds-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 600px;
  display: flex; flex-direction: column; max-height: 100%;
}
.ds-modal--lg { max-width: 720px; }
.ds-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border);
}
.ds-modal__title { font-size: var(--text-xl); font-weight: var(--fw-semi); color: var(--text-heading); }
.ds-modal__body  { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); overflow-y: auto; }
.ds-modal__footer{
  display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border);
}
.ds-form-section {
  font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--text-secondary);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--divider);
  letter-spacing: 0.02em;
}
.ds-form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ds-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }