/* NEXO7 / Graphite. Presentation only: no changes to financial logic. */
:root {
  color-scheme: dark;
  --bg: #101113;
  --ink: #f5f5f7;
  --fg: var(--ink);
  --muted: #a4a7ae;
  --line: #34363c;
  --panel: #1b1d21;
  --panel-soft: #24262b;
  --charcoal: #101113;
  --charcoal-2: #1b1d21;
  --green: #8abaff;
  --green-2: #a8ccff;
  --blue: #242a35;
  --mint: #233044;
  --gold: #9ed7bc;
  --gold-soft: #22372e;
  --red: #ff969c;
  --platinum: #24262b;
  --radius: 18px;
  --shadow-sm: 0 4px 18px #00000012;
  --shadow-md: 0 12px 36px #00000024;
  --shadow-lg: 0 24px 80px #00000050;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background: radial-gradient(ellipse at 40% -20%, #292d36 0, transparent 55%), var(--bg);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
h1, h2, h3, .page-head h1, .executive-hero h1 { font-family: var(--font-display); letter-spacing: -.035em; }
h2 { font-size: 1.2rem; font-weight: 650; line-height: 1.3; }
p { line-height: 1.65; }
svg { flex-shrink: 0; stroke-width: 1.65; }
::selection { background: #335780; color: #fff; }
:focus-visible { outline: 3px solid #8abaff; outline-offset: 4px; }
[hidden] { display: none !important; }

.topbar {
  min-height: 72px;
  padding: 12px clamp(20px, 3vw, 48px);
  background: #151619e8;
  backdrop-filter: blur(24px);
  border-bottom: 1px solid #ffffff0d;
  box-shadow: none;
}
.brand { gap: 11px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(145deg, #f4f5f7, #b4b9c4);
  color: #24262b; box-shadow: inset 0 1px #fff; font-weight: 700;
}
.brand strong { letter-spacing: -.025em; font-size: 1.02rem; }
.brand small { color: var(--muted); font-size: .7rem; }
.topbar-status { border-color: var(--line); background: #202226; font-weight: 500; font-size: .8rem; }
.status-dot, .profile-active-dot { animation: none; box-shadow: none; background: #9ed7bc; }
.shell { width: min(1660px, 100%); padding: 32px clamp(20px, 3vw, 48px) 64px; }
.executive-hero {
  min-height: 154px; padding: 14px 0 30px; margin-bottom: 28px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; box-shadow: none; gap: 28px; overflow: visible;
}
.executive-hero::before, .executive-hero::after, .upload-panel::before,
.kpi-card::before, .quote-panel::before, .profiles-hero::before { display: none; }
.executive-hero > div:first-child { flex: 1; min-width: 0; }
.executive-hero h1 { font-size: clamp(1.8rem, 2.65vw, 2.65rem); line-height: 1.14; font-weight: 650; overflow-wrap: anywhere; }
.eyebrow, .executive-hero .eyebrow, .profiles-hero-text .eyebrow {
  color: var(--muted); font-size: .68rem; font-weight: 600; letter-spacing: .12em; margin-bottom: 10px;
}
.hero-ledger { margin-top: 16px; gap: 8px; }
.hero-ledger span { background: #23252a; border-color: #34363c; color: #c2c5cd; font-size: .72rem; font-weight: 500; min-height: 26px; }
.hero-actions { max-width: 485px; gap: 8px; }
.command-button { min-width: 0; }
.workspace { grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
.sidebar-stack { position: static; min-width: 0; }
.content-area, .tab-panel { min-width: 0; }
.panel { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow-sm); backdrop-filter: none; }
.upload-panel { padding: 24px; overflow: visible; }
.panel-heading { margin-bottom: 24px; }
.panel-heading .eyebrow { color: var(--green); }

/* Native controls have explicit popup colours, including on Windows. */
select, .field select, .profile-select {
  color-scheme: dark;
  color: #f5f5f7;
  background-color: #25272d;
  border: 1px solid #494d57;
  border-radius: 10px;
  min-height: 44px;
  padding: 10px 36px 10px 12px;
  max-width: 100%;
  cursor: pointer;
  appearance: auto;
  background-image: none;
}
select option, select optgroup { background: #25272d; color: #f5f5f7; }
select option:checked { background: #31527e; color: #fff; }
.field { gap: 8px; }
.field span, .mode-picker legend { color: #c3c6cd; font-weight: 550; font-size: .78rem; }
.field input, .field textarea {
  border: 1px solid #494d57; border-radius: 10px; background: #25272d;
  color: #f5f5f7; font-weight: 400;
}
.field input { height: 44px; }
.field textarea { min-height: 90px; }
input::placeholder, textarea::placeholder { color: #a4a7ae; opacity: 1; }
.field input:focus, .field textarea:focus, .field select:focus, .profile-select:focus {
  border-color: #8abaff; outline: 2px solid #8abaff; outline-offset: 2px; box-shadow: none;
}
.mode-form { display: grid; gap: 18px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.mode-picker { padding: 0; margin: 0; min-width: 0; border: 0; display: grid; gap: 8px; }
.mode-picker legend { margin-bottom: 10px; }
.mode-option { display: flex; align-items: center; gap: 12px; padding: 13px 12px; background: #22242a; border: 1px solid #424650; border-radius: 12px; cursor: pointer; }
.mode-option:hover { background: #292c33; border-color: #6e7787; }
.mode-option:has(input:checked) { background: #243246; border-color: #8abaff; }
.mode-option:has(input:focus-visible) { outline: 3px solid #8abaff; outline-offset: 3px; }
.mode-option input { width: 17px; height: 17px; margin: 0; flex: 0 0 auto; accent-color: #8abaff; }
.mode-option strong { display: block; font-size: .84rem; font-weight: 600; color: #f5f5f7; }
.mode-option small { display: block; color: #b3bac6; font-size: .71rem; margin-top: 2px; }
.mode-help { color: var(--muted); font-size: .75rem; }
.mode-help summary { cursor: pointer; color: #c3c6cd; }
.mode-help p { margin-bottom: 0; }
.mode-form > button { width: 100%; }
.mode-active { margin: 0; padding: 10px 12px; border-radius: 9px; background: #243246; color: #d9e7ff; font-size: .77rem; }
.mode-save-hint { color: var(--muted); font-size: .72rem; line-height: 1.5; }
.dropzone {
  min-height: 206px; padding: 24px 16px; gap: 12px; border: 1px dashed #555c69;
  border-radius: 14px; background: #22252b; box-shadow: none;
}
.dropzone:hover, .dropzone.is-dragging { background: #243246; border-color: #8abaff; transform: none; box-shadow: none; }
.dropzone:focus-within { outline: 3px solid #8abaff; outline-offset: 3px; }
.dropzone svg { width: 30px; height: 30px; color: var(--green); }
.dropzone strong { font-size: .96rem; font-weight: 600; }
.dropzone span { font-size: .76rem; line-height: 1.6; color: #b3b7c1; }
.dropzone .file-selected { color: #b8d5ff; overflow-wrap: anywhere; }
.upload-form { gap: 20px; }

.primary-button, .secondary-button, .icon-button, .tab-button {
  font-family: var(--font-display); font-weight: 550; letter-spacing: -.01em;
  transition: background-color .16s, border-color .16s, box-shadow .16s;
  will-change: auto;
}
.primary-button, .secondary-button {
  min-height: 44px; padding: 10px 16px; border-radius: 10px; font-size: .82rem;
  line-height: 1.35; white-space: normal; text-align: center; overflow-wrap: anywhere;
}
.primary-button { background: #a8ccff; color: #12243e; border: 1px solid #a8ccff; box-shadow: inset 0 1px #ffffff60; }
.primary-button:hover { background: #c5ddff; color: #12243e; filter: none; transform: none; box-shadow: none; }
.secondary-button, .hero-secondary { background: #292c32; color: #f0f1f4; border: 1px solid #4b505a; box-shadow: none; }
.secondary-button:hover { background: #363a42; border-color: #727987; transform: none; box-shadow: none; }
.primary-button::after, .secondary-button::after, .kpi-action a::after { display: none; }
.primary-button:disabled, .secondary-button:disabled { opacity: .55; cursor: not-allowed; }
.icon-button { width: 40px; height: 40px; border-radius: 10px; background: #25272d; border-color: #494d57; }
.icon-button:hover { transform: none; box-shadow: none; background: #363a42; }
.danger-button, .icon-button.danger { background: #35262a; border-color: #71464e; color: #ffb5ba; }
.danger-button:hover { background: #4b2d34; border-color: #aa616e; }

.tab-bar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 7px; margin-bottom: 22px;
  border: 1px solid var(--line); border-radius: 14px; background: #191b1f; overflow: visible;
}
.tab-button { min-height: 40px; padding: 9px 12px; border-radius: 8px; font-size: .76rem; color: #b5b9c3; white-space: normal; text-align: left; }
.tab-button svg { width: 16px; height: 16px; }
.tab-button:hover { background: #282b31; color: #f5f5f7; }
.tab-button.active { background: #353a43; border-color: #565e6c; color: #fff; font-weight: 600; box-shadow: 0 2px 5px #0002; }
.tab-button.active svg { color: #b8d5ff; transform: none; }
.tab-badge { background: #293c56; color: #cee2ff; }
.kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kpi-card { min-height: 172px; padding: 22px; gap: 16px; align-content: space-between; background: #1b1d21; border-color: var(--line); }
.kpi-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: #545962; }
.kpi-card span { color: #b1b5bf; font-weight: 550; font-size: .69rem; letter-spacing: .055em; }
.kpi-card strong { font-size: clamp(1.05rem, 1.45vw, 1.45rem); font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.35; }
.kpi-amounts { gap: 10px; }
.kpi-card small { font-size: .73rem; font-weight: 400; color: #aeb3bf; line-height: 1.5; }
.kpi-profit { background: #1d2525; border-color: #344646; }
.kpi-profit.negative { background: #2c2228; border-color: #57404a; }
.kpi-action { grid-column: 1 / -1; display: flex; min-height: 0; padding: 8px; gap: 8px; align-items: center; }
.kpi-action a { flex: 1; min-height: 46px; padding: 12px 16px; border-radius: 10px; background: #2a3039; color: #e3edff; font-size: .82rem; font-weight: 550; }
.kpi-action a:hover { background: #363f4d; transform: none; filter: none; }
.kpi-action a svg { color: #a8ccff; width: 18px; height: 18px; }
.kpi-action .planilla-link { background: #23252b; color: #d1d5df; }
.kpi-action:not(:has(a)) { display: grid; grid-template-columns: auto 1fr auto; min-height: 72px; padding: 20px; }
.kpi-action:not(:has(a)) strong { font-size: 1rem; }

.capability-panel, .profiles-hero { background: #1b1d21; box-shadow: var(--shadow-sm); border-color: var(--line); }
.capability-copy h2 { font-size: 1.6rem; font-weight: 600; }
.capability-item, .stat { background: #23262c; border-color: var(--line); box-shadow: none; }
.check-badge { background: #2d3c50; color: #b8d5ff; box-shadow: none; border-radius: 10px; }
.check-badge svg { color: #b8d5ff; }
.table-wrap { border-radius: 12px; border-color: var(--line); scrollbar-color: #656b78 #202227; }
table { font-variant-numeric: tabular-nums; }
th { font-size: .73rem; color: #b4bac6; background: #23262c; font-weight: 600; }
td { font-size: .8rem; }
tbody tr:hover { background-color: #ffffff05; }
.file-row { background: #22252a; border-color: var(--line); border-radius: 12px; }
.file-row:hover { background: #292d34; border-color: #505762; box-shadow: none; transform: none; }
.processing-alert { background: #32262b; border: 1px solid #684650; border-left: 3px solid #ff969c; border-radius: 12px; color: #f2dce2; font-size: .82rem; }
.active-profile-banner { background: #243246; border-color: #506d96; box-shadow: none; animation: none; }
.active-profile-banner .apb-avatar { background: #abcfff; box-shadow: none; color: #14253d; }
.profile-card, .profile-card-header { border-color: var(--line); }
.profile-avatar { background: #abcfff; color: #14253d; box-shadow: none; }
.profile-card-name { color: #f5f5f7; }
.profile-card-details, .profile-stats { color: var(--muted); }
.profile-stat-chip { background: #242830; }
.amount-in, .amount-profit { color: #9ed7bc; }
.login-card { background: #1b1d21; border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: 24px; }
.login-card h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.04em; }
.login-card p, .login-help small { font-weight: 400; }
.login-help a { font-weight: 550; }
.modal-overlay { background: #07080bbb; }
.modal-card { background: #202227; border: 1px solid #4b505b; border-radius: 22px; max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-header { position: sticky; top: 0; z-index: 1; background: #202227; }
.modal-body { max-height: none; }
.modal-footer { position: sticky; bottom: 0; background: #202227; }
.modal-close-button { width: 40px; height: 40px; flex: 0 0 auto; background: #30343c; color: #d9dce4; border-radius: 50%; }
.modal-close-button:hover { background: #414754; }
.options-group legend { color: #c3c9d4; font-size: .8rem; font-weight: 550; text-transform: none; letter-spacing: 0; }
.custom-option-card { border-radius: 12px; background: #262930; border-color: #494e59; }
.custom-option-card.selected { background: #253347; border-color: #8abaff; box-shadow: none; }
.custom-option-card:hover { background: #2d3541; box-shadow: none; }
.option-card-content strong { font-size: .9rem; font-weight: 600; }
.option-badge { font-weight: 550; }
.toast { background: #282c34; border-color: #505865; color: #f5f5f7; box-shadow: var(--shadow-md); }
.toast.error { background: #38262d; color: #ffdbe0; }
.toast.success { background: #25382f; color: #d5f0e2; }
details > summary { padding: 9px 0; cursor: pointer; color: #d5d9e2; }
details > summary:hover { color: #b8d5ff; }

@media (max-width: 1120px) {
  .tab-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace { grid-template-columns: 285px minmax(0, 1fr); gap: 20px; }
  .upload-panel { padding: 20px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-profit { grid-column: 1 / -1; min-height: 130px; }
  .hero-actions { max-width: 390px; }
}
@media (max-width: 900px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .executive-hero { flex-direction: column; align-items: stretch; }
  .hero-actions { max-width: none; justify-content: flex-start; }
  .hero-actions .command-button, .hero-actions .secondary-button { width: auto; }
  .upload-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .upload-panel > .panel-heading { grid-column: 1 / -1; }
  .mode-form { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; align-content: start; }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-profit { grid-column: auto; min-height: 172px; }
}
@media (max-width: 620px) {
  .tab-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell { padding: 22px 16px 40px; }
  .topbar { padding: 12px 16px; }
  .executive-hero { gap: 22px; padding-bottom: 24px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-actions .command-button, .hero-actions .secondary-button { width: 100%; }
  .upload-panel { display: block; }
  .mode-form { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
  .kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .kpi-card { min-height: 145px; }
  .kpi-card strong { font-size: 1.4rem; }
  .kpi-action { min-height: 0; flex-wrap: wrap; }
  .kpi-action a { min-width: 120px; }
  .kpi-action:not(:has(a)) { grid-template-columns: 1fr; }
  .tab-button { flex: 1 1 140px; font-size: .76rem; }
  .field input, .field textarea, .field select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .mode-option:has(input:checked), .tab-button.active { outline: 2px solid Highlight; }
  select, select option { forced-color-adjust: auto; }
}