/* ====== Brand tokens (ESA) ====== */
:root,
[data-bs-theme="light"] {
  /* Base */
  --gx-bg: #f4f7fb;          /* fondo app */
  --gx-surface: #ffffff;     /* tarjetas */
  --gx-border: #e5eaf1;      /* bordes suaves */
  --gx-text: #0f172a;        /* texto principal */
  --gx-muted: #5b6b7c;       /* texto secundario */

  /* Marca */
  --gx-primary: #1E5CA8;     /* azul ESA */
  --gx-primary-600: #174C8A; /* hover/active */
  --gx-accent: #F59E0B;      /* ámbar del isotipo */
  --gx-accent-600: #D97706;

  --gx-radius: 14px;
  --gx-gap: 1rem;

  /* Integración Bootstrap */
  --bs-body-bg: var(--gx-bg);
  --bs-body-color: var(--gx-text);
  --bs-border-color: var(--gx-border);
  --bs-primary: var(--gx-primary);
  --bs-link-color: var(--gx-primary);
  --bs-link-hover-color: var(--gx-primary-600);
}

[data-bs-theme="dark"] {
  /* Base */
  --gx-bg: #0b1220;          /* navy muy oscuro */
  --gx-surface: #0f1826;     /* panel */
  --gx-border: #1e2a3a;      /* borde */
  --gx-text: #e6ecf3;        /* texto */
  --gx-muted: #9fb1c6;       /* secundario */

  /* Marca (sin verdes) */
  --gx-primary: #4EA3FF;     /* azul brillante para contrastar */
  --gx-primary-600: #2B7BD9; /* hover/active */
  --gx-accent: #F8B84E;      /* ámbar suavizado para dark */
  --gx-accent-600: #E59A1A;

  --bs-body-bg: var(--gx-bg);
  --bs-body-color: var(--gx-text);
  --bs-border-color: var(--gx-border);
  --bs-primary: var(--gx-primary);
  --bs-link-color: var(--gx-primary);
  --bs-link-hover-color: var(--gx-primary-600);
}


/* ====== Tipografía / layout ====== */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  background: var(--gx-bg);
  color: var(--gx-text);
}

.container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
.content-block { background: transparent; }

/* ====== Navbar “glass” ====== */
.navbar {
  border-bottom: 1px solid var(--gx-border);
  background: rgba(17, 22, 29, .6);
  backdrop-filter: saturate(140%) blur(8px);
}
[data-bs-theme="light"] .navbar {
  background: rgba(255, 255, 255, .7);
}

/* Marca y enlaces */
.navbar-brand { font-weight: 700; letter-spacing: .2px; }
.navbar .nav-link {
  border-radius: 10px;
  padding: .45rem .7rem;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  background: var(--gx-surface);
  text-decoration: none;
}

/* Botón “Register” / primario */
.btn-outline-primary {
  --bs-btn-color: var(--gx-primary);
  --bs-btn-border-color: var(--gx-primary);
}
.btn-outline-primary:hover {
  background: var(--gx-surface);
}

/* ====== Cards rápidas ====== */
.gx-card {
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius);
  padding: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.gx-grid {
  display: grid;
  gap: var(--gx-gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.gx-muted { color: var(--gx-muted); }

/* ====== Tablas ====== */
.table {
  border-color: var(--gx-border);
}
.table thead th {
  background: var(--gx-surface);
  color: var(--gx-muted);
  font-weight: 600;
}
.table-hover tbody tr:hover {
  background: rgba(255,255,255,.04);
}

/* ====== Breadcrumbs ====== */
.breadcrumb {
  background: transparent;
  margin-bottom: .75rem;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--gx-muted); }
.breadcrumb .active { color: var(--gx-muted); }

/* ====== Sidebar ====== */
#sidebar, .partial-menu, .menu {
  background: transparent;
}
.partial-menu .list-group-item,
.menu .list-group-item {
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  color: var(--gx-text);
  border-radius: 10px;
  margin-bottom: .5rem;
}
.partial-menu .list-group-item.active,
.menu .list-group-item.active {
  background: var(--gx-primary);
  border-color: var(--gx-primary);
  color: #041016;
}

/* ====== Footer ====== */
#footer {
  border-top: 1px solid var(--gx-border);
  color: var(--gx-muted) !important;
}

/* ====== Utilidades ====== */
.mt-1{ margin-top:.5rem } .mt-2{ margin-top:1rem } .mt-3{ margin-top:1.5rem }
.gx-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .9rem; border-radius:12px; border:1px solid transparent; background:var(--gx-primary); color:#041016; font-weight:600; }
.gx-btn:hover { background: var(--gx-primary-600); text-decoration:none; }
.gx-btn-outline { background:transparent; color:var(--gx-primary); border-color:var(--gx-primary); }
.gx-btn-outline:hover { background: var(--gx-surface); }

/* Sidebar sticky y más legible */
@media (min-width: 768px){
  .row > .col-3 { position: sticky; top: 84px; height: calc(100vh - 110px); overflow: auto; padding-right: .75rem; }
}
.partial-menu .list-group-item { transition: transform .12s ease, background .12s ease; }
.partial-menu .list-group-item:hover { transform: translateX(2px); background: rgba(0,0,0,.03); }
.partial-menu .list-group-item .awe { width: 1.2rem; display:inline-block; opacity:.8; }

.gx-card { transition: transform .12s ease, box-shadow .12s ease; }
.gx-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }

.btn-primary { background: var(--gx-primary); border-color: var(--gx-primary); }
.btn-primary:hover { background: var(--gx-primary-600); border-color: var(--gx-primary-600); }
.badge-warning, .badge.pending, .label-warning {
  background: linear-gradient(180deg, #fbbf24, #f59e0b); color:#111; border:0; padding:.3rem .6rem; border-radius:999px;
}

.table { --bs-table-bg: transparent; }
.table th, .table td { vertical-align: middle; }
.table-sm > :not(caption) > * > * { padding: .5rem .65rem; }

.container > .row { row-gap: 1rem; }
.content-block > *:first-child { margin-top: .25rem; }

#footer { background: transparent; }
#footer .d-flex { gap: .6rem; flex-wrap: wrap; }

/* Grid responsivo aplicado sobre el contenedor del dashboard */
.gx-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Cards + grid */
.gx-card {
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
.gx-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }

/* Espaciado suave entre bloques del dashboard */
.content-block .gx-card + .gx-card { margin-top: .75rem; }

/* Contenedor: scroll suave + separación */
#sidebarMenu .offcanvas-body { padding-top: .25rem; padding-bottom: .75rem; }
#sidebarMenu .nav { gap: .25rem; }

/* Ítems del menú */
#sidebarMenu .offcanvas-item .nav-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .75rem; border-radius: 12px;
  color: var(--gx-text);
  transition: background .12s ease, transform .12s ease, color .12s ease;
}
#sidebarMenu .offcanvas-item .nav-link:hover{
  background: var(--gx-surface);
  transform: translateX(2px);
  text-decoration: none;
}

/* Estado activo (lo haremos con JS abajo, o usa aria-current="page") */
#sidebarMenu .offcanvas-item .nav-link.active,
#sidebarMenu .offcanvas-item .nav-link[aria-current="page"]{
  background: var(--gx-primary);
  color: #041016;
}

/* Iconos SVG en línea: usa color de texto */
#sidebarMenu .svg-icon{
  width: 1.1rem; height: 1.1rem; flex: 0 0 auto;
  fill: currentColor; opacity: .85;
}

/* Divisores sutiles entre grupos */
#sidebarMenu .offcanvas-item + .offcanvas-item { margin-top: .1rem; }

/* “Saldo de la cuenta” y “nota” como cajitas */
#sidebarMenu li.pt-3.ps-3{
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: 14px;
  margin: .75rem .5rem 0 .5rem;
  padding: .8rem .9rem !important;
}
#sidebarMenu li.pt-3.ps-3 h5{ color: var(--gx-muted) !important; margin: 0 0 .35rem 0; }
#sidebarMenu li.pt-3.ps-3 h4 strong{ color: var(--gx-primary); letter-spacing:.2px; }

/* Modo compacto en pantallas angostas */
@media (max-width: 991px){
  #sidebarMenu .offcanvas-item .nav-link{ padding:.5rem .65rem; border-radius:10px; }
}
/* Mantiene fijo el sidebar cuando el texto tiene altura suficiente */ 
@media (min-width: 768px){
  .row > .col-3{ position: sticky; top: 84px; height: calc(100vh - 110px); overflow: auto; padding-right: .75rem; }
}

/* Contenedor / animación sutil */
.modal .modal-dialog{ transform: translateY(10px); transition: transform .18s ease, opacity .2s ease; }
.modal.show .modal-dialog{ transform: translateY(0); }
@media (min-width:992px){ .modal .modal-dialog{ max-width: 820px; } } /* ancho cómodo */

/* Tarjeta del modal */
.modal-content{
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
}

/* Encabezado y pie */
.modal-header{
  border-bottom: 1px solid var(--gx-border);
  padding: 1rem 1.25rem;
}
.modal-title{ font-weight: 700; letter-spacing:.2px; }
.btn-close{ filter: grayscale(.2); opacity:.8; }
.btn-close:hover{ opacity:1; }

.modal-footer{
  border-top: 1px solid var(--gx-border);
  padding: .75rem 1.25rem;
}

/* Backdrop con blur */
.modal-backdrop.show{ opacity:.35; backdrop-filter: blur(2.5px); }

.modal .form-label{ color: var(--gx-muted); font-weight:600; margin-bottom:.35rem; }
.modal .form-control,
.modal .form-select{
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: 12px;
  padding: .6rem .75rem;
}
.modal .form-control:focus,
.modal .form-select:focus{
  border-color: var(--gx-primary);
  box-shadow: 0 0 0 .14rem rgba(14,165,233,.25); /* se ve bien en claro/oscuro */
  outline: 0;
}
.modal .form-text{ color: var(--gx-muted); }

/* Marca * requerida (si viene como texto, la enfatizamos) */
.modal label:has(> .text-danger), .modal .form-label.required{
  position: relative;
}
.modal label .text-danger{ color:#ef4444 !important; font-weight:700; }

/* Toolbar */
.ck-reset_all, .ck.ck-reset{ color: var(--gx-text); }
.ck .ck-toolbar{
  background: var(--gx-surface) !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: 12px 12px 0 0 !important;
}
.ck .ck-toolbar .ck-button:hover,
.ck .ck-toolbar .ck-button.ck-on{
  background: rgba(0,0,0,.06) !important;
}

/* Área editable */
.ck .ck-content{
  min-height: 160px;
  background: var(--gx-surface) !important;
  color: var(--gx-text) !important;
  border: 1px solid var(--gx-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.modal .btn-primary{
  background: var(--gx-primary);
  border-color: var(--gx-primary);
  font-weight:600;
  padding: .55rem 1rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(14,165,233,.25);
}
.modal .btn-primary:hover{
  background: var(--gx-primary-600);
  border-color: var(--gx-primary-600);
  box-shadow: 0 8px 22px rgba(14,165,233,.32);
}


/* Tamaño y contraste general */
.form-check-input[type="radio"]{
  appearance: none;                 /* nos permite dibujarlo */
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--gx-surface);
  border: 2px solid var(--gx-border);
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  vertical-align: text-bottom;
}

/* Hover y enfoque */
.form-check-input[type="radio"]:hover{
  border-color: var(--gx-muted);
}
.form-check-input[type="radio"]:focus{
  outline: 0;
  border-color: var(--gx-primary);
  box-shadow: 0 0 0 .18rem rgba(14,165,233,.25); /* ring */
}

/* Marcado (círculo interno) */
.form-check-input[type="radio"]:checked{
  border-color: var(--gx-primary);
  background: var(--gx-surface);
}
.form-check-input[type="radio"]:checked::after{
  content: "";
  position: absolute;
  inset: 3px;                        /* tamaño del punto interno */
  background: var(--gx-primary);
  border-radius: 50%;
}

/* Estado no marcado: borde más visible que el default */
.form-check-input[type="radio"]:not(:checked){
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
}

/* Deshabilitado (si se usa) */
.form-check-input[type="radio"]:disabled{
  opacity: .6; cursor: not-allowed;
}
.form-check-input[type="radio"]:disabled + .form-check-label{
  opacity: .7;
}

/* Realce de etiqueta según estado */
.form-check-input[type="radio"]:checked + .form-check-label{
  color: var(--gx-text); font-weight: 600;
}
.form-check-input[type="radio"]:not(:checked) + .form-check-label{
  color: var(--gx-muted);
}

.form-check-input[type=radio]{ accent-color: var(--gx-primary); }

/* Banner/hero reutiliza tu card base */
.gx-card{
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.gx-card h3{ margin: 0 0 .25rem; }

/* ===== Banner Atención al Cliente ===== */
#g x-care-banner.gx-care{ position:relative; overflow:hidden; }
#gx-care-banner.gx-care::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--gx-primary), transparent);
  border-radius: 16px 16px 0 0;
}

.gx-care__inner{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap: 1rem;
}
.gx-care__icon{
  width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(2,132,199,.10);              /* sutil */
  border: 1px solid var(--gx-border);
  color: var(--gx-primary);
}
[data-bs-theme="dark"] .gx-care__icon{
  background: rgba(0,209,178,.12);              /* variante dark */
}

.gx-care__eyebrow{ font-size:.8rem; color: var(--gx-muted); margin-bottom:.2rem; }
.gx-care__title{ font-weight:800; letter-spacing:.2px; }

@media (max-width: 576px){
  .gx-care__inner{ grid-template-columns: 1fr; }
  .gx-care__icon{ width:48px; height:48px; border-radius:12px; }
}
/* --- fix del selector del banner (por si quedó con un espacio) --- */
#gx-care-banner.gx-care{ position:relative; overflow:hidden; }
#gx-care-banner.gx-care::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--gx-primary), transparent);
  border-radius: 16px 16px 0 0;
}

/* --- Texto del banner --- */
.gx-care__text{
  display: grid;
  gap: .25rem;                 /* espacio entre eyebrow / título / desc */
}

/* Eyebrow (kicker): "Estás en:" como pill */
.gx-care__eyebrow{
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gx-muted);
  padding: .18rem .55rem;
  border: 1px solid var(--gx-border);
  border-radius: 999px;
  background: rgba(14,165,233,.08); /* sutil, combina con --gx-primary */
}
[data-bs-theme="dark"] .gx-care__eyebrow{
  background: rgba(0,209,178,.10);  /* variante dark */
}

/* Título principal */
.gx-care__title{
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.2;
  font-size: clamp(1.15rem, 1.1rem + 0.7vw, 1.6rem); /* responsivo */
  margin-top: .15rem;        /* separa del eyebrow */
}

/* Descripción */
.gx-care__text p{
  color: var(--gx-muted);
  margin-top: .1rem;
  max-width: 65ch;           /* ancho óptimo de lectura */
  text-wrap: balance;        /* mejora quiebres (si lo soporta) */
}
.gx-care__title::after{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: .5rem;
  width: .5rem;
  margin-left: .4rem;
  border-radius: 50%;
  background: var(--gx-primary);
  opacity: .25;
}

/* Links */
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* Botones de acción (NO verdes en oscuro) */
.btn-primary{
  background: var(--gx-primary);
  border-color: var(--gx-primary);
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(30,92,168,.20);
}
.btn-primary:hover{
  background: var(--gx-primary-600);
  border-color: var(--gx-primary-600);
  box-shadow: 0 8px 22px rgba(30,92,168,.28);
}
.btn-outline-primary{
  color: var(--gx-primary);
  border-color: var(--gx-primary);
}
.btn-outline-primary:hover{
  background: var(--gx-surface);
  color: var(--gx-primary-600);
  border-color: var(--gx-primary-600);
}

/* Focus ring consistente con la marca */
.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus{
  border-color: var(--gx-primary);
  box-shadow: 0 0 0 .14rem color-mix(in srgb, var(--gx-primary) 25%, transparent);
  outline: 0;
}

/* Badges y avisos en color acento (ámbar) */
.badge-warning, .badge.pending, .label-warning{
  background: linear-gradient(180deg, var(--gx-accent), var(--gx-accent-600));
  color:#111; border:0; padding:.3rem .6rem; border-radius:999px;
}
.alert-warning{ border-color: var(--gx-accent-600); }

/* Switch/checkbox/radio usan el azul marca */
.form-check-input[type=radio],
.form-check-input[type=checkbox]{ accent-color: var(--gx-primary); }

/* Navbar translucida afinada al brand */
.navbar{
  border-bottom: 1px solid var(--gx-border);
  background: color-mix(in oklab, var(--gx-surface) 70%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
}
[data-bs-theme="dark"] .navbar{
  background: color-mix(in oklab, #0c1727 70%, transparent);
}

/* Cards sutilmente elevadas */
.gx-card{
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius);
  box-shadow: 0 4px 16px color-mix(in srgb, #000 10%, transparent);
}

/* Breadcrumbs y separadores */
.breadcrumb .active{ color: var(--gx-muted); }
#footer{ color: var(--gx-muted) !important; }

/* Ítems activos del sidebar en azul marca */
#sidebarMenu .offcanvas-item .nav-link.active,
#sidebarMenu .offcanvas-item .nav-link[aria-current="page"]{
  background: var(--gx-primary);
  color: #041016;
}
#sidebarMenu li.pt-3.ps-3 h4 strong{ color: var(--gx-primary); }
/* Asegura que la navbar y su dropdown vayan SIEMPRE por encima del banner */
.navbar{ position: relative; z-index: 1100; }
.navbar .dropdown-menu{ z-index: 1110; }              /* por si es un dropdown Bootstrap */
.js-language-selector{ position: relative; z-index: 1110; } /* si es <select> estilizado */

/* El banner no debe “tapar” nada interactivo */
#gx-care-banner.gx-care{
  position: relative;
  z-index: 1;          /* por debajo de la navbar */
  overflow: visible;   /* evitamos que corte elementos cercanos */
}
#gx-care-banner.gx-care::before{
  pointer-events: none;
  z-index: 0;
}

/* Un pequeño respiro debajo de la navbar ayuda a que no se vea “pegado” */
.content-block > #gx-care-banner{ margin-top: .25rem; }