/* Rolplay dashboard UI: dark neutral surfaces with the brand red reserved for live actions. */
:root {
  --rp-bg: #050505;
  --rp-surface: #111111;
  --rp-surface-soft: #1c1c1c;
  --rp-surface-raised: #242424;
  --rp-border: #353535;
  --rp-border-strong: #4a4a4a;
  --rp-text: #f5f5f5;
  --rp-muted: #a3a3a3;
  --rp-faint: #737373;
  --rp-brand: #d41e2c;
  --rp-brand-hover: #ef3340;
  --rp-brand-soft: #3b1115;
  --rp-dry-run: #a7b8b0;
  --rp-dry-run-soft: #1b2823;
  --rp-success: #a7d8b4;
}

html { background: var(--rp-bg); }
body { background: var(--rp-bg); color: var(--rp-text); font-family: Inter, system-ui, sans-serif; }

.btn-primary, .btn-secondary, .btn-danger, .btn-live, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.4rem; font-size: 0.875rem; line-height: 1.25rem;
  padding: 0.4rem 0.75rem; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-primary {
  background: var(--rp-brand); color: #fff; font-weight: 700; border: 1px solid var(--rp-brand);
}
.btn-primary:hover:not(:disabled), .btn-live:hover:not(:disabled), .btn-danger:hover:not(:disabled) { background: var(--rp-brand-hover); border-color: var(--rp-brand-hover); }
.btn-secondary {
  background: var(--rp-surface-soft); color: var(--rp-text); font-weight: 600; border: 1px solid var(--rp-border-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--rp-surface-raised); border-color: var(--rp-muted); color: #fff; }
.btn-danger, .btn-live {
  background: var(--rp-brand); color: #fff; font-weight: 700; border: 1px solid var(--rp-brand);
}
.btn-live { box-shadow: 0 0 0 2px rgba(212, 30, 44, .28); }
.btn-ghost { background: transparent; color: var(--rp-muted); border: 1px solid transparent; font-weight: 500; }
.btn-ghost:hover:not(:disabled) { color: #fff; border-color: var(--rp-border-strong); background: var(--rp-surface-soft); }
button:disabled { opacity: .42; cursor: not-allowed; }

input:focus, button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--rp-brand-hover); outline-offset: 2px;
}

/* Keep the familiar Tailwind utility markup on the same neutral/red palette. */
.border-slate-700, .border-slate-700\/80 { border-color: var(--rp-border) !important; }
.border-slate-600, .border-slate-600\/80 { border-color: var(--rp-border-strong) !important; }
.bg-slate-900 { background-color: #0b0b0b !important; }
.bg-surface { background-color: var(--rp-surface) !important; }
.bg-surface-deep { background-color: var(--rp-bg) !important; }
.bg-surface\/95, .bg-surface\/98 { background-color: rgba(17, 17, 17, .96) !important; }
.text-ink { color: var(--rp-text) !important; }
.text-ink-muted { color: var(--rp-muted) !important; }
.text-ink-faint { color: var(--rp-faint) !important; }
.accent-sky-500, .accent-amber-500 { accent-color: var(--rp-brand); }
.focus\:ring-sky-500\/60:focus { --tw-ring-color: rgba(239, 51, 64, .6) !important; }

.rp-alert-success, .rp-alert-error, .rp-alert-warn, .rp-alert-info {
  border: 1px solid; border-radius: .4rem;
}
.rp-alert-success { border-color: rgba(167, 216, 180, .55); background: #102016; color: #cfe8d4; }
.rp-alert-error { border-color: rgba(212, 30, 44, .65); background: #2a0d11; color: #ffd1d5; }
.rp-alert-warn { border-color: rgba(167, 184, 176, .6); background: #1b2823; color: #d7e3dd; }
.rp-alert-info { border-color: rgba(163, 163, 163, .55); background: #202020; color: #e3e3e3; }

.state-chip {
  display: inline-block; padding: .1rem .35rem; border-radius: .25rem;
  font-family: ui-monospace, Consolas, monospace; font-size: .65rem;
  max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.state-chip.error, .state-chip.started { background: rgba(212, 30, 44, .18); color: #ff9da6; }
.state-chip.processed { background: rgba(116, 164, 128, .2); color: var(--rp-success); }
.state-chip.idle { background: rgba(163, 163, 163, .12); color: var(--rp-muted); }

#stuckBody tr[data-idx] { cursor: pointer; }
#stuckBody tr[data-idx]:hover { background: rgba(212, 30, 44, .08); }
#stuckBody tr.selected { background: rgba(212, 30, 44, .16); }
#stuckBody td { padding: .4rem .5rem; border-bottom: 1px solid var(--rp-border); white-space: nowrap; color: #d4d4d4; }

/* In-flow, collapsed response sheet: opening it can never cover table/action controls. */
.json-drawer {
  margin-top: .75rem; border: 1px solid var(--rp-border); border-radius: .5rem;
  overflow: hidden; background: var(--rp-surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.json-drawer__toggle {
  min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .5rem .75rem; cursor: pointer; user-select: none;
}
.json-drawer__toggle:hover { background: var(--rp-surface-soft); }
.json-drawer__title { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.json-drawer__title h2 { margin: 0; color: var(--rp-text); font-size: .875rem; font-weight: 700; }
.json-drawer__title span:last-child { color: var(--rp-faint); font-size: .6875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#jsonChevron { color: var(--rp-muted); font-size: .875rem; transition: transform .15s ease; }
.json-drawer.collapsed #jsonChevron { transform: rotate(-90deg); }
.json-drawer__actions { display: flex; align-items: center; flex-shrink: 0; }
.json-output {
  display: block; max-height: min(32vh, 20rem); overflow: auto; margin: 0;
  padding: .25rem .75rem .75rem; color: var(--rp-muted); background: #0a0a0a;
  border-top: 1px solid var(--rp-border); font: .6875rem/1.45 ui-monospace, Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.json-drawer.collapsed .json-output { display: none; }


/* SweetAlert2: Rolplay dark surfaces, Inter typography, and live-action red. */
.swal2-popup.rp-swal-popup {
  background: var(--rp-surface) !important;
  color: var(--rp-text) !important;
  border: 1px solid var(--rp-border-strong);
  border-radius: .6rem;
  font-family: Inter, system-ui, sans-serif;
}
.swal2-popup.rp-swal-popup .swal2-title { color: var(--rp-text); }
.swal2-popup.rp-swal-popup .swal2-html-container,
.swal2-popup.rp-swal-popup .swal-copy { color: var(--rp-muted); }
.swal2-popup.rp-swal-popup .swal-copy { margin: .65rem 0; }
.swal2-popup.rp-swal-popup .swal-va-list {
  max-height: 14rem; overflow: auto; margin: .75rem 0; padding: .65rem .75rem;
  border: 1px solid var(--rp-border); border-radius: .4rem; background: var(--rp-bg);
  color: var(--rp-text); text-align: left; font: .75rem/1.45 ui-monospace, Consolas, monospace;
}
.swal2-popup.rp-swal-popup .swal2-confirm { background: var(--rp-brand) !important; }
.swal2-popup.rp-swal-popup .swal2-confirm:hover { background: var(--rp-brand-hover) !important; }
.swal2-popup.rp-swal-popup .swal2-cancel { color: var(--rp-text); }
.swal2-popup.rp-swal-popup .swal2-timer-progress-bar { background: var(--rp-brand); }
.swal2-popup.rp-swal-popup .swal2-icon.swal2-warning { border-color: var(--rp-brand); color: var(--rp-brand); }
.swal2-popup.rp-swal-popup .swal2-icon.swal2-error { border-color: var(--rp-brand); }
.swal2-popup.rp-swal-popup .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--rp-brand); }

/* Global mode segmented control: one clear source of truth for every mutation. */
.mode-card { margin: 0; }
.mode-segmented {
  display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; padding: .2rem;
  border: 1px solid var(--rp-border-strong); border-radius: .45rem; background: #0a0a0a;
}
.mode-option {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 2.25rem; border-radius: .3rem; color: var(--rp-muted); cursor: pointer;
  font-size: .8rem; font-weight: 700; transition: background-color .15s, color .15s, box-shadow .15s;
}
.mode-option input { position: absolute; opacity: 0; pointer-events: none; }
.mode-option:hover { color: var(--rp-text); background: var(--rp-surface-soft); }
.mode-option.is-selected { background: var(--rp-surface-raised); color: var(--rp-text); box-shadow: inset 0 0 0 1px var(--rp-border-strong); }
.mode-option:last-child.is-selected { background: var(--rp-brand-soft); color: #fff; box-shadow: inset 0 0 0 1px var(--rp-brand); }

/* Session-local action history. */
.action-log-panel {
  margin-top: .75rem; border: 1px solid var(--rp-border); border-radius: .5rem;
  overflow: hidden; background: var(--rp-surface);
}
.action-log-header {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .65rem .75rem; border-bottom: 1px solid var(--rp-border);
}
.action-log-header h2 { margin: 0; color: var(--rp-text); font-size: .875rem; font-weight: 700; }
.action-log-header p { margin: .15rem 0 0; color: var(--rp-faint); font-size: .6875rem; }
.action-logs { max-height: 16rem; overflow: auto; }
.action-log-empty { margin: 0; padding: 1rem .75rem; color: var(--rp-faint); font-size: .75rem; text-align: center; }
.action-log-entry {
  display: grid; grid-template-columns: auto 1fr auto; gap: .35rem .65rem; align-items: start;
  padding: .55rem .75rem; border-bottom: 1px solid var(--rp-border); font-size: .72rem;
}
.action-log-entry:last-child { border-bottom: 0; }
.action-log-entry.is-fail { background: rgba(212, 30, 44, .08); }
.action-log-time { color: var(--rp-faint); font: .65rem ui-monospace, Consolas, monospace; white-space: nowrap; }
.action-log-main { min-width: 0; color: var(--rp-text); }
.action-log-main strong { font-weight: 700; }
.action-log-targets { display: block; margin-top: .15rem; color: var(--rp-muted); font: .65rem/1.4 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.action-log-status { padding: .1rem .35rem; border-radius: .25rem; color: var(--rp-success); background: rgba(116, 164, 128, .2); font-size: .65rem; font-weight: 700; white-space: nowrap; }
.action-log-entry.is-fail .action-log-status { color: #ffb0b7; background: rgba(212, 30, 44, .2); }
@media (max-width: 520px) {
  .action-log-entry { grid-template-columns: 1fr auto; }
  .action-log-time { grid-column: 1 / -1; }
}


/* ---------- SPA: nav tabs, page panels, config chip, logs page ---------- */

.app-nav {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .15rem;
  border: 1px solid var(--rp-border);
  border-radius: .45rem;
  background: #0a0a0a;
  flex-wrap: wrap;
}

.app-nav__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: .35rem .85rem;
  border-radius: .3rem;
  color: var(--rp-muted);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s, color .15s, box-shadow .15s;
}

.app-nav__tab:hover {
  color: var(--rp-text);
  background: var(--rp-surface-soft);
}

.app-nav__tab.is-active,
.app-nav__tab[aria-current="page"] {
  color: #fff;
  background: var(--rp-surface-raised);
  box-shadow: inset 0 0 0 1px var(--rp-border-strong);
}

.page-panel[hidden] {
  display: none !important;
}

.page-panel.is-active {
  display: block;
}

/* Config context chip on Procesos */
.config-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;
  padding: .55rem .75rem;
  border-radius: .45rem;
  border: 1px solid var(--rp-border);
  background: var(--rp-surface);
  font-size: .75rem;
}

.config-chip__body {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.config-chip__dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--rp-faint);
}

.config-chip__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .35rem;
  min-width: 0;
  color: var(--rp-muted);
}

.config-chip__base {
  font-family: ui-monospace, Consolas, monospace;
  color: var(--rp-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(40vw, 18rem);
}

.config-chip__sep {
  color: var(--rp-faint);
}

.config-chip__token,
.config-chip__mode {
  white-space: nowrap;
}

.config-chip__change {
  flex-shrink: 0;
  color: var(--rp-text);
  font-weight: 600;
  font-size: .75rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.config-chip__change:hover {
  color: #fff;
}

.config-chip--ok {
  border-color: rgba(116, 164, 128, .45);
  background: #102016;
}

.config-chip--ok .config-chip__dot {
  background: var(--rp-success);
}

.config-chip--ok .config-chip__token {
  color: var(--rp-success);
  font-weight: 600;
}

.config-chip--warn {
  border-color: rgba(212, 30, 44, .55);
  background: #2a0d11;
}

.config-chip--warn .config-chip__dot {
  background: var(--rp-brand);
}

.config-chip--warn .config-chip__token {
  color: #ffb0b7;
  font-weight: 700;
}

/* Logs page table */
.logs-page-card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.logs-table th,
.logs-table td {
  padding: .45rem .55rem;
  border-bottom: 1px solid var(--rp-border);
  vertical-align: top;
  color: #d4d4d4;
}

.logs-table tbody tr.is-fail {
  background: rgba(212, 30, 44, .08);
}

.logs-table .log-targets {
  font-size: .65rem;
  line-height: 1.4;
  color: var(--rp-muted);
  max-width: 16rem;
  overflow-wrap: anywhere;
}

.logs-table .log-status {
  display: inline-block;
  padding: .1rem .35rem;
  border-radius: .25rem;
  font-size: .65rem;
  font-weight: 700;
  white-space: nowrap;
}

.logs-table .log-status.log-ok {
  color: var(--rp-success);
  background: rgba(116, 164, 128, .2);
}

.logs-table .log-status.log-fail {
  color: #ffb0b7;
  background: rgba(212, 30, 44, .2);
}

.logs-table tbody tr.empty td {
  cursor: default;
}

@media (max-width: 640px) {
  .app-nav {
    width: 100%;
    order: 3;
  }
  .app-nav__tab {
    flex: 1;
    padding: .35rem .5rem;
  }
  .config-chip__base {
    max-width: 12rem;
  }
}

/* ---------- Lote queue status chips + cancel ---------- */
.lote-chip {
  display: inline-block;
  padding: .12rem .4rem;
  border-radius: .25rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
  white-space: nowrap;
}
.lote-chip--queued {
  background: rgba(163, 163, 163, .14);
  color: var(--rp-muted);
}
.lote-chip--running {
  background: rgba(56, 132, 220, .22);
  color: #9ec5ff;
}
.lote-chip--ok {
  background: rgba(116, 164, 128, .22);
  color: var(--rp-success);
}
.lote-chip--failed {
  background: rgba(212, 30, 44, .22);
  color: #ffb0b7;
}
.lote-chip--retrying {
  background: rgba(212, 160, 40, .22);
  color: #f0d48a;
}
.lote-chip--idle {
  color: var(--rp-faint);
  background: transparent;
  font-weight: 500;
}

#stuckBody tr.lote-running {
  background: rgba(56, 132, 220, .1);
}
#stuckBody tr.lote-failed {
  background: rgba(212, 30, 44, .1);
}
#stuckBody tr.lote-ok {
  background: rgba(116, 164, 128, .08);
}

#btnLoteCancel:not([hidden]) {
  border: 1px solid var(--rp-border-strong);
  color: #ffb0b7;
}
#btnLoteCancel:not([hidden]):hover:not(:disabled) {
  background: var(--rp-brand-soft);
  border-color: var(--rp-brand);
  color: #fff;
}