/* Panel Alfa Pay · Payphone — se apoya en alfa.css (navy + azul Alfa) y suma el naranja Payphone */
:root {
  --pp-orange: #ff7300;
  --pp-orange-dim: rgba(255, 115, 0, 0.14);
  --panel-sidebar: 15.5rem;
}

body.ps-page { font-size: 0.92rem; }

.bg-sandbox {
  background: repeating-linear-gradient(135deg, rgba(255, 115, 0, 0.18) 0 12px, rgba(255, 115, 0, 0.1) 12px 24px);
  border-bottom: 1px solid rgba(255, 115, 0, 0.45);
  color: #ffd2ad;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.cobrand { display: flex; align-items: center; gap: 0.65rem; }
.cobrand__alfa { width: 38px; height: 38px; object-fit: contain; }
.cobrand__x { color: var(--ps-muted); font-size: 0.75rem; }
.cobrand__pp { height: 15px; width: auto; }
.cobrand__title { font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.1; }
.cobrand__sub { font-size: 0.7rem; color: var(--ps-muted); }

/* Layout panel */
.panel-shell { display: flex; min-height: 100vh; }
.panel-sidebar {
  width: var(--panel-sidebar);
  flex-shrink: 0;
  background: rgba(6, 13, 24, 0.88);
  border-right: 1px solid var(--ps-border);
  padding: 1.1rem 0.85rem;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.panel-main { flex: 1; min-width: 0; }
.min-w-0 { min-width: 0; }
.panel-topbar .btn { white-space: nowrap; flex-shrink: 0; }
.panel-topbar {
  border-bottom: 1px solid var(--ps-border);
  background: rgba(6, 13, 24, 0.6);
  backdrop-filter: blur(12px);
}
.panel-nav .nav-link {
  color: var(--ps-muted);
  border-radius: 0.6rem;
  padding: 0.55rem 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.panel-nav .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.panel-nav .nav-link.active {
  color: #fff;
  background: var(--alfa-blue-dim);
  box-shadow: inset 3px 0 0 var(--alfa-blue);
}
.panel-nav .nav-section {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin: 1rem 0.75rem 0.35rem;
}

@media (max-width: 991.98px) {
  .panel-sidebar { display: none; }
  .panel-sidebar.show {
    display: flex;
    position: fixed;
    z-index: 1050;
    left: 0;
    background: #060d18;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
  }
}

/* Tarjetas y tablas */
.ps-card:hover { transform: none; }
.ps-card { height: auto; }
.card-title-sm {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ps-muted);
  font-weight: 600;
}
.kpi strong { font-size: clamp(1.1rem, 1.6vw, 1.45rem); color: #fff; display: block; letter-spacing: -0.02em; white-space: nowrap; }
.kpi small { color: var(--ps-muted); }

.table-alfa { --bs-table-bg: transparent; --bs-table-color: var(--ps-text); --bs-table-border-color: var(--ps-border); margin: 0; }
.table-alfa thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ps-muted);
  font-weight: 600;
  border-bottom-color: var(--ps-border);
}
.table-alfa tbody tr:hover { background: rgba(29, 140, 248, 0.05); }
.table-alfa a { color: #cfe5ff; text-decoration: none; }
.table-alfa a:hover { color: #fff; }

.form-control, .form-select {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--ps-border);
  color: var(--ps-text);
}
.form-control:focus, .form-select:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--alfa-blue);
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(29, 140, 248, 0.2);
}
.form-control::placeholder { color: #64748b; }
.form-select option { background: #0a1628; color: #fff; }
.form-label { color: #cbd5e1; font-weight: 500; font-size: 0.85rem; }
.form-text { color: var(--ps-muted); }
.form-check-input { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); }
.form-check-input:checked { background-color: var(--alfa-blue); border-color: var(--alfa-blue); }

.btn-pp {
  background: var(--pp-orange);
  border: none;
  color: #fff !important;
  font-weight: 600;
  border-radius: 0.65rem;
}
.btn-pp:hover { filter: brightness(1.08); }
.btn-pp:disabled, .btn-pp.disabled { background: var(--pp-orange); color: #fff; opacity: 0.4; }

.badge-soft { font-weight: 600; padding: 0.38em 0.7em; border-radius: 999px; }
.badge-soft.text-bg-success { background: rgba(34, 197, 94, 0.16) !important; color: #86efac !important; }
.badge-soft.text-bg-warning { background: rgba(234, 179, 8, 0.16) !important; color: #fde047 !important; }
.badge-soft.text-bg-danger { background: rgba(239, 68, 68, 0.16) !important; color: #fca5a5 !important; }
.badge-soft.text-bg-secondary { background: rgba(148, 163, 184, 0.16) !important; color: #cbd5e1 !important; }
.badge-soft.text-bg-info { background: rgba(29, 140, 248, 0.16) !important; color: #93c5fd !important; }
.badge-pp { background: var(--pp-orange-dim); color: #ffb47a; }

.copy-field { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }

.card-chip {
  border: 1px solid var(--ps-border);
  border-radius: 0.9rem;
  background: linear-gradient(140deg, rgba(29, 140, 248, 0.14), rgba(255, 115, 0, 0.07));
  padding: 1rem 1.1rem;
}
.card-chip.revoked { opacity: 0.55; background: rgba(255, 255, 255, 0.03); }
.card-chip__number { font-family: ui-monospace, monospace; letter-spacing: 0.12em; font-size: 1.05rem; color: #fff; }

.alert { border-radius: 0.75rem; }
.pagination { --bs-pagination-bg: transparent; --bs-pagination-border-color: var(--ps-border); --bs-pagination-color: #cbd5e1; --bs-pagination-active-bg: var(--alfa-blue); --bs-pagination-active-border-color: var(--alfa-blue); --bs-pagination-disabled-bg: transparent; }

pre.json {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--ps-border);
  border-radius: 0.65rem;
  padding: 0.85rem;
  color: #cbd5e1;
  font-size: 0.75rem;
  max-height: 22rem;
  overflow: auto;
}

/* Página pública de pago */
.pay-shell { max-width: 34rem; margin: 0 auto; }
.pay-total {
  border-radius: 1rem;
  border: 1px solid rgba(29, 140, 248, 0.25);
  background: linear-gradient(145deg, rgba(29, 140, 248, 0.14), rgba(14, 165, 233, 0.05));
}
.pay-consent {
  border: 1px solid rgba(255, 115, 0, 0.35);
  background: var(--pp-orange-dim);
  border-radius: 0.85rem;
}
.pay-box-panel {
  border: 1px solid var(--ps-border);
  border-radius: 1rem;
  background: #fff;
  color: #111;
}
.powered-pp img { height: 14px; }