/* ==========================================================================
   glassmorphism-light.css — Skin "Glassmorphism premium LIGHT" (AdmPoint)
   --------------------------------------------------------------------------
   Espejo 1:1 de glassmorphism.css: MISMA estructura, MISMOS selectores y
   MISMOS bloques (tokens · global · layout · nav/sidebar · cards · forms ·
   buttons · tables · modals · alerts · tabs · states · scrollbars ·
   responsive · a11y). La unica diferencia son los VALORES: vidrio claro.
   Es autocontenido: se puede enlazar solo o despues del skin oscuro.
   Claves del vidrio en claro:
   - Capas de blanco con alpha BAJA (0.26-0.64): si se sube a 0.8+ el panel
     queda blanco opaco y desaparece el efecto.
   - Blur MUY saturado (180-200%) para que el color del fondo se intensifique.
   - Bordes: rim blanco luminoso + hairline frio donde hace falta precision.
   - Reflejo interno blanco fuerte (en oscuro era 6%) y sombras tintadas azul.
   NO modifica HTML/JS/clases: solo sobrescribe estilos necesarios.
   Componentes separados (se enlazan DESPUES de este skin):
   - assets/css/glassmorphism-light-cards-panels-tables-modals.css
     (card, panel, tabla y modal)
   - assets/css/glassmorphism-light-buttons.css (botones)
   ========================================================================== */

/* ============================ 1. VARIABLES ============================== */
:root {
  /* --- Base / profundidad (background -> panel -> card -> modal) --- */
  --g-bg: #eef2fb;
  --g-ball-ani: rgba(27,57,157, 0.92); /* bolas animadas de backgrpund*/
    --g-ball-ani: rgba(133,144,185, 0.2); /* bolas animadas de backgrpund*/
  --g-layer-0: rgba(255, 255, 255, 0.5);   /* panel de fondo    */
  --g-layer-1: rgba(255, 255, 255, 0.34);   /* panel / sidebar   */
  --g-layer-2: rgba(255, 255, 255, 0.5);   /* card              */
  --g-layer-3: rgba(255, 255, 255, 0.52);   /* card elevada      */
  --g-layer-4: rgba(255, 255, 255, 0.64);   /* modal / dropdown  */
  --g-layer-hover: rgba(255, 255, 255, 0.55);
  --g-solid: rgba(245, 248, 255, 0.90);     /* fallback sin blur */
  --g-solid-2: rgba(250, 252, 255, 0.95);   /* fallback elevado  */

  /* --- Bordes: rim luminoso + hairline de precision --- */
  --g-border: rgba(255, 255, 255, 0.60);
  --g-border-strong: rgba(255, 255, 255, 0.85);
  --g-border-soft: rgba(15, 23, 42, 0.06);
  --g-hairline: rgba(15, 23, 42, 0.10);
  --g-border-accent: rgba(37, 99, 235, 0.45);

  /* --- Texto --- */
  --g-text: #616b8c;
  --g-text-muted: #8994b8;
  --g-text-soft: #64748b;
  --g-text-disabled: #94a3b8;

  /* --- Acento (azul electrico legible en claro) --- */
  --g-accent: #2563eb;
  --g-accent-2: #9ba5c6;
  --g-accent-ink: #ffffff;
  --g-accent-soft: rgba(37, 99, 235, 0.12);
  --g-accent-softer: rgba(37, 99, 235, 0.07);
  --g-accent-glow: rgba(37, 99, 235, 0.32);

  /* --- Colores funcionales --- */
  --g-success: #15803d;
  --g-success-soft: rgba(21, 128, 61, 0.12);
  --g-warning: #b45309;
  --g-warning-soft: rgba(180, 83, 9, 0.13);
  --g-warning-ink: #3b2306;
  --g-danger: #dc2626;
  --g-danger-soft: rgba(220, 38, 38, 0.12);
  --g-danger-ink: #ffffff;
  --g-info: #0369a1;
  --g-info-soft: rgba(3, 105, 161, 0.12);
  --g-secondary: #64748b;
  --g-secondary-soft: rgba(100, 116, 139, 0.12);

  /* --- Blur y filtros de vidrio (saturacion alta = color visible) --- */
  --g-blur-sm: 10px;
  --g-blur: 18px;
  --g-blur-lg: 28px;
  --g-filter-sm: blur(10px) saturate(180%);
  --g-filter: blur(18px) saturate(190%);
  --g-filter-lg: blur(28px) saturate(200%);

  /* --- Sombras tintadas de azul (elevacion sobre claro) --- */
  --g-shadow-xs: 0 1px 2px rgba(30, 58, 138, 0.08);
  --g-shadow-sm: 0 2px 8px rgba(30, 58, 138, 0.10), 0 12px 28px rgba(30, 58, 138, 0.08);
  --g-shadow-md: 0 8px 22px rgba(30, 58, 138, 0.12), 0 24px 56px rgba(30, 58, 138, 0.10);
  --g-shadow-lg: 0 12px 30px rgba(30, 58, 138, 0.14), 0 40px 84px rgba(30, 58, 138, 0.16);
  --g-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.30);
  --g-highlight-soft: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --g-ring: 0 0 0 3px rgba(37, 99, 235, 0.20);

  /* --- Radios (identicos) --- */
  --g-radius-xs: 8px;
  --g-radius-sm: 10px;
  --g-radius: 14px;
  --g-radius-lg: 18px;
  --g-radius-xl: 24px;
  --g-radius-pill: 999px;

  /* --- Movimiento (identico) --- */
  --g-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --g-t-fast: 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --g-t: 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --g-t-slow: 250ms cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: light;
}
/* ============================== 2. GLOBAL =============================== */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--g-text);
  background-color: var(--g-bg);
  /* El "detras" del vidrio: sin color de fondo no hay efecto glass */
  /*background-image:
    radial-gradient(1100px 780px at 8% -12%, rgba(56, 132, 255, 0.42), transparent 62%),
    radial-gradient(900px 620px at 94% 2%, rgba(139, 92, 246, 0.32), transparent 60%),
    radial-gradient(1000px 760px at 50% 116%, rgba(0, 186, 235, 0.32), transparent 64%),
    radial-gradient(720px 520px at 84% 64%, rgba(236, 72, 153, 0.12), transparent 62%),
    linear-gradient(180deg, #f9fbff 0%, #ecf2fd 45%, #e6edfa 100%);
  background-attachment: fixed;
  min-height: 100vh;
  */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--g-accent-soft); color: var(--g-text); }

/* Tipografia: jerarquia clara y sobria */
h1, h2, h3, h4, h5, h6 {
  color: var(--g-text);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.06rem; }
h5 { font-size: 0.98rem; }
h6 { font-size: 0.9rem; letter-spacing: -0.01em; }
p, .lead { color: var(--g-text-muted); }
.lead { font-size: 1.06rem; font-weight: 400; }
small, .small { color: var(--g-text-muted); }
strong, b { color: var(--g-text); font-weight: 600; }
.text-muted { color: var(--g-text-muted) !important; }
.text-white { color: #fff !important; }

a {
  color: var(--g-accent-2);
  text-decoration: none;
  transition: color var(--g-t-fast);
}
a:hover { color: var(--g-accent); }

hr { border: 0; border-top: 1px solid var(--g-hairline); opacity: 1; margin: 1.25rem 0; }

code, kbd, samp {
  font-family: 'SFMono-Regular', ui-monospace, Consolas, monospace;
  font-size: 0.86em;
  color: var(--g-accent-2);
  background: var(--g-layer-2);
  border: 1px solid var(--g-border-soft);
  border-radius: var(--g-radius-xs);
  padding: 0.12em 0.42em;
  -webkit-backdrop-filter: var(--g-filter-sm);
  backdrop-filter: var(--g-filter-sm);
}
pre {
  font-family: 'SFMono-Regular', ui-monospace, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--g-text);
  background: var(--g-layer-1);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  box-shadow: var(--g-highlight-soft);
  padding: 1.1rem 1.2rem;
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
}
pre code { background: transparent; border: 0; padding: 0; color: inherit; }
kbd { background: var(--g-text); color: #f8fafc; border-color: transparent; }

blockquote {
  color: var(--g-text-muted);
  background: var(--g-layer-0);
  border: 1px solid var(--g-border-soft);
  border-left: 2px solid var(--g-accent);
  border-radius: var(--g-radius-sm);
  padding: 1rem 1.25rem;
  box-shadow: var(--g-highlight-soft);
}
.blockquote-footer { color: var(--g-text-soft); }
mark { background: var(--g-accent-soft); color: var(--g-text); padding: 0 0.25em; border-radius: 5px; }

img.img-thumbnail {
  background: var(--g-layer-1);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow-xs);
  padding: 0.3rem;
  -webkit-backdrop-filter: var(--g-filter-sm);
  backdrop-filter: var(--g-filter-sm);
}
.avatar { border-radius: 50%; border: 2px solid var(--g-border-strong); box-shadow: var(--g-shadow-xs); }
.avatar img { border-radius: 50%; object-fit: cover; }

/* Utilidades de sombra alineadas al sistema */
.shadow { box-shadow: var(--g-shadow-md) !important; }
.shadow-sm { box-shadow: var(--g-shadow-sm) !important; }
.shadow-lg { box-shadow: var(--g-shadow-lg) !important; }
.shadow-none { box-shadow: none !important; }
.border { border-color: var(--g-border) !important; }
.bg-white { background-color: var(--g-layer-2) !important; color: var(--g-text) !important; }
.bg-light { background-color: var(--g-layer-2) !important; color: var(--g-text) !important; }

/* Fallback: si el navegador no soporta backdrop-filter, subimos opacidad */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* .card / .modal-content / .chart-container / .dash-kpi / .kpi-card ->
     glassmorphism-light-cards-panels-tables-modals.css */
  .navbar, .page-sidebar, .dropdown-menu, .offcanvas, .toast, .list-group {
    background-color: var(--g-solid) !important;
  }
  .dropdown-menu, .toast { background-color: var(--g-solid-2) !important; }
}
/* ============================== 3. LAYOUT =============================== */
.page-container, .main-wrapper, .main-content, .page-content,
.app-content, .app-body { background-color: transparent; }
.page-content { padding: 2rem; }
.page-header { margin-bottom: 1.75rem; }
.page-header h1 { margin-bottom: 0.25rem; }
.container, .container-fluid, .container-xl, .container-lg,
.container-md, .container-sm { padding-left: 1rem; padding-right: 1rem; }
.row { --bs-gutter-x: 1.35rem; --bs-gutter-y: 1.35rem; }

/* Panel base reutilizable de la app (.layout-panel / .panel) y el resto de
   componentes card / panel / tabla / modal:
   glassmorphism-light-cards-panels-tables-modals.css */

.section-title, .page-title { color: var(--g-text); font-weight: 600; letter-spacing: -0.02em; }
.section-subtitle { color: var(--g-text-muted); font-size: 0.9rem; }

/* Separadores internos: en claro se dibujan con hairline, no con blanco */
.divider, .divider-y { background: linear-gradient(90deg, transparent, var(--g-hairline), transparent); height: 1px; border: 0; }

/* Login / pantallas centradas */
.login-page, .authent-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem;
}
.login-box-container, .authent-login {
  width: 100%;
  max-width: 430px;
  background: var(--g-layer-2);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-xl);
  box-shadow: var(--g-shadow-lg), var(--g-highlight);
  padding: 2.25rem;
  -webkit-backdrop-filter: var(--g-filter-lg);
  backdrop-filter: var(--g-filter-lg);
}
.authent-logo img { max-width: 190px; }
.authent-text { color: var(--g-text-muted); }

/* Paginas de error */
.error-page, .error-container {
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.error-code {
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  background-image: linear-gradient(180deg, var(--g-text) 0%, var(--g-accent) 130%);
  -webkit-background-clip: text;
  background-clip: text;
}
.error-title { color: var(--g-text); font-weight: 600; }
.error-desc { color: var(--g-text-muted); }

/* Footer */
.footer {
  background: var(--g-layer-0);
  border-top: 1px solid var(--g-border-soft);
  box-shadow: var(--g-highlight-soft);
  padding: 1.75rem 0 1.1rem;
  color: var(--g-text-muted);
  font-size: 0.86rem;
  -webkit-backdrop-filter: var(--g-filter-sm);
  backdrop-filter: var(--g-filter-sm);
  z-index: 99;
}

.footer a { color: var(--g-text-muted); }
.footer a:hover { color: var(--g-accent-2); }
.footer-brand { color: var(--g-text); font-weight: 600; }

/* Correcionees de Card y Tablas */
#table_wrapper{
  background: none;
}
/* Hero / jumbotron */
.jumbotron, .hero {
  background: linear-gradient(180deg, var(--g-layer-2), var(--g-layer-0));
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-xl);
  box-shadow: var(--g-shadow-md), var(--g-highlight);
  padding: 3rem 2.5rem;
  -webkit-backdrop-filter: var(--g-filter-lg);
  backdrop-filter: var(--g-filter-lg);
}
.hero-lede, .lede { color: var(--g-text-muted); font-size: 1.06rem; }
.kicker, .eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--g-accent-2);
  background: var(--g-accent-softer);
  border: 1px solid rgba(37, 99, 235, 0.20);
  border-radius: var(--g-radius-pill);
  padding: 0.3rem 0.8rem;
  margin-bottom: 1rem;
}
/* ====================== 4. NAVIGATION / HEADER ========================== */
.navbar {
  background: var(--g-layer-1) !important;
  border-bottom: 1px solid var(--g-border);
  box-shadow: var(--g-shadow-sm), var(--g-highlight);
  border-radius: 0;
  padding: 0.6rem 1.15rem;
  -webkit-backdrop-filter: var(--g-filter-lg);
  backdrop-filter: var(--g-filter-lg);
  transition: background-color var(--g-t), box-shadow var(--g-t);
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--g-text) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.navbar .logo img, .navbar-brand img { border-radius: var(--g-radius-xs); }
.navbar .nav-link {
  position: relative;
  color: var(--g-text-muted) !important;
  font-weight: 500;
  font-size: 0.88rem;
  border: 1px solid transparent;
  border-radius: var(--g-radius-sm);
  padding: 0.45rem 0.8rem !important;
  transition: color var(--g-t), background-color var(--g-t), border-color var(--g-t), box-shadow var(--g-t);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--g-text) !important;
  background: var(--g-layer-2);
  border-color: var(--g-border);
  box-shadow: var(--g-highlight-soft);
}
.navbar .nav-link.active,
.navbar-nav .nav-link.active,
.navbar .active-page > .nav-link {
  color: var(--g-accent-2) !important;
  background: var(--g-accent-soft);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: var(--g-highlight-soft), 0 6px 18px rgba(37, 99, 235, 0.12);
  font-weight: 600;
}
.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -1px;
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--g-accent), transparent);
}
.navbar-toggler {
  background: var(--g-layer-2);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-sm);
  box-shadow: var(--g-highlight-soft);
  padding: 0.38rem .58rem;
  transition: background-color var(--g-t-fast), border-color var(--g-t-fast), box-shadow var(--g-t-fast);
}
.navbar-toggler:hover { background: var(--g-layer-3); border-color: var(--g-border-strong); }
.navbar-toggler:focus { box-shadow: var(--g-ring); }
/* El base invertia este icono porque vivia sobre negro */
.navbar-toggler-icon { filter: none; opacity: .7; }

/* Notificaciones */
.header-notif { position: relative; }
.header-notif > a,
.header-notif .nav-link { color: var(--g-text-muted) !important; }
.notification-badge {
  background: linear-gradient(180deg, #f87171, #dc2626);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--g-radius-pill);
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.28);
  font-size: 0.65rem;
  font-weight: 600;
}
.notif-text, .bold-notif-text { border-radius: var(--g-radius-sm); }
.bold-notif-text { color: var(--g-text); font-weight: 600; }
.notif-image {
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-sm);
  object-fit: cover;
  box-shadow: var(--g-shadow-xs);
}
/* ============================= SIDEBAR ================================= */
.page-sidebar {
 /* background: var(--g-layer-1) !important;*/
  background: linear-gradient(180deg, var(--g-layer-2), var(--g-layer-0)) !important;
  border-right: 1px solid var(--g-border);
  box-shadow: var(--g-shadow-sm), var(--g-highlight-soft);
  border-radius: 20;
  border-color: var(--g-border-strong);
  -webkit-backdrop-filter: var(--g-filter-lg);
  backdrop-filter: var(--g-filter-lg);
}
.page-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 60% at 0% 0%, rgba(255, 255, 255, 0.45), transparent 60%);
}
.page-sidebar .sidebar-title {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--g-text-soft);
  padding: 1.1rem 0.9rem 0.35rem;
}
.page-sidebar .accordion-menu {
  padding: 0.75rem 0.7rem !important;
  margin: 0;
  list-style: none;
}
.page-sidebar .accordion-menu > li { margin: 2px 0; }
.page-sidebar .accordion-menu > li > a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--g-text-muted) !important;
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid transparent;
  border-radius: var(--g-radius-sm);
  transition: color var(--g-t), background-color var(--g-t), border-color var(--g-t);
}
.page-sidebar .accordion-menu > li > a:hover,
.page-sidebar .accordion-menu > li > a:focus {
  color: var(--g-text) !important;
  background: var(--g-layer-2);
  border-color: var(--g-border-soft);
  box-shadow: var(--g-highlight-soft);
}
.page-sidebar .accordion-menu > li.active-page > a,
.page-sidebar .accordion-menu > li.active > a {
  color: var(--g-accent-2) !important;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0.06));
  border-color: rgba(37, 99, 235, 0.26);
  font-weight: 600;
  box-shadow: var(--g-highlight-soft), inset 2px 0 0 var(--g-accent);
}
.page-sidebar .accordion-menu .sub-menu,
.page-sidebar .accordion-menu ul { background: transparent; }
.page-sidebar .accordion-menu .sub-menu a,
.page-sidebar .accordion-menu ul a {
  color: var(--g-text-soft);
  border-radius: var(--g-radius-xs);
  padding: 0.42rem 0.8rem 0.42rem 2.5rem;
  font-size: 0.84rem;
  transition: color var(--g-t-fast), background-color var(--g-t-fast);
}
.page-sidebar .accordion-menu .sub-menu a:hover,
.page-sidebar .accordion-menu ul a:hover {
  color: var(--g-text);
  background: var(--g-layer-2);
}
.sb-item {
  border-radius: var(--g-radius-sm);
  border: 1px solid transparent;
  transition: background-color var(--g-t-fast), border-color var(--g-t-fast);
}
.sb-item:hover { background: var(--g-layer-2); border-color: var(--g-border-soft); }
.app-sidebar, .app-content { background-color: transparent; }

/* Menu contextual / panel de acciones */
.action-bar-contextual {
  background: var(--g-layer-3);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-pill);
  box-shadow: var(--g-shadow-md), var(--g-highlight);
  padding: 0.5rem 0.95rem;
  -webkit-backdrop-filter: var(--g-filter-lg);
  backdrop-filter: var(--g-filter-lg);
}
.actions-row { gap: 0.5rem; }

/* ========================= 5. CARDS / PANELS ============================ */
/* Card / panel -> glassmorphism-light-cards-panels-tables-modals.css:
   .card, .cards .card, .mx-card, .card::before, .card-body, .card-header,
   .card-footer, .card-title/-subtitle/-description/-text/-link,
   .card-img-top/-overlay, .card-header-tabs/-pills, .card--featured,
   .chart-container, .app-window/.app-titlebar/.app-dot, .case-row,
   .kanban-board. Ese archivo se enlaza DESPUES de este skin. */

/* ================== 5b. METRICAS / ICONOS / TIMELINE ==================== */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--g-radius-sm);
  background: var(--g-layer-2);
  border: 1px solid var(--g-border);
  box-shadow: var(--g-highlight-soft);
  color: var(--g-accent-2);
  font-size: 1.12rem;
  -webkit-backdrop-filter: var(--g-filter-sm);
  backdrop-filter: var(--g-filter-sm);
  transition: background-color var(--g-t-fast), border-color var(--g-t-fast), color var(--g-t-fast);
}
.icon-box i { font-size: 1.12em; }
.icon-box-blue, .icon-box-sky, .icon-box-teal { background: var(--g-accent-softer); border-color: rgba(37, 99, 235, 0.22); color: var(--g-accent-2); }
.icon-box-green, .icon-box-emerald { background: var(--g-success-soft); border-color: rgba(21, 128, 61, 0.22); color: var(--g-success); }
.icon-box-amber, .icon-box-orange { background: var(--g-warning-soft); border-color: rgba(180, 83, 9, 0.22); color: var(--g-warning); }
.icon-box-red, .icon-box-rose { background: var(--g-danger-soft); border-color: rgba(220, 38, 38, 0.22); color: var(--g-danger); }
.icon-box-purple { background: rgba(109, 92, 255, 0.12); border-color: rgba(109, 92, 255, 0.24); color: #5b4bd6; }
.icon-box-gray { background: var(--g-secondary-soft); border-color: var(--g-border); color: var(--g-secondary); }

/* KPIs / estadisticas y .card-icon ->
   glassmorphism-light-cards-panels-tables-modals.css */

/* Timeline / actividad */
.activity-feed { position: relative; padding-left: 1.6rem; }
.activity-feed::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.55), rgba(37, 99, 235, 0.06));
}
.activity-feed li {
  position: relative;
  list-style: none;
  padding: 0.4rem 0 0.4rem 1.25rem;
  color: var(--g-text-muted);
}
.activity-feed li::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0.85rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--g-accent);
  box-shadow: 0 0 0 3px var(--g-accent-softer);
}
.activity-type-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--g-radius-pill);
  padding: 0.22rem 0.6rem;
  color: var(--g-text-muted);
  background: var(--g-layer-2);
  border: 1px solid var(--g-border-soft);
}
.check-item { display: flex; align-items: center; gap: 0.6rem; }
.icon-list-row, .check-list li { padding: 0.38rem 0; color: var(--g-text-muted); }
/* ============================== 6. FORMS ================================ */
label, .form-label {
  color: var(--g-text-muted);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
.form-label-sm { font-size: 0.74rem; }
.form-text { color: var(--g-text-soft); font-size: 0.78rem; }
legend { color: var(--g-text); font-weight: 600; font-size: 0.95rem; padding: 0 0.25rem; }

/* Inputs / textareas / selects: vidrio claro.
   El borde usa el hairline frio (no el rim blanco) para que el campo se lea. */
.form-control, .form-select {
  background-color: var(--g-layer-2);
  border: 1px solid var(--g-hairline);
  border-radius: var(--g-radius-sm);
  box-shadow: var(--g-highlight-soft);
  color: var(--g-text);
  font-size: 0.9rem;
  padding: 0.62rem 0.95rem;
  transition: background-color var(--g-t-fast), border-color var(--g-t-fast), box-shadow var(--g-t-fast), color var(--g-t-fast);
}
.form-control::placeholder { color: var(--g-text-soft); opacity: 1; }
.form-control:hover, .form-select:hover { border-color: rgba(15, 23, 42, 0.20); }
.form-control:focus, .form-select:focus {
  background-color: var(--g-layer-3);
  border-color: var(--g-border-accent);
  box-shadow: var(--g-ring), var(--g-highlight-soft);
  color: var(--g-text);
  outline: 0;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled {
  background-color: rgba(15, 23, 42, 0.04);
  border-color: var(--g-border-soft);
  color: var(--g-text-disabled);
  opacity: 1;
  box-shadow: none;
}
textarea.form-control { min-height: 96px; line-height: 1.6; }
.form-control-sm, .form-select-sm { padding: 0.38rem 0.7rem; font-size: 0.82rem; border-radius: var(--g-radius-xs); }
.form-control-lg { padding: 0.82rem 1.15rem; font-size: 1rem; border-radius: var(--g-radius); }
.form-control-plaintext { color: var(--g-text); background: transparent; border-color: transparent; }
.form-control-color { padding: 0.4rem 0.55rem; }

/* Autofill en tema claro */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--g-text);
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.96) inset;
  caret-color: var(--g-text);
}

/* Grupos de input */
.input-group-text {
  background: var(--g-layer-1);
  border: 1px solid var(--g-hairline);
  border-radius: var(--g-radius-sm);
  color: var(--g-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}
.input-group > .form-control, .input-group > .form-select { border-radius: 0 var(--g-radius-sm) var(--g-radius-sm) 0 !important; }
.input-group > .form-control:first-child, .input-group > .form-select:first-child,
.input-group > .input-group-text:first-child { border-radius: var(--g-radius-sm) 0 0 var(--g-radius-sm) !important; }
.input-group > .form-control:last-child, .input-group > .form-select:last-child { border-radius: 0 var(--g-radius-sm) var(--g-radius-sm) 0 !important; }
.input-group > .form-control:not(:first-child):not(:last-child) { border-radius: 0 !important; }

/* Floating labels */
.form-floating > label { color: var(--g-text-soft); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label { color: var(--g-accent-2); opacity: 0.9; }
.form-floating > .form-control, .form-floating > .form-select { padding-top: 1.55rem; padding-bottom: 0.5rem; }

/* Checks / radios / switches */
.form-check-input {
  background-color: rgba(255, 255, 255, 0.80);
  border: 1px solid var(--g-hairline);
  box-shadow: var(--g-highlight-soft);
  transition: background-color var(--g-t-fast), border-color var(--g-t-fast), box-shadow var(--g-t-fast);
}
.form-check-input:hover { border-color: var(--g-accent); }
.form-check-input:focus {
  border-color: var(--g-border-accent);
  box-shadow: var(--g-ring);
  outline: 0;
}
.form-check-input:checked {
  background-color: var(--g-accent);
  border-color: var(--g-accent);
  box-shadow: 0 0 0 3px var(--g-accent-softer);
}
.form-check-input:disabled { opacity: 0.6; background-color: rgba(15, 23, 42, 0.05); }
.form-check-input[type="checkbox"] { border-radius: 5px; }
.form-switch .form-check-input {
  background-color: rgba(15, 23, 42, 0.16);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
  border: 1px solid transparent;
}
.form-switch .form-check-input:checked {
  background-color: var(--g-accent);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  border-color: transparent;
}
.form-check-label { color: var(--g-text); }
/* ================== 6b. FORMS: RANGE / VALIDACION / SELECT2 ============= */
.form-range { background: transparent; }
.form-range::-webkit-slider-runnable-track {
  background: rgba(15, 23, 42, 0.12);
  border: 1px solid var(--g-border-soft);
  border-radius: var(--g-radius-pill);
  height: 0.4rem;
}
.form-range::-webkit-slider-thumb {
  background: linear-gradient(180deg, var(--g-accent-2), var(--g-accent));
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 2px 8px var(--g-accent-glow);
  margin-top: -0.28rem;
}
.form-range::-moz-range-track { background: rgba(15, 23, 42, 0.12); border-radius: var(--g-radius-pill); height: 0.4rem; }
.form-range::-moz-range-thumb {
  background: var(--g-accent);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 2px 8px var(--g-accent-glow);
}

/* Estados de validacion: elegantes y discretos */
.form-control.is-invalid, .form-select.is-invalid,
.was-validated .form-control:invalid, .was-validated .form-select:invalid {
  border-color: rgba(220, 38, 38, 0.55);
  box-shadow: 0 0 0 3px var(--g-danger-soft);
}
.form-control.is-valid, .form-select.is-valid,
.was-validated .form-control:valid, .was-validated .form-select:valid {
  border-color: rgba(21, 128, 61, 0.50);
  box-shadow: 0 0 0 3px var(--g-success-soft);
}
.form-control.is-warning, .was-validated .form-control.warning {
  border-color: rgba(180, 83, 9, 0.50);
  box-shadow: 0 0 0 3px var(--g-warning-soft);
}
.invalid-feedback { color: var(--g-danger); font-size: 0.78rem; font-weight: 500; }
.valid-feedback { color: var(--g-success); font-size: 0.78rem; font-weight: 500; }
.form-err { color: var(--g-danger); font-size: 0.78rem; font-weight: 500; }
.form-ok { color: var(--g-success); font-size: 0.78rem; font-weight: 500; }
.form-note { color: var(--g-text-soft); font-size: 0.78rem; }
.form-group { margin-bottom: 1rem; }
.form-grid { display: grid; gap: 1rem; }
.form-consent { color: var(--g-text-muted); }

/* Select2 (si esta presente en la pagina) */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--g-layer-2);
  border: 1px solid var(--g-hairline);
  border-radius: var(--g-radius-sm);
  color: var(--g-text);
  min-height: 42px;
  padding: 0.35rem 0.6rem;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-selection__rendered { color: var(--g-text); }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder,
.select2-selection__placeholder { color: var(--g-text-soft); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--g-border-accent);
  box-shadow: var(--g-ring);
}
.select2-dropdown {
  background: var(--g-layer-4);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow-lg);
  color: var(--g-text);
  -webkit-backdrop-filter: var(--g-filter-lg);
  backdrop-filter: var(--g-filter-lg);
}
.select2-results__option {
  color: var(--g-text-muted);
  border-radius: var(--g-radius-xs);
  padding: 0.45rem 0.6rem;
}
/* El base pintaba este texto en blanco (vidrio oscuro) */
.select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background: var(--g-accent-soft) !important;
  color: var(--g-text) !important;
}
.select2-selection__choice {
  background: var(--g-accent-soft) !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
  color: var(--g-text) !important;
  border-radius: var(--g-radius-pill) !important;
}
.select2-search__field {
  background: var(--g-layer-2);
  border: 1px solid var(--g-hairline);
  border-radius: var(--g-radius-xs);
  color: var(--g-text);
}
/* ========================= 7. BUTTONS (separado) ======================= */
/* Los estilos de botones viven ahora en su propio archivo:
     assets/css/glassmorphism-light-buttons.css
   (.btn, .btn-*, .btn-outline-*, tamanos, grupos, botones especiales de la
   plataforma y sus reglas de estados / responsive / a11y).
   Ese archivo se enlaza DESPUES de este skin para respetar la cascada. */

/* ============================= 8. TABLES ================================ */
/* Tablas / DataTables -> glassmorphism-light-cards-panels-tables-modals.css:
   .table, .table-*, .table-responsive, table .d-flex, .dataTables_wrapper,
   .dataTables_filter/-length/-info/-paginate, .dataTables_processing. */

/* ============ 9. DROPDOWNS / OFF CANVAS / TOOLTIPS / POPOVERS =========== */
/* Modal -> glassmorphism-light-cards-panels-tables-modals.css:
   .modal-content, .modal-header/-title/-body/-footer, .modal-backdrop,
   .modal-fullscreen. */

/* Dropdowns / menus */
.dropdown-menu {
  background: linear-gradient(180deg, var(--g-layer-4), var(--g-layer-3));
  border: 1px solid var(--g-border-strong);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.70);
  color: var(--g-text);
  padding: 0.4rem;
  overflow: hidden;
  -webkit-backdrop-filter: var(--g-filter-lg);
  backdrop-filter: var(--g-filter-lg);
}
.dropdown-item {
  color: var(--g-text-muted);
  border-radius: var(--g-radius-xs);
  padding: 0.52rem 0.8rem;
  font-size: 0.87rem;
  font-weight: 500;
  transition: background-color var(--g-t-fast), color var(--g-t-fast);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--g-layer-hover);
  color: var(--g-text);
}
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--g-accent-soft);
  color: var(--g-accent-2);
}
.dropdown-item:disabled, .dropdown-item.disabled { color: var(--g-text-disabled); background: transparent; }
.dropdown-header {
  color: var(--g-text-soft);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.5rem 0.8rem 0.28rem;
}
.dropdown-divider { border-top: 1px solid var(--g-hairline); opacity: 1; margin: 0.35rem 0.4rem; }
.dropdown-toggle::after { border-top-color: currentColor; opacity: 0.7; }
.dropdown-icon { color: var(--g-accent-2); }
.dropdown-menu .form-control, .dropdown-menu .form-select { background-color: var(--g-layer-2); }
/* Offcanvas */
.offcanvas {
  background: linear-gradient(180deg, var(--g-layer-4), var(--g-layer-2));
  border-color: var(--g-border-strong);
  box-shadow: var(--g-shadow-lg);
  color: var(--g-text);
  -webkit-backdrop-filter: var(--g-filter-lg);
  backdrop-filter: var(--g-filter-lg);
}
.offcanvas-header { border-bottom: 1px solid var(--g-border-soft); padding: 1.15rem 1.4rem; }
.offcanvas-title { color: var(--g-text); font-weight: 600; }
.offcanvas-body { padding: 1.4rem; color: var(--g-text-muted); }

/* Tooltips y popovers */
.tooltip {
  --bs-tooltip-bg: rgba(15, 23, 42, 0.90);
  --bs-tooltip-color: #f8fafc;
  --bs-tooltip-opacity: 1;
}
.tooltip-inner {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--g-radius-xs);
  box-shadow: var(--g-shadow-md);
  padding: 0.45rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 500;
  -webkit-backdrop-filter: var(--g-filter-sm);
  backdrop-filter: var(--g-filter-sm);
}
.popover {
  --bs-popover-bg: rgba(255, 255, 255, 0.94);
  --bs-popover-border-color: var(--g-border-strong);
  --bs-popover-header-bg: transparent;
  --bs-popover-header-color: var(--g-text);
  --bs-popover-body-color: var(--g-text-muted);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--g-border-strong);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow-lg);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
}
.popover-header { color: var(--g-text); border-bottom: 1px solid var(--g-border-soft); font-weight: 600; }
.popover-body { color: var(--g-text-muted); }

/* ======================= 10. ALERTS ==================================== */
.alert {
  position: relative;
  background: var(--g-layer-2);
  border: 1px solid var(--g-border);
  border-left: 2px solid var(--g-border-strong);
  border-radius: var(--g-radius-sm);
  box-shadow: var(--g-highlight-soft);
  color: var(--g-text);
  padding: 0.9rem 1.1rem;
  -webkit-backdrop-filter: var(--g-filter-sm);
  backdrop-filter: var(--g-filter-sm);
}
.alert-heading { color: inherit; font-weight: 600; }
.alert-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.alert-dismissible .btn-close { padding: 0.9rem 1.1rem; }
.alert-primary { background: var(--g-accent-softer); border-color: rgba(37, 99, 235, 0.18); border-left-color: var(--g-accent); color: var(--g-accent-2); }
.alert-secondary { background: var(--g-secondary-soft); border-color: var(--g-border); border-left-color: var(--g-secondary); color: var(--g-text-muted); }
.alert-success { background: var(--g-success-soft); border-color: rgba(21, 128, 61, 0.18); border-left-color: var(--g-success); color: #12693a; }
.alert-danger { background: var(--g-danger-soft); border-color: rgba(220, 38, 38, 0.18); border-left-color: var(--g-danger); color: #b91c1c; }
.alert-warning { background: var(--g-warning-soft); border-color: rgba(180, 83, 9, 0.18); border-left-color: var(--g-warning); color: #8a4a08; }
.alert-info { background: var(--g-info-soft); border-color: rgba(3, 105, 161, 0.18); border-left-color: var(--g-info); color: #075985; }
.alert-light { background: var(--g-layer-2); border-left-color: var(--g-border-strong); color: var(--g-text); }
.alert-dark { background: #1e293b; border-left-color: #475569; color: #f8fafc; }
.alert-dark .alert-heading { color: #f8fafc; }
/* ======================= 10b. BADGES / CHIPS / TOASTS ================== */
.badge {
  border-radius: var(--g-radius-pill);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.4em 0.72em;
  border: 1px solid var(--g-border);
  box-shadow: none;
}
.badge.bg-primary { background-color: var(--g-accent-soft) !important; border-color: rgba(37, 99, 235, 0.30); color: var(--g-accent-2) !important; }
.badge.bg-secondary { background-color: var(--g-secondary-soft) !important; border-color: var(--g-hairline); color: var(--g-text-muted) !important; }
.badge.bg-success { background-color: var(--g-success-soft) !important; border-color: rgba(21, 128, 61, 0.28); color: var(--g-success) !important; }
.badge.bg-danger { background-color: var(--g-danger-soft) !important; border-color: rgba(220, 38, 38, 0.28); color: var(--g-danger) !important; }
.badge.bg-warning { background-color: var(--g-warning-soft) !important; border-color: rgba(180, 83, 9, 0.28); color: var(--g-warning) !important; }
.badge.bg-info { background-color: var(--g-info-soft) !important; border-color: rgba(3, 105, 161, 0.28); color: var(--g-info) !important; }
.badge.bg-dark { background-color: #1e293b !important; border-color: rgba(255, 255, 255, 0.35); color: #f8fafc !important; }
.badge.bg-light { background-color: var(--g-layer-3) !important; border-color: var(--g-hairline); color: var(--g-text) !important; }
.badge-completada { background: var(--g-success-soft) !important; border-color: rgba(21, 128, 61, 0.28) !important; color: var(--g-success) !important; }
.badge-proceso { background: var(--g-accent-soft) !important; border-color: rgba(37, 99, 235, 0.28) !important; color: var(--g-accent-2) !important; }
.badge-pendiente { background: var(--g-warning-soft) !important; border-color: rgba(180, 83, 9, 0.28) !important; color: var(--g-warning) !important; }
.badge-rechazada { background: var(--g-danger-soft) !important; border-color: rgba(220, 38, 38, 0.28) !important; color: var(--g-danger) !important; }

/* Chips / pills */
.chip, .mk-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--g-layer-2);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-pill);
  box-shadow: var(--g-highlight-soft);
  color: var(--g-text-muted);
  font-size: 0.76rem;
  font-weight: 500;
  padding: 0.28rem 0.75rem;
  white-space: nowrap;
  -webkit-backdrop-filter: var(--g-filter-sm);
  backdrop-filter: var(--g-filter-sm);
}
.chip-ok { background: var(--g-success-soft); border-color: rgba(21, 128, 61, 0.25); color: var(--g-success); }
.chip-warn { background: var(--g-warning-soft); border-color: rgba(180, 83, 9, 0.25); color: var(--g-warning); }
.chip-muted { background: var(--g-secondary-soft); border-color: var(--g-border); color: var(--g-text-muted); }
.chip-rojo { background: var(--g-danger-soft); border-color: rgba(220, 38, 38, 0.25); color: var(--g-danger); }
.feat-pill-blue, .feat-pill-orange, .feat-pill-red {
  display: inline-block;
  border-radius: var(--g-radius-pill);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.26rem 0.7rem;
  border: 1px solid transparent;
}
.feat-pill-blue { background: var(--g-accent-soft); border-color: rgba(37, 99, 235, 0.24); color: var(--g-accent-2); }
.feat-pill-orange { background: var(--g-warning-soft); border-color: rgba(180, 83, 9, 0.24); color: var(--g-warning); }
.feat-pill-red { background: var(--g-danger-soft); border-color: rgba(220, 38, 38, 0.24); color: var(--g-danger); }

/* Toasts */
.toast {
  background: linear-gradient(180deg, var(--g-layer-4), var(--g-layer-3)) !important;
  border: 1px solid var(--g-border-strong);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow-lg);
  color: var(--g-text);
  overflow: hidden;
  -webkit-backdrop-filter: var(--g-filter-lg);
  backdrop-filter: var(--g-filter-lg);
}
.toast-header { background: transparent; border-bottom: 1px solid var(--g-border-soft); color: var(--g-text); font-weight: 600; }
.toast-body { color: var(--g-text-muted); padding: 0.85rem 1rem; }
.toast-container { z-index: 1090; }
/* ===================== 11. TABS / NAV / ACORDEON ======================== */
.nav-link { color: var(--g-text-muted); font-weight: 500; transition: color var(--g-t-fast), background-color var(--g-t-fast), border-color var(--g-t-fast); }
.nav-link:hover, .nav-link:focus { color: var(--g-text); }

.nav-tabs { border-bottom: 1px solid var(--g-hairline); gap: 0.25rem; }
.nav-tabs .nav-link {
  position: relative;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--g-text-soft);
  margin-bottom: -1px;
  padding: 0.6rem 0.95rem;
}
.nav-tabs .nav-link:hover { background: var(--g-layer-1); color: var(--g-text); border-bottom-color: var(--g-hairline); }
.nav-tabs .nav-link.active {
  background: transparent;
  color: var(--g-accent-2);
  border-bottom-color: var(--g-accent);
  box-shadow: 0 1px 0 0 var(--g-accent-softer);
  font-weight: 600;
}
.nav-pills .nav-link {
  background: var(--g-layer-1);
  border: 1px solid var(--g-border-soft);
  border-radius: var(--g-radius-sm);
  box-shadow: var(--g-highlight-soft);
  color: var(--g-text-muted);
  padding: 0.48rem 0.95rem;
}
.nav-pills .nav-link:hover { background: var(--g-layer-3); border-color: var(--g-border); color: var(--g-text); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: var(--g-accent-2);
  background: var(--g-accent-soft);
  border-color: rgba(37, 99, 235, 0.32);
  box-shadow: var(--g-highlight-soft), 0 6px 18px rgba(37, 99, 235, 0.14);
}
.nav-underline .nav-link.active, .nav-underline .show > .nav-link { color: var(--g-accent-2); }
.navbar-nav { gap: 0.15rem; }

/* Acordeon */
.accordion-item {
  background: linear-gradient(180deg, var(--g-layer-2), var(--g-layer-0));
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius) !important;
  box-shadow: var(--g-highlight-soft);
  overflow: hidden;
  margin-bottom: 0.6rem;
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
}
.accordion-button {
  background: var(--g-layer-1);
  color: var(--g-text);
  font-weight: 500;
  box-shadow: none;
}
.accordion-button:not(.collapsed) {
  background: var(--g-layer-3);
  color: var(--g-text);
  font-weight: 600;
  box-shadow: var(--g-highlight-soft);
}
.accordion-button:focus { box-shadow: var(--g-ring); border-color: transparent; }
/* El base invertia esta flecha porque vivia sobre negro */
.accordion-button::after { opacity: 0.45; filter: none; }
.accordion-body { color: var(--g-text-muted); background: transparent; }
.accordion-flush .accordion-item { border-radius: 0 !important; box-shadow: none; }

/* ============ 11b. PAGINACION / BREADCRUMB / LIST / PROGRESS ============ */
.pagination { gap: 0.32rem; }
.page-link {
  border: 1px solid var(--g-hairline);
  background: var(--g-layer-2);
  box-shadow: var(--g-highlight-soft);
  color: var(--g-text-muted);
  font-weight: 500;
  font-size: 0.85rem;
  border-radius: var(--g-radius-xs) !important;
  min-width: 36px;
  text-align: center;
  transition: background-color var(--g-t-fast), border-color var(--g-t-fast), color var(--g-t-fast), box-shadow var(--g-t-fast);
}
.page-link:hover, .page-link:focus {
  background: var(--g-layer-4);
  border-color: var(--g-border-strong);
  color: var(--g-text);
  box-shadow: var(--g-shadow-xs), var(--g-highlight-soft);
}
.page-item.active .page-link {
  background: var(--g-accent-soft);
  border-color: var(--g-border-accent);
  color: var(--g-accent-2);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.14), var(--g-highlight-soft);
}
.page-item.disabled .page-link { opacity: 0.5; box-shadow: none; background: var(--g-layer-0); }
.pagination-sm .page-link { min-width: 28px; padding: 0.25rem 0.45rem; font-size: 0.8rem; }
.pagination-lg .page-link { min-width: 44px; padding: 0.5rem 0.75rem; font-size: 0.98rem; border-radius: var(--g-radius-sm) !important; }

/* Breadcrumb */
.breadcrumb {
  background: var(--g-layer-1);
  border: 1px solid var(--g-border-soft);
  border-radius: var(--g-radius-pill);
  box-shadow: var(--g-highlight-soft);
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  margin-bottom: 1.25rem;
  -webkit-backdrop-filter: var(--g-filter-sm);
  backdrop-filter: var(--g-filter-sm);
}
.breadcrumb-item a { color: var(--g-text-soft); font-weight: 500; }
.breadcrumb-item a:hover { color: var(--g-accent-2); }
.breadcrumb-item.active { color: var(--g-text); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--g-text-disabled); content: "/"; }

/* List group */
.list-group {
  background: linear-gradient(180deg, var(--g-layer-2), var(--g-layer-0));
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow-sm), var(--g-highlight);
  overflow: hidden;
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
}
.list-group-item { background: transparent; border-color: var(--g-border-soft); color: var(--g-text); padding: 0.8rem 1rem; font-size: 0.88rem; }
.list-group-item-action { transition: background-color var(--g-t-fast), color var(--g-t-fast); }
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--g-layer-hover); color: var(--g-text); }
.list-group-item.active {
  background: var(--g-accent-soft) !important;
  border-color: rgba(37, 99, 235, 0.30) !important;
  color: var(--g-accent-2) !important;
  box-shadow: inset 2px 0 0 var(--g-accent);
}
.list-group-item-success { background: var(--g-success-soft); color: var(--g-success); }
.list-group-item-danger { background: var(--g-danger-soft); color: var(--g-danger); }
.list-group-item-warning { background: var(--g-warning-soft); color: var(--g-warning); }
.list-group-item-info { background: var(--g-info-soft); color: var(--g-info); }
.list-group-item-light { background: var(--g-layer-2); }
.list-group-item-dark { background: #1e293b; color: #f8fafc; }
.list-group-flush { border-radius: 0; box-shadow: none; border-left: 0; border-right: 0; }
/* Progress / spinners / placeholders / loader */
.progress {
  background: rgba(15, 23, 42, 0.08);
  border: 1px solid var(--g-border-soft);
  border-radius: var(--g-radius-pill);
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.10);
  height: 0.6rem;
}
.progress-bar {
  background-color: var(--g-accent);
  background-image: linear-gradient(90deg, rgba(37, 99, 235, 0.85), var(--g-accent-2));
  border-radius: var(--g-radius-pill);
  box-shadow: 0 0 14px rgba(37, 99, 235, 0.28);
}
.progress-bar.bg-success { background-color: var(--g-success) !important; background-image: linear-gradient(90deg, #1a9c4c, var(--g-success)) !important; box-shadow: 0 0 14px rgba(21, 128, 61, 0.25); }
.progress-bar.bg-danger { background-color: var(--g-danger) !important; background-image: linear-gradient(90deg, #ef4444, var(--g-danger)) !important; box-shadow: 0 0 14px rgba(220, 38, 38, 0.25); }
.progress-bar.bg-warning { background-color: var(--g-warning) !important; background-image: linear-gradient(90deg, #d97706, var(--g-warning)) !important; box-shadow: none; }
.progress-bar.bg-info { background-color: var(--g-info) !important; background-image: linear-gradient(90deg, #0ea5e9, var(--g-info)) !important; box-shadow: none; }

.spinner-border, .spinner-grow { color: var(--g-accent); }
@keyframes g-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.placeholder {
  background-image: linear-gradient(90deg, rgba(15, 23, 42, 0.06) 25%, rgba(15, 23, 42, 0.11) 50%, rgba(15, 23, 42, 0.06) 75%);
  background-size: 200% 100%;
  animation: g-shimmer 1.6s linear infinite;
  border-radius: var(--g-radius-xs);
}
.loader, .BoxLoad, .loading-overlay {
  background: rgba(233, 238, 251, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ============================= 12. STATES =============================== */
/* Transiciones coherentes en elementos interactivos
   (.btn / .btn-close -> glassmorphism-light-buttons.css;
    .card -> glassmorphism-light-cards-panels-tables-modals.css) */
a, .nav-link, .dropdown-item, .page-link, .list-group-item-action,
.form-control, .form-select, .form-check-input, .chip, .badge,
.accordion-button, .navbar-toggler {
  transition-duration: 180ms;
  transition-timing-function: var(--g-ease);
}

/* Focus visible global, accesible y elegante (sin outlines gruesos) */
a:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
.list-group-item-action:focus-visible,
.accordion-button:focus-visible,
.navbar-toggler:focus-visible {
  outline: 0;
  box-shadow: var(--g-ring);
  border-radius: var(--g-radius-xs);
}

/* Hover con elevacion luminosa sutil en superficies interactivas
   (.case-row:hover -> glassmorphism-light-cards-panels-tables-modals.css) */
.list-group-item-action:hover,
.dropdown-item:hover,
.page-link:hover {
  box-shadow: var(--g-highlight-soft);
}

/* Active / pressed: reduccion de profundidad
   (.btn:active:not(:disabled) -> glassmorphism-light-buttons.css) */
.page-link:active,
.nav-pills .nav-link:active {
  box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.12);
}

/* Disabled consistente */
:disabled, .disabled, [aria-disabled="true"] {
  cursor: not-allowed;
}
.form-control:disabled::placeholder { color: var(--g-text-disabled); }
/* .btn.disabled / .btn:disabled -> glassmorphism-light-buttons.css */

/* Card con foco interno (.card:focus-within) ->
   glassmorphism-light-cards-panels-tables-modals.css */

/* Acento reservado a acciones / estados activos / informacion clave */
.text-primary { color: var(--g-accent-2) !important; }
.bg-primary { background-color: var(--g-accent) !important; }
.border-primary { border-color: var(--g-border-accent) !important; }
.text-success { color: var(--g-success) !important; }
.text-danger { color: var(--g-danger) !important; }
.text-warning { color: var(--g-warning) !important; }
.text-info { color: var(--g-info) !important; }
.bg-success { background-color: var(--g-success-soft) !important; }
.bg-danger { background-color: var(--g-danger-soft) !important; }
.bg-warning { background-color: var(--g-warning-soft) !important; }
.bg-info { background-color: var(--g-info-soft) !important; }
.bg-secondary { background-color: var(--g-secondary-soft) !important; }
.bg-dark { background-color: #1e293b !important; color: #f8fafc !important; }
.bg-light { background-color: var(--g-layer-2) !important; }

/* Divisores y utilidades de borde coherentes con el vidrio */
.border-top, .border-bottom, .border-start, .border-end { border-color: var(--g-hairline) !important; }
.rounded { border-radius: var(--g-radius-sm) !important; }
.rounded-3 { border-radius: var(--g-radius) !important; }
.rounded-4 { border-radius: var(--g-radius-lg) !important; }
.rounded-pill { border-radius: var(--g-radius-pill) !important; }
/* ============================ 13. SCROLLBARS ============================ */
* { scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, 0.22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.20);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--g-radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.30); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: rgba(37, 99, 235, 0.45); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Contenedores con scroll interno (sidebar; tablas y modales ->
   glassmorphism-light-cards-panels-tables-modals.css) */
.page-sidebar, .dropdown-menu, .offcanvas-body, pre {
  scrollbar-color: rgba(15, 23, 42, 0.914) transparent;
  border-radius: 20px;
}

/* ============================ 14. RESPONSIVE ============================ */
/* Responsive de card / kpi / tabla / modal ->
   glassmorphism-light-cards-panels-tables-modals.css */

@media (max-width: 1199.98px) {
  .page-content { padding: 1.6rem; }
  .jumbotron, .hero { padding: 2.5rem 2rem; }
}

@media (max-width: 991.98px) {
  .page-content { padding: 1.25rem; }
  .navbar { border-radius: 0; padding: 0.5rem 1rem; }
  .navbar-collapse {
    background: var(--g-layer-3);
    border: 1px solid var(--g-border-strong);
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow-md), var(--g-highlight);
    padding: 0.9rem;
    margin-top: 0.75rem;
    -webkit-backdrop-filter: var(--g-filter);
    backdrop-filter: var(--g-filter);
  }
  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.35rem; }
  /* Se conserva el ahorro de blur, pero manteniendo saturacion alta: es lo
     que hace visible el color a traves del vidrio en claro. */
  .navbar-collapse, .list-group, .accordion-item, .toast {
    -webkit-backdrop-filter: blur(15px) saturate(190%);
    backdrop-filter: blur(15px) saturate(190%);
  }
  .dropdown-menu, .offcanvas {
    -webkit-backdrop-filter: blur(20px) saturate(195%);
    backdrop-filter: blur(20px) saturate(195%);
  }
  /* .card / .chart-container / .dash-kpi / .kpi-card / .table-responsive /
     .modal-content -> glassmorphism-light-cards-panels-tables-modals.css */
}

@media (max-width: 767.98px) {
  body { font-size: 0.92rem; }
  .page-content { padding: 1rem; }
  .page-header { margin-bottom: 1.25rem; }
  /* card / kpi / tabla / modal (.card-body, .card-header, .card-footer,
     .dash-kpi, .kpi-card, .kpi-value, .table, .chart-container,
     .table-responsive, .modal-dialog, .modal-content) ->
     glassmorphism-light-cards-panels-tables-modals.css */
  /* .btn / .btn-lg -> glassmorphism-light-buttons.css */
  .list-group, .accordion-item, .toast {
    -webkit-backdrop-filter: blur(13px) saturate(185%);
    backdrop-filter: blur(13px) saturate(185%);
  }
  .dropdown-menu, .offcanvas {
    -webkit-backdrop-filter: blur(16px) saturate(190%);
    backdrop-filter: blur(16px) saturate(190%);
  }
  .offcanvas { border-radius: 0; }
  .pagination { flex-wrap: wrap; justify-content: center; }
  .activity-feed { padding-left: 1.25rem; }
  .hero, .jumbotron { padding: 1.9rem 1.4rem; border-radius: var(--g-radius-lg); }
  .login-box-container, .authent-login { padding: 1.6rem 1.25rem; }
  /* Evita el zoom automatico de iOS al enfocar campos */
  .form-control, .form-select { font-size: 16px; }
}

@media (max-width: 575.98px) {
  :root {
    --g-radius-lg: 14px;
    --g-radius-xl: 18px;
  }
  body { font-size: 0.9rem; }
  h1 { font-size: 1.45rem; }
  h2 { font-size: 1.22rem; }
  h3 { font-size: 1.08rem; }
  .page-content { padding: 0.85rem; }
  /* card / kpi / tabla / modal (.card-body, .card, .dash-kpi, .kpi-card,
     .modal-dialog, .table-responsive) ->
     glassmorphism-light-cards-panels-tables-modals.css */
  .dropdown-menu { max-width: calc(100vw - 1.5rem); }
  /* .btn-group -> glassmorphism-light-buttons.css */
  [class*="grid-cols-"] { grid-template-columns: 1fr !important; }
  .gap-6, .gap-7, .gap-8, .gap-10 { gap: 1rem !important; }
  .nav-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .breadcrumb { border-radius: var(--g-radius-sm); font-size: 0.78rem; }
  .error-code { font-size: 3.2rem; }
  .action-bar-contextual { border-radius: var(--g-radius); }
}

/* Optimizacion: menos blur cuando no hay hover/foco (menos coste en GPU):
   .card / .dash-kpi / .kpi-card ->
   glassmorphism-light-cards-panels-tables-modals.css */
/* ==================== 15. ACCESIBILIDAD / REDUCED MOTION ================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  /* .btn:hover -> glassmorphism-light-buttons.css
     .card / .dash-kpi / .kpi-card:hover ->
     glassmorphism-light-cards-panels-tables-modals.css */
  .placeholder { animation: none; background-image: none; background-color: rgba(15, 23, 42, 0.08); }
}

/* Contraste reforzado cuando el sistema lo solicita */
@media (prefers-contrast: more) {
  :root {
    --g-text: #0b1220;
    --g-text-muted: #334155;
    --g-text-soft: #475569;
    --g-text-disabled: #64748b;
    --g-border: rgba(15, 23, 42, 0.30);
    --g-border-strong: rgba(15, 23, 42, 0.42);
    --g-border-soft: rgba(15, 23, 42, 0.20);
    --g-hairline: rgba(15, 23, 42, 0.28);
    --g-layer-0: rgba(255, 255, 255, 0.62);
    --g-layer-1: rgba(255, 255, 255, 0.70);
    --g-layer-2: rgba(255, 255, 255, 0.78);
    --g-layer-3: rgba(255, 255, 255, 0.86);
    --g-layer-4: rgba(255, 255, 255, 0.92);
    --g-accent-2: #1e40af;
  }
  .dropdown-menu, .navbar, .page-sidebar { border-width: 1px; }
  /* .card / .modal-content ->
     glassmorphism-light-cards-panels-tables-modals.css */
  a { text-decoration: underline; text-underline-offset: 3px; }
}

/* Si el sistema esta en modo oscuro, el vidrio claro se mantiene claro:
   se reafirman las capas para que el bloque oscuro de otras hojas no las
   altere. Con class="g-light" en <body> tambien se fuerza el color-scheme. */
body.g-light { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root {
    --g-layer-0: rgba(255, 255, 255, 0.26);
    --g-layer-1: rgba(255, 255, 255, 0.34);
    --g-layer-2: rgba(255, 255, 255, 0.42);
    --g-layer-3: rgba(255, 255, 255, 0.52);
    --g-layer-4: rgba(255, 255, 255, 0.64);
    --g-layer-hover: rgba(255, 255, 255, 0.55);
    --g-solid: rgba(245, 248, 255, 0.90);
    --g-solid-2: rgba(250, 252, 255, 0.95);
    --g-text: #0f172a;
    --g-text-muted: #475569;
    --g-text-soft: #64748b;
    --g-text-disabled: #94a3b8;
    --g-border: rgba(255, 255, 255, 0.60);
    --g-border-strong: rgba(255, 255, 255, 0.85);
    --g-border-soft: rgba(15, 23, 42, 0.06);
    --g-hairline: rgba(15, 23, 42, 0.10);
  }
  body {
    background-color: var(--g-bg);
    background-image:
      radial-gradient(1100px 780px at 8% -12%, rgba(56, 132, 255, 0.42), transparent 62%),
      radial-gradient(900px 620px at 94% 2%, rgba(139, 92, 246, 0.32), transparent 60%),
      radial-gradient(1000px 760px at 50% 116%, rgba(0, 186, 235, 0.32), transparent 64%),
      radial-gradient(720px 520px at 84% 64%, rgba(236, 72, 153, 0.12), transparent 62%),
      linear-gradient(180deg, #f9fbff 0%, #ecf2fd 45%, #e6edfa 100%);
  }
}

/* Impresion: el vidrio claro pasa a papel blanco */
@media print {
  body { background: #fff !important; color: #000; }
  .navbar, .page-sidebar, .footer, .dropdown-menu { display: none !important; }
  /* modal (.modal-backdrop / .modal-content), card, kpi, tabla y
     .chart-container -> glassmorphism-light-cards-panels-tables-modals.css */
  .list-group, .accordion-item {
    background: #fff !important;
    border: 1px solid #d0d0d0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .alert-dark, .alert-dark *, .list-group-item-dark, .badge.bg-dark {
    color: #111 !important; background: #fff !important; border-color: #d0d0d0 !important;
  }
  a, .text-primary, .error-code { color: #1d4ed8 !important; }
}