/* DANFER · refinement of the local administrative interface, November 2026.
   Loaded after legacy/mobile layers. Scoped to the app; approved record dialogs
   and state classes retain their layout and behavior. */
:root {
  --dfp-canvas: #f3f6fa;
  --dfp-surface: #ffffff;
  --dfp-soft: #f7f9fc;
  --dfp-line: #dce4ef;
  --dfp-ink: #182e4b;
  --dfp-muted: #536782;
  --dfp-accent: #ae243d;
  --dfp-focus: #376fc4;
  --dfp-shadow: 0 4px 18px rgb(22 43 73 / 5%);
}
html[data-theme="dark"] {
  --dfp-canvas: #0c1728;
  --dfp-surface: #14253b;
  --dfp-soft: #192e48;
  --dfp-line: #304961;
  --dfp-ink: #edf3fc;
  --dfp-muted: #b4c5da;
  --dfp-accent: #ff9daf;
  --dfp-focus: #92b9ff;
  --dfp-shadow: 0 4px 18px rgb(0 0 0 / 14%);
}
html body #appView {
  --dp-bg: var(--dfp-canvas); --dp-surface: var(--dfp-surface);
  --dp-soft: var(--dfp-soft); --dp-line: var(--dfp-line);
  --dp-ink: var(--dfp-ink); --dp-muted: var(--dfp-muted);
  --dp-red: var(--dfp-accent); --dp-focus: var(--dfp-focus);
  font-family: "Segoe UI", system-ui, sans-serif !important;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Persistent navigation with readable labels on the navy background. */
html body #appView #sidebar.sidebar {
  background: linear-gradient(180deg, #122e50, #0a1d35) !important;
  border-right: 1px solid #254261 !important;
  scrollbar-color: #506984 transparent;
}
html body #appView #sidebar .brand {
  border-color: #34506d !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  margin-bottom: 18px !important;
}
html body #appView #sidebar .danfer-nav-heading {
  color: #a5bcd6 !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: .1em !important;
  margin: 20px 12px 8px !important;
}
html body #appView #sidebar .nav-item,
html body #appView #sidebar .nav-item:not(.is-active) {
  color: #dae5f3 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  min-height: 43px !important;
  opacity: 1 !important;
  border-radius: 9px !important;
  padding: 10px 12px !important;
  margin: 3px 0 !important;
}
html body #appView #sidebar .nav-item > span { color: inherit !important; }
html body #appView #sidebar .nav-item > span:first-child {
  color: #b8cde5 !important;
  font-size: 17px !important;
}
html body #appView #sidebar .nav-item:hover { background: #24476b !important; color: #fff !important; }
html body #appView #sidebar .nav-item.is-active {
  background: #254d7a !important;
  border-color: #557aab !important;
  color: #fff !important;
  font-weight: 650 !important;
  box-shadow: inset 3px 0 #f3778d !important;
}
html body #appView #sidebar .nav-item.is-active > span:first-child { color: #fff !important; }
html body #appView #sidebar .sidebar-foot :is(strong,small,p) { color: #c1d2e7 !important; }
html body #appView #sidebar #danferThemeToggle {
  color: #e9f2ff !important; background: #203e5e !important; border-color: #4a6480 !important;
}

/* A quieter header and clear hierarchy for each module. */
html body #appView .topbar {
  min-height: 74px !important;
  box-shadow: 0 2px 10px rgb(20 42 70 / 4%) !important;
  border-bottom-color: var(--dfp-line) !important;
}
html body #appView .page-title h1 { font-size: 20px !important; letter-spacing: -.025em !important; }
html body #appView .global-search { border-radius: 10px !important; }
html body #appView .global-search input { font-size: 14px !important; }
html body #appView .user-button strong { font-size: 12px !important; }
html body #appView .user-button small { font-size: 11px !important; }
html body #appView .content { padding: 26px 28px 40px !important; }
html body #appView .content-intro {
  min-height: 148px !important;
  padding: 26px 28px !important;
  border-radius: 16px !important;
  gap: 24px !important;
  background: linear-gradient(115deg, #102a4a, #1c4673) !important;
}
html body #appView .content-intro h2 {
  font-size: clamp(26px, 2.3vw, 34px) !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}
html body #appView .content-intro p:not(.eyebrow) { font-size: 14px !important; line-height: 1.6 !important; }
html body #appView .content-intro .eyebrow { font-size: 10px !important; letter-spacing: .13em !important; }
html body #appView .module-actions { gap: 10px !important; align-items: center; flex-wrap: wrap; }
html body #appView :is(.primary-button,.secondary-button) {
  min-height: 42px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease !important;
}
html body #appView .primary-button { background: #a9233c !important; border-color: #a9233c !important; color: #fff !important; }
html body #appView .primary-button:hover { background: #8d1930 !important; border-color: #8d1930 !important; }
html body #appView .content-intro :is(.primary-button,.secondary-button) {
  background: #fff !important; border-color: #fff !important; color: #163957 !important;
}
html body #appView :is(button,a,input,select,textarea):focus-visible {
  outline: 3px solid var(--dfp-focus) !important;
  outline-offset: 3px !important;
}
html body #appView #sidebar button:focus-visible { outline-color: #a4ccff !important; }
html body #appView button:disabled { opacity: .55 !important; cursor: not-allowed !important; }

/* Dashboard: consistent cards and readable supporting figures. */
html body #appView #moduleContent .danfer-dashboard-layout > section.danfer-overview-grid {
  gap: 16px !important;
  margin: 6px 0 8px !important;
}
html body #appView #moduleContent .danfer-overview-grid > article.metric-card {
  background: var(--dfp-surface) !important;
  border: 1px solid var(--dfp-line) !important;
  border-top: 3px solid var(--df-accent, #6e9edc) !important;
  border-radius: 14px !important;
  padding: 19px !important;
  min-height: 152px !important;
  box-shadow: var(--dfp-shadow) !important;
  transform: none !important;
}
html body #appView #moduleContent .danfer-overview-grid .metric-card > div > span {
  font-size: 13px !important; line-height: 1.4 !important; color: var(--dfp-muted) !important;
}
html body #appView #moduleContent .danfer-overview-grid .metric-card > strong {
  color: var(--dfp-ink) !important;
  font-size: 30px !important;
  margin: 12px 0 6px !important;
  letter-spacing: -.035em !important;
  font-variant-numeric: tabular-nums;
}
html body #appView #moduleContent .danfer-overview-grid .metric-card > p {
  color: var(--dfp-muted) !important; font-size: 12px !important; line-height: 1.5 !important;
}
html body #appView #moduleContent .weekly-kpi-card > p,
html body #appView #moduleContent .weekly-kpi-card > div > span { font-size: 12px !important; line-height: 1.5 !important; }
html body #appView #moduleContent :is(.weekly-analytics-tabs,.weekly-executive-header > div:last-child) { flex-wrap: wrap; gap: 8px; }
html body #appView #moduleContent .weekly-analytics-tabs button { min-height: 40px; font-size: 12px !important; }

/* Module tables preserve their columns and their own horizontal scrolling. */
html body #appView #moduleContent:not(:has(.danfer-dashboard-layout)) .table-wrap {
  border-color: var(--dfp-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--dfp-shadow) !important;
  background: var(--dfp-surface) !important;
  scrollbar-color: #8196b2 transparent;
}
html body #appView #moduleContent:not(:has(.danfer-dashboard-layout)) .table-wrap thead th {
  background: var(--dfp-soft) !important;
  color: var(--dfp-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .055em !important;
  padding: 14px 16px !important;
  border-color: var(--dfp-line) !important;
}
html body #appView #moduleContent:not(:has(.danfer-dashboard-layout)) .table-wrap tbody td {
  font-size: 13px !important;
  line-height: 1.5 !important;
  padding: 14px 16px !important;
  color: var(--dfp-ink) !important;
  background: var(--dfp-surface) !important;
  border-color: var(--dfp-line) !important;
  font-variant-numeric: tabular-nums;
}
html body #appView #moduleContent:not(:has(.danfer-dashboard-layout)) .table-wrap tbody tr:nth-child(even) td { background: var(--dfp-soft) !important; }
html body #appView #moduleContent:not(:has(.danfer-dashboard-layout)) .table-wrap tbody tr:hover td { background: color-mix(in srgb, var(--dfp-surface) 91%, #729cce) !important; }
html body #appView #moduleContent .table-wrap td strong { font-size: 13px !important; }
html body #appView #moduleContent .table-wrap td small { font-size: 12px !important; line-height: 1.45 !important; color: var(--dfp-muted) !important; }
html body #appView #moduleContent .table-wrap .status { font-size: 11px !important; padding: 5px 9px !important; }
html body #appView #moduleContent .unitlog-v2-filters {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important;
  gap: 12px !important;
  align-items: end !important;
  padding: 18px !important;
}
html body #appView #moduleContent .unitlog-v2-filters > * { min-width: 0; max-width: 100%; }
html body #appView #moduleContent .unitlog-v2-filters :is(input,select) { width: 100%; box-sizing: border-box; }

@media (min-width: 1051px) {
  html body #appView #sidebar.sidebar { width: 248px !important; }
  html body #appView .main-content { margin-left: 248px !important; }
}
@media (max-width: 1050px) {
  html body #appView .content-intro { align-items: flex-start; flex-direction: column; }
  html body #appView .content-intro .module-actions { width: 100%; }
  html body #appView #sidebar .nav-item { min-height: 46px !important; }
}
@media (max-width: 800px) {
  html body #appView .content { padding: 18px 16px 32px !important; }
  html body #appView .topbar { min-height: 70px !important; }
  html body #appView .content-intro { padding: 22px !important; gap: 18px !important; min-height: 0 !important; }
  html body #appView :is(.primary-button,.secondary-button) { min-height: 44px !important; }
  html body #appView #moduleContent .table-wrap :is(th,td) { position: static !important; }
}
@media (max-width: 540px) {
  html body #appView .content { padding: 16px 12px 28px !important; }
  html body #appView .topbar { padding: 10px 12px !important; gap: 8px !important; }
  html body #appView .content-intro { padding: 22px 20px !important; }
  html body #appView .content-intro h2 { font-size: 27px !important; }
  html body #appView .content-intro p:not(.eyebrow) { font-size: 13px !important; }
  html body #appView .module-actions { display: flex; flex-direction: column; align-items: stretch !important; }
  html body #appView .module-actions > * { width: 100%; box-sizing: border-box; text-align: center; justify-content: center; }
  html body #appView #moduleContent .danfer-dashboard-layout > section.danfer-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  html body #appView #moduleContent .danfer-overview-grid > article.metric-card {
    padding: 14px !important; min-height: 156px !important; border-radius: 12px !important;
  }
  html body #appView #moduleContent .danfer-overview-grid .metric-card > div { align-items: flex-start !important; gap: 6px !important; }
  html body #appView #moduleContent .danfer-overview-grid .metric-card > div > span { font-size: 12px !important; }
  html body #appView #moduleContent .danfer-overview-grid .metric-card > div > b { width: 20px !important; height: 22px !important; font-size: 15px !important; }
  html body #appView #moduleContent .danfer-overview-grid .metric-card > strong { font-size: 27px !important; margin: 10px 0 6px !important; }
  html body #appView #moduleContent .danfer-overview-grid .metric-card > p { font-size: 12px !important; }
  html body #appView #moduleContent .unitlog-v2-filters { grid-template-columns: minmax(0, 1fr) !important; padding: 14px !important; }
}
@media (max-width: 339px) {
  html body #appView #moduleContent .danfer-dashboard-layout > section.danfer-overview-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body #appView :is(.nav-item,.primary-button,.secondary-button,.metric-card) { transition: none !important; }
}
@media print {
  html body #appView #sidebar, html body #appView .topbar { display: none !important; }
  html body #appView .main-content { margin-left: 0 !important; }
}

/* Weekly mileage control: compact rows and a full-width review panel. */
html body #kmReportDialog {
  width: min(1540px, 96vw) !important;
  padding: 22px !important;
  color: var(--dfp-ink, #182e4b) !important;
  background: var(--dfp-surface, #fff) !important;
}
html body #kmReportDialog .km-report-head { gap: 16px; margin-bottom: 10px; }
html body #kmReportDialog .km-report-head h2 { font-size: 23px !important; margin: 0 !important; }
html body #kmReportDialog > p { font-size: 13px !important; line-height: 1.5; margin: 10px 0; }
html body #kmReportDialog .km-filters { margin: 16px 0 !important; gap: 12px; }
html body #kmReportDialog .km-filters label { font-size: 12px !important; font-weight: 600; }
html body #kmReportDialog [data-km-message] { padding: 10px 12px; border-radius: 8px; background: var(--dfp-soft); font-size: 13px; }
html body #kmReportDialog .km-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 10px; max-height: 190px; overflow: auto; }
html body #kmReportDialog .km-summary article { padding: 12px 14px; border: 1px solid var(--dfp-line); border-radius: 10px; gap: 5px; }
html body #kmReportDialog .km-summary article :is(span,strong) { font-size: 13px !important; line-height: 1.4; }
html body #kmReportDialog [data-km-results] > p { font-size: 12px !important; line-height: 1.5; margin: 12px 0; }
html body #kmReportDialog .km-table-scroll { max-height: 48dvh; border: 1px solid var(--dfp-line) !important; border-radius: 10px; overflow: auto !important; overscroll-behavior: contain; }
html body #kmReportDialog .km-table { width: 100% !important; min-width: 1050px; table-layout: fixed; border-spacing: 0; border-collapse: separate !important; }
html body #kmReportDialog .km-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html body #kmReportDialog .km-table :is(th,td) { min-width: 0 !important; max-width: none !important; padding: 13px 12px !important; white-space: normal !important; overflow-wrap: anywhere; vertical-align: top; box-sizing: border-box; }
html body #kmReportDialog .km-table thead th { position: sticky !important; top: 0; z-index: 3; background: var(--dfp-soft) !important; color: var(--dfp-muted) !important; font-size: 11px !important; line-height: 1.4; letter-spacing: .035em; border-bottom: 1px solid var(--dfp-line) !important; }
html body #kmReportDialog .km-table td { font-size: 13px !important; line-height: 1.5; color: var(--dfp-ink) !important; background: var(--dfp-surface) !important; border-bottom: 1px solid var(--dfp-line) !important; }
html body #kmReportDialog .km-gap-row:nth-child(4n+3) > td { background: var(--dfp-soft) !important; }
html body #kmReportDialog .km-table small { font-size: 11px !important; line-height: 1.45; color: var(--dfp-muted) !important; display: block; margin-top: 3px; }
html body #kmReportDialog .km-col-unit { width: 15%; }
html body #kmReportDialog .km-col-sequence { width: 23%; }
html body #kmReportDialog .km-col-difference { width: 10%; }
html body #kmReportDialog .km-col-total { width: 13%; }
html body #kmReportDialog .km-col-allocation { width: 11%; }
html body #kmReportDialog .km-col-state { width: 17%; }
html body #kmReportDialog .km-col-actions { width: 11%; }
html body #kmReportDialog .km-unit-name { display: block; font-size: 15px !important; margin-bottom: 3px; }
html body #kmReportDialog .km-log-reference { display: grid; grid-template-columns: 80px minmax(0,1fr); column-gap: 8px; padding: 0 0 8px; }
html body #kmReportDialog .km-log-reference + .km-log-reference { padding-top: 8px; padding-bottom: 0; border-top: 1px dashed var(--dfp-line); }
html body #kmReportDialog .km-log-reference > span { font-size: 12px; color: var(--dfp-muted); }
html body #kmReportDialog .km-log-reference > strong { font-size: 13px !important; text-align: right; font-variant-numeric: tabular-nums; }
html body #kmReportDialog .km-log-reference > small { grid-column: 1 / -1; margin-top: 0; }
html body #kmReportDialog :is(.km-log-reference strong,.km-number) small { display: inline; font-weight: 500; }
html body #kmReportDialog .km-number { display: block; font-size: 19px !important; line-height: 1.3; font-variant-numeric: tabular-nums; }
html body #kmReportDialog .km-anomaly { display: block; margin-top: 6px; color: var(--dfp-muted); font-size: 11px; }
html body #kmReportDialog .km-allocation-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 12px; }
html body #kmReportDialog .km-allocation-line + .km-allocation-line { margin-top: 6px; }
html body #kmReportDialog .km-allocation-line strong { font-size: 12px !important; white-space: nowrap; }
html body #kmReportDialog .km-progress { display: block; appearance: none; width: 100%; height: 5px; margin-top: 10px; border: 0; border-radius: 8px; overflow: hidden; background: var(--dfp-line); accent-color: #3c8c74; }
html body #kmReportDialog .km-progress::-webkit-progress-bar { background: var(--dfp-line); }
html body #kmReportDialog .km-progress::-webkit-progress-value { background: #3c8c74; }
html body #kmReportDialog .km-progress-excess::-webkit-progress-value { background: #b9475c; }
html body #kmReportDialog .km-progress::-moz-progress-bar { background: #3c8c74; }
html body #kmReportDialog .km-progress-excess::-moz-progress-bar { background: #b9475c; }
html body #kmReportDialog .km-status { display: inline-block; border: 1px solid var(--dfp-line); border-radius: 20px; padding: 4px 9px; font-size: 11px; font-weight: 700; line-height: 1.4; background: var(--dfp-soft); color: var(--dfp-ink); }
html body #kmReportDialog :is(.km-status--autorizado,.km-status--libre) { background: #e6f4ed; color: #216249; border-color: #cae7d8; }
html body #kmReportDialog .km-status--pendiente { background: #fff2d8; color: #80520b; border-color: #f0ddb2; }
html body #kmReportDialog .km-status--no_autorizado { background: #fce8ed; color: #9a243d; border-color: #efc9d3; }
html body #kmReportDialog .km-row-actions { min-width: 0 !important; gap: 7px; }
html body #kmReportDialog .km-row-actions button { width: 100%; min-height: 34px; padding: 7px 8px !important; font-size: 12px !important; white-space: normal; }
html body #kmReportDialog .km-reason { padding: 5px 0 0; font-size: 12px; }
html body #kmReportDialog summary { cursor: pointer; }
html body #kmReportDialog .km-reason p { font-size: 12px !important; margin: 6px 0 !important; }
html body #kmReportDialog .km-editor-row[hidden] { display: none !important; }
html body #kmReportDialog .km-editor-row > td { padding: 0 !important; }
html body #kmReportDialog .km-review-panel { border-block: 1px solid var(--dfp-line); background: var(--dfp-soft); padding: 18px 20px; }
html body #kmReportDialog .km-review-panel header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
html body #kmReportDialog .km-review-panel header > button { flex: 0 0 auto; width: auto !important; min-width: 76px !important; min-height: 40px; white-space: nowrap; overflow-wrap: normal; }
html body #kmReportDialog .km-review-panel h3 { margin: 0 !important; font-size: 16px !important; }
html body #kmReportDialog .km-review-panel p { margin: 4px 0 0 !important; font-size: 12px !important; }
html body #kmReportDialog .km-review-panel label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
html body #kmReportDialog .km-review-panel textarea { width: 100% !important; min-height: 86px; resize: vertical; box-sizing: border-box; font-size: 14px !important; }
html body #kmReportDialog .km-review-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 12px; }
html body #kmReportDialog :is(button,summary,textarea):focus-visible { outline: 3px solid var(--dfp-focus); outline-offset: 2px; }
html body #kmReportDialog .km-empty { padding: 28px !important; text-align: center; }
html body #kmReportDialog [data-km-history]:not(:empty) { margin-top: 20px; padding: 16px; border: 1px solid var(--dfp-line); border-radius: 10px; }
@media (max-width: 900px) {
  html body #kmReportDialog { padding: 14px !important; }
  html body #kmReportDialog .km-report-head h2 { font-size: 20px !important; }
  html body #kmReportDialog .km-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html body #kmReportDialog .km-table-scroll { max-height: none; border: 0 !important; overflow: visible !important; }
  html body #kmReportDialog .km-table { min-width: 0 !important; display: block; table-layout: auto; }
  html body #kmReportDialog .km-table :is(thead,colgroup) { display: none !important; }
  html body #kmReportDialog .km-table tbody { display: block; width: 100%; }
  html body #kmReportDialog .km-gap-row { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--dfp-line) !important; border-radius: 12px; margin: 12px 0; padding: 6px; background: var(--dfp-surface); }
  html body #kmReportDialog .km-table td { display: block; width: 100% !important; padding: 10px !important; min-width: 0 !important; border: 0 !important; background: transparent !important; font-size: 14px !important; }
  html body #kmReportDialog .km-gap-row > :is(.km-cell-unit,.km-cell-sequence,.km-cell-state,.km-cell-actions) { grid-column: 1 / -1; }
  html body #kmReportDialog .km-gap-row > .km-cell-state { border-top: 1px solid var(--dfp-line) !important; }
  html body #kmReportDialog .km-gap-row > .km-cell-allocation { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 14px; }
  html body #kmReportDialog .km-cell-allocation::before { grid-column: 1 / -1; }
  html body #kmReportDialog .km-cell-allocation .km-allocation-line { margin-top: 0; }
  html body #kmReportDialog .km-table td::before { content: attr(data-label); display: block; font-size: 11px !important; font-weight: 650; line-height: 1.4; color: var(--dfp-muted) !important; margin-bottom: 7px; opacity: 1; }
  html body #kmReportDialog .km-cell-unit > span { display: block; }
  html body #kmReportDialog .km-cell-sequence .km-log-reference { grid-template-columns: 95px minmax(0,1fr); }
  html body #kmReportDialog .km-row-actions { display: flex; gap: 10px; }
  html body #kmReportDialog .km-row-actions button { flex: 1; min-height: 44px; }
  html body #kmReportDialog .km-editor-row:not([hidden]) { display: block !important; margin: -6px 0 14px; border: 1px solid var(--dfp-line); border-radius: 10px; padding: 0; }
  html body #kmReportDialog .km-editor-row > td { padding: 0 !important; }
  html body #kmReportDialog .km-editor-row > td::before { display: none !important; }
  html body #kmReportDialog .km-review-panel { padding: 14px; border: 0; border-radius: 10px; }
  html body #kmReportDialog .km-review-panel textarea { font-size: 16px !important; }
  html body #kmReportDialog .km-review-buttons > button { flex: 1 1 130px; min-height: 44px; }
}
@media (max-width: 540px) {
  html body #kmReportDialog .km-filters { grid-template-columns: minmax(0,1fr); }
  html body #kmReportDialog .km-summary { max-height: 175px; }
}