/*
  NucleoDigitain Dashboard
  - Estética profesional (light/dark)
  - Dialogs nativos (<dialog>) para evitar warnings aria-hidden
*/

html, body { height: 100%; }

/* =========================
   Variables de tema
   ========================= */

:root {
  --nd-bg: #f4f6fb;
  --nd-bg-2: #eef2f7;
  --nd-surface: #ffffff;
  --nd-surface-2: #f8fafc;
  --nd-border: rgba(17, 24, 39, 0.10);
  --nd-text: #0f172a;
  --nd-muted: rgba(15, 23, 42, 0.62);
  --nd-soft: rgba(15, 23, 42, 0.06);

  --nd-nav-bg: rgba(255,255,255,0.82);
  --nd-nav-border: rgba(17, 24, 39, 0.10);

  --nd-shadow: 0 12px 40px rgba(15, 23, 42, 0.10);
  --nd-shadow-2: 0 22px 70px rgba(15, 23, 42, 0.18);
  --nd-radius: 16px;

  --nd-backdrop: rgba(15, 23, 42, 0.55);
}

html[data-bs-theme="dark"] {
  --nd-bg: #0b0f14;
  --nd-bg-2: #0f141b;
  --nd-surface: #121826;
  --nd-surface-2: #0f141b;
  --nd-border: rgba(255,255,255,0.10);
  --nd-text: #e6edf3;
  --nd-muted: rgba(230, 237, 243, 0.68);
  --nd-soft: rgba(255,255,255,0.06);

  --nd-nav-bg: rgba(10, 14, 20, 0.78);
  --nd-nav-border: rgba(255,255,255,0.10);

  --nd-shadow: 0 14px 45px rgba(0,0,0,0.45);
  --nd-shadow-2: 0 26px 90px rgba(0,0,0,0.60);

  --nd-backdrop: rgba(0,0,0,0.70);
}

body {
  color: var(--nd-text);
  background:
    radial-gradient(1100px circle at 12% -10%, rgba(13, 110, 253, 0.20), transparent 45%),
    radial-gradient(900px circle at 102% 22%, rgba(220, 53, 69, 0.14), transparent 46%),
    linear-gradient(180deg, var(--nd-bg), var(--nd-bg-2));
}

/* =========================
   Layout general
   ========================= */

.nd-container {
  max-width: 1550px;
}

.nd-main {
  padding: 18px 0 34px;
}

/* Navbar (sticky + glass) */
.nd-navbar {
  position: sticky;
  top: 0;
  z-index: 1050;
  background: var(--nd-nav-bg) !important;
  border-bottom: 1px solid var(--nd-nav-border);
  backdrop-filter: blur(10px);
}

.nd-navbar .navbar-brand,
.nd-navbar .navbar-text {
  color: var(--nd-text) !important;
}

.nd-nav-actions {
  gap: 10px;
}

.nd-nav-btn {
  border-radius: 999px;
  border: 1px solid var(--nd-border) !important;
  color: var(--nd-text) !important;
  background: transparent !important;
}

.nd-nav-btn:hover {
  background: var(--nd-soft) !important;
}

/* Cerrar sesión: rojo, siempre legible */
#btnLogout {
  border-radius: 999px;
}

/* =========================
   Cards / Secciones
   ========================= */

.nd-card {
  border: 1px solid var(--nd-border) !important;
  border-radius: var(--nd-radius) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)), var(--nd-surface);
  box-shadow: var(--nd-shadow);
}

.nd-card .card-header,
.nd-card .card-footer {
  background: transparent !important;
  border-color: var(--nd-border) !important;
}

.nd-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

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

/* Total card (hero) */
.nd-hero {
  padding: 18px 18px;
  overflow: hidden;
  position: relative;
}

.nd-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 180px;
  background: radial-gradient(600px circle at 10% 40%, rgba(13,110,253,0.22), transparent 55%),
              radial-gradient(520px circle at 90% 20%, rgba(25,135,84,0.20), transparent 60%);
  pointer-events: none;
}

.nd-hero .card-body { position: relative; }

.nd-total-value {
  letter-spacing: 0.5px;
  text-shadow: 0 10px 26px rgba(0,0,0,0.22);
}

/* Segmented (modo paneles/pagos) */
.nd-segment {
  border: 1px solid var(--nd-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--nd-surface);
  box-shadow: var(--nd-shadow);
}

.nd-segment .btn {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 14px;
}

.nd-segment .btn.active {
  box-shadow: inset 0 -3px 0 rgba(255,255,255,0.18);
}

/* =========================
   Formularios
   ========================= */

.form-control, .form-select, .dropdown-menu {
  border-color: var(--nd-border) !important;
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
  background: rgba(0,0,0,0.18) !important;
  color: var(--nd-text) !important;
}

.dropdown-menu {
  background: var(--nd-surface) !important;
  color: var(--nd-text) !important;
  box-shadow: var(--nd-shadow-2);
  border-radius: 14px;
}

/* =========================
   Tabla
   ========================= */

.nd-table-wrap {
  border-radius: var(--nd-radius);
  overflow: hidden;
}

table.table {
  color: var(--nd-text);
}

html[data-bs-theme="dark"] .table-light {
  --bs-table-bg: rgba(255,255,255,0.05);
  --bs-table-color: #ffffff;
}

html[data-bs-theme="dark"] .table thead th {
  color: #ffffff !important;
}

html[data-bs-theme="dark"] .table-hover tbody tr:hover {
  --bs-table-hover-bg: rgba(255,255,255,0.05);
}



/* Badges de estado en cabecera de tabla (Resultados / Cache) */
#resultsCount,
#ndCacheStatusBadge {
  color: var(--nd-text) !important;
  border-color: var(--nd-border) !important;
  background: var(--nd-soft) !important;
  font-weight: 700;
}

#ndCacheStatusBadge {
  color: var(--nd-muted) !important;
}

/* Chips ranking: se ven mejor */
#activityStatsList .badge {
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* =========================
   Dialogs nativos
   ========================= */

body.nd-dialog-open { overflow: hidden; }

/* fallback visual si inert no está disponible */
#appRoot.nd-inert { pointer-events: none; user-select: none; }

dialog.nd-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
  margin: 6vh auto;
}

dialog.nd-dialog:focus { outline: none; }

dialog.nd-dialog::backdrop {
  background: var(--nd-backdrop);
  backdrop-filter: blur(4px);
}

.nd-dialog-content {
  background: var(--nd-surface);
  border: 1px solid var(--nd-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--nd-shadow-2);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.nd-dialog-md { width: min(94vw, 640px); }
.nd-dialog-lg { width: min(96vw, 1100px); }

.nd-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--nd-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
}

.nd-dialog-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
}

.nd-dialog-header-dark {
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.00)), #0b1017;
  color: #ffffff;
}

.nd-dialog-header .btn-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  padding: 0;
  opacity: 0.9;
}

.nd-dialog-header .btn-close:hover {
  opacity: 1;
  background-color: var(--nd-soft);
}

.nd-dialog-body {
  padding: 16px;
  overflow: auto;
}

.nd-dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--nd-border);
  background: linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
}

.nd-dialog-footer .btn { border-radius: 12px; }

.nd-receipt-body { background: #0b0f14; }

/* Mejoras visuales de list-group en dialogs */
.list-group-item {
  border-color: var(--nd-border) !important;
  background: transparent;
  color: var(--nd-text);
}

html[data-bs-theme="dark"] .list-group-item.bg-light,
html[data-bs-theme="dark"] .bg-light {
  background: rgba(255,255,255,0.05) !important;
}

/* Asegurar que dropdowns queden arriba */
.dropdown-menu { z-index: 2000 !important; }

/* =========================
   FIX: Gradiente TOTAL (sin “corte”)
   Aplica al card que contiene #totalBalance (Total Cargas / Pagos)
   Requiere soporte de :has() (Chrome/Edge actuales).
   ========================= */
.card:has(#totalBalance) {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

/* Desactiva cualquier overlay anterior que genere corte */
.card:has(#totalBalance)::before{ content:none !important; }


/* Capa de gradiente: cubre TODO el alto del card */
.card:has(#totalBalance)::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Gradiente continuo (sin corte) */
  background:
    radial-gradient(900px circle at 8% 10%, rgba(13,110,253,0.28), transparent 58%),
    radial-gradient(900px circle at 92% 12%, rgba(25,135,84,0.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00));
  opacity: 1;
}

/* Mantener el contenido arriba del gradiente */
.card:has(#totalBalance) .card-body{
  position: relative;
  z-index: 1;
}

/* Ajuste específico en modo oscuro: gradiente un poco más profundo */
html[data-bs-theme="dark"] .card:has(#totalBalance)::after{
  background:
    radial-gradient(1000px circle at 6% 12%, rgba(13,110,253,0.36), transparent 60%),
    radial-gradient(1000px circle at 94% 12%, rgba(25,135,84,0.30), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.00));
}