/* Componentes de módulos: tablas, formularios, mapas, diálogos y estados.
 * La navegación y los colores comunes se definen en app.css. */
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-width: 320px;
  background: radial-gradient(circle at 88% 0,rgba(228,69,43,.07),transparent 27rem),var(--bg);
  color: var(--ink);
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-hover);
}
:focus-visible {
  outline: 3px solid rgba(228,69,43,.3);
  outline-offset: 2px;
  border-radius: 5px;
}
::selection {
  background: #fdf0ea;
  color: #373a36;
}
.mono,code {
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
code {
  padding: .12rem .35rem;
  border-radius: 5px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: .92em;
}
.num,.num-col {
  font-variant-numeric: tabular-nums;
}
.filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-size: 12px;
  font-weight: 590;
  transition: .18s;
}
.filter:not(.is-disabled):hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 5px 14px rgba(25,26,24,.08);
  transform: translateY(-1px);
}
.filter[disabled],.filter.is-disabled {
  opacity: .57;
  cursor: not-allowed;
  box-shadow: none;
}
.filter .icon {
  width: 14px;
  height: 14px;
}
input[type=search],input[type=text],select {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  box-shadow: inset 0 1px 2px rgba(25,26,24,.03);
}
input:focus,select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(228,69,43,.12);
}
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(175px,1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.kpi {
  position: relative;
  min-height: 132px;
  padding: 18px 19px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: .2s ease;
}
.kpi:after {
  content: "";
  position: absolute;
  right: -25px;
  bottom: -42px;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: var(--surface-3);
  opacity: .55;
}
.kpi:hover {
  transform: translateY(-2px);
  border-color: var(--rule-strong);
  box-shadow: var(--shadow);
}
.kpi.is-emphasis {
  border-color: #e3c4bc;
  background: linear-gradient(145deg,#fef9f8,var(--accent-soft));
}
.kpi.is-emphasis:after {
  background: #e8c6be;
}
.kpi-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .005em;
  text-transform: none;
}
.kpi-value {
  position: relative;
  z-index: 1;
  margin: 8px 0 3px;
  color: var(--ink);
  font-size: clamp(26px,2.3vw,34px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.kpi-value.is-empty {
  color: var(--rule-strong);
  font-weight: 450;
}
.kpi-hint {
  position: relative;
  z-index: 1;
  max-width: 26ch;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
  align-items: start;
}
.panel {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 51px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg,#fff,var(--surface-2));
}
.panel-head>.icon {
  width: 17px !important;
  height: 17px !important;
  color: var(--accent);
}
.panel-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.012em;
}
.panel-head .badge {
  margin-left: auto;
}
.panel-body {
  padding: 18px;
}
.panel-body>:first-child {
  margin-top: 0;
}
.panel-body>:last-child {
  margin-bottom: 0;
}
.panel-note {
  padding: 11px 18px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
}
.tw {
  width: 100%;
  overflow-x: auto;
  scrollbar-color: var(--rule-strong) transparent;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
th,td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: middle;
}
th {
  color: var(--muted);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
  white-space: nowrap;
}
tbody tr {
  transition: background-color .12s;
}
tbody tr:hover {
  background: #f9f9f8;
}
tbody tr:last-child td {
  border-bottom: 0;
}
td strong {
  color: var(--ink);
  font-weight: 690;
}
.num-col {
  text-align: right;
  white-space: nowrap;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  line-height: 1.4;
  text-transform: none;
  white-space: nowrap;
}
.badge.ok {
  color: var(--ok);
  border-color: #bce2d3;
  background: var(--ok-soft);
}
.badge.warn {
  color: var(--warn);
  border-color: #ecd6a5;
  background: var(--warn-soft);
}
.badge.danger,.badge.bad {
  color: var(--danger);
  border-color: #ecc3bf;
  background: var(--danger-soft);
}
.badge.info {
  color: var(--info);
  border-color: #c5dced;
  background: var(--info-soft);
}
.badge.neutral {
  color: var(--muted);
  border-color: var(--rule-strong);
  background: var(--surface-2);
}
.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.check:first-child {
  padding-top: 0;
}
.check:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  margin-top: 6px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--surface-3);
}
.dot.ok {
  background: var(--ok);
}
.dot.pending {
  background: var(--warn);
}
.dot.failed {
  background: var(--danger);
}
.check-text {
  min-width: 0;
  flex: 1;
}
.check-label {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 680;
}
.check-detail {
  color: var(--ink-2);
  font-size: 11.5px;
  word-break: break-word;
}
.check-hint {
  margin-top: 6px;
  padding: 7px 9px;
  border-left: 3px solid var(--rule-strong);
  border-radius: 0 6px 6px 0;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
}
.note {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid #d6d7d4;
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--ink-2);
  font-size: 12.5px;
  box-shadow: var(--shadow-sm);
}
.note.warn {
  border-color: #ead5a8;
  border-left-color: var(--warn);
  background: var(--warn-soft);
}
.note .tag {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: none;
}
.note p {
  margin-top: 5px;
}
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.step:last-child {
  border-bottom: 0;
}
.step-num {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.step-body {
  min-width: 0;
  flex: 1;
}
.step-title {
  font-size: 12.5px;
  font-weight: 660;
}
.step-meta {
  color: var(--muted);
  font-size: 11.5px;
}
.step.is-done .step-title {
  color: var(--muted);
  text-decoration: line-through;
}
.step.is-current {
  margin: 0 -10px;
  padding: 10px;
  border-radius: 8px;
  background: var(--accent-soft);
}
.step.is-current .step-num {
  background: var(--accent);
  color: #fff;
}
.empty {
  padding: clamp(38px,6vw,64px) 24px;
  color: var(--muted);
  text-align: center;
}
.empty .icon {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  padding: 8px;
  overflow: visible;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--accent);
  opacity: .85;
}
.empty h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 690;
}
.empty p {
  max-width: 52ch;
  margin: 0 auto;
  font-size: 12.5px;
  line-height: 1.65;
}
.meta-list {
  display: grid;
  grid-template-columns: minmax(90px,auto) 1fr;
  margin: 0;
}
.meta-list dt,.meta-list dd {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.meta-list dt {
  padding-right: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .005em;
  text-transform: none;
  white-space: nowrap;
}
.meta-list dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 12.5px;
}
.meta-list dt:last-of-type,.meta-list dd:last-of-type {
  border-bottom: 0;
}
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
}
.flow .step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface-2);
}
.flow .step b {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: .005em;
  text-transform: none;
}
.flow .step.core {
  border-color: #d0d1ce;
  background: var(--accent-soft);
}
.flow .arrow {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 18px;
}
.icon {
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width:980px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}
@media (max-width:760px) {
  .kpis {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
  }
  .kpi {
    min-height: 125px;
    padding: 15px;
  }
  .flow {
    grid-template-columns: 1fr;
  }
  .flow .arrow {
    height: 20px;
    transform: rotate(90deg);
  }
  .panel-head {
    flex-wrap: wrap;
  }
}
@media (max-width:460px) {
  .kpis {
    grid-template-columns: 1fr;
  }
  .kpi {
    min-height: 112px;
  }
  .filter {
    max-width: 100%;
  }
  .meta-list {
    grid-template-columns: 1fr;
  }
  .meta-list dt {
    padding-bottom: 2px;
    border-bottom: 0;
  }
  .meta-list dd {
    padding-top: 0;
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  *,*:before,*:after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
.sync-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 13px;
  border: 0;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(228,69,43,.2);
  font: inherit;
  font-size: 12px;
  font-weight: 680;
  cursor: pointer;
  transition: .18s;
}
.sync-button:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.sync-button .icon {
  width: 14px;
  height: 14px;
}
.sync-button.is-loading {
  opacity: .75;
  pointer-events: none;
}
.sync-button.is-loading .icon {
  animation: sync-spin .8s linear infinite;
}
.sync-toast {
  position: fixed;
  z-index: 100;
  right: 22px;
  bottom: 22px;
  max-width: min(420px,calc(100vw - 28px));
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: 0 14px 40px rgba(25,26,24,.18);
  font-size: 12px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: .22s;
}
.sync-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.sync-toast.is-success {
  border-color: #d0d1cd;
  background: var(--ok-soft);
  color: var(--ok);
}
.sync-toast.is-error {
  border-color: #ecc3bf;
  background: var(--danger-soft);
  color: var(--danger);
}
@keyframes sync-spin {
  to {
    transform: rotate(360deg);
  }
}
.carrier-switcher {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid #d4d5d2;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
}
.carrier-switcher>.icon {
  width: 18px;
  height: 18px;
}
.carrier-switcher-text {
  display: grid;
  line-height: 1.1;
}
.carrier-switcher small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: none;
}
.carrier-switcher select {
  min-height: 0;
  height: auto;
  padding: 2px 22px 1px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.carrier-switcher select:focus {
  box-shadow: none;
}
@media (max-width:520px) {
  .carrier-switcher {
    flex: 1;
  }
  .carrier-switcher-text {
    flex: 1;
  }
  .carrier-switcher select {
    width: 100%;
  }
}
.note.danger {
  border-color: #ecc3bf;
  border-left-color: var(--danger);
  background: var(--danger-soft);
}
.note.danger .tag {
  color: var(--danger);
}
.note.info {
  border-color: #c5dced;
  border-left-color: var(--info);
  background: var(--info-soft);
}
.section-stack {
  display: grid;
  gap: 20px;
}
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 12px;
}
.section-heading h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -.025em;
}
.section-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 20px;
}
.overview-grid>.panel {
  height: 100%;
}
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}
.panel-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
}
.chart-body {
  padding: 20px;
}
.chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 11px;
}
.legend-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.legend-dot.warn {
  background: var(--warn);
}
.legend-dot.info {
  background: var(--info);
}
.donut-layout {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  align-items: center;
  gap: 24px;
}
.donut {
  --value: 50;
  --donut-color: var(--accent);
  position: relative;
  width: 142px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--donut-color) calc(var(--value)*1%),var(--surface-3) 0);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.donut:after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--rule);
}
.donut-center {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.donut-value {
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1;
}
.donut-label {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .005em;
  text-transform: none;
}
.stat-list {
  display: grid;
  gap: 12px;
}
.stat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.stat-row:last-child {
  padding-bottom: 0;
  border: 0;
}
.stat-name {
  color: var(--muted);
  font-size: 11.5px;
}
.stat-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 220px;
  padding: 12px 4px 0;
  border-bottom: 1px solid var(--rule);
  background: repeating-linear-gradient(to top,transparent 0,transparent 43px,var(--rule) 44px);
}
.bar-item {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  gap: 7px;
  height: 100%;
  min-width: 20px;
}
.bar-value {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}
.bar {
  width: min(28px,72%);
  min-height: 3px;
  border-radius: 6px 6px 2px 2px;
  background: var(--accent);
  box-shadow: 0 4px 10px rgba(228,69,43,.16);
  transition: filter .2s,transform .2s;
}
.bar-item:hover .bar {
  filter: brightness(1.1);
  transform: scaleX(1.08);
}
.bar-label {
  height: 30px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}
.horizontal-chart {
  display: grid;
  gap: 12px;
}
.hbar-row {
  display: grid;
  grid-template-columns: minmax(74px,auto) minmax(100px,1fr) 42px;
  align-items: center;
  gap: 10px;
}
.hbar-label {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hbar-track {
  height: 9px;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
}
.hbar-fill {
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
  background: var(--accent);
}
.hbar-fill.warn {
  background: linear-gradient(90deg,var(--warn),#e0a640);
}
.hbar-value {
  text-align: right;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 220px;
  padding-top: 18px;
}
.trend-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-width: 34px;
}
.trend-value {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}
.trend-column {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 150px;
  margin: 6px 0;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(to top,var(--surface-2),transparent);
}
.trend-fill {
  width: min(38px,70%);
  min-height: 4px;
  border-radius: 7px 7px 2px 2px;
  background: var(--accent);
}
.trend-label {
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}
.progress-ring {
  display: grid;
  place-items: center;
  padding: 24px;
}
.progress-ring .donut {
  --donut-color: var(--info);
}
.mini-metrics {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-top: 1px solid var(--rule);
}
.mini-metric {
  padding: 14px;
  text-align: center;
  border-right: 1px solid var(--rule);
}
.mini-metric:last-child {
  border: 0;
}
.mini-metric strong {
  display: block;
  font-size: 18px;
  letter-spacing: -.03em;
}
.mini-metric span {
  color: var(--muted);
  font-size: 12px;
  text-transform: none;
  letter-spacing: .005em;
}
@media (max-width:1100px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
  .chart-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width:760px) {
  .donut-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .stat-list {
    width: 100%;
  }
  .bar-chart,.trend-chart {
    overflow-x: auto;
  }
  .bar-item,.trend-item {
    flex: 0 0 42px;
  }
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .mini-metrics {
    grid-template-columns: 1fr;
  }
  .mini-metric {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
}
.panel-spaced {
  margin-bottom: 18px;
}
.panel-head .panel-action {
  margin-left: auto;
}
.form-stack {
  display: grid;
  gap: 16px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
  gap: 14px;
}
.field {
  display: grid;
  align-content: start;
  gap: 5px;
}
.field-label {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em;
}
.field-label .optional {
  color: var(--muted);
  font-weight: 500;
}
.field-control,input[type=file],input[type=number],input[type=date],textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--rule-strong);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  transition: border-color .18s,box-shadow .18s,background .18s;
}
input[type=file] {
  padding: 6px 8px;
  font-size: 12.5px;
}
input[type=file]::file-selector-button {
  margin-right: 10px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
}
input[type=file]:hover::file-selector-button {
  background: var(--accent-soft);
  color: var(--accent);
}
.field-control:focus,input[type=file]:focus,input[type=number]:focus,input[type=date]:focus,textarea:focus {
  outline: 0;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(228,69,43,.12);
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.form-help {
  max-width: 74ch;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-size: 12px;
  font-weight: 680;
  cursor: pointer;
  transition: .18s;
}
.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(25,26,24,.08);
}
.btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 7px 18px rgba(228,69,43,.2);
}
.btn-primary:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: #fff;
}
.link-edit {
  border-bottom: 1px dashed var(--rule-strong);
  color: var(--ink-2);
}
.link-edit:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cell-main {
  display: block;
  color: var(--ink);
  font-weight: 680;
}
.cell-meta {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
.text-muted {
  color: var(--muted);
}
.text-faint {
  color: var(--rule-strong);
}
.text-danger {
  color: var(--danger);
}
.text-small {
  font-size: 12px;
}
.note p:last-child {
  margin-bottom: 0;
}
.modal {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16,17,15,.58);
  backdrop-filter: blur(4px);
}
.modal-card {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 24px 70px rgba(12,13,11,.3);
}
.modal-description {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 12.5px;
}
.modal-fields {
  display: grid;
  gap: 14px;
}
.choice-field {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}
.choice-field input {
  margin-top: 4px;
  accent-color: var(--accent);
}
.choice-label {
  font-size: 13px;
}
.choice-help {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}
.modal-help {
  margin: 2px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 11.5px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.filter.is-selected {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 5px 14px rgba(228,69,43,.18);
}
@media (max-width:760px) {
  .panel-spaced {
    margin-bottom: 14px;
  }
  .panel-head .panel-action {
    width: 100%;
    margin-left: 27px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .form-actions .btn {
    width: 100%;
  }
  .form-help {
    max-width: none;
  }
  .modal {
    align-items: flex-end;
    padding: 10px;
  }
  .modal-card {
    max-height: calc(100vh - 20px);
    border-radius: 16px;
  }
  .panel-head>.filter {
    padding: 6px 9px;
  }
  .panel-head h2 {
    flex: 1 1 auto;
  }
}
body {
  background: linear-gradient(135deg,rgba(118,40,21,.035),transparent 24rem),var(--bg);
  font-size: 14px;
  line-height: 1.5;
}
.carrier-switcher {
  min-height: 42px;
  padding: 6px 11px;
  border-color: #d5d6d4;
  border-radius: 9px;
  background: #f3f3f2;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.carrier-switcher small {
  font-size: 11px;
}
.carrier-switcher select {
  font-size: 11.5px;
}
.sync-button {
  min-height: 40px;
  border-radius: 9px;
  background: #262723;
  box-shadow: 0 6px 15px rgba(24,25,23,.14);
}
.sync-button:hover {
  background: #353632;
}
.filter {
  min-height: 38px;
  border-radius: 8px;
  background: rgba(255,255,255,.82);
  font-size: 11.5px;
  box-shadow: none;
}
.filter:not(.is-disabled):hover {
  box-shadow: 0 6px 16px rgba(38,39,36,.07);
  transform: none;
}
.section-stack {
  gap: 24px;
}
.section-heading {
  margin: 7px 0 13px;
}
.section-heading h2 {
  font-size: 16px;
  font-weight: 650;
}
.section-heading p {
  font-size: 11.5px;
}
.kpis {
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.kpi {
  min-height: 128px;
  padding: 19px 20px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
}
.kpi:before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  width: 34px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--rule-strong);
}
.kpi:after {
  right: -38px;
  bottom: -54px;
  width: 120px;
  height: 120px;
  background: linear-gradient(145deg,var(--surface-3),transparent);
  opacity: .65;
}
.kpi:hover {
  border-color: #d5d5d4;
  box-shadow: 0 8px 28px rgba(36,37,34,.07);
  transform: translateY(-1px);
}
.kpi.is-emphasis {
  border-color: #dec0b8;
  background: linear-gradient(145deg,#fff 15%,var(--accent-soft));
}
.kpi.is-emphasis:before {
  background: var(--accent);
}
.kpi-label {
  color: #6f706e;
  font-size: 11px;
  letter-spacing: .12em;
}
.kpi-value {
  margin: 10px 0 4px;
  font-size: clamp(25px,2.3vw,33px);
  font-weight: 650;
}
.kpi-hint {
  font-size: 11px;
}
.grid-2,.chart-grid {
  gap: 22px;
}
.overview-grid {
  gap: 22px;
  margin-bottom: 22px;
}
.panel {
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.panel-head {
  min-height: 56px;
  padding: 14px 18px;
  border-color: var(--rule);
  background: #fff;
}
.panel-head:has(+.tw) {
  border-bottom: 0;
}
.panel-head>.icon {
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  padding: 7px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
.panel-head h2 {
  font-size: 13px;
  font-weight: 650;
}
.panel-body {
  padding: 20px;
}
.panel-note {
  padding: 12px 18px;
  background: #fafaf9;
  font-size: 11px;
}
.tw {
  border-top: 1px solid var(--rule);
}
table {
  font-size: 12px;
}
th,td {
  padding: 12px 15px;
}
th {
  height: 39px;
  background: #f8f8f7;
  color: #787977;
  font-size: 11px;
  letter-spacing: .105em;
}
tbody tr:hover {
  background: var(--surface-2);
}
tbody tr:nth-child(even) {
  background: rgba(249,249,248,.55);
}
tbody tr:nth-child(even):hover {
  background: var(--surface-2);
}
td strong {
  font-weight: 700;
}
.badge {
  padding: 3px 8px;
  border: 0;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: .075em;
}
.badge.ok {
  box-shadow: inset 0 0 0 1px #c9e8dc;
}
.badge.warn {
  box-shadow: inset 0 0 0 1px #f0dbaf;
}
.badge.danger,.badge.bad {
  box-shadow: inset 0 0 0 1px #efc7c4;
}
.badge.info {
  box-shadow: inset 0 0 0 1px #e0e1dd;
}
.badge.neutral {
  box-shadow: inset 0 0 0 1px var(--rule);
}
.note {
  margin-bottom: 22px;
  padding: 16px 18px;
  border-width: 1px;
  border-left-width: 3px;
  border-radius: 9px;
  box-shadow: none;
}
.note .tag {
  font-size: 11px;
  letter-spacing: .09em;
}
.empty {
  padding: clamp(44px,7vw,74px) 24px;
}
.empty .icon {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 50%;
}
.empty h3 {
  font-size: 15px;
}
.check {
  padding: 13px 0;
}
.dot {
  box-shadow: 0 0 0 4px var(--surface-3);
}
.step.is-current {
  background: var(--accent-soft);
}
.meta-list dt,.meta-list dd {
  padding-block: 11px;
}
.donut {
  box-shadow: inset 0 0 0 1px var(--rule),0 8px 25px rgba(31,32,29,.06);
}
.donut:after {
  inset: 22px;
}
.bar {
  background: var(--accent);
  box-shadow: none;
}
.hbar-track {
  height: 8px;
}
.hbar-fill {
  background: var(--accent);
}
.mini-metric {
  background: var(--surface-2);
}
.modal {
  background: rgba(17,17,16,.62);
}
.modal-card {
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 28px 80px rgba(10,10,10,.35);
}
.btn {
  border-radius: 8px;
  box-shadow: none;
}
.btn-primary {
  background: var(--accent);
  box-shadow: 0 6px 15px rgba(118,40,21,.18);
}
.sync-toast {
  border-radius: 9px;
}
@media (max-width:820px) {
  .carrier-switcher {
    display: none;
  }
  .sync-button {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .sync-button span {
    display: none;
  }
  .kpis {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }
  .kpi {
    min-height: 118px;
    padding: 16px;
  }
  .panel {
    border-radius: 10px;
  }
  .panel-head {
    padding: 12px 14px;
  }
  .tw {
    scrollbar-width: thin;
  }
  .tw table {
    min-width: 680px;
  }
  .overview-grid,.grid-2,.chart-grid {
    gap: 14px;
  }
  .modal {
    align-items: flex-end;
  }
}
@media (max-width:480px) {
  .kpis {
    grid-template-columns: 1fr;
  }
  .kpi {
    min-height: 108px;
  }
  .kpi-value {
    font-size: 28px;
  }
  .panel-body {
    padding: 16px;
  }
  .section-heading {
    align-items: flex-start;
  }
  .section-heading .badge {
    margin-top: 3px;
  }
  .note {
    padding: 14px;
  }
  .modal {
    padding: 7px;
  }
  .modal-card {
    max-height: calc(100dvh - 14px);
  }
  .form-actions {
    gap: 8px;
  }
}
.data-table {
  font-size: 12.5px;
}
.data-table th {
  padding-top: 10px;
  padding-bottom: 10px;
  background: #f7f7f7;
  color: #70716f;
}
.data-table td {
  height: 52px;
  border-bottom-color: #ebebea;
}
.data-table tbody tr:nth-child(even) {
  background: var(--surface-2);
}
.data-table tbody tr:hover {
  background: var(--surface-2);
}
.data-table .action-col {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #d3d3d2;
  border-radius: 7px;
  background: #fff;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: .16s;
}
.table-action:after {
  content: "→";
  margin-left: 6px;
  color: var(--accent);
}
.table-action:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.zone-chip {
  display: inline-flex;
  min-width: 62px;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 7px;
  background: #efefee;
  color: var(--accent);
  font-size: 11px;
  font-weight: 650;
}
.rate-matrix {
  min-width: 780px;
}
.rate-matrix th:first-child,.rate-matrix td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #f9f9f8;
  box-shadow: 1px 0 var(--rule);
}
.rate-matrix th:first-child {
  z-index: 3;
}
.rate-cell {
  display: inline-flex;
  min-width: 62px;
  justify-content: flex-end;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink);
  font-weight: 680;
  transition: .15s;
}
.rate-cell:after {
  content: "€";
  margin-left: 4px;
  color: var(--muted);
  font-size: 11px;
}
.rate-cell:hover {
  border-color: #c4c5c1;
  background: var(--accent-soft);
  color: var(--accent);
}
.table-help {
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
}
@media (max-width:820px) {
  .data-table td {
    height: 48px;
  }
  .table-action {
    min-height: 34px;
  }
  .rate-cell {
    min-width: 58px;
  }
}
.dashboard-screen {
  display: grid;
  gap: 14px;
}
.delivery-hero {
  display: grid;
  grid-template-columns: minmax(240px,.7fr) minmax(500px,1.3fr);
  min-height: 178px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--accent-deep);
  color: #fff;
  box-shadow: 0 18px 45px rgba(30,31,28,.16);
}
.delivery-hero-main {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 28px 32px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.delivery-kicker {
  color: #aeb1a8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .005em;
  text-transform: none;
}
.delivery-hero-main>strong {
  margin: 7px 0 3px;
  font-size: 48px;
  letter-spacing: -.06em;
  line-height: 1;
}
.delivery-hero-main>strong small {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.delivery-hero-main p {
  margin: 4px 0 0;
  color: #babbb9;
  font-size: 11.5px;
}
.journey-summary {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.15fr;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
}
.journey-summary>div {
  display: flex;
  flex-direction: column;
}
.journey-summary span {
  color: #acadaa;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .005em;
  text-transform: none;
}
.journey-summary strong {
  margin: 7px 0 2px;
  font-size: 25px;
  letter-spacing: -.04em;
}
.journey-summary small {
  color: #949592;
  font-size: 11px;
}
.journey-summary i {
  color: #737570;
  font-size: 20px;
  font-style: normal;
}
.journey-summary .is-total {
  padding: 16px;
  border: 1px solid rgba(216,112,86,.22);
  border-radius: 10px;
  background: rgba(172,59,30,.1);
}
.journey-summary .is-total span {
  color: #a6a99f;
}
.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.dashboard-kpis>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-right: 1px solid var(--rule);
}
.dashboard-kpis>div:last-child {
  border: 0;
}
.dashboard-kpis span {
  color: var(--muted);
  font-size: 11px;
}
.dashboard-kpis strong {
  font-size: 18px;
  letter-spacing: -.03em;
}
.panel-subtitle {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.carrier-comparison .panel-head>.badge {
  margin-left: auto;
}
.carrier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(245px,1fr));
  gap: 12px;
  padding: 14px;
  background: #f9f9f8;
}
.carrier-card {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #fff;
  transition: .18s;
}
.carrier-card:hover {
  border-color: #cacbc9;
  box-shadow: 0 8px 22px rgba(36,37,34,.06);
  transform: translateY(-1px);
}
.carrier-card.is-best {
  border-color: #cbccc8;
  box-shadow: inset 0 3px var(--accent);
}
.carrier-card header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 14px 10px;
}
.carrier-card header>div:nth-child(2) {
  display: grid;
  min-width: 0;
}
.carrier-card header strong {
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carrier-card header span:not(.badge) {
  color: var(--muted);
  font-size: 11px;
}
.carrier-card header .badge {
  margin-left: auto;
}
.carrier-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}
.carrier-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 8px 14px 13px;
}
.carrier-total>span {
  color: var(--muted);
  font-size: 11px;
}
.carrier-total>strong {
  font-size: 26px;
  letter-spacing: -.045em;
  line-height: 1;
}
.carrier-total>strong small {
  font-size: 11px;
  letter-spacing: 0;
}
.carrier-split {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.carrier-split>div {
  padding: 9px 7px;
  text-align: center;
  border-right: 1px solid var(--rule);
}
.carrier-split>div:last-child {
  border: 0;
}
.carrier-split span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-transform: none;
}
.carrier-split strong {
  display: block;
  margin-top: 3px;
  font-size: 11px;
}
.carrier-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}
.carrier-detail:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
@media (min-width:1000px) and (min-height:720px) {
  .dashboard-screen {
    min-height: calc(100vh - 194px);
  }
  .carrier-comparison {
    align-self: stretch;
  }
}
@media (max-width:1050px) {
  .delivery-hero {
    grid-template-columns: 1fr;
  }
  .delivery-hero-main {
    padding: 22px 26px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .delivery-hero-main>strong {
    font-size: 39px;
  }
  .journey-summary {
    padding: 20px 26px;
  }
  .dashboard-kpis {
    grid-template-columns: repeat(2,1fr);
  }
  .dashboard-kpis>div:nth-child(2) {
    border-right: 0;
  }
  .dashboard-kpis>div:nth-child(-n+2) {
    border-bottom: 1px solid var(--rule);
  }
}
@media (max-width:620px) {
  .journey-summary {
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
  }
  .journey-summary>i:nth-of-type(2) {
    display: none;
  }
  .journey-summary .is-total {
    grid-column: 1/-1;
  }
  .dashboard-kpis {
    grid-template-columns: 1fr;
  }
  .dashboard-kpis>div {
    border-right: 0;
    border-bottom: 1px solid var(--rule) !important;
  }
  .dashboard-kpis>div:last-child {
    border-bottom: 0 !important;
  }
  .carrier-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }
}
.service-kpis {
  margin-bottom: 16px;
}
.table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.table-actions form {
  margin: 0;
}
.table-action.is-muted {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}
.table-action.is-muted:after {
  display: none;
}
.table-action.is-muted:hover {
  background: var(--surface-3);
  color: var(--ink-2);
}
.deadlines-screen {
  display: grid;
  gap: 18px;
}
.deadlines-screen>.section-heading {
  margin: 12px 0 -5px;
}
.deadlines-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) 290px;
  min-height: 315px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--accent-deep);
  color: #fff;
  box-shadow: 0 20px 50px rgba(30,31,28,.16);
}
.deadlines-hero-main {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 32px 38px;
}
.deadlines-kicker {
  color: #a6aaa0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .005em;
  text-transform: none;
}
.deadlines-primary-value {
  margin: 7px 0 4px;
  font-size: clamp(46px,5vw,64px);
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: 1;
}
.deadlines-primary-value small {
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -.02em;
}
.deadlines-hero-main>p {
  margin: 4px 0 25px;
  color: #bbbcb9;
  font-size: 11.5px;
}
.deadlines-comparison {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  max-width: 700px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 11px;
  background: rgba(21,22,19,.22);
}
.deadlines-comparison>div {
  display: flex;
  flex-direction: column;
  padding: 13px 16px;
  border-right: 1px solid rgba(255,255,255,.09);
}
.deadlines-comparison>div:last-child {
  border: 0;
}
.deadlines-comparison>div.is-real {
  background: rgba(193,73,43,.08);
}
.deadlines-comparison span {
  color: #a0a19e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .005em;
  text-transform: none;
}
.deadlines-comparison strong {
  margin: 4px 0 1px;
  font-size: 18px;
  letter-spacing: -.035em;
}
.deadlines-comparison small {
  color: #868783;
  font-size: 11px;
}
.deadline-score {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 28px;
  border-left: 1px solid rgba(255,255,255,.1);
  background: rgba(18,19,17,.18);
  text-align: center;
}
.deadline-ring {
  --ring: #db856f;
  display: grid;
  place-items: center;
  width: 172px;
  height: 172px;
  margin-bottom: 17px;
  border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--value)*1%),rgba(255,255,255,.1) 0);
  box-shadow: 0 12px 32px rgba(0,0,0,.13);
}
.deadline-ring.is-good {
  --ring: #4bd69d;
}
.deadline-ring.is-warning {
  --ring: #f0b34f;
}
.deadline-ring.is-bad {
  --ring: #ef7770;
}
.deadline-ring>div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  background: #2a2b27;
  box-shadow: inset 0 8px 25px rgba(0,0,0,.12);
}
.deadline-ring strong {
  font-size: 29px;
  letter-spacing: -.05em;
}
.deadline-ring span {
  margin-top: -2px;
  color: #a0a19e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: none;
}
.deadline-score-title {
  font-size: 12px;
}
.deadline-score>span {
  margin-top: 3px;
  color: #999a96;
  font-size: 11px;
}
.deadline-facts {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.deadline-facts>div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-right: 1px solid var(--rule);
}
.deadline-facts>div:last-child {
  border: 0;
}
.deadline-facts .icon {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
.deadline-facts span {
  color: var(--muted);
  font-size: 11px;
}
.deadline-facts strong {
  font-size: 17px;
  letter-spacing: -.03em;
}
.deadline-method {
  overflow: hidden;
  border: 1px solid #d7d8d6;
  border-radius: 10px;
  background: #f8f8f7;
  color: var(--ink-2);
}
.deadline-method summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
}
.deadline-method summary::-webkit-details-marker {
  display: none;
}
.method-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--info);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.deadline-method summary>span:nth-child(2) {
  flex: 1;
}
.method-more {
  color: var(--info);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
}
.deadline-method[open] .method-more {
  font-size: 0;
}
.deadline-method[open] .method-more:after {
  content: "Cerrar";
  font-size: 11px;
}
.deadline-method>div {
  padding: 0 49px 14px;
  font-size: 11.5px;
  line-height: 1.6;
}
.deadline-method p {
  margin: 0 0 6px;
}
.deadline-method p:last-child {
  margin: 0;
}
.journey-panel {
  background: linear-gradient(120deg,#fff,#f9f9f9);
}
.journey-overview {
  display: grid;
  grid-template-columns: minmax(210px,.55fr) minmax(420px,1.45fr);
  align-items: center;
  min-height: 190px;
}
.journey-total {
  align-self: stretch;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  border-right: 1px solid var(--rule);
  background: linear-gradient(145deg,var(--surface-2),#fff);
}
.journey-total>span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .005em;
  text-transform: none;
}
.journey-total>strong {
  margin: 7px 0 3px;
  font-size: 39px;
  letter-spacing: -.055em;
  line-height: 1;
}
.journey-total>strong small {
  font-size: 13px;
  letter-spacing: 0;
}
.journey-total p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.journey-breakdown {
  padding: 30px 36px;
}
.journey-labels {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
  margin-bottom: 13px;
}
.journey-labels>div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
}
.journey-labels small {
  color: var(--muted);
  font-size: 11px;
}
.journey-labels strong {
  font-size: 16px;
}
.journey-dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}
.journey-dot.is-preparation {
  background: #e1a33d;
}
.journey-dot.is-transport {
  background: var(--accent);
}
.journey-track {
  display: flex;
  height: 30px;
  overflow: hidden;
  border: 4px solid var(--surface-3);
  border-radius: 9px;
  background: var(--surface-3);
}
.journey-track>span {
  min-width: 2px;
}
.journey-preparation {
  border-radius: 5px 0 0 5px;
  background: linear-gradient(90deg,#efbf6e,#d99322);
}
.journey-transport {
  border-radius: 0 5px 5px 0;
  background: var(--accent);
}
.journey-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  text-transform: none;
}
.tail-metrics {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-top: 1px solid var(--rule);
  background: #fff;
}
.tail-metrics>div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 3px 16px;
  padding: 17px 21px;
  border-right: 1px solid var(--rule);
}
.tail-metrics>div:last-child {
  border: 0;
}
.tail-metrics>div.is-attention {
  background: #fffaf0;
}
.tail-metrics span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .005em;
  text-transform: none;
}
.tail-metrics strong {
  grid-row: 1/3;
  grid-column: 2;
  font-size: 24px;
  letter-spacing: -.04em;
}
.tail-metrics small {
  color: var(--muted);
  font-size: 11px;
}
.province-journey-list {
  display: grid;
  gap: 14px;
  padding: 22px;
}
.province-journey-row {
  display: grid;
  grid-template-columns: minmax(105px,165px) minmax(160px,1fr) 58px 65px;
  align-items: center;
  gap: 12px;
}
.province-name {
  display: grid;
  min-width: 0;
}
.province-name strong {
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.province-name span {
  color: var(--muted);
  font-size: 11px;
}
.province-duration {
  display: flex;
  height: 14px;
  overflow: hidden;
  border-radius: 5px;
  background: #f0f0ef;
}
.province-duration>span {
  min-width: 2px;
}
.province-duration .is-preparation {
  background: linear-gradient(90deg,#f0c16e,#d99525);
}
.province-duration .is-transport {
  background: var(--accent);
}
.province-total {
  text-align: right;
  font-size: 11px;
}
.province-worst {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}
.province-performance-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--rule);
}
.province-card {
  padding: 18px;
  background: #fff;
}
.province-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.province-card header>div {
  display: grid;
}
.province-card header strong {
  font-size: 11.5px;
}
.province-card header div>span {
  color: var(--muted);
  font-size: 11px;
}
.province-days {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 15px 0 10px;
}
.province-days strong {
  font-size: 22px;
  letter-spacing: -.045em;
}
.province-days strong small {
  font-size: 11px;
  letter-spacing: 0;
}
.province-days>span {
  padding-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
}
.compliance-track {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-3);
}
.compliance-track span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
}
.compliance-track .is-good {
  background: var(--ok);
}
.compliance-track .is-warning {
  background: var(--warn);
}
.compliance-track .is-bad {
  background: var(--danger);
}
.province-card footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
}
.full-data-table {
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}
.full-data-table>summary {
  padding: 13px 18px;
  color: var(--accent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  list-style-position: inside;
}
.full-data-table[open]>summary {
  border-bottom: 1px solid var(--rule);
}
.full-data-table .tw {
  border-top: 0;
}
.deadline-charts .panel {
  display: flex;
  flex-direction: column;
}
.deadline-charts .chart-body {
  flex: 1;
}
.deadline-charts .bar-chart {
  height: 235px;
}
.deadline-charts .trend-chart {
  height: 235px;
}
.deadline-charts .trend-column {
  height: 145px;
}
.week-compliance {
  align-self: center;
  margin-bottom: 3px;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 650;
}
.week-compliance.is-good {
  background: var(--ok-soft);
  color: var(--ok);
}
.week-compliance.is-warning {
  background: var(--warn-soft);
  color: var(--warn);
}
.week-compliance.is-bad {
  background: var(--danger-soft);
  color: var(--danger);
}
.slow-city-list {
  display: grid;
  padding: 8px 22px;
}
.slow-city-row {
  display: grid;
  grid-template-columns: 24px minmax(140px,210px) minmax(130px,1fr) 48px 46px 60px;
  align-items: center;
  gap: 12px;
  min-height: 53px;
  border-bottom: 1px solid var(--rule);
}
.slow-city-row:last-child {
  border: 0;
}
.slow-city-rank {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.slow-city-name {
  display: grid;
  min-width: 0;
}
.slow-city-name strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slow-city-name span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slow-city-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-3);
}
.slow-city-bar span {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
  background: var(--accent);
}
.slow-city-days {
  text-align: right;
  font-size: 11px;
}
.slow-city-worst {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}
@media (max-width:1100px) {
  .deadlines-hero {
    grid-template-columns: minmax(0,1fr) 245px;
  }
  .deadlines-hero-main {
    padding: 30px;
  }
  .deadline-ring {
    width: 150px;
    height: 150px;
  }
  .deadline-ring>div {
    width: 114px;
    height: 114px;
  }
  .province-performance-grid {
    grid-template-columns: repeat(2,1fr);
  }
}
@media (max-width:820px) {
  .deadlines-screen {
    gap: 14px;
  }
  .deadlines-screen>.section-heading {
    margin-top: 10px;
  }
  .deadlines-hero {
    grid-template-columns: 1fr;
  }
  .deadlines-hero-main {
    padding: 27px 24px;
  }
  .deadline-score {
    display: grid;
    grid-template-columns: auto 1fr;
    justify-items: start;
    gap: 2px 18px;
    padding: 21px 24px;
    border-top: 1px solid rgba(255,255,255,.1);
    border-left: 0;
    text-align: left;
  }
  .deadline-ring {
    grid-row: 1/3;
    width: 88px;
    height: 88px;
    margin: 0;
  }
  .deadline-ring>div {
    width: 66px;
    height: 66px;
  }
  .deadline-ring strong {
    font-size: 17px;
  }
  .deadline-ring span {
    font-size: 11px;
  }
  .deadline-score-title {
    align-self: end;
  }
  .deadline-score>span {
    align-self: start;
  }
  .journey-overview {
    grid-template-columns: 1fr;
  }
  .journey-total {
    padding: 24px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .journey-breakdown {
    padding: 24px;
  }
  .province-performance-grid {
    grid-template-columns: 1fr 1fr;
  }
  .deadline-charts .bar-chart,.deadline-charts .trend-chart {
    overflow-x: auto;
  }
  .slow-city-row {
    grid-template-columns: 24px minmax(110px,180px) minmax(100px,1fr) 46px 44px;
  }
  .slow-city-worst {
    display: none;
  }
}
@media (max-width:620px) {
  .deadlines-primary-value {
    font-size: 45px;
  }
  .deadlines-comparison {
    grid-template-columns: 1fr;
  }
  .deadlines-comparison>div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1px 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  .deadlines-comparison strong {
    grid-row: 1/3;
    grid-column: 2;
  }
  .deadline-facts {
    grid-template-columns: 1fr;
  }
  .deadline-facts>div {
    padding: 12px 15px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .deadline-method summary {
    align-items: flex-start;
  }
  .method-more {
    display: none;
  }
  .deadline-method>div {
    padding: 0 16px 14px;
  }
  .journey-labels {
    gap: 12px;
  }
  .journey-labels>div {
    grid-template-columns: auto 1fr;
  }
  .journey-labels strong {
    grid-column: 2;
    font-size: 14px;
  }
  .tail-metrics {
    grid-template-columns: 1fr;
  }
  .tail-metrics>div {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .province-journey-list {
    padding: 16px 14px;
  }
  .province-journey-row {
    grid-template-columns: 100px minmax(90px,1fr) 48px;
  }
  .province-worst {
    display: none;
  }
  .province-performance-grid {
    grid-template-columns: 1fr;
  }
  .slow-city-list {
    padding: 7px 14px;
  }
  .slow-city-row {
    grid-template-columns: 24px minmax(100px,1fr) 45px 43px;
    gap: 8px;
  }
  .slow-city-bar,.slow-city-worst {
    display: none;
  }
  .deadline-charts .chart-body {
    padding-inline: 13px;
  }
}
.delivery-map-screen {
  display: grid;
  gap: 18px;
}
.map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.map-metric-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
}
.map-metric-switch button {
  min-height: 36px;
  padding: 7px 13px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 690;
  white-space: nowrap;
  cursor: pointer;
  transition: .16s;
}
.map-metric-switch button:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.map-metric-switch button.is-active {
  background: #292a27;
  color: #fff;
  box-shadow: 0 5px 13px rgba(34,35,31,.14);
}
.map-province-picker {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}
.map-province-picker>span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
}
.map-province-picker select {
  min-width: 210px;
  height: 36px;
  padding: 0 31px 0 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 7px;
  background: #fafaf9;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
}
.delivery-map-layout {
  display: grid;
  grid-template-columns: minmax(500px,1.45fr) minmax(280px,.55fr);
  gap: 18px;
}
.map-canvas-panel {
  display: flex;
  min-height: 580px;
  overflow: hidden;
  flex-direction: column;
}
.map-canvas {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 500px;
  padding: 20px;
  background: var(--surface-2);
}
.spain-map-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 515px;
  overflow: visible;
}
.spain-map-provinces path {
  fill: var(--province-color,#e1e2e0);
  stroke: #fff;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition: fill .25s,filter .15s,stroke .15s;
  outline: none;
}
.spain-map-provinces path.has-data {
  cursor: pointer;
}
.spain-map-provinces path.has-data:hover,.spain-map-provinces path.has-data:focus-visible {
  filter: brightness(.92) saturate(1.12);
  stroke: #2c2d29;
  stroke-width: 2.2;
}
.spain-map-provinces path.is-selected {
  filter: brightness(.9) saturate(1.18);
  stroke: #222320;
  stroke-width: 3;
  paint-order: stroke fill;
}
.spain-map-inset path {
  fill: none;
  stroke: #c7c7c6;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.spain-map-inset text {
  fill: #929391;
  font-size: 12px;
  font-family: system-ui,sans-serif;
  letter-spacing: .005em;
  text-transform: none;
}
.map-tooltip {
  position: absolute;
  z-index: 3;
  display: none;
  width: 180px;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: #262724;
  color: #fff;
  box-shadow: 0 12px 30px rgba(24,25,23,.22);
  pointer-events: none;
}
.map-tooltip.is-visible {
  display: grid;
}
.map-tooltip strong {
  font-size: 11px;
}
.map-tooltip span {
  margin-top: 2px;
  color: #b8bab3;
  font-size: 11px;
}
.map-tooltip small {
  margin-top: 3px;
  color: #acadaa;
  font-size: 11px;
}
.map-legend {
  display: grid;
  grid-template-columns: auto minmax(140px,280px) auto;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  border-top: 1px solid var(--rule);
  background: #fff;
  color: var(--muted);
  font-size: 11px;
}
.map-legend i {
  height: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg,#5ebf98 0%,#56b9b1 25%,#e4bc62 52%,#e28f52 75%,#d66565 100%);
}
.map-legend.is-compliance i {
  background: linear-gradient(90deg,#db6d69,#e7b657 50%,#4dbb8a);
}
.map-source {
  padding: 9px 16px;
  border-top: 1px solid var(--rule);
  background: #fbfbfb;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}
.province-inspector {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  background: var(--accent-deep);
  color: #fff;
  border: 0;
  box-shadow: 0 18px 45px rgba(29,30,27,.14);
}
.province-inspector-head {
  padding: 25px 25px 21px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.province-inspector-head>span {
  color: #9ca095;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .005em;
  text-transform: none;
}
.province-inspector-head h2 {
  margin: 5px 0 3px;
  font-size: 23px;
  letter-spacing: -.04em;
}
.province-inspector-head p {
  margin: 0;
  color: #abacaa;
  font-size: 11px;
  line-height: 1.5;
}
.province-detail-primary {
  display: flex;
  flex-direction: column;
  padding: 25px;
}
.province-detail-primary span,.province-detail-grid span {
  color: #9d9e9b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .005em;
  text-transform: none;
}
.province-detail-primary strong {
  margin: 6px 0 2px;
  color: #afb2a9;
  font-size: 43px;
  letter-spacing: -.06em;
  line-height: 1;
}
.province-detail-primary small {
  color: #848581;
  font-size: 11px;
}
.province-detail-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  margin: 0 16px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
}
.province-detail-grid>div {
  display: flex;
  min-height: 74px;
  padding: 13px;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.province-detail-grid>div:nth-child(even) {
  border-right: 0;
}
.province-detail-grid>div.is-wide {
  grid-column: 1/-1;
  min-height: 63px;
  border: 0;
}
.province-detail-grid strong {
  margin-top: 5px;
  font-size: 18px;
}
.province-inspector-note {
  margin-top: auto;
  padding: 17px 20px;
  border-left: 3px solid #82867b;
  background: rgba(187,81,55,.08);
  color: #aaaba9;
  font-size: 11px;
  line-height: 1.55;
}
.province-inspector-note.is-alert {
  border-color: #e5a64b;
  background: rgba(229,166,75,.09);
}
.map-ranking-panel {
  overflow: hidden;
}
.map-ranking-panel .panel-head>.badge {
  margin-left: auto;
}
.map-ranking {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  background: var(--rule);
}
.map-ranking-item {
  display: grid;
  grid-template-columns: 27px 1fr auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 14px;
  border: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: .15s;
}
.map-ranking-item:hover,.map-ranking-item:focus-visible {
  z-index: 1;
  background: var(--surface-2);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.map-ranking-item>span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.map-ranking-item>div {
  display: grid;
  min-width: 0;
}
.map-ranking-item strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-ranking-item small {
  color: var(--muted);
  font-size: 11px;
}
.map-ranking-item>b {
  font-size: 15px;
  letter-spacing: -.035em;
}
.map-ranking-item>i {
  grid-column: 2/-1;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  text-align: right;
}
@media (max-width:1150px) {
  .delivery-map-layout {
    grid-template-columns: minmax(430px,1.25fr) minmax(265px,.75fr);
  }
  .map-ranking {
    grid-template-columns: repeat(2,1fr);
  }
}
@media (max-width:820px) {
  .map-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .map-metric-switch {
    width: 100%;
  }
  .map-province-picker {
    justify-content: space-between;
  }
  .map-province-picker select {
    min-width: 0;
    flex: 1;
  }
  .delivery-map-layout {
    grid-template-columns: 1fr;
  }
  .map-canvas-panel {
    min-height: 0;
  }
  .map-canvas {
    min-height: 390px;
    padding: 10px;
  }
  .province-inspector {
    min-height: 470px;
  }
  .map-ranking {
    grid-template-columns: repeat(2,1fr);
  }
}
@media (max-width:520px) {
  .map-canvas {
    min-height: 300px;
  }
  .map-legend {
    grid-template-columns: auto minmax(80px,1fr) auto;
    padding-inline: 12px;
  }
  .province-inspector-head,.province-detail-primary {
    padding: 20px;
  }
  .map-ranking {
    grid-template-columns: 1fr;
  }
  .map-ranking-item {
    padding: 12px;
  }
  .map-tooltip {
    display: none !important;
  }
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.nav-command kbd {
  padding: 2px 5px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  background: rgba(0,0,0,.12);
  color: #81827f;
  font: inherit;
  font-size: 11px;
  white-space: nowrap;
}
.nav-command {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 10vh 20px 20px;
}
.nav-command[hidden] {
  display: none;
}
.nav-command-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(15,16,14,.58);
  cursor: default;
  backdrop-filter: blur(5px);
}
.nav-command-dialog {
  position: relative;
  width: min(620px,100%);
  max-height: min(690px,78vh);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(14,15,13,.3);
}
.nav-command-search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}
.nav-command-search>.icon {
  width: 20px;
  height: 20px;
  color: var(--accent);
}
.nav-command-search input {
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
}
.nav-command-search input:focus {
  box-shadow: none;
}
.nav-command-search kbd {
  border-color: var(--rule);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
}
.nav-command-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 17px 8px;
  color: var(--muted);
}
.nav-command-head strong {
  font-size: 12px;
  letter-spacing: .005em;
  text-transform: none;
}
.nav-command-head span {
  font-size: 11px;
}
.nav-command-results {
  max-height: calc(min(690px,78vh) - 105px);
  overflow-y: auto;
  padding: 4px 9px 11px;
}
.nav-command-result {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 7px 10px;
  border-radius: 9px;
  color: var(--ink);
  transition: .14s;
}
.nav-command-result:hover,.nav-command-result:focus-visible {
  background: var(--accent-soft);
  color: var(--ink);
  outline: 0;
}
.nav-command-result.is-current {
  background: var(--surface-2);
}
.nav-command-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--ink-2);
}
.nav-command-result.is-current .nav-command-icon {
  background: var(--accent-soft);
  color: var(--accent);
}
.nav-command-icon .icon {
  width: 16px;
  height: 16px;
}
.nav-command-result>span:nth-child(2) {
  display: grid;
}
.nav-command-result strong {
  font-size: 11.5px;
}
.nav-command-result small {
  color: var(--muted);
  font-size: 11px;
}
.nav-command-result em {
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
}
.nav-command-result>b {
  color: var(--rule-strong);
  font-size: 14px;
}
.nav-command-empty {
  padding: 36px 20px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}
.nav-command-empty[hidden],.nav-command-result[hidden] {
  display: none !important;
}
.nav-command-open {
  overflow: hidden;
}
@media (max-width:820px) {
  .nav-command {
    padding: 12px;
  }
  .nav-command-dialog {
    max-height: calc(100dvh - 24px);
  }
  .nav-command-results {
    max-height: calc(100dvh - 129px);
  }
}
@media (max-width:480px) {
  .nav-command {
    padding: 0;
    align-items: end;
  }
  .nav-command-dialog {
    width: 100%;
    max-height: 88dvh;
    border-radius: 15px 15px 0 0;
  }
  .nav-command-search {
    padding: 12px 14px;
  }
  .nav-command-results {
    max-height: calc(88dvh - 105px);
  }
}
.notice {
  padding: 18px 22px;
  border-left: 4px solid var(--rule-strong);
}
.notice p {
  margin: 0;
  max-width: 78ch;
  line-height: 1.55;
}
.notice-warning {
  border-left-color: var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
}
.deadline-ring.is-empty {
  --donut-color: var(--rule-strong);
  color: var(--muted);
}
.coverage-table th[scope=row] {
  font-weight: 600;
  color: var(--ink);
}
.coverage-table .is-numeric {
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.coverage-table .is-numeric small {
  color: var(--rule-strong);
}
.coverage-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
}
.coverage-tag.is-full {
  background: var(--ok-soft);
  color: var(--ok);
}
.coverage-tag.is-partial {
  background: var(--warn-soft);
  color: var(--warn);
}
.coverage-tag.is-none {
  background: var(--bg);
  color: var(--muted);
}
.role-dashboard {
  display: grid;
  gap: 18px;
}
.role-hero {
  display: grid;
  grid-template-columns: minmax(280px,.82fr) minmax(520px,1.18fr);
  min-height: 205px;
  overflow: hidden;
  border-radius: 16px;
  color: #fff;
  box-shadow: 0 20px 50px rgba(25,26,24,.16);
}
.role-hero.is-office {
  background: linear-gradient(125deg,#262723 0%,#31322e 56%,#3a3c37 100%);
}
.role-hero.is-factory {
  background: linear-gradient(125deg,#272824 0%,#363833 58%,#454740 100%);
}
.role-hero-primary {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding: 30px 34px;
  border-right: 1px solid rgba(255,255,255,.11);
}
.role-kicker {
  color: #a9aca4;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .005em;
  text-transform: none;
}
.role-hero-primary>strong {
  margin: 7px 0 3px;
  font-size: clamp(43px,4.3vw,60px);
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: 1;
}
.role-hero-primary>strong small {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.role-hero-primary p {
  margin: 5px 0 15px;
  color: #bebfbd;
  font-size: 11px;
}
.role-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 7px;
  background: rgba(255,255,255,.06);
  color: #f0f0ef;
  font-size: 11px;
  font-weight: 700;
}
.role-hero-link:hover {
  background: rgba(255,255,255,.11);
  color: #fff;
}
.role-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  align-items: stretch;
  gap: 1px;
  background: rgba(255,255,255,.09);
}
.role-hero-metrics>div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 27px 24px;
  background: rgba(28,29,27,.44);
}
.role-hero-metrics>div.is-highlight {
  background: rgba(190,80,52,.13);
}
.role-hero-metrics>div.is-warning {
  background: rgba(211,140,40,.15);
}
.role-hero-metrics span {
  color: #aeb0ac;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: none;
}
.role-hero-metrics strong {
  margin: 7px 0 3px;
  font-size: clamp(21px,2.2vw,31px);
  letter-spacing: -.045em;
}
.role-hero-metrics small {
  color: #92938f;
  font-size: 11px;
}
.role-kpis {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.role-kpi {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 16px 19px;
  border-right: 1px solid var(--rule);
  color: var(--ink);
  transition: .16s;
}
.role-kpi:last-child {
  border: 0;
}
.role-kpi:hover {
  z-index: 1;
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: inset 0 -2px var(--accent);
}
.role-kpi.needs-attention {
  background: linear-gradient(145deg,#fff,#fff8ed);
}
.role-kpi.needs-attention:before {
  content: "";
  position: absolute;
  top: 13px;
  right: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 4px var(--warn-soft);
}
.role-kpi>span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
}
.role-kpi>strong {
  margin: 3px 0 1px;
  font-size: 24px;
  letter-spacing: -.045em;
}
.role-kpi>small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
  gap: 18px;
}
.dashboard-work-panel,.dashboard-focus-panel,.compact-carriers {
  overflow: hidden;
}
.panel-head-link {
  margin-left: auto;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.dashboard-list {
  display: grid;
}
.dashboard-list-row {
  display: grid;
  grid-template-columns: 36px minmax(115px,1fr) auto auto;
  align-items: center;
  gap: 11px;
  min-height: 59px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  transition: .14s;
}
.dashboard-list-row:last-child {
  border-bottom: 0;
}
.dashboard-list-row:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.list-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--ink-2);
}
.list-icon.is-danger {
  background: var(--danger-soft);
  color: var(--danger);
}
.list-icon .icon {
  width: 15px;
  height: 15px;
}
.list-main {
  display: grid;
  min-width: 0;
}
.list-main strong,.list-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-main strong {
  font-size: 11.5px;
}
.list-main small {
  color: var(--muted);
  font-size: 11px;
}
.list-value {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.shipment-state {
  max-width: 145px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-arrow {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
}
.compact-empty {
  padding: 36px 20px;
}
.compact-empty h3 {
  margin-top: 0;
}
.focus-actions {
  display: grid;
}
.focus-actions>a {
  display: grid;
  grid-template-columns: 43px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 17px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.focus-actions>a:last-child {
  border: 0;
}
.focus-actions>a:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.focus-number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 15px;
  font-weight: 650;
}
.focus-number.is-neutral {
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 20px;
}
.focus-number.is-teal {
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
}
.focus-actions>a>span:nth-child(2) {
  display: grid;
}
.focus-actions strong {
  font-size: 11.5px;
}
.focus-actions small {
  color: var(--muted);
  font-size: 11px;
}
.focus-actions b {
  color: var(--rule-strong);
  font-size: 15px;
}
.primary-filter {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.primary-filter:hover {
  background: var(--accent-hover) !important;
  color: #fff;
}
.compact-carrier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(275px,1fr));
  gap: 1px;
  background: var(--rule);
}
.compact-carrier {
  display: grid;
  grid-template-columns: 36px minmax(90px,1fr) auto auto;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 11px 15px;
  background: #fff;
  color: var(--ink);
}
.compact-carrier:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.compact-carrier>span:not(.carrier-avatar) {
  display: grid;
  min-width: 0;
}
.compact-carrier>span:nth-child(n+3) {
  text-align: right;
}
.compact-carrier strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-carrier small {
  color: var(--muted);
  font-size: 11px;
}
@media (max-width:1100px) {
  .role-hero {
    grid-template-columns: 1fr;
  }
  .role-hero-primary {
    padding: 25px 28px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .role-hero-primary>strong {
    font-size: 45px;
  }
  .dashboard-columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width:760px) {
  .role-dashboard {
    gap: 13px;
  }
  .role-hero-metrics {
    grid-template-columns: 1fr;
  }
  .role-hero-metrics>div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 14px 20px;
  }
  .role-hero-metrics strong {
    grid-row: 1/3;
    grid-column: 2;
    align-self: center;
    font-size: 22px;
  }
  .role-kpis {
    grid-template-columns: repeat(2,1fr);
  }
  .role-kpi:nth-child(2) {
    border-right: 0;
  }
  .role-kpi:nth-child(-n+2) {
    border-bottom: 1px solid var(--rule);
  }
  .dashboard-list-row {
    grid-template-columns: 34px minmax(90px,1fr) auto;
  }
  .dashboard-list-row .list-value {
    display: none;
  }
  .shipment-state {
    max-width: 90px;
  }
  .compact-carrier-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width:460px) {
  .role-hero-primary {
    padding: 23px 21px;
  }
  .role-hero-primary>strong {
    font-size: 40px;
  }
  .role-kpis {
    grid-template-columns: 1fr;
  }
  .role-kpi {
    border-right: 0;
    border-bottom: 1px solid var(--rule) !important;
  }
  .role-kpi:last-child {
    border-bottom: 0 !important;
  }
  .panel-head-link {
    display: none;
  }
  .dashboard-list-row {
    padding-inline: 12px;
  }
  .dashboard-list-row .badge {
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .compact-carrier {
    grid-template-columns: 36px minmax(80px,1fr) auto;
  }
  .compact-carrier>span:last-child {
    display: none;
  }
}
.accounting-overview {
  display: grid;
  grid-template-columns: minmax(170px,.82fr) minmax(250px,1.25fr) minmax(155px,.68fr);
  grid-template-rows: 42px minmax(0,1fr);
  overflow: hidden;
  border-radius: 13px;
  background: var(--accent-deep);
  color: #fff;
  box-shadow: 0 15px 38px rgba(28,29,27,.16);
}
.accounting-title {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.accounting-title>span {
  color: #a9aca4;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .005em;
  text-transform: none;
}
.accounting-title>a {
  color: #c8c9c6;
  font-size: 11px;
  font-weight: 700;
}
.accounting-title>a:hover {
  color: #fff;
}
.accounting-main,.accounting-comparison,.accounting-balance {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 15px 20px;
}
.accounting-main {
  border-right: 1px solid rgba(255,255,255,.1);
}
.accounting-main>span,.accounting-balance>span {
  color: #aeaeac;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
}
.accounting-main>strong {
  margin: 5px 0 1px;
  font-size: clamp(28px,2.8vw,43px);
  letter-spacing: -.06em;
  line-height: 1;
}
.accounting-main>strong small {
  font-size: 15px;
  letter-spacing: 0;
}
.accounting-main p {
  margin: 4px 0 0;
  color: #939491;
  font-size: 11px;
}
.accounting-comparison {
  gap: 13px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.accounting-comparison>div {
  display: grid;
  gap: 5px;
}
.accounting-comparison span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.accounting-comparison b {
  color: #acaeab;
  font-size: 11px;
  font-weight: 650;
}
.accounting-comparison strong {
  font-size: 11px;
}
.accounting-comparison i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.09);
}
.accounting-comparison em {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
}
.accounting-comparison .is-billed {
  background: linear-gradient(90deg,#e0a345,#f2c875);
}
.accounting-comparison .is-expected {
  background: linear-gradient(90deg,#7a7e72,#acafa7);
}
.accounting-balance {
  background: rgba(255,255,255,.035);
}
.accounting-balance strong {
  margin: 5px 0 2px;
  font-size: clamp(20px,2vw,30px);
  letter-spacing: -.045em;
}
.accounting-balance small {
  color: #939491;
  font-size: 11px;
  line-height: 1.35;
}
.accounting-balance.is-negative strong {
  color: #ffc36d;
}
.accounting-balance.is-positive strong {
  color: #afb2aa;
}
.reconciliation-overview {
  display: flex;
  min-height: 0;
  flex-direction: column;
}
.reconciliation-overview .panel-head {
  min-height: 48px;
  padding-block: 9px;
}
.reconciliation-body {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  min-height: 0;
  flex: 1;
  padding: 12px 14px;
  gap: 11px;
}
.reconciliation-ring {
  --value: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--value)*1%),var(--surface-3) 0);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.reconciliation-ring:after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--rule);
}
.reconciliation-ring>div {
  position: relative;
  z-index: 1;
  display: grid;
  text-align: center;
}
.reconciliation-ring strong {
  font-size: 21px;
  letter-spacing: -.04em;
}
.reconciliation-ring span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
}
.accounting-alerts {
  display: grid;
  gap: 5px;
}
.accounting-alerts>a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 8px;
  padding: 6px 8px;
  border-left: 2px solid var(--rule);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--ink);
}
.accounting-alerts>a.has-warning {
  border-color: var(--warn);
  background: var(--warn-soft);
}
.accounting-alerts span {
  color: var(--muted);
  font-size: 12px;
  text-transform: none;
}
.accounting-alerts strong {
  font-size: 11px;
}
.accounting-alerts small {
  grid-column: 1/-1;
  color: var(--muted);
  font-size: 11px;
}
.accounting-footer {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 13px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
}
.accounting-footer b {
  color: var(--ink);
  font-size: 11px;
}
.accounting-footer a {
  margin-left: auto;
  font-weight: 700;
}
.deadline-journey {
  display: flex;
  height: 13px;
  overflow: hidden;
  margin-top: auto;
  border: 3px solid var(--surface-3);
  border-radius: 6px;
  background: var(--surface-3);
}
.deadline-journey span {
  min-width: 2px;
}
.deadline-journey .is-preparation {
  background: linear-gradient(90deg,#f0c270,#d99527);
}
.deadline-journey .is-transport {
  background: var(--accent);
}
.cockpit-empty {
  display: grid;
  place-content: center;
  min-height: 0;
  flex: 1;
  padding: 20px;
}
@media (max-width:1100px) and (min-width:981px) {
  .accounting-overview {
    grid-template-columns: minmax(100px,.75fr) minmax(150px,1.15fr) minmax(90px,.65fr);
  }
  .accounting-main,.accounting-comparison,.accounting-balance {
    padding-inline: 12px;
  }
  .reconciliation-body {
    grid-template-columns: 82px 1fr;
    padding-inline: 8px;
  }
  .reconciliation-ring {
    width: 76px;
  }
}
@media (max-width:980px),(max-height:719px) {
  .accounting-overview {
    grid-template-columns: repeat(3,1fr);
    min-height: 220px;
  }
}
@media (max-width:580px) {
  .accounting-overview {
    grid-template-columns: 1fr;
    grid-template-rows: 42px repeat(3,auto);
  }
  .accounting-main,.accounting-comparison {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .reconciliation-body {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .accounting-alerts {
    width: 100%;
  }
}
.reconciliation-overview .panel-head h2 {
  font-size: 15px;
}
.accounting-title>span {
  font-size: 11px;
}
.accounting-title>a {
  font-size: 11px;
}
.accounting-main>span,.accounting-balance>span {
  font-size: 11px;
}
.accounting-main>strong {
  font-size: clamp(36px,3.2vw,50px);
}
.accounting-main>strong small {
  font-size: 18px;
}
.accounting-main p {
  font-size: 11px;
}
.accounting-comparison b {
  font-size: 11px;
}
.accounting-comparison strong {
  font-size: 13px;
}
.accounting-comparison i {
  height: 10px;
}
.accounting-balance strong {
  font-size: clamp(25px,2.3vw,34px);
}
.accounting-balance small {
  font-size: 11px;
}
.accounting-alerts span {
  font-size: 11px;
}
.accounting-alerts strong {
  font-size: 13px;
}
.accounting-alerts small {
  font-size: 11px;
}
.accounting-footer {
  font-size: 11px;
}
.accounting-footer b {
  font-size: 12px;
}
.carrier-navigator {
  position: relative;
  z-index: 22;
  flex: 0 0 auto;
}
.carrier-navigator>summary {
  display: grid;
  grid-template-columns: 42px minmax(125px,1fr) 18px;
  align-items: center;
  gap: 10px;
  min-width: 232px;
  min-height: 56px;
  padding: 7px 10px 7px 8px;
  border: 1px solid #c1c2be;
  border-radius: 12px;
  background: linear-gradient(145deg,#fcfcfb,#efefee);
  color: var(--ink);
  box-shadow: 0 7px 20px rgba(52,54,48,.09),inset 0 1px #fff;
  cursor: pointer;
  list-style: none;
  transition: border-color .16s,box-shadow .16s,transform .16s;
}
.carrier-navigator>summary::-webkit-details-marker {
  display: none;
}
.carrier-navigator>summary:hover {
  border-color: var(--accent);
  box-shadow: 0 9px 24px rgba(52,54,48,.14);
  transform: translateY(-1px);
}
.carrier-navigator[open]>summary {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(118,40,21,.11);
}
.carrier-navigator-avatar,.carrier-option-avatar {
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 820;
  letter-spacing: .04em;
}
.carrier-navigator-avatar {
  width: 42px;
  height: 42px;
  font-size: 11px;
  box-shadow: 0 6px 13px rgba(118,40,21,.2);
}
.carrier-navigator-current {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  min-width: 0;
  column-gap: 7px;
  line-height: 1.1;
}
.carrier-navigator-current small {
  grid-column: 1/-1;
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .005em;
  text-transform: none;
}
.carrier-navigator-current strong {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carrier-navigator-current em {
  padding: 3px 5px;
  border-radius: 5px;
  background: rgba(118,40,21,.11);
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
  letter-spacing: .06em;
}
.carrier-navigator-chevron {
  width: 16px;
  height: 16px;
  color: var(--accent);
  transition: transform .16s;
}
.carrier-navigator[open] .carrier-navigator-chevron {
  transform: rotate(180deg);
}
.carrier-navigator-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 370px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 65px rgba(27,28,25,.22);
}
.carrier-navigator-menu>header {
  display: grid;
  gap: 2px;
  padding: 15px 16px 13px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(145deg,var(--surface-2),#f2f2f2);
}
.carrier-navigator-menu>header strong {
  font-size: 13px;
}
.carrier-navigator-menu>header small {
  color: var(--muted);
  font-size: 11px;
}
.carrier-navigator-options {
  display: grid;
  padding: 7px;
}
.carrier-navigator-option {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 62px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: .14s;
}
.carrier-navigator-option:hover {
  border-color: #d4d5d2;
  background: #f5f5f5;
}
.carrier-navigator-option.is-active {
  border-color: #d9b3a9;
  background: var(--accent-soft);
  box-shadow: inset 3px 0 var(--accent);
}
.carrier-option-avatar {
  width: 40px;
  height: 40px;
  background: #e6e7e5;
  color: var(--accent);
  font-size: 11px;
}
.carrier-navigator-option.is-active .carrier-option-avatar {
  background: var(--accent);
  color: #fff;
}
.carrier-option-name {
  display: grid;
  min-width: 0;
}
.carrier-option-name strong,.carrier-option-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carrier-option-name strong {
  font-size: 12.5px;
  font-weight: 600;
}
.carrier-option-name small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.carrier-option-status {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .005em;
  text-transform: none;
}
.carrier-option-status .icon {
  width: 11px;
  height: 11px;
  stroke-width: 2.4;
}
.carrier-option-arrow {
  padding-right: 5px;
  color: var(--rule-strong);
  font-size: 17px;
}
@media (max-width:1200px) and (min-width:821px) {
  .carrier-navigator>summary {
    min-width: 210px;
  }
  .carrier-navigator-menu {
    right: auto;
    left: 0;
  }
}
@media (max-width:820px) {
  .carrier-navigator>summary {
    grid-template-columns: 36px minmax(64px,1fr) 14px;
    min-width: 132px;
    min-height: 44px;
    padding: 4px 7px;
    gap: 7px;
  }
  .carrier-navigator-avatar {
    width: 36px;
    height: 36px;
  }
  .carrier-navigator-current small {
    display: none;
  }
  .carrier-navigator-current strong {
    font-size: 11px;
  }
  .carrier-navigator-current em {
    font-size: 11px;
  }
  .carrier-navigator-chevron {
    width: 13px;
    height: 13px;
  }
  .carrier-navigator-menu {
    position: fixed;
    top: 76px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100dvh - 88px);
    overflow: auto;
  }
  .carrier-navigator-option {
    min-height: 58px;
  }
}
@media (max-width:480px) {
  .carrier-navigator>summary {
    grid-template-columns: 34px minmax(54px,1fr) 12px;
    min-width: 112px;
  }
  .carrier-navigator-avatar {
    width: 34px;
    height: 34px;
  }
  .carrier-navigator-current em {
    display: none;
  }
  .carrier-navigator-current strong {
    font-size: 11px;
  }
  .carrier-navigator-menu {
    top: 70px;
  }
}
.promise-workspace {
  --promise-blue: #3178a8;
  --promise-purple: #7658a6;
  display: grid;
  gap: 14px;
}
.promise-command {
  display: grid;
  grid-template-columns: minmax(235px,.72fr) minmax(520px,1.7fr) minmax(175px,.5fr);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 15px;
  background: var(--rule);
  box-shadow: var(--shadow);
}
.promise-command>* {
  background: #fff;
}
.promise-command-state {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px;
}
.promise-state-icon {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  border-radius: 13px;
  background: var(--ok-soft);
  color: var(--ok);
}
.promise-command.is-blocked .promise-state-icon {
  background: var(--danger-soft);
  color: var(--danger);
}
.promise-state-icon .icon {
  width: 21px;
  height: 21px;
}
.promise-command-state>div {
  display: grid;
  min-width: 0;
}
.promise-command-state h2 {
  margin: 3px 0 2px;
  font-size: 18px;
  letter-spacing: -.025em;
}
.promise-command-state p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.promise-flow {
  display: grid;
  grid-template-columns: 1fr 18px 1fr 18px 1fr;
  align-items: stretch;
  gap: 0;
  background: linear-gradient(120deg,#fcfcfc,#f7f7f6);
}
.promise-flow>button {
  display: grid;
  grid-template-columns: 35px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 15px 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: .16s;
}
.promise-flow>button:hover,.promise-flow>button.is-active {
  background: #fff;
  box-shadow: inset 0 -3px var(--accent);
}
.promise-flow-icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
}
.promise-flow-icon .icon {
  width: 16px;
  height: 16px;
}
.promise-flow-icon.is-published {
  background: var(--ok-soft);
  color: var(--ok);
}
.promise-flow-icon.is-review {
  background: var(--warn-soft);
  color: var(--warn);
}
.promise-flow-icon.is-blocked {
  background: var(--danger-soft);
  color: var(--danger);
}
.promise-flow button>span:last-child {
  display: grid;
  min-width: 0;
}
.promise-flow small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
}
.promise-flow strong {
  margin: 1px 0;
  font-size: 21px;
  letter-spacing: -.04em;
  line-height: 1.1;
}
.promise-flow em {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promise-flow-arrow {
  align-self: center;
  color: var(--rule-strong);
  font-size: 13px;
  text-align: center;
}
.promise-sample {
  display: grid;
  align-content: center;
  padding: 16px 18px;
  background: var(--accent-deep);
  color: #fff;
}
.promise-sample .section-kicker {
  color: #999a96;
}
.promise-sample>strong {
  margin: 3px 0 0;
  color: #fff;
  font-size: 25px;
  letter-spacing: -.045em;
}
.promise-sample>span:not(.section-kicker) {
  color: #d9dad8;
  font-size: 11px;
}
.promise-sample>small {
  margin-top: 6px;
  color: #969795;
  font-size: 11px;
}
.promise-disclosures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.promise-disclosures>.promise-disclosure:only-child {
  grid-column: 1/-1;
}
.promise-disclosure {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.promise-disclosure>summary,.promise-settings>summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 9px 13px;
  cursor: pointer;
  list-style: none;
}
.promise-disclosure>summary::-webkit-details-marker,.promise-settings>summary::-webkit-details-marker {
  display: none;
}
.promise-disclosure-icon,.promise-settings-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
}
.promise-disclosure.is-warning .promise-disclosure-icon {
  background: var(--warn-soft);
  color: var(--warn);
}
.promise-disclosure-icon .icon,.promise-settings-icon .icon {
  width: 15px;
  height: 15px;
}
.promise-disclosure summary>span:nth-child(2),.promise-settings summary>span:nth-child(2) {
  display: grid;
  min-width: 0;
}
.promise-disclosure summary strong,.promise-settings summary strong {
  font-size: 11.5px;
}
.promise-disclosure summary small,.promise-settings summary small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
}
.promise-chevron {
  width: 15px;
  height: 15px;
  margin-left: auto;
  color: var(--muted);
  transition: transform .18s;
}
.promise-disclosure[open] .promise-chevron,.promise-settings[open] .promise-chevron {
  transform: rotate(180deg);
}
.promise-explain-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  border-top: 1px solid var(--rule);
  background: var(--rule);
}
.promise-explain-grid article {
  display: flex;
  gap: 9px;
  padding: 13px;
  background: var(--surface-2);
}
.promise-explain-grid article>span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.promise-explain-grid article>div {
  display: grid;
  align-content: start;
}
.promise-explain-grid strong,.promise-warning-body strong {
  font-size: 11px;
}
.promise-explain-grid p,.promise-warning-body p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.promise-disclosure>footer,.promise-settings>footer {
  padding: 9px 13px;
  border-top: 1px solid var(--rule);
  background: #fff;
  color: var(--muted);
  font-size: 11px;
}
.promise-warning-body {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1px;
  border-top: 1px solid var(--rule);
  background: var(--rule);
}
.promise-warning-body>div {
  padding: 13px;
  background: var(--warn-soft);
}
.promise-warning-body ul {
  display: grid;
  gap: 3px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.promise-warning-body li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.promise-warning-body li>span {
  padding: 2px 4px;
  border-radius: 4px;
  background: #fff;
  font-size: 11px;
}
.promise-warning-body li small {
  margin-left: auto;
  color: var(--muted);
}
.promise-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}
.promise-chip-list span {
  padding: 4px 7px;
  border: 1px solid #ead7b0;
  border-radius: 99px;
  background: #fff;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 690;
}
.promise-explorer {
  scroll-margin-top: 180px;
  overflow: hidden;
}
.promise-explorer-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg,#fff,var(--surface-2));
}
.promise-explorer-head h2 {
  margin: 2px 0 0;
  font-size: 16px;
  letter-spacing: -.02em;
}
.promise-explorer-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.promise-explorer-head .filter-result {
  min-width: max-content;
  padding-bottom: 2px;
  font-size: 11px;
}
.promise-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.promise-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.promise-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 680;
  white-space: nowrap;
  cursor: pointer;
}
.promise-tabs button strong {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 11px;
}
.promise-tabs button:hover {
  background: #fff;
  color: var(--ink);
}
.promise-tabs button.is-active {
  border-color: #dcbfb8;
  background: var(--accent-soft);
  color: var(--accent);
}
.promise-tabs button.is-active strong {
  background: #fff;
  color: var(--accent);
}
.promise-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.promise-tools .search-control input {
  width: 205px;
  min-height: 34px;
  height: 34px;
  background: #fff;
  font-size: 11px;
}
.promise-tools select {
  min-height: 34px;
  height: 34px;
  background: #fff;
  font-size: 11px;
}
.promise-table {
  min-width: 880px;
}
.promise-table.has-no-results {
  display: none;
}
.promise-table th {
  height: 37px;
  padding-block: 8px;
}
.promise-table th:nth-child(1) {
  width: 20%;
}
.promise-table th:nth-child(2) {
  width: 9%;
}
.promise-table th:nth-child(3) {
  width: 22%;
}
.promise-table th:nth-child(4) {
  width: 27%;
}
.promise-table th:nth-child(5) {
  width: 16%;
}
.promise-table th:last-child {
  width: 44px;
}
.promise-table td {
  padding-block: 10px;
}
.promise-row {
  transition: background .14s,box-shadow .14s;
}
.promise-row:hover,.promise-row.is-open {
  background: #f8f8f8;
}
.promise-row.is-open {
  box-shadow: inset 3px 0 var(--accent);
}
.promise-row[hidden],.promise-detail.is-filtered {
  display: none;
}
.promise-zone {
  display: grid;
  grid-template-columns: 35px minmax(0,1fr);
  align-items: center;
  gap: 9px;
}
.promise-zone>span {
  display: grid;
  place-items: center;
  width: 35px;
  height: 31px;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}
.promise-zone strong {
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promise-table td.num-col>strong {
  font-size: 12px;
}
.promise-table td.num-col>small {
  color: var(--muted);
  font-size: 11px;
}
.promise-range {
  display: grid;
  grid-template-columns: auto minmax(52px,1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 155px;
}
.promise-range>span {
  display: grid;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.05;
  white-space: nowrap;
}
.promise-range>span:last-child {
  text-align: right;
}
.promise-range small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.promise-range>i {
  position: relative;
  height: 6px;
  border-radius: 99px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.promise-range>i>b {
  position: absolute;
  top: 0;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: linear-gradient(90deg,#8a8e83,var(--accent));
}
.promise-customer-copy {
  font-size: 11px;
}
.promise-customer-copy>strong {
  display: block;
}
.promise-customer-copy>small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.promise-customer-copy>span {
  color: var(--muted);
  font-size: 11px;
}
.promise-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 99px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.promise-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.promise-status.is-auto {
  background: var(--ok-soft);
  color: var(--ok);
}
.promise-status.is-approved {
  background: var(--info-soft);
  color: var(--info);
}
.promise-status.is-review {
  background: var(--warn-soft);
  color: var(--warn);
}
.promise-status.is-blocked {
  background: var(--danger-soft);
  color: var(--danger);
}
.promise-status.is-rejected {
  background: var(--surface-3);
  color: var(--muted);
}
.promise-expand-cell {
  text-align: right;
}
.promise-expand {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  margin-left: auto;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: .16s;
}
.promise-expand:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.promise-expand .icon {
  width: 14px;
  height: 14px;
  transition: transform .16s;
}
.promise-row.is-open .promise-expand .icon {
  transform: rotate(180deg);
}
.promise-detail[hidden] {
  display: none;
}
.promise-detail>td {
  padding: 0 !important;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(90deg,#f9f9f8,#fff);
}
.promise-detail-layout {
  display: grid;
  grid-template-columns: minmax(380px,1fr) minmax(260px,.8fr) auto;
  align-items: stretch;
  gap: 1px;
  margin-left: 3px;
  background: var(--rule);
}
.promise-detail-metrics {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  background: var(--rule);
}
.promise-detail-metrics article {
  display: grid;
  align-content: center;
  min-height: 75px;
  padding: 11px 14px;
  background: #fff;
}
.promise-detail-metrics span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: none;
}
.promise-detail-metrics strong {
  margin-top: 4px;
  font-size: 14px;
}
.promise-detail-context {
  display: grid;
  align-content: center;
  padding: 11px 15px;
  background: var(--surface-2);
}
.promise-detail-context>strong {
  margin: 3px 0;
  color: var(--ink-2);
  font-size: 11px;
}
.promise-detail-context p {
  margin: 1px 0;
  color: var(--muted);
  font-size: 11px;
}
.promise-detail-context>small {
  color: var(--muted);
  font-size: 11px;
}
.promise-detail-action {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: #fff;
}
.promise-detail-action:empty {
  display: none;
}
.promise-detail-action .btn {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 11px;
  white-space: nowrap;
}
.promise-filter-empty {
  padding-block: 34px;
}
.promise-settings {
  overflow: hidden;
}
.promise-settings>summary {
  min-height: 61px;
  background: linear-gradient(180deg,#fff,var(--surface-2));
}
.promise-settings .promise-settings-icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}
.promise-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
  gap: 1px;
  border-top: 1px solid var(--rule);
  background: var(--rule);
}
.promise-setting {
  display: grid;
  align-content: start;
  min-height: 190px;
  padding: 15px;
  border: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s;
}
.promise-setting:hover {
  background: #f7f7f7;
}
.promise-setting-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.promise-setting-top small {
  overflow: hidden;
  color: var(--muted);
  font: 500 8px ui-monospace,SFMono-Regular,Menlo,monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promise-setting-top .icon {
  width: 13px;
  height: 13px;
  color: var(--rule-strong);
}
.promise-setting>strong {
  margin: 13px 0 1px;
  color: var(--accent);
  font-size: 24px;
  letter-spacing: -.04em;
}
.promise-setting>span:not(.promise-setting-top) {
  font-size: 11px;
  font-weight: 600;
}
.promise-setting>p {
  display: -webkit-box;
  margin: 6px 0 12px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.promise-setting>em {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  margin-top: auto;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}
.promise-setting>em b {
  color: var(--accent);
}
.btn.is-loading .icon {
  animation: promise-spin .75s linear infinite;
}
@keyframes promise-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width:1250px) {
  .promise-command {
    grid-template-columns: minmax(230px,.7fr) minmax(470px,1.4fr);
  }
  .promise-sample {
    grid-column: 1/-1;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 9px;
  }
  .promise-sample>strong {
    font-size: 20px;
  }
  .promise-sample>small {
    margin: 0;
    text-align: right;
  }
  .promise-flow em {
    display: none;
  }
  .promise-detail-layout {
    grid-template-columns: minmax(370px,1fr) minmax(250px,.8fr);
  }
  .promise-detail-action {
    grid-column: 1/-1;
    justify-content: flex-end;
    border-top: 1px solid var(--rule);
  }
}
@media (max-width:900px) {
  .promise-command {
    grid-template-columns: 1fr;
  }
  .promise-flow {
    min-height: 105px;
  }
  .promise-command-state {
    border-bottom: 1px solid var(--rule);
  }
  .promise-sample {
    grid-template-columns: auto auto 1fr;
  }
  .promise-sample>small {
    grid-column: 1/-1;
    text-align: left;
  }
  .promise-disclosures {
    grid-template-columns: 1fr;
  }
  .promise-disclosures>.promise-disclosure:only-child {
    grid-column: auto;
  }
  .promise-explain-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .promise-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .promise-tabs {
    padding-bottom: 2px;
  }
  .promise-tools {
    width: 100%;
  }
  .promise-tools .search-control {
    flex: 1;
  }
  .promise-tools .search-control input {
    width: 100%;
  }
  .promise-detail-layout {
    grid-template-columns: 1fr;
  }
  .promise-detail-context {
    border-top: 1px solid var(--rule);
  }
  .promise-detail-action {
    grid-column: auto;
  }
}
@media (max-width:620px) {
  .promise-flow {
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--rule);
  }
  .promise-flow-arrow {
    display: none;
  }
  .promise-flow>button {
    min-height: 74px;
    background: #fff;
  }
  .promise-flow em {
    display: block;
  }
  .promise-sample {
    display: block;
  }
  .promise-sample>* {
    display: block;
  }
  .promise-sample>strong {
    margin-top: 5px;
  }
  .promise-explain-grid,.promise-warning-body {
    grid-template-columns: 1fr;
  }
  .promise-explorer-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .promise-explorer-head .filter-result {
    padding: 0;
  }
  .promise-tools {
    align-items: stretch;
    flex-direction: column;
  }
  .promise-tools select {
    width: 100%;
  }
  .promise-settings-grid {
    grid-template-columns: 1fr;
  }
  .promise-setting {
    min-height: 160px;
  }
  .promise-detail-metrics {
    grid-template-columns: repeat(2,1fr);
  }
}
.promise-command>.promise-flow {
  background: linear-gradient(120deg,#fcfcfc,#f7f7f6);
}
.promise-command>.promise-sample {
  background: var(--accent-deep);
}
.promise-warning-body>div:only-child {
  grid-column: 1/-1;
}
.promise-row {
  cursor: pointer;
}
.promise-setting>strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promise-setting.is-text>strong {
  display: -webkit-box;
  min-height: 38px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.contract-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--surface-2);
}
.contract-tab {
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: color .15s,background .15s,border-color .15s;
}
.contract-tab:hover {
  background: var(--surface-3);
  color: var(--ink);
}
.contract-tab.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
@media (max-width:820px) {
  .contract-tabs {
    gap: 4px;
    padding: 6px 8px;
  }
  .contract-tab {
    font-size: 11px;
  }
}
.topbar-primary .icon {
  width: 15px;
  height: 15px;
}
.billing-overview {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(330px,.7fr);
  gap: 14px;
  margin-bottom: 18px;
}
.billing-metrics {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--rule);
  box-shadow: var(--shadow-sm);
}
.billing-metric {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 142px;
  padding: 19px 20px;
  background: var(--surface);
  overflow: hidden;
}
.billing-metric:after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -45px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--surface-3);
  opacity: .65;
}
.billing-metric.is-main {
  background: linear-gradient(145deg,#f9f9f8,#eeefed);
}
.billing-metric.is-alert {
  background: linear-gradient(145deg,#fff,#fff5df);
}
.billing-metric-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--accent);
}
.billing-metric-icon .icon {
  width: 15px;
  height: 15px;
}
.billing-metric.is-alert .billing-metric-icon {
  background: var(--warn-soft);
  color: var(--warn);
}
.billing-metric-label {
  position: relative;
  z-index: 1;
  padding-right: 34px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: none;
}
.billing-metric>strong {
  position: relative;
  z-index: 1;
  margin: 8px 0 4px;
  font-size: clamp(24px,2.1vw,34px);
  font-weight: 650;
  letter-spacing: -.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.billing-metric.is-alert>strong {
  color: var(--warn);
}
.billing-metric>small {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 11px;
}
.billing-progress-panel {
  display: grid;
  align-content: center;
  min-height: 142px;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--accent-deep);
  color: #fff;
  box-shadow: var(--shadow);
}
.billing-progress-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.billing-progress-head>span {
  display: grid;
}
.billing-progress-head small {
  color: #9e9f9c;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: none;
}
.billing-progress-head strong {
  margin-top: 2px;
  font-size: 29px;
  letter-spacing: -.045em;
}
.billing-progress-head a {
  padding: 5px 8px;
  border-radius: 6px;
  color: #b8bbb3;
  font-size: 11px;
  font-weight: 700;
}
.billing-progress-head a:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}
.reconciliation-bar {
  display: flex;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.035);
}
.reconciliation-bar.is-large {
  height: 12px;
  margin: 13px 0 12px;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.reconciliation-bar>i {
  display: block;
  width: var(--segment);
  height: 100%;
  min-width: 0;
}
.reconciliation-bar .is-resolved,.reconciliation-legend .is-resolved {
  background: #2bb784;
}
.reconciliation-bar .is-difference,.reconciliation-legend .is-difference {
  background: #e08162;
}
.reconciliation-bar .is-review,.reconciliation-legend .is-review {
  background: #e2ad4f;
}
.reconciliation-bar .is-unknown,.reconciliation-legend .is-unknown {
  background: #7c8c86;
}
.reconciliation-legend {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px 10px;
  color: #b1b2b0;
  font-size: 11px;
}
.reconciliation-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.reconciliation-legend span>i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
}
.reconciliation-legend strong {
  color: #fff;
  font-size: 11px;
}
.invoice-importer {
  scroll-margin-top: 180px;
  margin-bottom: 18px;
}
.invoice-importer>summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 61px;
  padding: 11px 16px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(180deg,#fff,var(--surface-2));
}
.invoice-importer>summary::-webkit-details-marker {
  display: none;
}
.importer-summary-icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.importer-summary-icon .icon {
  width: 16px;
  height: 16px;
}
.invoice-importer>summary>span:nth-child(2) {
  display: grid;
  line-height: 1.2;
}
.invoice-importer>summary strong {
  font-size: 12.5px;
}
.invoice-importer>summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
.importer-summary-action {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
  text-transform: none;
}
.importer-summary-action .icon {
  width: 13px;
  height: 13px;
  transition: transform .18s;
}
.invoice-importer[open] .importer-summary-action .icon {
  transform: rotate(180deg);
}
.invoice-import-form {
  border-top: 1px solid var(--rule);
}
.invoice-drop-grid {
  display: grid;
  grid-template-columns: minmax(200px,1fr) minmax(200px,1fr) minmax(270px,.9fr);
  gap: 12px;
  padding: 16px;
}
.file-drop {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 137px;
  padding: 18px;
  border: 1px dashed var(--rule-strong);
  border-radius: 11px;
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
  transition: .17s;
}
.file-drop:hover,.file-drop.is-dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.file-drop.has-file {
  border-style: solid;
  border-color: #c3c4c0;
  background: var(--ok-soft);
}
.file-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.file-drop-icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  margin-bottom: 7px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.file-drop-icon .icon {
  width: 16px;
  height: 16px;
}
.file-drop strong {
  overflow: hidden;
  max-width: 100%;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-drop small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
.file-drop.is-secondary {
  background: #fafbfb;
}
.import-fields {
  display: grid;
  align-content: center;
  gap: 11px;
  padding: 5px;
}
.import-fields .field {
  display: grid;
  gap: 4px;
}
.import-fields .field-control {
  width: 100%;
}
.importer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}
.importer-footer p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.importer-footer p .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--ok);
}
.invoice-list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg,#fff,var(--surface-2));
}
.section-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .005em;
  text-transform: none;
}
.invoice-list-head h2 {
  margin: 2px 0 0;
  font-size: 15px;
  letter-spacing: -.02em;
}
.invoice-list-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.invoice-filters {
  display: flex;
  align-items: center;
  gap: 7px;
}
.invoice-filters select,.invoice-filters input {
  min-height: 34px;
  height: 34px;
  font-size: 11px;
}
.search-control {
  position: relative;
  display: flex;
  align-items: center;
}
.search-control>.icon {
  position: absolute;
  left: 10px;
  width: 13px;
  height: 13px;
  color: var(--muted);
  pointer-events: none;
}
.search-control input {
  width: 220px;
  padding-left: 31px;
}
.filter-result {
  min-width: 66px;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}
.invoice-table th:last-child,.invoice-table td:last-child {
  width: 42px;
  padding-left: 4px;
}
.invoice-table tbody tr[hidden] {
  display: none;
}
.invoice-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 190px;
  color: var(--ink);
}
.invoice-identity:hover {
  color: var(--accent);
}
.invoice-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .03em;
}
.invoice-identity>span:last-child {
  display: grid;
  min-width: 0;
}
.invoice-identity strong,.invoice-identity small {
  overflow: hidden;
  max-width: 250px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoice-identity strong {
  font-size: 11.5px;
}
.invoice-identity small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.period-range {
  display: grid;
  grid-template-columns: auto 22px auto;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.period-range i {
  height: 1px;
  background: var(--rule-strong);
}
.money-main {
  font-size: 12.5px;
  font-weight: 600;
}
.invoice-progress-cell {
  min-width: 175px;
}
.invoice-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.invoice-status-line small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.row-arrow {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 14px;
}
.row-arrow:hover {
  background: var(--accent);
  color: #fff;
  transform: translateX(2px);
}
.invoice-filter-empty {
  padding-block: 34px;
}
.invoice-work-tabs {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.invoice-work-tabs button {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s,box-shadow .15s,transform .15s;
}
.invoice-work-tabs button:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.invoice-work-tabs button.is-active {
  border-color: #cb9b8f;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(228,69,43,.06);
}
.work-tab-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--muted);
}
.work-tab-icon.is-attention {
  background: var(--warn-soft);
  color: var(--warn);
}
.work-tab-icon.is-ok {
  background: var(--accent-soft);
  color: var(--accent);
}
.work-tab-icon .icon {
  width: 15px;
  height: 15px;
}
.invoice-work-tabs button>span:nth-child(2) {
  display: grid;
  min-width: 0;
}
.invoice-work-tabs strong {
  font-size: 12px;
}
.invoice-work-tabs small {
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoice-work-tabs b {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 99px;
  background: var(--surface-3);
  font-size: 11px;
}
.invoice-work-tabs button.is-active b {
  background: var(--accent);
  color: #fff;
}
.invoice-table tbody tr[data-href] {
  cursor: pointer;
}
.invoice-table tbody tr[data-href]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
@media (max-width:1250px) and (min-width:821px) {
  .billing-overview {
    grid-template-columns: 1fr;
  }
  .billing-progress-panel {
    min-height: 130px;
  }
  .invoice-drop-grid {
    grid-template-columns: 1fr 1fr;
  }
  .import-fields {
    grid-column: 1/-1;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width:820px) {
  .billing-overview {
    grid-template-columns: 1fr;
  }
  .billing-metrics {
    grid-template-columns: 1fr;
  }
  .billing-metric {
    min-height: 112px;
  }
  .billing-progress-panel {
    min-height: 150px;
  }
  .invoice-importer {
    scroll-margin-top: 120px;
  }
  .invoice-drop-grid {
    grid-template-columns: 1fr;
  }
  .file-drop {
    min-height: 120px;
  }
  .importer-footer,.invoice-list-head {
    align-items: stretch;
    flex-direction: column;
  }
  .importer-footer .btn {
    width: 100%;
  }
  .invoice-filters {
    width: 100%;
    flex-wrap: wrap;
  }
  .invoice-work-tabs {
    grid-template-columns: 1fr;
  }
  .search-control {
    flex: 1;
  }
  .search-control input {
    width: 100%;
  }
  .filter-result {
    margin-left: auto;
  }
  .invoice-table {
    min-width: 850px !important;
  }
}
@media (max-width:500px) {
  .billing-metric>strong {
    font-size: 28px;
  }
  .invoice-importer>summary {
    padding-inline: 12px;
  }
  .importer-summary-action {
    font-size: 0;
  }
  .importer-summary-action .icon {
    width: 16px;
    height: 16px;
  }
  .invoice-drop-grid {
    padding: 12px;
  }
  .importer-footer {
    padding: 12px;
  }
  .invoice-filters label {
    width: 100%;
  }
  .invoice-filters select {
    width: 100%;
  }
  .filter-result {
    width: 100%;
    text-align: left;
  }
}
.invoice-detail-hero {
  display: grid;
  grid-template-columns: minmax(235px,.55fr) minmax(0,1.45fr);
  gap: 1px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--rule);
  box-shadow: var(--shadow);
}
.invoice-next-step {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 15px 18px;
  border: 1px solid #efd49b;
  border-radius: 12px;
  background: linear-gradient(135deg,#fff8e9,#fffdf8);
  box-shadow: var(--shadow-sm);
}
.invoice-next-step.is-complete {
  border-color: #c5c6c2;
  background: linear-gradient(135deg,var(--accent-soft),#fff);
}
.invoice-next-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--warn-soft);
  color: var(--warn);
}
.invoice-next-step.is-complete .invoice-next-icon {
  background: #e4e5e3;
  color: var(--accent);
}
.invoice-next-icon .icon {
  width: 19px;
  height: 19px;
}
.invoice-next-step h2 {
  margin: 2px 0 3px;
  font-size: 15px;
  letter-spacing: -.015em;
}
.invoice-next-step p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
}
#lineas-factura {
  scroll-margin-top: 95px;
}
.invoice-tools .panel-head>div {
  display: grid;
  gap: 2px;
}
.invoice-tools .panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.invoice-tool-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  padding: 14px 18px;
}
.invoice-tool-card,.invoice-email-tool>summary {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.invoice-tool-card {
  min-height: 68px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
a.invoice-tool-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.invoice-tool-card>span,.invoice-email-tool>summary>span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--accent);
}
.invoice-tool-card .icon {
  width: 16px;
  height: 16px;
}
.invoice-tool-card>div,.invoice-email-tool>summary>div {
  display: grid;
  min-width: 0;
}
.invoice-tool-card strong {
  font-size: 11.5px;
}
.invoice-tool-card small {
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoice-tool-card>b,.invoice-email-tool>summary>b {
  color: var(--muted);
  font-size: 13px;
}
.invoice-email-tool {
  display: block;
  padding: 0;
}
.invoice-email-tool>summary {
  min-height: 66px;
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
}
.invoice-email-tool>summary::-webkit-details-marker {
  display: none;
}
.invoice-email-tool[open] {
  grid-column: span 2;
}
.invoice-email-tool[open]>summary {
  border-bottom: 1px solid var(--rule);
}
.invoice-email-tool[open]>summary>b {
  transform: rotate(180deg);
}
.invoice-email-tool form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 11px 12px;
  background: var(--surface-2);
}
.invoice-email-tool label {
  display: grid;
  flex: 1;
  gap: 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}
.invoice-email-tool .ui-control {
  width: 100%;
}
.invoice-recalculate-tool button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--accent);
  cursor: pointer;
}
.invoice-recalculate-tool:focus-within,.invoice-recalculate-tool:hover {
  border-color: var(--accent);
}
.invoice-document-card {
  grid-row: 1/3;
  display: grid;
  align-content: start;
  padding: 20px;
  background: var(--accent-deep);
  color: #fff;
}
.invoice-document-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 17px;
  border-radius: 12px;
  background: rgba(149,153,142,.14);
  color: #a9aca4;
}
.invoice-document-icon .icon {
  width: 20px;
  height: 20px;
}
.invoice-document-card>div {
  display: grid;
}
.invoice-document-card>div>span {
  color: #989995;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .005em;
  text-transform: none;
}
.invoice-document-card>div>strong {
  margin: 5px 0 3px;
  font-size: 21px;
  letter-spacing: -.035em;
}
.invoice-document-card>div>small {
  overflow: hidden;
  color: #aaaba8;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoice-document-card dl {
  display: grid;
  gap: 9px;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.09);
}
.invoice-document-card dl>div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.invoice-document-card dt {
  color: #769286;
  font-size: 12px;
  font-weight: 650;
  text-transform: none;
}
.invoice-document-card dd {
  margin: 0;
  color: #dcdddb;
  font-size: 11px;
  text-align: right;
}
.invoice-detail-metrics {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1px;
  background: var(--rule);
}
.invoice-detail-metrics article {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 108px;
  padding: 15px 17px;
  background: #fff;
}
.invoice-detail-metrics article:before {
  content: "";
  position: absolute;
  top: 0;
  right: 17px;
  left: 17px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--rule-strong);
}
.invoice-detail-metrics article.is-alert {
  background: #fffaf3;
}
.invoice-detail-metrics article.is-alert:before {
  background: var(--danger);
}
.invoice-detail-metrics article.is-warning:before {
  background: var(--warn);
}
.invoice-detail-metrics article>span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
}
.invoice-detail-metrics article>strong {
  margin: 6px 0 2px;
  font-size: clamp(20px,1.8vw,28px);
  letter-spacing: -.045em;
  white-space: nowrap;
}
.invoice-detail-metrics article.is-alert>strong {
  color: var(--danger);
}
.invoice-detail-metrics article>small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoice-detail-progress {
  padding: 15px 18px;
  background: #fff;
}
.invoice-detail-progress>div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.invoice-detail-progress>div:first-child span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
}
.invoice-detail-progress>div:first-child strong {
  font-size: 11px;
}
.invoice-detail-progress .reconciliation-bar.is-large {
  height: 9px;
  margin: 9px 0;
}
.reconciliation-legend.is-on-light {
  display: flex;
  gap: 16px;
  color: var(--muted);
}
.reconciliation-legend.is-on-light strong {
  color: var(--ink);
}
.table-filter-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.table-filter-tabs .filter {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
}
.table-filter-tabs .filter strong {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--surface-3);
  font-size: 11px;
}
.table-filter-tabs .filter.is-selected {
  border-color: #d9b5ac;
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: none;
}
.trace-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 11px;
  font-weight: 680;
  cursor: pointer;
}
.trace-trigger:hover {
  color: var(--accent-hover);
}
body.trace-is-open {
  overflow: hidden;
}
.trace-drawer {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: flex;
  justify-content: flex-end;
}
.trace-drawer[hidden] {
  display: none;
}
.trace-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(14,14,13,.46);
  cursor: default;
  backdrop-filter: blur(2px);
}
.trace-drawer>aside {
  position: relative;
  display: flex;
  width: min(520px,94vw);
  height: 100%;
  flex-direction: column;
  background: var(--bg);
  box-shadow: -20px 0 60px rgba(13,13,12,.25);
  animation: trace-in .22s ease-out;
}
.trace-drawer>aside>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 20px;
  border-bottom: 1px solid var(--rule);
  background: #fff;
}
.trace-drawer>aside>header>div {
  display: grid;
}
.trace-drawer>aside>header span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .005em;
  text-transform: none;
}
.trace-drawer>aside>header h2 {
  margin: 3px 0 0;
  font-size: 16px;
}
.trace-drawer>aside>header button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
}
.trace-intro {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 20px;
  border-bottom: 1px solid #c5dced;
  background: var(--info-soft);
  color: var(--ink-2);
  font-size: 11px;
}
.trace-intro .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--info);
}
.trace-steps {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px 18px 30px;
  overflow-y: auto;
}
.trace-steps article {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.trace-steps article>header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.trace-steps article>header span {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.trace-steps article>header strong {
  font-size: 11px;
}
.trace-steps dl {
  margin: 0;
  padding: 5px 12px;
}
.trace-steps dl>div {
  display: grid;
  grid-template-columns: minmax(90px,.42fr) minmax(0,1fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.trace-steps dl>div:last-child {
  border: 0;
}
.trace-steps dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: none;
}
.trace-steps dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 11px;
  word-break: break-word;
}
.trace-loading,.trace-error {
  padding: 35px;
  border: 1px dashed var(--rule-strong);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
  font-size: 11px;
}
.trace-error {
  border-color: #ecc3bf;
  background: var(--danger-soft);
  color: var(--danger);
}
@keyframes trace-in {
  from {
    transform: translateX(28px);
    opacity: .5;
  }
}
@media (max-width:1100px) {
  .invoice-detail-hero {
    grid-template-columns: 1fr;
  }
  .invoice-document-card {
    grid-row: auto;
  }
  .invoice-document-card dl {
    grid-template-columns: repeat(3,1fr);
  }
  .invoice-document-card dl>div {
    display: grid;
  }
  .invoice-document-card dd {
    text-align: left;
  }
  .invoice-detail-metrics {
    grid-template-columns: repeat(2,1fr);
  }
}
@media (max-width:700px) {
  .invoice-next-step {
    grid-template-columns: auto 1fr;
  }
  .invoice-next-step .btn {
    grid-column: 1/-1;
    width: 100%;
  }
  .invoice-tool-grid {
    grid-template-columns: 1fr;
  }
  .invoice-email-tool[open] {
    grid-column: auto;
  }
  .invoice-email-tool form {
    align-items: stretch;
    flex-direction: column;
  }
  .invoice-email-tool form .btn {
    width: 100%;
  }
  .invoice-document-card dl {
    grid-template-columns: 1fr;
  }
  .invoice-detail-metrics {
    grid-template-columns: 1fr;
  }
  .invoice-detail-metrics article {
    min-height: 95px;
  }
  .reconciliation-legend.is-on-light {
    display: grid;
    grid-template-columns: repeat(2,1fr);
  }
  .table-filter-tabs {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
  }
  .table-filter-tabs .filter {
    flex: 0 0 auto;
  }
  .trace-drawer>aside {
    width: 100vw;
  }
  .trace-steps dl>div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
.review-overview {
  display: grid;
  grid-template-columns: minmax(235px,.58fr) minmax(430px,1.15fr) minmax(230px,.62fr);
  gap: 1px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--rule);
  box-shadow: var(--shadow);
}
.review-claim {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: linear-gradient(145deg,#fff8ec,#fff);
  color: var(--ink);
}
.review-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 13px;
  background: var(--warn-soft);
  color: var(--warn);
}
.review-icon .icon {
  width: 20px;
  height: 20px;
}
.review-claim>div {
  display: grid;
}
.review-claim small,.review-distribution>div:first-child span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: none;
}
.review-claim strong {
  margin: 5px 0 2px;
  color: var(--warn);
  font-size: 30px;
  letter-spacing: -.05em;
  line-height: 1;
}
.review-claim>div>span {
  color: var(--muted);
  font-size: 11px;
}
.review-distribution {
  display: grid;
  align-content: center;
  padding: 15px 18px;
  background: #fff;
}
.review-distribution>div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.review-distribution>div:first-child strong {
  font-size: 11px;
}
.review-distribution .reconciliation-bar.is-large {
  height: 9px;
  margin: 9px 0 11px;
}
.review-filter-cards {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 5px;
}
.review-filter-cards button {
  display: grid;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: .15s;
}
.review-filter-cards button:hover {
  border-color: var(--rule-strong);
  background: #fff;
}
.review-filter-cards button.is-active {
  border-color: #d8b5ac;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(228,69,43,.05);
}
.review-filter-cards strong {
  font-size: 14px;
  line-height: 1;
}
.review-filter-cards span {
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-filter-cards button.is-active strong {
  color: var(--accent);
}
.review-guidance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px;
  background: var(--info-soft);
  color: var(--ink-2);
}
.review-guidance .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--info);
}
.review-guidance p {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}
.queue-head {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg,#fff,var(--surface-2));
}
.queue-head>div:first-child {
  margin-right: auto;
}
.queue-head h2 {
  margin: 2px 0 0;
  font-size: 15px;
}
.queue-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.queue-head .search-control input {
  width: 250px;
  min-height: 34px;
  height: 34px;
  font-size: 11px;
}
.queue-resolve {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: #fff;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.queue-resolve:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
[data-queue-row][hidden] {
  display: none;
}
.queue-filter-empty {
  padding-block: 34px;
}
@media (max-width:1120px) {
  .review-overview {
    grid-template-columns: 1fr 1.4fr;
  }
  .review-guidance {
    grid-column: 1/-1;
  }
  .queue-head {
    flex-wrap: wrap;
  }
  .queue-head>div:first-child {
    width: 100%;
  }
}
@media (max-width:700px) {
  .review-overview {
    grid-template-columns: 1fr;
  }
  .review-guidance {
    grid-column: auto;
  }
  .review-filter-cards {
    grid-template-columns: repeat(2,1fr);
  }
  .queue-head {
    align-items: stretch;
    flex-direction: column;
  }
  .queue-head .search-control input {
    width: 100%;
  }
  .queue-head .filter-result {
    text-align: left;
  }
}
.tariff-overview {
  display: grid;
  grid-template-columns: minmax(260px,1.1fr) repeat(3,minmax(120px,.55fr)) minmax(170px,.7fr);
  gap: 1px;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 13px;
  background: var(--rule);
  box-shadow: var(--shadow-sm);
}
.tariff-contract-card {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: var(--accent-deep);
  color: #fff;
}
.tariff-contract-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(146,150,139,.14);
  color: #aaada5;
}
.tariff-contract-icon .icon {
  width: 17px;
  height: 17px;
}
.tariff-contract-card>div {
  display: grid;
  min-width: 0;
}
.tariff-contract-card small,.tariff-stat>span,.tariff-coverage small {
  color: #829b91;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: none;
}
.tariff-contract-card strong {
  overflow: hidden;
  margin: 2px 0;
  color: #fff;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tariff-contract-card>div>span {
  color: #a8a9a7;
  font-size: 11px;
}
.tariff-contract-card>a {
  grid-column: 1/-1;
  color: #abaea6;
  font-size: 11px;
  font-weight: 700;
}
.tariff-stat {
  display: grid;
  align-content: center;
  padding: 13px 15px;
  background: #fff;
}
.tariff-stat>span {
  color: var(--muted);
}
.tariff-stat>strong {
  overflow: hidden;
  margin: 4px 0 1px;
  font-size: 18px;
  letter-spacing: -.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tariff-stat>small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tariff-coverage {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 13px 16px;
  background: linear-gradient(145deg,#fafaf9,#f2f2f1);
}
.tariff-coverage>span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.tariff-coverage small {
  color: var(--muted);
}
.tariff-coverage strong {
  font-size: 15px;
}
.tariff-coverage>i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #e2e3e1;
}
.tariff-coverage>i>b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--accent),#878b7f);
}
.rate-explorer,.product-rate-explorer {
  display: grid;
  grid-template-columns: minmax(190px,1fr) minmax(150px,.55fr) minmax(170px,.6fr) minmax(220px,.85fr);
  align-items: end;
  gap: 12px;
  margin-bottom: 10px;
  padding: 13px 15px;
  border: 1px solid #d4d5d3;
  border-radius: 11px;
  background: linear-gradient(120deg,#f7f7f7,#fff);
  box-shadow: var(--shadow-sm);
}
.rate-explorer-title {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: center;
}
.rate-explorer-title>.icon {
  width: 17px;
  height: 17px;
  color: var(--accent);
}
.rate-explorer-title>span {
  display: grid;
}
.rate-explorer-title strong {
  font-size: 11px;
}
.rate-explorer-title small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.rate-explorer>label {
  display: grid;
  gap: 3px;
}
.rate-explorer>label>span:first-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
}
.rate-explorer select,.rate-explorer input,.product-rate-explorer select,.product-rate-explorer input {
  width: 100%;
  min-height: 35px;
  height: 35px;
  font-size: 11px;
}
.input-suffix {
  position: relative;
  display: flex;
}
.input-suffix input {
  padding-right: 33px;
}
.input-suffix i {
  position: absolute;
  right: 10px;
  top: 50%;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  transform: translateY(-50%);
}
.rate-explorer output {
  display: grid;
  align-content: center;
  min-height: 45px;
  padding: 7px 11px;
  border-left: 3px solid var(--accent);
  border-radius: 0 7px 7px 0;
  background: #fff;
}
.rate-explorer output strong {
  font-size: 12px;
}
.rate-explorer output small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.tariff-helper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
}
.tariff-helper .icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: var(--ok);
}
.matrix-price {
  background: linear-gradient(90deg,rgba(228,69,43,.055) var(--heat),transparent var(--heat));
  transition: background .15s,box-shadow .15s,opacity .15s;
}
.rate-matrix tr:hover .matrix-price {
  background-color: #f9f9f8;
}
.matrix-price.is-match,.matrix-price.is-zone-focus {
  position: relative;
  background: #eeeeed !important;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.rate-matrix [data-weight-row].is-match>td:first-child,[data-zone-heading].is-match,[data-product-zone-heading].is-match {
  background: var(--accent);
  color: #fff;
}
.matrix-price.is-zone-muted,[data-product-zone-heading].is-zone-muted {
  opacity: .36;
}
.product-rate-explorer {
  grid-template-columns: minmax(210px,1fr) minmax(220px,1fr) minmax(160px,.6fr) auto;
}
.product-rate-explorer .search-control {
  align-self: center;
}
.product-rate-explorer output {
  align-self: center;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
[data-product-rate-row][hidden] {
  display: none;
}
@media (max-width:1200px) {
  .tariff-overview {
    grid-template-columns: minmax(240px,1fr) repeat(3,minmax(110px,.55fr));
  }
  .tariff-coverage {
    grid-column: 1/-1;
  }
  .rate-explorer {
    grid-template-columns: 1fr 1fr;
  }
  .rate-explorer-title {
    grid-column: 1/-1;
  }
  .product-rate-explorer {
    grid-template-columns: 1fr 1fr;
  }
  .product-rate-explorer .rate-explorer-title {
    grid-column: 1/-1;
  }
}
@media (max-width:700px) {
  .tariff-overview {
    grid-template-columns: repeat(2,1fr);
  }
  .tariff-contract-card {
    grid-column: 1/-1;
  }
  .tariff-coverage {
    grid-column: 1/-1;
  }
  .rate-explorer,.product-rate-explorer {
    grid-template-columns: 1fr;
  }
  .rate-explorer-title,.product-rate-explorer .rate-explorer-title {
    grid-column: auto;
  }
  .tariff-stat>strong {
    font-size: 16px;
  }
}
.rule-overview {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.rule-overview article {
  position: relative;
  display: grid;
  min-height: 108px;
  padding: 15px 16px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.rule-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
.rule-icon .icon {
  width: 14px;
  height: 14px;
}
.rule-overview small {
  padding-right: 32px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .005em;
  text-transform: none;
}
.rule-overview strong {
  margin: 7px 0 3px;
  font-size: 24px;
  letter-spacing: -.045em;
}
.rule-overview p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.rule-overview article.is-warning {
  border-color: #ead5a8;
  background: var(--warn-soft);
}
.rule-overview article.is-warning .rule-icon {
  background: #fff;
  color: var(--warn);
}
@media (max-width:700px) {
  .rule-overview {
    grid-template-columns: 1fr;
  }
}
.fuel-trend {
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.fuel-trend>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg,#fff,var(--surface-2));
}
.fuel-trend h2 {
  margin: 2px 0 0;
  font-size: 13px;
}
.fuel-trend>header>span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}
.fuel-trend>header>span i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--warn);
}
.fuel-trend>header>span i.is-included {
  margin-left: 8px;
  background: var(--accent);
}
.fuel-columns {
  display: flex;
  align-items: stretch;
  gap: 1px;
  height: 170px;
  padding: 16px 14px 10px;
  background: repeating-linear-gradient(to top,#fff 0,#fff 39px,var(--rule) 40px);
}
.fuel-columns button {
  display: grid;
  grid-template-rows: 17px minmax(70px,1fr) 17px;
  flex: 1;
  min-width: 34px;
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.fuel-columns button>strong {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.fuel-columns button>span {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}
.fuel-columns button>span>i {
  display: block;
  width: min(25px,72%);
  min-height: 3px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg,#e8b65c,var(--warn));
  transition: height .2s,filter .15s;
}
.fuel-columns button.is-included>span>i {
  background: var(--accent);
}
.fuel-columns button>small {
  align-self: end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}
.fuel-columns button:hover>span>i {
  filter: brightness(.92);
  box-shadow: 0 0 0 2px rgba(228,69,43,.11);
}
.fuel-columns button:hover strong {
  color: var(--accent);
}
.zone-coverage-board {
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.zone-coverage-board>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg,#fff,var(--surface-2));
}
.zone-coverage-board h2 {
  margin: 2px 0 0;
  font-size: 14px;
}
.zone-coverage-board header p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.zone-coverage-board>header>strong {
  font-size: 24px;
  letter-spacing: -.045em;
}
.zone-coverage-board>header>strong small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
}
.zone-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(145px,1fr));
  gap: 1px;
  background: var(--rule);
}
.zone-groups article {
  padding: 12px 13px;
  background: #fff;
}
.zone-groups article>div {
  display: flex;
  align-items: center;
  gap: 7px;
}
.zone-groups article>div small {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
}
.zone-swatch {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: hsl(calc(155 + var(--zone-index,0)*31) 45% 46%);
}
.zone-groups article>p {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 9px 0 0;
}
.zone-groups button {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 24px;
  padding: 0 5px;
  border: 1px solid hsl(calc(155 + var(--zone-index,0)*31) 35% 82%);
  border-radius: 6px;
  background: hsl(calc(155 + var(--zone-index,0)*31) 45% 96%);
  color: var(--ink-2);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.zone-groups button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  transform: translateY(-1px);
}
.zone-groups article.is-uncovered {
  background: var(--danger-soft);
}
.zone-groups article.is-uncovered .zone-swatch {
  background: var(--danger);
}
.zone-groups article.is-uncovered button {
  border-color: #edcbc6;
  background: #fff;
  color: var(--danger);
}
tr.is-map-focus {
  position: relative;
  background: var(--accent-soft) !important;
  box-shadow: inset 4px 0 var(--accent);
}
.billing-metric-label {
  font-size: 11px;
}
.billing-metric>small {
  font-size: 11px;
}
.billing-progress-head small {
  font-size: 11px;
}
.billing-progress-head a {
  font-size: 11px;
}
.reconciliation-legend {
  font-size: 11px;
}
.reconciliation-legend strong {
  font-size: 11px;
}
.invoice-importer>summary small,.importer-summary-action {
  font-size: 11px;
}
.file-drop small,.invoice-identity small {
  font-size: 11px;
}
.file-drop strong {
  font-size: 12px;
}
.importer-footer p {
  font-size: 11px;
}
.section-kicker {
  font-size: 11px;
}
.invoice-list-head p,.queue-head p {
  font-size: 11px;
}
.invoice-filters select,.invoice-filters input,.queue-head .search-control input {
  font-size: 11px;
}
.filter-result,.invoice-status-line small {
  font-size: 11px;
}
.invoice-avatar {
  font-size: 11px;
}
.period-range {
  font-size: 11px;
}
.invoice-document-card>div>span,.invoice-detail-metrics article>span,.invoice-detail-progress>div:first-child span {
  font-size: 11px;
}
.invoice-document-card>div>small {
  font-size: 11px;
}
.invoice-document-card dt {
  font-size: 11px;
}
.invoice-document-card dd {
  font-size: 11px;
}
.invoice-detail-metrics article>small {
  font-size: 11px;
}
.table-filter-tabs .filter {
  font-size: 11px;
}
.table-filter-tabs .filter strong {
  font-size: 11px;
}
.trace-drawer>aside>header span {
  font-size: 11px;
}
.trace-intro {
  font-size: 11px;
}
.trace-steps dt {
  font-size: 11px;
}
.trace-steps dd {
  font-size: 11px;
}
.review-claim small,.review-distribution>div:first-child span {
  font-size: 11px;
}
.review-claim>div>span {
  font-size: 11px;
}
.review-filter-cards span {
  font-size: 11px;
}
.review-guidance p {
  font-size: 11px;
}
.queue-resolve {
  font-size: 11px;
}
.tariff-contract-card small,.tariff-stat>span,.tariff-coverage small {
  font-size: 11px;
}
.tariff-contract-card strong {
  font-size: 12px;
}
.tariff-contract-card>div>span,.tariff-stat>small {
  font-size: 11px;
}
.tariff-contract-card>a {
  font-size: 11px;
}
.rate-explorer-title strong {
  font-size: 12px;
}
.rate-explorer-title small,.rate-explorer output small {
  font-size: 11px;
}
.rate-explorer>label>span:first-child {
  font-size: 11px;
}
.rate-explorer select,.rate-explorer input,.product-rate-explorer select,.product-rate-explorer input {
  font-size: 11px;
}
.input-suffix i {
  font-size: 11px;
}
.tariff-helper,.product-rate-explorer output {
  font-size: 11px;
}
.rule-overview small {
  font-size: 11px;
}
.rule-overview p {
  font-size: 11px;
}
.fuel-trend>header>span {
  font-size: 11px;
}
.fuel-columns button>strong,.fuel-columns button>small {
  font-size: 11px;
}
.zone-coverage-board header p,.zone-coverage-board>header>strong small {
  font-size: 11px;
}
.zone-groups article>div strong {
  font-size: 11px;
}
.zone-groups article>div small,.zone-groups button {
  font-size: 11px;
}
.contract-card.contract-card>header small,.contract-card .contract-validity span,.contract-card .contract-counts span,.contract-card.contract-card>footer>span {
  font-size: 11px;
}
.contract-card .contract-validity strong,.contract-card .contract-note,.contract-card.contract-card>footer a {
  font-size: 11px;
}
.contract-board {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(285px,1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.contract-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: .18s;
}
.contract-card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.contract-card.is-current {
  border-color: #d8b5ac;
  box-shadow: inset 0 3px var(--accent),var(--shadow-sm);
}
.contract-card>header {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg,#fff,var(--surface-2));
}
.contract-file {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.contract-file .icon {
  width: 17px;
  height: 17px;
}
.contract-card>header>div {
  display: grid;
  min-width: 0;
}
.contract-card>header small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contract-card h2 {
  overflow: hidden;
  margin: 2px 0 0;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contract-validity {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}
.contract-validity>div {
  display: grid;
}
.contract-validity span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
}
.contract-validity strong {
  margin-top: 2px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.contract-validity>i {
  position: relative;
  height: 2px;
  background: var(--rule-strong);
}
.contract-validity>i:before,.contract-validity>i:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}
.contract-validity>i:before {
  left: 0;
}
.contract-validity>i:after {
  right: 0;
}
.contract-counts {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  margin: 0 16px;
  background: var(--rule);
}
.contract-counts>a {
  display: grid;
  padding: 10px;
  background: var(--surface-2);
  color: var(--ink);
  text-align: center;
}
.contract-counts>a:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.contract-counts strong {
  font-size: 17px;
  line-height: 1;
}
.contract-counts span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: none;
}
.contract-note {
  display: -webkit-box;
  min-height: 34px;
  margin: 12px 16px 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.contract-card>footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}
.contract-card>footer>span {
  color: var(--muted);
  font-size: 11px;
}
.contract-card>footer a {
  font-size: 11px;
}
body {
  font-size: var(--type-body);
}
small {
  line-height: 1.35;
}
:is(.filter,.btn,.sync-button,input,select,textarea) {
  font-size: var(--type-control);
}
:is(.billing-metric-label,.billing-progress-head small,.invoice-document-card>div>span,.invoice-detail-metrics article>span,.invoice-detail-progress>div:first-child span,.review-claim small,.review-distribution>div:first-child span,.tariff-contract-card small,.tariff-stat>span,.tariff-coverage small,.rate-explorer>label>span:first-child,.rule-overview small,.fuel-trend>header>span,.zone-coverage-board header p,.zone-coverage-board>header>strong small,.contract-card>header small,.contract-validity span,.contract-counts span) {
  font-size: var(--type-caption) !important;
  line-height: 1.25;
}
.promise-tabs {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.promise-tabs::-webkit-scrollbar {
  display: none;
}
.btn>.icon,.sync-button>.icon {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
}
:is(.promise-command-state p,.promise-explorer-head p,.promise-customer-copy,.promise-explain-grid p,.promise-warning-body p,.promise-warning-body li,.promise-setting>p) {
  font-size: var(--type-secondary) !important;
  line-height: 1.45;
}
:is(.promise-flow small,.promise-sample>small,.promise-status,.promise-detail-metrics span,.promise-setting>span:not(.promise-setting-top)) {
  font-size: var(--type-caption) !important;
  line-height: 1.25;
}
.promise-flow em,.promise-tabs button,.promise-range>span,.promise-detail-context>strong,.promise-detail-context>small,.promise-setting>em {
  font-size: 10.5px !important;
  line-height: 1.3;
}
.promise-range small,.promise-setting-top small {
  font-size: var(--type-micro) !important;
  line-height: 1.15;
}
.promise-zone strong {
  font-size: 13px;
}
.promise-tools :is(input,select) {
  font-size: var(--type-control);
}
.zone-map-workspace {
  display: grid;
  grid-template-columns: minmax(560px,1.45fr) minmax(300px,.55fr);
  align-items: stretch;
  gap: 16px;
  margin-bottom: 16px;
}
.zone-map-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.zone-map-head {
  display: grid;
  grid-template-columns: minmax(110px,1fr) auto 64px;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: #fff;
}
.zone-map-head>div:first-child {
  display: grid;
}
.zone-map-head h2 {
  margin: 1px 0 0;
  font-size: 18px;
  letter-spacing: -.03em;
}
.zone-map-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.zone-map-tools .filter {
  min-height: 34px;
  padding: 5px 10px;
  box-shadow: none;
}
.zone-map-tools .filter strong {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 99px;
  background: var(--surface-3);
  font-size: var(--type-micro);
}
.zone-map-tools .filter.is-selected {
  border-color: #c2c3bf;
  background: var(--accent-soft);
  color: var(--accent);
}
.zone-map-select select {
  width: 160px;
  min-height: 34px;
  height: 34px;
  padding-block: 5px;
  background: var(--surface-2);
  font-size: 11px;
}
.zone-map-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 58px;
  height: 46px;
  padding-top: 8px;
  border-radius: 12px;
  background: var(--accent-deep);
  color: #fff;
}
.zone-map-score strong {
  font-size: 23px;
  letter-spacing: -.05em;
  line-height: 1;
}
.zone-map-score small {
  margin-left: 2px;
  color: #aeb0aa;
  font-size: 10px;
}
.zone-map-canvas {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 500px;
  flex: 1;
  padding: 16px;
  background: var(--surface-2);
}
.zone-map-canvas .spain-map-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 500px;
  overflow: visible;
}
.zone-map-canvas .spain-map-provinces path {
  fill: var(--province-color,#e4e4e3);
  stroke: #fff;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .2s,opacity .18s,filter .15s,stroke .15s;
  outline: none;
}
.zone-map-canvas .spain-map-provinces path:hover,.zone-map-canvas .spain-map-provinces path:focus-visible {
  filter: brightness(.91) saturate(1.12);
  stroke: #2b2c29;
  stroke-width: 2.2;
}
.zone-map-canvas .spain-map-provinces path.is-selected {
  opacity: 1;
  filter: brightness(.9) saturate(1.2);
  stroke: #232420;
  stroke-width: 3.5;
  paint-order: stroke fill;
}
.zone-map-canvas .spain-map-provinces path.is-missing-zone {
  stroke: #cf7771;
  stroke-dasharray: 3 2;
}
.zone-map-canvas .spain-map-provinces path.is-zone-muted {
  opacity: .13;
}
.zone-map-tooltip span {
  color: #d88c79;
}
.zone-map-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 52px;
  padding: 8px 12px;
  border-top: 1px solid var(--rule);
  background: #fff;
}
.zone-map-legend-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.zone-map-legend-button:hover,.zone-map-legend-button.is-selected {
  border-color: var(--zone-color);
  background: #fff;
  color: var(--ink);
}
.zone-map-legend-button i,.zone-map-choice i {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 3px;
  background: var(--zone-color);
}
.zone-map-legend-button small {
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-radius: 99px;
  background: #fff;
  color: var(--muted);
  font-size: var(--type-micro);
  line-height: 1;
}
.zone-map-editor {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 0;
  background: var(--accent-deep);
  color: #fff;
  box-shadow: 0 16px 42px rgba(27,28,26,.14);
}
.zone-map-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 100%;
  flex: 1;
  padding: 36px;
  text-align: center;
}
.zone-map-empty[hidden],.zone-map-selection[hidden] {
  display: none;
}
.zone-map-empty-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 17px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: rgba(211,95,66,.1);
  color: #d88570;
}
.zone-map-empty-icon .icon {
  width: 30px;
  height: 30px;
}
.zone-map-empty strong {
  font-size: 18px;
}
.zone-map-empty small {
  margin-top: 5px;
  color: #9ea09c;
  font-size: 11.5px;
}
.zone-map-selection {
  display: flex;
  min-height: 100%;
  flex: 1;
  flex-direction: column;
}
.zone-map-selection>header {
  padding: 24px 24px 19px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.zone-map-prefix {
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(211,104,77,.12);
  color: #dd8c78;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}
.zone-map-selection h2 {
  margin: 8px 0 0;
  color: #fff;
  font-size: 24px;
  letter-spacing: -.04em;
}
.zone-map-current {
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: center;
  gap: 2px 9px;
  margin: 18px 20px 0;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
}
.zone-map-current>i {
  grid-row: 1/3;
  width: 12px;
  height: 38px;
  border-radius: 99px;
}
.zone-map-current>span {
  color: #9fa09d;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
}
.zone-map-current>strong {
  font-size: 18px;
}
.zone-map-current.is-missing {
  border-color: rgba(229,117,108,.32);
  background: rgba(208,80,71,.09);
}
.zone-map-picker {
  padding: 19px 20px;
}
.zone-map-picker>.section-kicker {
  color: #d98b77;
}
.zone-map-picker>div {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
  margin-top: 9px;
}
.zone-map-choice {
  display: grid;
  grid-template-columns: 10px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  color: #e3e3e2;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: .15s;
}
.zone-map-choice:hover {
  border-color: var(--zone-color);
  background: rgba(255,255,255,.09);
  color: #fff;
  transform: translateY(-1px);
}
.zone-map-choice span {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zone-map-choice small {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding-inline: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  color: #9ea09c;
  font-size: var(--type-micro);
  line-height: 1;
}
.zone-map-choice.is-current {
  border-color: var(--zone-color);
  background: rgba(255,255,255,.1);
  color: #fff;
  cursor: default;
}
.zone-map-choice.is-current:after {
  content: "Actual";
  grid-column: 1/-1;
  color: #dc9280;
  font-size: 12px;
  text-align: right;
  text-transform: none;
}
.zone-map-selection>footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: #9ea09c;
  font-size: 10.5px;
}
.zone-map-selection>footer .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: #d07f6b;
}
.zone-rules-details {
  margin-bottom: 18px;
}
.zone-rules-details>summary {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 10px 15px;
  cursor: pointer;
  list-style: none;
}
.zone-rules-details>summary::-webkit-details-marker {
  display: none;
}
.zone-rules-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.zone-rules-icon .icon {
  width: 16px;
  height: 16px;
}
.zone-rules-details>summary>span:nth-child(2) {
  display: grid;
}
.zone-rules-details>summary strong {
  font-size: 12.5px;
}
.zone-rules-details>summary small {
  color: var(--muted);
  font-size: 10px;
}
.zone-rules-details>summary .badge {
  margin-left: auto;
}
.zone-rules-chevron {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform .18s;
}
.zone-rules-details[open] .zone-rules-chevron {
  transform: rotate(180deg);
}
.zone-rules-head {
  display: flex;
  align-items: stretch;
  gap: 1px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--rule);
}
.zone-rules-head>div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 150px;
  padding: 12px 15px;
  background: var(--surface-2);
}
.zone-rules-head>div strong {
  font-size: 20px;
}
.zone-rules-head>div span {
  color: var(--muted);
  font-size: 10px;
}
.zone-rules-head>.btn {
  align-self: center;
  margin-left: auto;
  margin-right: 12px;
}
.zone-rules-details>footer {
  padding: 10px 15px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
}
@media (max-width:1100px) {
  .zone-map-workspace {
    grid-template-columns: 1fr;
  }
  .zone-map-editor {
    min-height: 360px;
  }
  .zone-map-picker>div {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}
@media (max-width:700px) {
  .zone-map-head {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }
  .zone-map-tools {
    grid-row: 2;
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: auto auto 1fr;
  }
  .zone-map-select select {
    width: 100%;
  }
  .zone-map-score {
    grid-row: 1;
    grid-column: 2;
  }
  .zone-map-canvas {
    min-height: 340px;
    padding: 8px;
  }
  .zone-map-picker>div {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .zone-rules-details>summary .badge {
    display: none;
  }
  .zone-rules-head {
    flex-wrap: wrap;
  }
  .zone-rules-head>div {
    min-width: 0;
    flex: 1;
  }
  .zone-rules-head>.btn {
    width: calc(100% - 24px);
    margin: 0 12px 12px;
  }
  .zone-rules-table {
    min-width: 720px !important;
  }
}
.zone-map-canvas .spain-map-provinces path.is-selected {
  opacity: 1 !important;
}
.command-screen {
  display: grid;
  gap: 18px;
}
.command-screen>.section-heading {
  margin: 10px 0 -4px;
}
.command-strip {
  display: grid;
  grid-template-columns: 1.5fr repeat(4,1fr);
  overflow: hidden;
  border-radius: 16px;
  background: var(--accent-deep);
  color: #fff;
  box-shadow: 0 18px 44px rgba(30,31,28,.15);
}
.command-figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
  border-left: 1px solid rgba(255,255,255,.1);
}
.command-figure:first-child {
  border-left: 0;
}
.command-figure.is-main {
  background: rgba(193,73,43,.09);
}
.command-figure>span {
  color: #a0a19e;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: none;
}
.command-figure>strong {
  margin: 8px 0 4px;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.command-figure.is-main>strong {
  font-size: clamp(34px,3.4vw,46px);
}
.command-figure>strong small {
  margin-left: 7px;
  color: #b8bab6;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: -.01em;
}
.command-figure>strong.is-good {
  color: #7fd0b1;
}
.command-figure>strong.is-warning {
  color: #f3c069;
}
.command-figure>strong.is-bad {
  color: #f5928b;
}
.command-figure>strong.is-empty {
  color: #7d7e7a;
}
.command-figure>em {
  color: #a4a5a1;
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}
.command-columns {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(300px,.85fr);
  gap: 18px;
  align-items: start;
}
.command-columns.is-even {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.command-columns>.panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.command-columns .panel-note {
  margin-top: auto;
}
.carrier-compare {
  display: grid;
}
.carrier-compare-row {
  display: grid;
  grid-template-columns: 34px minmax(120px,1.1fr) minmax(120px,1.6fr) 78px 62px;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  transition: .16s;
}
.carrier-compare-row:last-child {
  border-bottom: 0;
}
.carrier-compare-row:hover {
  background: linear-gradient(100deg,#fff,#f4f4f3);
  color: var(--ink);
  box-shadow: inset 3px 0 var(--accent);
}
.carrier-compare-row.is-current {
  background: var(--accent-soft);
}
.carrier-compare-name {
  display: grid;
  min-width: 0;
}
.carrier-compare-name strong {
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carrier-compare-name small {
  color: var(--muted);
  font-size: 11px;
}
.carrier-compare-name b {
  color: var(--accent);
}
.carrier-compare-bar {
  display: flex;
  height: 13px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--surface-3);
}
.carrier-compare-bar i {
  min-width: 2px;
}
.carrier-compare-bar .is-preparation {
  background: linear-gradient(90deg,#f0c16e,#d99525);
}
.carrier-compare-bar .is-transport {
  background: var(--accent);
}
.carrier-compare-total {
  display: grid;
  text-align: right;
}
.carrier-compare-total strong {
  font-size: 14px;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.carrier-compare-total small {
  color: var(--muted);
  font-size: 11px;
}
.alert-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.alert-item {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 11px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.alert-item:last-child {
  border-bottom: 0;
}
.alert-mark {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--info);
}
.alert-item.is-warn .alert-mark {
  background: var(--warn);
}
.alert-item.is-bad .alert-mark {
  background: var(--danger);
}
.alert-item strong {
  display: block;
  font-size: 12.5px;
  line-height: 1.35;
}
.alert-item p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}
.alert-item a {
  display: inline-block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 700;
}
.alert-item.is-bad {
  background: var(--danger-soft);
}
.alert-item.is-warn {
  background: #fffcf5;
}
.command-state {
  display: grid;
  grid-template-columns: repeat(6,1fr);
}
.command-state>div {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 16px 18px;
  border-right: 1px solid var(--rule);
}
.command-state>div:last-child {
  border-right: 0;
}
.command-state>div.is-attention {
  background: #fffaf0;
}
.command-state>div.is-live {
  background: var(--info-soft);
}
.command-state span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .005em;
  text-transform: none;
}
.command-state strong {
  font-size: 22px;
  letter-spacing: -.045em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.command-state small {
  color: var(--muted);
  font-size: 11px;
}
.promise-claim {
  display: grid;
  gap: 2px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(120deg,var(--surface-2),#fff);
}
.promise-claim strong {
  font-size: 15px;
  letter-spacing: -.025em;
}
.promise-claim span {
  color: var(--muted);
  font-size: 11.5px;
}
.band-list {
  display: grid;
  gap: 9px;
  padding: 16px 18px;
}
.band-row {
  display: grid;
  grid-template-columns: minmax(84px,110px) minmax(80px,1fr) 52px 68px;
  align-items: center;
  gap: 11px;
}
.band-row.is-void {
  opacity: .45;
}
.band-label {
  color: var(--ink-2);
  font-size: 11.5px;
}
.band-track {
  height: 11px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-3);
}
.band-track i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--accent),#868a7f);
}
.band-row strong {
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.band-row small {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}
.month-compare {
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr);
  align-items: center;
  gap: 20px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule);
}
.month-compare>div>span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .005em;
  text-transform: none;
}
.month-compare>div>strong {
  display: block;
  margin: 3px 0 1px;
  font-size: 24px;
  letter-spacing: -.045em;
  line-height: 1;
}
.month-compare>div>small {
  color: var(--muted);
  font-size: 11px;
}
.month-delta.is-worse>strong {
  color: var(--danger);
}
.month-delta.is-better>strong {
  color: var(--ok);
}
.month-history {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
  height: 52px;
}
.month-history>span {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  width: 26px;
}
.month-history i {
  width: 100%;
  min-height: 3px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg,#b1b4ac,#686b61);
}
.month-history small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.week-track {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 18px 18px 12px;
  overflow-x: auto;
}
.week-step {
  display: flex;
  flex: 1;
  min-width: 34px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 150px;
}
.week-step b {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
}
.week-step i {
  width: min(30px,80%);
  min-height: 4px;
  margin-top: 5px;
  border-radius: 6px 6px 2px 2px;
  background: var(--rule-strong);
}
.week-step i.is-good {
  background: linear-gradient(180deg,#5fc49d,var(--ok));
}
.week-step i.is-warning {
  background: linear-gradient(180deg,#eec173,var(--warn));
}
.week-step i.is-bad {
  background: linear-gradient(180deg,#e9938c,var(--danger));
}
.week-step small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}
.movers {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  background: var(--rule);
}
.movers-side {
  padding: 14px 18px 16px;
  background: #fff;
}
.movers-title {
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: none;
}
.movers-title.is-worse {
  color: var(--danger);
}
.movers-title.is-better {
  color: var(--ok);
}
.mover-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 2px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.mover-row:last-child {
  border-bottom: 0;
}
.mover-name {
  display: grid;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mover-name small {
  color: var(--muted);
  font-size: 11px;
}
.mover-delta {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.02em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mover-delta.is-worse {
  color: var(--danger);
}
.mover-delta.is-better {
  color: var(--ok);
}
.mover-detail {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}
.movers-empty {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
}
.weekday-chart {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 8px;
  padding: 18px;
}
.weekday {
  display: grid;
  grid-template-rows: 16px 1fr 16px 14px;
  justify-items: center;
  height: 168px;
}
.weekday.is-void {
  opacity: .4;
}
.weekday b {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
}
.weekday i {
  align-self: end;
  width: min(30px,72%);
  min-height: 3px;
  border-radius: 6px 6px 2px 2px;
  background: var(--accent);
}
.weekday span {
  margin-top: 5px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
}
.weekday small {
  color: var(--muted);
  font-size: 11px;
}
.area-links {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}
.area-link {
  display: grid;
  gap: 5px;
  padding: 17px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: .18s;
}
.area-link:hover {
  transform: translateY(-2px);
  border-color: #d0d1ce;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.area-link .icon {
  width: 19px;
  height: 19px;
  color: var(--accent);
}
.area-link strong {
  font-size: 13px;
  letter-spacing: -.015em;
}
.area-link span {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}
.area-link em {
  margin-top: 3px;
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
@media (max-width:1240px) {
  .command-strip {
    grid-template-columns: repeat(3,1fr);
  }
  .command-figure {
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .command-figure:nth-child(-n+3) {
    border-top: 0;
  }
  .command-figure.is-main {
    grid-column: span 3;
  }
  .command-state {
    grid-template-columns: repeat(3,1fr);
  }
  .command-state>div {
    border-top: 1px solid var(--rule);
  }
  .command-state>div:nth-child(-n+3) {
    border-top: 0;
  }
  .area-links {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width:1100px) {
  .command-columns,.command-columns.is-even {
    grid-template-columns: 1fr;
  }
}
@media (max-width:760px) {
  .command-strip,.command-state {
    grid-template-columns: 1fr;
  }
  .command-figure,.command-state>div {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .command-figure.is-main {
    grid-column: auto;
  }
  .command-state>div {
    border-top: 1px solid var(--rule);
  }
  .carrier-compare-row {
    grid-template-columns: 30px minmax(0,1fr) 62px;
    row-gap: 8px;
  }
  .carrier-compare-bar {
    grid-column: 1/-1;
  }
  .movers,.area-links {
    grid-template-columns: 1fr;
  }
}
body {
  min-width: 0;
}
button,input,select,textarea {
  max-width: 100%;
}
img,video,canvas {
  max-width: 100%;
  height: auto;
}
code,.panel-note,.note,.form-help {
  overflow-wrap: anywhere;
}
.panel,.panel-body,.grid-2>*,.overview-grid>*,.chart-grid>*,.command-columns>* {
  min-width: 0;
}
th {
  color: #737472;
}
input[type=email],input[type=password],input[type=tel],input[type=url] {
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--rule-strong);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  transition: border-color .18s,box-shadow .18s,background .18s;
}
input[type=email]:focus,input[type=password]:focus,input[type=tel]:focus,input[type=url]:focus {
  outline: 0;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(228,69,43,.12);
}
textarea {
  resize: vertical;
}
.skip-link {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 10px;
  padding: 9px 13px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
  transform: translateY(calc(-100% - 14px));
  transition: transform .16s;
}
.skip-link:focus {
  color: #fff;
  transform: translateY(0);
}
.modal-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  max-height: calc(100dvh - 40px);
}
.modal-card>.panel-head,.modal-card>.panel-note {
  flex: 0 0 auto;
}
.modal-card>.panel-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.login-page {
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  background: radial-gradient(circle at 50% 18%,rgba(228,69,43,.08),transparent 25rem),var(--bg);
}
.login-shell {
  width: 400px;
  max-width: 100%;
}
.login-brand {
  margin-bottom: 22px;
  text-align: center;
}
.login-mark {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 13px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(55,58,54,.12);
}
.login-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.login-brand h1 {
  margin: 0 0 4px;
  font-size: 20px;
  letter-spacing: -.025em;
}
.login-brand p,.login-help {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.login-panel {
  box-shadow: 0 18px 55px rgba(25,26,24,.1);
}
.login-fields {
  display: grid;
  gap: 15px;
}
.login-remember {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  cursor: pointer;
}
.login-remember input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
}
.login-actions {
  display: flex;
  justify-content: flex-end;
}
.login-actions .btn {
  min-width: 96px;
}
.login-help {
  margin-top: 17px;
  text-align: center;
}
.login-error {
  margin-bottom: 14px;
}
.login-error p {
  margin: 0;
}
/* ── Permisos: una rejilla, no una pila de tarjetas ──────────────────────────
   Habia una tarjeta por casilla con el nombre del modulo y su descripcion
   dentro, repetida en cada perfil: 24 tarjetas para 18 casillas, y dos tercios
   del texto de la pantalla eran copias. Ademas «¿quien ve Facturacion?» es una
   COLUMNA, y en tarjetas apiladas habia que reconstruirla a mano.
   Cada fila es su propio <form> -se guarda un perfil cada vez, que es lo que
   pide un cambio que entra al momento- y todas comparten el mismo
   `grid-template-columns`, que pone la plantilla desde el numero de modulos.
   Por eso las columnas cuadran sin que la rejilla sea un solo elemento. */
.matrix-row {
  display: grid;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}
.matrix-row:last-of-type { border-bottom: 0; }
.matrix-row > * {
  min-width: 0;
  padding: 11px 10px;
}
.matrix-row > .c {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* El modulo Comun no se puede desmarcar en ningun perfil: la columna entera va
   en gris para que se vea que no es una casilla que este a medias. */
.matrix-row > .c.is-fixed { background: var(--surface-3); }
.matrix-row.is-head {
  border-bottom: 1px solid var(--rule-strong);
  background: var(--surface-3);
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.matrix-row.is-head > * { align-self: end; }
.matrix-row.is-head > .c { text-align: center; }
.matrix-row.is-new { background: var(--surface-2); }
.matrix-row input[type=checkbox] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
}
.matrix-row input[type=checkbox]:not(:disabled) { cursor: pointer; }
.matrix-profile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.matrix-profile > strong { font-size: 13px; }
.matrix-profile-what {
  color: var(--muted);
  font-size: var(--type-caption);
  line-height: 1.4;
}
.matrix-profile .field-control { width: 100%; }
.matrix-row > .c > small {
  color: var(--muted);
  font-size: var(--type-micro);
}
.matrix-action {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.matrix-locked {
  color: var(--muted);
  font-size: var(--type-caption);
}
/* La leyenda: los seis modulos con su descripcion larga, una sola vez. */
.module-legend {
  display: grid;
  grid-template-columns: minmax(150px,210px) 1fr;
  gap: 6px 16px;
  margin: 0 0 10px;
  font-size: 12.5px;
}
.module-legend dt { font-weight: 600; }
.module-legend dd {
  margin: 0;
  color: var(--ink-2);
}
/* Estrecho: la rejilla no cabe, asi que cada fila se apila y las casillas
   recuperan su nombre -en esa forma no hay cabecera que las titule-. */
@media (max-width:1100px) {
  .matrix-row.is-head { display: none; }
  .matrix-row {
    grid-template-columns: 1fr !important;
    padding: 6px 0;
  }
  .matrix-row > .c {
    justify-content: flex-start;
    background: none;
  }
  .matrix-row > .c:before {
    content: attr(data-modulo);
    color: var(--ink-2);
    font-size: 12.5px;
  }
  .matrix-action { justify-content: flex-start; }
  .module-legend { grid-template-columns: 1fr; }
}
.user-create-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap: 12px;
  align-items: end;
}
.user-create-grid>.btn {
  width: 100%;
}
.users-table select {
  min-width: 130px;
}
.tw {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
@media (max-width:820px) {
  .tw table {
    min-width: 100%;
  }
  .tw .rate-matrix {
    min-width: 780px;
  }
  .tw .invoice-table {
    min-width: 850px !important;
  }
  .tw .zone-rules-table {
    min-width: 720px !important;
  }
  .panel-note {
    overflow-wrap: anywhere;
  }
}
@media (max-width:620px) {
  .modal {
    padding: 0;
  }
  .modal-card {
    max-height: 100dvh;
    border-radius: 16px 16px 0 0;
  }
  .modal-actions {
    padding-bottom: max(12px,env(safe-area-inset-bottom));
  }
}
@media (max-width:400px) {
  .login-page {
    padding: 18px 14px;
  }
  .login-shell {
    width: 100%;
  }
  .login-actions .btn {
    width: 100%;
  }
  .sync-toast {
    right: 10px;
    bottom: 10px;
    left: 10px;
    max-width: none;
  }
  .modal-actions .btn {
    flex: 1 1 0;
    padding-inline: 9px;
  }
}
@media print {
  body {
    background: #fff;
  }
  .sync-toast {
    display: none !important;
  }
  .panel {
    break-inside: avoid;
    box-shadow: none;
  }
  .tw {
    overflow: visible;
  }
  .tw table {
    min-width: 100% !important;
  }
}
.settings-screen {
  display: grid;
  gap: 18px;
}
.settings-screen>.section-heading {
  margin: 10px 0 -4px;
}
/* Los cuatro numeros de un vistazo: antes de leer ninguna ficha, el estado
   general -entorno, base, conector, integraciones- sin tener que abrir nada. */
.settings-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 12px;
}
.settings-tile {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
}
.settings-tile>.settings-tile-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.settings-tile>.settings-tile-label>.icon {
  width: 13px;
  height: 13px;
}
.settings-tile>.settings-tile-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 20px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.settings-tile>.settings-tile-value>small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}
.settings-tile.is-ok>.settings-tile-value { color: var(--ok); }
.settings-tile.is-warn>.settings-tile-value { color: var(--warn); }
.settings-tile.is-danger>.settings-tile-value { color: var(--danger); }
.settings-tile-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--muted);
}
.settings-tile.is-ok .settings-tile-dot { background: var(--ok); }
.settings-tile.is-warn .settings-tile-dot { background: var(--warn); }
.settings-tile.is-danger .settings-tile-dot { background: var(--danger); }

/* Las pestañas de la pantalla: cada una es un tramo completo (Entorno,
   Conector, Integraciones), no un filtro sobre la misma tabla -por eso no
   reutiliza `.table-filter-tabs`, que cambia filas y no de tramo. */
.settings-tabs {
  display: flex;
  gap: 22px;
  margin: 20px 0 18px;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
}
.settings-tab {
  padding: 9px 1px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: 650 13px/1.3 inherit;
  white-space: nowrap;
  cursor: pointer;
}
.settings-tab:hover {
  color: var(--ink);
}
.settings-tab.is-selected {
  border-color: var(--accent);
  color: var(--ink);
}
.settings-tabpanel[hidden] {
  display: none;
}
/* Las fichas de «Este entorno»: etiqueta a la izquierda y dato a la derecha, en
   dos columnas de rejilla. Se usa `dl` y no una tabla porque son pares de
   nombre y valor, no filas comparables entre si. */
/* El titulillo de un sub-apartado del menu. Facturacion tiene dos tramos -el
   dinero y los numeros con los que se calcula- y ocho entradas: sin separarlas
   hay que leerlas todas para encontrar una.

   Muy discreto a proposito: es una division, no una entrada mas. Si pesara
   parecido a un `nav-item` competiria con lo que de verdad se pulsa. */
.nav-subgroup {
  display: block;
  margin: 10px 0 2px;
  padding: 0 10px;
  color: var(--muted);
  font: 600 10px/1.4 system-ui,sans-serif;
  letter-spacing: .005em;
  text-transform: none;
}
.nav-group-items > .nav-subgroup:first-child { margin-top: 2px; }

.settings-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 12px;
}
.settings-facts dt { color: var(--muted); }
.settings-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.connector-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  background: var(--rule);
}
.connector-field {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  background: #fff;
}
.connector-field>span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
}
.connector-field>code {
  overflow-x: auto;
  padding: 7px 9px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 11.5px;
  white-space: nowrap;
}
.connector-field>small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.connector-field>small code {
  padding: 1px 4px;
  font-size: 11px;
}
.tool-http {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: 11px;
  font-weight: 400;
}
.tool-what {
  max-width: 38ch;
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.5;
}
.tool-args {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tool-arg {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: 11px;
}
.tool-arg.is-required {
  border-color: #d0d1ce;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 650;
}
.tool-arg em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}
.setup-steps {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--rule);
  counter-reset: paso;
}
.setup-steps>li {
  position: relative;
  padding: 16px 18px 16px 48px;
  background: #fff;
  counter-increment: paso;
}
.setup-steps>li:before {
  content: counter(paso);
  position: absolute;
  left: 18px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.setup-steps strong {
  font-size: 12.5px;
}
.setup-steps p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}
.setup-steps em {
  color: var(--ink-2);
  font-style: normal;
  font-weight: 650;
}
@media (max-width:900px) {
  .connector-grid,.setup-steps {
    grid-template-columns: 1fr;
  }
}
.token-new {
  border-color: #d0d1ce;
  background: linear-gradient(120deg,var(--surface-2),#fff);
}
.token-new-body {
  display: grid;
  gap: 10px;
  padding: 18px;
}
.token-value {
  display: block;
  overflow-x: auto;
  padding: 13px 15px;
  border: 1px dashed var(--accent);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;
  -webkit-user-select: all;
  user-select: all;
}
.token-new-body p {
  margin: 0;
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.6;
}
.token-form {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,1.4fr) auto;
  align-items: end;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.token-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.token-form label>span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .005em;
  text-transform: none;
}
.token-form input,.token-form select {
  width: 100%;
}
.filter.is-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.filter.is-primary:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: #fff;
}
.filter.is-primary .icon {
  color: currentColor;
}
.filter.is-danger {
  border-color: #e8c2bf;
  color: var(--danger);
}
.filter.is-danger:hover {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}
tr.is-revoked {
  color: var(--muted);
}
tr.is-revoked th,tr.is-revoked td {
  opacity: .62;
}
tr.is-revoked th small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
.data-table td small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
@media (max-width:900px) {
  .token-form {
    grid-template-columns: 1fr;
  }
}
.tw {
  position: relative;
}
.delivery-map-screen {
  grid-template-columns: minmax(0,1fr);
}
.delivery-map-screen>*,.map-metric-switch,.map-province-picker {
  min-width: 0;
}
.map-toolbar {
  flex-wrap: wrap;
}
.map-metric-switch {
  max-width: 100%;
  flex: 1 1 300px;
}
.map-metric-switch button {
  flex: 0 0 auto;
}
.map-province-picker select {
  min-width: 0;
  max-width: 100%;
}
.delivery-map-layout {
  grid-template-columns: minmax(0,1.45fr) minmax(250px,.75fr);
}
.tariff-stat>strong {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}
.promise-zone strong,.slow-city-name strong {
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (min-width:821px) and (max-width:1500px) {
  .overview-grid {
    grid-template-columns: minmax(0,1fr) minmax(340px,.65fr);
  }
}
@media (min-width:821px) and (max-width:1200px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width:1100px) {
  .delivery-map-layout {
    grid-template-columns: minmax(0,1fr);
  }
}
@media (max-width:820px) {
  .map-metric-switch {
    flex-basis: auto;
  }
  .promise-table {
    min-width: 880px !important;
  }
}
.file-drop:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
body.dialog-open {
  overflow: hidden;
}

/* ── Configuracion: lo que se mira cada vez, y lo que se lee una vez ─────────
   La pestana del conector llego a 938 palabras a la vista, casi el 75% del
   texto de la pantalla, y el fundamento -bueno, pero fundamento- competia por
   el sitio con los dos tokens y la URL, que es a lo que se entra.
   La regla: en pantalla el estado y la accion; el porque, dentro de un
   `<details>`. Cerrados, porque el que entra cada dia ya sabe el porque. */
.connector-status {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.connector-status > div {
  padding: 8px 16px;
  border-right: 1px solid var(--rule);
}
.connector-status > div:last-child { border-right: 0; }
.connector-status dt {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.connector-status dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

/* El desplegable del porque. `summary` sin marcador propio: el chevron es un
   SVG que gira, para que se vea igual en los cuatro navegadores. */
.reveal {
  border-top: 1px dashed var(--rule-strong);
  background: var(--surface-3);
}
.panel > .reveal:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.reveal > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  list-style: none;
}
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary:hover { color: var(--accent-deep); }
.reveal > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.reveal > summary .chev { transition: transform .15s ease; }
.reveal[open] > summary .chev { transform: rotate(90deg); }
.reveal-body {
  padding: 0 18px 14px;
  max-width: 82ch;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.65;
}
.reveal-body > p { margin: 0 0 9px; }
.reveal-body > p:last-child { margin-bottom: 0; }

/* El manual de conectar n8n: un solo bloque, cerrado, al final de la pestana.
   Se lee el dia que se monta el conector y no vuelve a hacer falta, pero se
   queda en la aplicacion porque el endpoint que hay que copiar esta arriba. */
.reveal.is-manual {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.reveal.is-manual > summary {
  padding: 14px 18px;
  color: var(--ink);
  font-size: 13px;
}
.reveal.is-manual .reveal-body { max-width: none; }

/* ── Configuracion > Integraciones: los ajustes que se ponen desde la pantalla ── */
.ajustes-form { display: grid; gap: 0; }
.ajuste-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.ajuste-row > label { display: grid; gap: 3px; }
.ajuste-row > label strong { font-size: 13px; }
.ajuste-row > label small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.ajuste-field { display: grid; gap: 6px; min-width: 0; }
.ajuste-field input, .ajuste-field select { width: 100%; }
.ajuste-field .ajuste-quitar { display: flex; gap: 6px; align-items: center; justify-content: flex-start; margin: 0; color: var(--muted); font-size: 12px; text-align: left; cursor: pointer; }
/* La regla de arriba pone los campos a todo el ancho; la casilla no. */
.ajuste-field .ajuste-quitar input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.ajuste-origen { display: grid; gap: 4px; justify-items: start; font-size: 12px; color: var(--muted); }
.ajustes-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 18px; background: var(--surface-2); }
@media (max-width: 860px) {
  .ajuste-row { grid-template-columns: 1fr; gap: 8px; }
}