/*
  Payments trace panel: a dense spec-sheet look for reading one payment at a time.
  Hairline rules instead of floating cards, tabular figures, and one bold element: the case header
  (verdict + journey with elapsed time between steps).
*/

:root {
  color-scheme: light;
  --font-sans: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --roma-red: #e1251b;
  --roma-blue: #0d4c9c;
  --roma-blue-strong: #0a3d7e;
  --roma-blue-soft: #e6eef9;

  --paper: #eef1f5;
  --panel: #ffffff;
  --panel-alt: #f7f8fa;
  --rule: #dce1e8;
  --rule-strong: #c3cad5;
  --ink: #172133;
  --muted: #5d6879;
  --faint: #8a94a3;

  --success: #12733a;
  --success-soft: #e5f3ea;
  --warning: #9a5800;
  --warning-soft: #fbf0dc;
  --danger: #b8232a;
  --danger-soft: #fbe9e9;
  --neutral-soft: #edf0f4;
  --mp: #0a6aa0;
  --mp-soft: #e1f1fa;
  --legacy: #c42118;
  --legacy-soft: #fcebea;

  --env-color: #5d6879;
  --radius: 6px;
  --radius-sm: 4px;
  --focus: 0 0 0 3px rgba(13, 76, 156, 0.28);

  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-border-color: var(--rule);
  --bs-secondary-color: var(--muted);
  --bs-link-color: var(--roma-blue);
  --bs-link-color-rgb: 13, 76, 156;
  --bs-link-hover-color: var(--roma-blue-strong);
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --roma-blue: #8db7ff;
  --roma-blue-strong: #b3cfff;
  --roma-blue-soft: #1a2a44;

  --paper: #10151d;
  --panel: #171e29;
  --panel-alt: #1c2431;
  --rule: #2a3443;
  --rule-strong: #3a4659;
  --ink: #e3e8ef;
  --muted: #9ba6b7;
  --faint: #6f7b8e;

  --success: #5fd08b;
  --success-soft: #15291e;
  --warning: #f2b54c;
  --warning-soft: #30260f;
  --danger: #f2787c;
  --danger-soft: #34191b;
  --neutral-soft: #222b38;
  --mp: #7cc8f0;
  --mp-soft: #122a3a;
  --legacy: #f2847c;
  --legacy-soft: #33191a;
  --focus: 0 0 0 3px rgba(141, 183, 255, 0.35);

  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-border-color: var(--rule);
  --bs-secondary-color: var(--muted);
  --bs-link-color: var(--roma-blue);
  --bs-link-color-rgb: 141, 183, 255;
  --bs-link-hover-color: var(--roma-blue-strong);
}

body.env-dev { --env-color: #15803d; }
body.env-qa { --env-color: #b45309; }
body.env-prod { --env-color: #c0262d; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  min-height: 100vh;
}

main {
  padding-bottom: 3rem;
  padding-top: 1.25rem;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.icon {
  height: 1em;
  width: 1em;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* ---------- Top bar ---------- */

.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 0 3px 0 var(--env-color);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.topbar-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  min-height: 60px;
  padding-bottom: 0.5rem;
  padding-top: calc(0.5rem + 3px);
}

.env-tag {
  background: var(--env-color);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
}

.brand {
  align-items: center;
  color: var(--ink);
  display: flex;
  gap: 0.65rem;
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand img {
  height: 32px;
  width: auto;
}

.brand-title {
  font-weight: 700;
  white-space: nowrap;
}

.topbar-search {
  display: flex;
  flex: 1 1 320px;
  gap: 0.5rem;
  max-width: 560px;
}

.topbar-search .form-control {
  font-family: var(--font-mono);
  font-size: 0.95rem;
}

.topbar-user {
  align-items: center;
  display: flex;
  gap: 0.6rem;
  margin-left: auto;
  min-width: 0;
}

.user {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 14rem;
}

.btn-logout {
  --bs-btn-color: var(--muted);
  --bs-btn-border-color: var(--rule-strong);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--panel-alt);
  --bs-btn-hover-border-color: var(--rule-strong);
  border-radius: var(--radius-sm);
  font-weight: 500;
}

/* ---------- Bootstrap controls ---------- */

.btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.btn-primary {
  --bs-btn-bg: var(--roma-blue);
  --bs-btn-border-color: var(--roma-blue);
  --bs-btn-hover-bg: var(--roma-blue-strong);
  --bs-btn-hover-border-color: var(--roma-blue-strong);
  --bs-btn-active-bg: var(--roma-blue-strong);
  --bs-btn-active-border-color: var(--roma-blue-strong);
  --bs-btn-disabled-bg: var(--roma-blue);
  --bs-btn-disabled-border-color: var(--roma-blue);
  --bs-btn-focus-box-shadow: var(--focus);
  white-space: nowrap;
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #0b1626;
  --bs-btn-hover-color: #0b1626;
  --bs-btn-active-color: #0b1626;
  --bs-btn-disabled-color: #0b1626;
}

.btn-light {
  --bs-btn-bg: var(--panel-alt);
  --bs-btn-border-color: var(--rule-strong);
  --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: var(--neutral-soft);
  --bs-btn-hover-border-color: var(--rule-strong);
  --bs-btn-hover-color: var(--ink);
}

.form-control,
.form-select {
  background-color: var(--panel);
  border-color: var(--rule-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--panel);
  border-color: var(--roma-blue);
  box-shadow: var(--focus);
  color: var(--ink);
}

.form-control::placeholder {
  color: var(--faint);
  font-family: var(--font-sans);
}

.form-label {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.text-secondary {
  color: var(--muted) !important;
}

/* ---------- Theme toggle ---------- */

.theme-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  display: inline-flex;
  height: 31px;
  justify-content: center;
  width: 31px;
}

.theme-toggle:hover {
  background: var(--panel-alt);
  color: var(--ink);
}

.theme-toggle svg {
  height: 16px;
  width: 16px;
}

.theme-toggle .icon-sun,
[data-bs-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

[data-bs-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

.theme-toggle-floating {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 10;
}

/* ---------- Loading ---------- */

.page-progress {
  height: 2px;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1040;
}

.is-loading .page-progress::before {
  animation: progress 1.1s ease-in-out infinite;
  background: var(--roma-blue);
  content: "";
  display: block;
  height: 100%;
  width: 35%;
}

@keyframes progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(300%); }
}

.is-loading main > :not(.login-wrap):not(.modal) {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s;
}

.spinner {
  animation: spin 0.8s linear infinite;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  display: inline-block;
  height: 0.9em;
  vertical-align: -0.1em;
  width: 0.9em;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-block {
  align-items: center;
  color: var(--muted);
  display: flex;
  gap: 0.6rem;
  padding: 1.5rem 0;
}

/* ---------- Tones and origins ---------- */

.tone-success { --tone: var(--success); --tone-soft: var(--success-soft); }
.tone-warning { --tone: var(--warning); --tone-soft: var(--warning-soft); }
.tone-danger { --tone: var(--danger); --tone-soft: var(--danger-soft); }
.tone-neutral { --tone: var(--muted); --tone-soft: var(--neutral-soft); }
.tone-info { --tone: var(--roma-blue); --tone-soft: var(--roma-blue-soft); }

.origin-payments { --tone: var(--roma-blue); --tone-soft: var(--roma-blue-soft); }
.origin-mp { --tone: var(--mp); --tone-soft: var(--mp-soft); }
.origin-orders { --tone: var(--legacy); --tone-soft: var(--legacy-soft); }

.chip {
  background: var(--tone-soft, var(--neutral-soft));
  border-radius: var(--radius-sm);
  color: var(--tone, var(--muted));
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0 0.45rem;
  white-space: nowrap;
}

/* ---------- Notices ---------- */

.notice {
  background: var(--tone-soft, var(--neutral-soft));
  border-left: 3px solid var(--tone, var(--muted));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.85rem;
}

.notice-title {
  color: var(--tone, var(--ink));
  font-weight: 700;
}

.notice details {
  margin-top: 0.4rem;
}

/* ---------- Welcome (no search yet) ---------- */

.welcome {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-top: 1rem;
  max-width: 44rem;
  padding: 1.75rem 2rem;
}

.welcome-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.welcome-examples {
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0;
  grid-template-columns: max-content 1fr;
  margin: 1.25rem 0;
}

.welcome-examples dt,
.welcome-examples dd {
  border-bottom: 1px solid var(--rule);
  margin: 0;
  padding: 0.5rem 0;
}

.welcome-examples dt {
  color: var(--muted);
  font-weight: 500;
  padding-right: 1.5rem;
}

.welcome-note {
  color: var(--muted);
  margin: 0;
}

/* ---------- Case header: verdict, journey, key facts ---------- */

.case {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  border-top: 4px solid var(--tone);
  margin-bottom: 1.25rem;
}

.case-head {
  align-items: start;
  display: grid;
  gap: 1rem 2rem;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto;
  padding: 1.1rem 1.5rem 1rem;
}

.case-label {
  color: var(--muted);
  display: block;
  font-size: 0.85rem;
}

.case-order {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
}

.case-ref {
  color: var(--muted);
  display: block;
  font-size: 0.8rem;
  margin-top: 0.3rem;
  overflow-wrap: anywhere;
}

.case-verdict {
  border-left: 1px solid var(--rule);
  padding-left: 2rem;
}

.verdict {
  color: var(--tone);
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.verdict-desc {
  display: block;
  margin-top: 0.35rem;
  max-width: 34rem;
}

.case-amount {
  text-align: right;
}

.folio {
  color: var(--tone, inherit);
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
}

.amount {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.35rem;
}

/* Journey: one stop per step; the connector carries the time elapsed since the previous stop. */

.journey {
  border-top: 1px solid var(--rule);
  display: flex;
  list-style: none;
  margin: 0;
  padding: 1.1rem 0.5rem 1rem;
}

.journey-step {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  padding: 0 0.25rem;
  position: relative;
  text-align: center;
}

.journey.journey .pending {
  --tone: var(--faint);
  --tone-soft: var(--neutral-soft);
}

.journey-link {
  border-bottom: 2px solid var(--rule-strong);
  color: var(--muted);
  align-items: flex-end;
  display: flex;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  height: 14px;
  left: calc(-50% + 18px);
  line-height: 1;
  position: absolute;
  right: calc(50% + 18px);
  top: 0;
}

.journey-link:not(:empty) {
  padding-bottom: 3px;
}

.journey-step:not(.pending) .journey-link {
  border-bottom-color: var(--tone);
}

.journey-step.pending .journey-link {
  border-bottom-style: dashed;
}

.journey-dot {
  align-items: center;
  background: var(--tone-soft);
  border: 2px solid var(--tone);
  border-radius: 50%;
  color: var(--tone);
  display: inline-flex;
  flex: none;
  height: 28px;
  justify-content: center;
  margin-bottom: 0.45rem;
  position: relative;
  width: 28px;
}

.journey-step.pending .journey-dot {
  background: var(--panel);
  border-style: dashed;
}

.journey-dot .icon {
  height: 14px;
  stroke-width: 2.5;
  width: 14px;
}

.journey-title {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
}

.journey-step.pending .journey-title {
  color: var(--muted);
  font-weight: 500;
}

.journey-detail {
  color: var(--tone);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0.15rem;
  overflow-wrap: anywhere;
}

.journey-step.pending .journey-detail {
  color: var(--muted);
  font-weight: 400;
}

.journey-time {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

/* Key facts: one row of cells separated by rules, like the header of a spec sheet. */

.facts {
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
}

.fact {
  padding: 0.75rem 1.5rem 0.85rem;
}

.fact + .fact {
  border-left: 1px solid var(--rule);
}

.fact dt {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.15rem;
}

.fact dd {
  margin: 0;
}

.fact-value {
  font-size: 1.05rem;
  font-weight: 700;
}

.fact-status {
  color: var(--tone);
}

.fact-email {
  font-size: 0.95rem;
}

.fact-sub {
  color: var(--muted);
  font-size: 0.82rem;
}

/* ---------- Tabs ---------- */

.tabs-soft {
  border-bottom: 1px solid var(--rule-strong);
  flex-wrap: nowrap;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.tabs-soft .nav-link {
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: -1px;
  padding: 0.55rem 0.8rem;
  white-space: nowrap;
}

.tabs-soft .nav-link:hover {
  color: var(--ink);
}

.tabs-soft .nav-link.active {
  border-bottom-color: var(--roma-blue);
  color: var(--ink);
  font-weight: 700;
}

.tab-count {
  background: var(--tone-soft, var(--neutral-soft));
  border-radius: var(--radius-sm);
  color: var(--tone, var(--muted));
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 0.3rem;
  padding: 0.05rem 0.35rem;
}

.tab-panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 0 0 var(--radius) var(--radius);
  border-top: 0;
  padding: 1.25rem 1.5rem 1.5rem;
}

/* Repeats the tab name so screen readers can jump to each panel's content by heading. */
.tab-heading {
  border-bottom: 2px solid var(--roma-blue);
  color: var(--roma-blue-strong);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
}

/* ---------- Summary tab ---------- */

/* The case header lives inside the summary tab and shares its panel: no nested box. */
.tab-panel.tab-panel-summary {
  padding: 0;
}

.tab-panel-summary .tab-heading {
  margin: 0;
  padding: 1rem 1.5rem 0.4rem;
}

.tab-panel-summary .case {
  border: 0;
  border-radius: 0;
  border-top: 4px solid var(--tone);
  margin: 0;
}

.tab-panel-summary .summary-grid {
  border-top: 1px solid var(--rule);
  padding: 1.25rem 1.5rem 1.5rem;
}

.summary-grid {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
}

.summary-rail {
  border-left: 1px solid var(--rule);
  padding-left: 2rem;
}

.ids {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.id-item {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  column-gap: 0.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.4rem 0;
}

.id-item:first-child {
  border-top: 1px solid var(--rule);
}

.id-label {
  color: var(--muted);
  font-size: 0.8rem;
  grid-column: 1;
}

.id-value {
  grid-column: 1;
  overflow-wrap: anywhere;
}

.copy-btn {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  display: inline-flex;
  grid-column: 2;
  grid-row: 1 / span 2;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.copy-btn:hover {
  background: var(--panel-alt);
  border-color: var(--rule-strong);
  color: var(--ink);
}

.copy-btn .icon {
  height: 15px;
  width: 15px;
}

.copy-btn .icon-done,
.copy-btn.copied .icon-copy {
  display: none;
}

.copy-btn.copied {
  color: var(--success);
}

.copy-btn.copied .icon-done {
  display: block;
}

.actions {
  display: grid;
  gap: 0.75rem;
}

.action-item {
  border-left: 3px solid var(--rule);
  padding-left: 0.75rem;
}

.action-item.recommended {
  border-left-color: var(--roma-blue);
}

.btn-action {
  --bs-btn-color: var(--roma-blue);
  --bs-btn-border-color: var(--rule-strong);
  --bs-btn-hover-color: var(--roma-blue-strong);
  --bs-btn-hover-bg: var(--roma-blue-soft);
  --bs-btn-hover-border-color: var(--roma-blue);
  --bs-btn-disabled-color: var(--faint);
  --bs-btn-disabled-border-color: var(--rule);
  --bs-btn-disabled-opacity: 1;
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
  font-weight: 700;
}

.recommended .btn-action:not(:disabled) {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--roma-blue);
  --bs-btn-border-color: var(--roma-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--roma-blue-strong);
}

[data-bs-theme="dark"] .recommended .btn-action:not(:disabled) {
  --bs-btn-color: #0b1626;
  --bs-btn-hover-color: #0b1626;
}

.action-reason {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.35rem 0 0;
}

/* ---------- Section titles ---------- */

.section-title {
  align-items: center;
  display: flex;
  font-size: 1rem;
  font-weight: 700;
  gap: 0.45rem;
  margin: 1.75rem 0 0.6rem;
}

.section-title:first-child {
  margin-top: 0;
}

.section-title .count {
  background: var(--neutral-soft);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.75rem;
  padding: 0.05rem 0.4rem;
}

/* ---------- Field lists (Pago, Orden, Status, Datos técnicos) ---------- */

.fields {
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
  margin: 0 0 0.5rem;
}

.fields dt,
.fields dd {
  border-bottom: 1px solid var(--rule);
  margin: 0;
  padding: 0.45rem 0;
}

.fields dt {
  color: var(--muted);
  font-weight: 500;
  padding-right: 1rem;
}

.fields dd {
  overflow-wrap: anywhere;
}

/* ---------- Row grids: history and logs ---------- */
/* Rows line up like a table, but "Ver datos" opens below its row at full width instead of inside a cell. */

.tl-grid {
  column-gap: 1rem;
  display: grid;
  grid-template-columns: 4.75rem 7rem 7.5rem minmax(0, 1fr) 6.5rem;
}

.log-grid {
  column-gap: 1rem;
  display: grid;
  grid-template-columns: 10.75rem 13rem 6.5rem minmax(0, 1fr) 7.5rem;
}

.row-grid-head {
  border-bottom: 1px solid var(--rule-strong);
  color: var(--muted);
  font-size: 0.8rem;
  padding: 0 0 0.35rem;
}

.timeline,
.log-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}

.tl-item,
.log-item {
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  padding: 0.45rem 0;
  position: relative;
}

.tl-item:hover,
.log-item:hover {
  background: var(--panel-alt);
}

.row-details {
  grid-column: 1 / -1;
}

.row-details > summary {
  position: absolute;
  right: 0;
  top: 0.5rem;
}

.row-details[open] {
  padding-top: 0.25rem;
}

.tl-time {
  font-weight: 500;
}

.tl-gap {
  color: var(--muted);
  font-size: 0.85rem;
}

.tl-gap .day {
  color: var(--ink);
  font-weight: 700;
}

.tl-origin {
  color: var(--tone);
  font-size: 0.88rem;
  font-weight: 700;
}

.tl-title {
  font-weight: 500;
}

.tl-detail {
  color: var(--muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.tl-item.level-error .tl-title {
  color: var(--danger);
  font-weight: 700;
}

.tl-code {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.log-time {
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
}

.log-type {
  min-width: 0;
}

.log-type .chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.log-host {
  color: var(--muted);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-preview {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* With "Ver completo" available the preview stays on one line; short messages wrap so nothing is hidden. */
.log-item:has(.row-details) .log-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-item:not(:has(.row-details)) .log-preview {
  grid-column: 4 / -1;
}

/* ---------- Log filters ---------- */

.log-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.log-filters .form-select {
  max-width: 18rem;
}

.log-filters .form-control {
  max-width: 22rem;
}

.status-call {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ---------- Tables ---------- */

.table-soft {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--rule);
  --bs-table-hover-bg: var(--panel-alt);
  margin-bottom: 0.5rem;
}

.table-soft thead th {
  border-bottom-color: var(--rule-strong);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}

.table-soft td {
  vertical-align: top;
}

.table-soft tbody tr:hover > * {
  background: var(--panel-alt);
}

/* ---------- Raw data ---------- */

details > summary {
  color: var(--roma-blue);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
}

pre.json {
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin: 0.5rem 0;
  max-height: 28rem;
  overflow: auto;
  padding: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.footer-note {
  color: var(--faint);
  font-size: 0.82rem;
  text-align: right;
}

/* ---------- Action modals ---------- */

.action-modal {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.action-modal .modal-header,
.action-modal .modal-footer {
  border-color: var(--rule);
}

.modal-env {
  background: var(--env-color);
  border-radius: var(--radius-sm);
  color: #fff;
  display: inline-block;
  font-size: 0.85rem;
  margin-bottom: 0.85rem;
  padding: 0.15rem 0.55rem;
}

.modal-env.env-dev { --env-color: #15803d; }
.modal-env.env-qa { --env-color: #b45309; }
.modal-env.env-prod { --env-color: #c0262d; }

.modal-effects {
  color: var(--muted);
  font-size: 0.9rem;
  padding-left: 1.1rem;
}

.modal-effects li + li {
  margin-top: 0.3rem;
}

/* ---------- Login ---------- */

.login-wrap {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 4rem);
}

.login-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  border-top: 4px solid var(--roma-red);
  max-width: 400px;
  padding: 1.75rem 2rem 1.5rem;
  width: 100%;
}

.login-brand {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
}

.login-brand .logo {
  height: 44px;
  width: auto;
}

.login-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}

.login-lead {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.1rem 0 0;
}

.login-note {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 1.25rem 0 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fact:nth-child(4) {
    border-left: 0;
  }

  .fact:nth-child(n + 4) {
    border-top: 1px solid var(--rule);
  }

  .summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .summary-rail {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: 1.25rem;
  }
}

@media (max-width: 860px) {
  .case-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .case-id {
    grid-column: 1 / -1;
  }

  .case-verdict {
    border-left: 0;
    border-top: 1px solid var(--rule);
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0.85rem 0 0;
  }

  .case-folio {
    grid-column: 1;
    grid-row: 3;
  }

  .case-amount {
    grid-column: 2;
    grid-row: 3;
  }

  /* The journey becomes a vertical list; the elapsed time sits next to each step. */
  .journey {
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
  }

  .journey-step {
    align-items: start;
    column-gap: 0.75rem;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    padding: 0;
    text-align: left;
  }

  .journey-dot {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .journey-title,
  .journey-detail {
    grid-column: 2;
  }

  .journey-time {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
  }

  .journey-link {
    border: 0;
    grid-column: 3;
    grid-row: 2;
    height: auto;
    justify-content: flex-end;
    padding: 0;
    position: static;
  }

  .topbar-user {
    margin-left: 0;
  }
}

@media (max-width: 860px) {
  .tl-grid {
    grid-template-areas: "time origin gap" "body body body";
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .tl-time { grid-area: time; }
  .tl-origin { grid-area: origin; }
  .tl-gap { grid-area: gap; }
  .tl-body { grid-area: body; }

  .log-grid {
    grid-template-areas: "time host" "type type" "preview preview";
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.2rem;
  }

  .log-time { grid-area: time; }
  .log-host { grid-area: host; }
  .log-type { grid-area: type; }
  .log-preview { grid-area: preview; }

  .row-grid-head {
    display: none;
  }

  .row-details {
    grid-column: 1 / -1;
  }

  .row-details > summary {
    margin-top: 0.15rem;
    position: static;
  }
}

@media (max-width: 640px) {
  .brand-title,
  .user {
    display: none;
  }

  .topbar-search {
    flex-basis: 100%;
    max-width: none;
    order: 3;
  }

  .topbar-user {
    margin-left: auto;
  }

  .case-head,
  .fact,
  .tab-panel,
  .tab-panel-summary .summary-grid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .verdict {
    font-size: 1.75rem;
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fact:nth-child(n) {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .fact:nth-child(even) {
    border-left: 1px solid var(--rule);
  }

  .fact:first-child,
  .fact:nth-child(2) {
    border-top: 0;
  }

  .fact:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .fields dt {
    border-bottom: 0;
    font-size: 0.8rem;
    padding-bottom: 0;
  }

  .fields dd {
    padding-top: 0.1rem;
  }

  .table-stack thead {
    display: none;
  }

  .table-stack tr {
    border-bottom: 1px solid var(--rule);
    display: block;
    padding: 0.4rem 0;
  }

  .table-stack td {
    border: 0;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    padding: 0.2rem 0;
    text-align: left !important;
  }

  .table-stack td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .is-loading .page-progress::before {
    animation-duration: 2.5s;
  }

  .tab-pane.fade {
    transition: none;
  }
}