/* cbank — paleta Salchimonster (naranja / negro / crema). */
:root {
  --orange:       #F86000;
  --orange-dark:  #d04f00;
  --orange-soft:  #fff2e8;
  --black:        #0A0A0A;
  --black-soft:   #1a1a1a;
  --cream:        #FAF7F2;
  --surface:      #ffffff;
  --border:       #e8e3da;
  --text-muted:   #6b6760;
  --green:        #1F7A3E;
  --green-soft:   #d4e7dc;
  --crit:         #C73E0F;
  --crit-soft:    #ffd9c8;
  --warn:         #B8860B;
  --warn-soft:    #fff1c4;
  --radius:       10px;
  --shadow:       0 2px 12px rgba(0,0,0,.08);

  /* Override de las variables CSS de Bootstrap para que TODO use naranja. */
  --bs-primary:        #F86000;
  --bs-primary-rgb:    248, 96, 0;
  --bs-link-color:     #d04f00;
  --bs-link-color-rgb: 208, 79, 0;
  --bs-link-hover-color: #F86000;
  --bs-border-color:   #e8e3da;
  --bs-focus-ring-color: rgba(248, 96, 0, .25);
}

/* Bootstrap btn-primary genérico → naranja. */
.btn-primary,
.btn.btn-primary {
  --bs-btn-bg: #F86000;
  --bs-btn-border-color: #F86000;
  --bs-btn-hover-bg: #d04f00;
  --bs-btn-hover-border-color: #d04f00;
  --bs-btn-active-bg: #b04400;
  --bs-btn-active-border-color: #b04400;
  --bs-btn-focus-shadow-rgb: 248, 96, 0;
  background-color: #F86000;
  border-color: #F86000;
  color: #fff;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: #d04f00;
  border-color: #d04f00;
  color: #fff;
}

/* form-control y form-select: focus naranja en vez del azul Bootstrap. */
.form-control:focus,
.form-select:focus {
  border-color: #F86000 !important;
  box-shadow: 0 0 0 .2rem rgba(248, 96, 0, .2) !important;
}
.form-check-input:checked {
  background-color: #F86000;
  border-color: #F86000;
}
.text-primary { color: #F86000 !important; }
.bg-primary   { background-color: #F86000 !important; }
.border-primary { border-color: #F86000 !important; }

*, *::before, *::after { box-sizing: border-box; }

.cbank-body {
  background: var(--cream);
  color: var(--black);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
.cbank-main { flex: 1; max-width: 1380px; margin: 0 auto; width: 100%; }

a { color: var(--orange-dark); }
a:hover { color: var(--orange); }

/* ── Topbar (siempre oscuro, igual que cuadres) ──────────────────── */
.cbank-navbar {
  background: var(--black);
  border-bottom: 2px solid var(--orange);
  padding: 0 24px;
  min-height: 60px;
}
.cbank-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #f5f5f5;
}
.cbank-navbar .navbar-brand:hover { color: #fff; }
.cbank-navbar .brand-logo {
  height: 34px; width: auto;
  display: block;
  object-fit: contain;
}
.cbank-navbar .brand-sep {
  color: rgba(255,255,255,.3);
  font-size: 18px;
}
.cbank-navbar .brand-app {
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em;
  color: #f5f5f5;
}
.cbank-user {
  color: rgba(255,255,255,.65);
  font-size: 13px;
}
.cbank-navbar .btn-outline-light {
  border-color: rgba(255,255,255,.2);
  color: #f5f5f5;
}
.cbank-navbar .btn-outline-light:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

/* ── Login ──────────────────────────────────────────────────────── */
.cbank-login {
  background: var(--cream);
  position: relative;
}
.cbank-login::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 90% 10%, rgba(248, 96, 0, .15), transparent 60%),
    radial-gradient(50% 50% at 10% 90%, rgba(248, 96, 0, .10), transparent 60%);
  pointer-events: none;
}
.cbank-login-card {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 10px 40px rgba(10, 10, 10, .12);
  position: relative;
  z-index: 1;
}
.cbank-login-header {
  background: var(--black);
  padding: 2rem 2rem 1.5rem;
  text-align: center;
  border-bottom: 2px solid var(--orange);
}
.cbank-login-logo {
  height: 48px;
  margin-bottom: 12px;
}
.cbank-login-header h1 {
  color: #f5f5f5;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 18px;
  margin: 0;
}
.cbank-login-header p {
  color: rgba(255,255,255,.55);
  margin: .25rem 0 0;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cbank-login-form { padding: 1.75rem 2rem 2rem; }
.cbank-login-form .form-label {
  font-weight: 600; font-size: .78rem;
  color: var(--black);
  margin-bottom: .35rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cbank-login-form .input-group-text {
  background: var(--orange-soft);
  color: var(--orange);
  border-color: var(--border);
}

/* ── Cards / forms ──────────────────────────────────────────────── */
.cbank-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.cbank-card .card-body { padding: 1.5rem 1.75rem; }
.cbank-card .form-label {
  font-weight: 600; font-size: .76rem;
  color: var(--text-muted);
  margin-bottom: .3rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cbank-card .form-control,
.cbank-card .form-select {
  border-color: var(--border);
  border-radius: 8px;
  font-size: .92rem;
  background: var(--surface);
  color: var(--black);
}
.cbank-card .form-control:focus,
.cbank-card .form-select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 0.18rem rgba(248, 96, 0, .15);
}

/* ── Endpoint tabs ──────────────────────────────────────────────── */
.cbank-endpoints { gap: .4rem; flex-wrap: wrap; }
.cbank-endpoints .nav-link {
  border-radius: 999px;
  background: var(--cream);
  color: var(--black);
  border: 1px solid var(--border);
  padding: .5rem 1.1rem;
  font-weight: 600;
  font-size: .9rem;
  display: flex; align-items: center; gap: 6px;
}
.cbank-endpoints .nav-link:hover {
  border-color: var(--orange);
  color: var(--orange-dark);
}
.cbank-endpoints .nav-link.active {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  box-shadow: 0 4px 12px rgba(248, 96, 0, .25);
}
.cbank-endpoints .nav-link.active .cbank-badge {
  background: rgba(255,255,255,.22); color: #fff;
}
.cbank-badge {
  background: var(--orange-soft);
  color: var(--orange-dark);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: .68rem;
  font-family: 'JetBrains Mono','Menlo','Consolas',monospace;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.cbank-btn-primary,
.btn-primary.cbank-btn-primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  font-weight: 600;
}
.cbank-btn-primary:hover,
.cbank-btn-primary:focus,
.btn-primary.cbank-btn-primary:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  color: #fff;
}
.btn-outline-primary {
  border-color: var(--orange);
  color: var(--orange-dark);
}
.btn-outline-primary:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.btn-success {
  background: var(--green);
  border-color: var(--green);
}
.btn-success:hover { background: #176330; border-color: #176330; }

/* ── Resultados ─────────────────────────────────────────────────── */
.cbank-pill {
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  padding: .4rem 1rem;
}
#results-table thead th {
  background: var(--black);
  color: #f5f5f5;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  font-weight: 700;
  border-bottom: 2px solid var(--orange);
}
#results-table tbody tr:hover td { background: var(--orange-soft); }
#results-table tbody td {
  font-size: .87rem;
  white-space: nowrap;
  color: var(--black);
  border-bottom: 1px solid var(--border);
}
.dataTable-search input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .35rem .65rem;
}
.dataTable-search input:focus {
  border-color: var(--orange);
  outline: none;
  box-shadow: 0 0 0 .15rem rgba(248, 96, 0, .15);
}
.dataTable-bottom { padding-top: .75rem; }
.dataTable-pagination .active a {
  background: var(--orange); color: #fff;
}
.dataTable-pagination a { color: var(--black); }
.dataTable-pagination a:hover { color: var(--orange-dark); }

/* ── Status banner ──────────────────────────────────────────────── */
.cbank-status {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}
.cbank-status.ok    { border-left: 4px solid var(--green); background: var(--green-soft); }
.cbank-status.error { border-left: 4px solid var(--crit);  background: var(--crit-soft); }
.cbank-status .spinner-border { color: var(--orange); }
.cbank-status i { color: var(--orange); }
.cbank-status.ok i { color: var(--green); }
.cbank-status.error i { color: var(--crit); }

/* ── Test modal ─────────────────────────────────────────────────── */
.endpoint-test {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  margin-bottom: .75rem;
  background: var(--surface);
}
.endpoint-test.ok    { border-left: 5px solid var(--green); background: var(--green-soft); }
.endpoint-test.error { border-left: 5px solid var(--crit);  background: var(--crit-soft); }
.endpoint-test code { color: var(--black); }
.modal-content {
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.modal-header {
  border-bottom: 2px solid var(--orange);
  background: var(--black);
  color: #f5f5f5;
  border-radius: var(--radius) var(--radius) 0 0;
}
.modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(180%); }

/* ── Alerts ─────────────────────────────────────────────────────── */
.alert-success { background: var(--green-soft); border-color: var(--green); color: #0f3d1f; }
.alert-warning { background: var(--warn-soft);  border-color: var(--warn);  color: #5a4400; }
.alert-danger  { background: var(--crit-soft);  border-color: var(--crit);  color: #5a1500; }

/* ── Footer ─────────────────────────────────────────────────────── */
.cbank-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cbank-navbar { padding: 0 12px; }
  .cbank-navbar .brand-logo { height: 26px; }
  .cbank-navbar .brand-app { font-size: 12px; }
  .cbank-user { display: none !important; }
  .cbank-main .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
  .cbank-card .card-body { padding: 1rem; }
  .cbank-endpoints .nav-link { font-size: .8rem; padding: .35rem .8rem; }
}