/* ============================================================
   EVALONIUM — Dual Mode Design System
   Light: Solid white (#F5F7FA) liquid glass + Electric Blue
   Dark:  Blue-black Mozilla elite (#12131E / #1A1A2E)
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --blue:       #2F80FF;
  --blue-glow:  #5DA9FF;
  --text:       #1C2333;
  --smoke:      #F5F7FA;
  --bg:         #E7E9EE;

  --dk-bg1:     #12131E;
  --dk-bg2:     #1A1A2E;
  --dk-blue:    #4DA3FF;
  --dk-silver:  #AAB4C3;
  --dk-text:    #F2F5FA;

  --foto-zoom:  140%;
}

/* ── Reset ──────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   BODY
   ============================================================ */
body {
  font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  background: var(--bg);
  background-attachment: fixed;
  color: var(--text);
}

body.theme-dark {
  background: linear-gradient(160deg, var(--dk-bg1) 0%, var(--dk-bg2) 60%, #1E1D30 100%) !important;
  background-attachment: fixed !important;
  color: var(--dk-text);
}

/* ============================================================
   LIQUID GLASS MIXIN (solid #F5F7FA panels, bevel effect)
   ============================================================ */

/* ── Shared light-mode glass look ───────────────────────────── */
.glass-light {
  background: var(--smoke);
  border-top:    1px solid rgba(255,255,255,1.00);
  border-left:   1px solid rgba(255,255,255,0.85);
  border-right:  1px solid rgba(190,200,220,0.45);
  border-bottom: 1px solid rgba(190,200,220,0.45);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1.00),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    inset 1px 0 0 rgba(255,255,255,0.80),
    inset -1px 0 0 rgba(0,0,0,0.03),
    0 10px 32px rgba(0,0,0,0.07),
    0 2px 8px rgba(0,0,0,0.04);
}

/* ============================================================
   LOGIN CONTAINER
   ============================================================ */
.login-container {
  width: 100%;
  max-width: 400px;
  margin: 90px auto;
  padding: 52px 44px 44px;
  border-radius: 28px;
  text-align: center;
  position: relative;
  overflow: hidden;

  /* Solid white liquid glass */
  background: var(--smoke);
  border-top:    1px solid rgba(255,255,255,1.00);
  border-left:   1px solid rgba(255,255,255,0.85);
  border-right:  1px solid rgba(190,200,220,0.45);
  border-bottom: 1px solid rgba(190,200,220,0.45);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1.00),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    inset 1px 0 0 rgba(255,255,255,0.80),
    inset -1px 0 0 rgba(0,0,0,0.03),
    0 20px 60px rgba(0,0,0,0.09),
    0 4px 16px rgba(0,0,0,0.05);
  color: var(--text);
}

body.theme-dark .login-container {
  background: linear-gradient(160deg, rgba(28,29,48,0.97) 0%, rgba(18,19,30,0.98) 100%);
  border-top:    1px solid rgba(77,163,255,0.25);
  border-left:   1px solid rgba(77,163,255,0.14);
  border-right:  1px solid rgba(0,0,0,0.40);
  border-bottom: 1px solid rgba(0,0,0,0.40);
  box-shadow:
    inset 0 1px 0 rgba(77,163,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 24px 70px rgba(0,0,0,0.60),
    0 0 40px rgba(77,163,255,0.07);
  color: var(--dk-text);
}

/* Arco especular */
.login-container::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,1.00) 30%,
    rgba(255,255,255,1.00) 70%,
    transparent);
  border-radius: 0 0 50% 50%;
  pointer-events: none;
}

.login-logo { margin-bottom: 10px; position: relative; z-index: 1; }

.login-container h2 {
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0.4px;
  margin-bottom: 28px;
  position: relative; z-index: 1;
  color: var(--text);
}
body.theme-dark .login-container h2 { color: var(--dk-text); }

.input-group { margin-bottom: 14px; position: relative; z-index: 1; }

/* ── Inputs — Light ─────────────────────────────────────────── */
.login-container input {
  width: 100%;
  padding: 14px 20px;
  border-radius: 50px;
  outline: none;
  font-size: 15px;
  font-family: inherit;
  transition: all 0.22s ease;
  color: var(--text);
  caret-color: var(--blue);

  background: #ECEEF3;
  border-top:    1px solid rgba(255,255,255,0.95);
  border-left:   1px solid rgba(255,255,255,0.70);
  border-right:  1px solid rgba(170,180,205,0.35);
  border-bottom: 1px solid rgba(170,180,205,0.35);
  box-shadow:
    inset 0 1px 4px rgba(0,0,0,0.07),
    inset 0 -1px 0 rgba(255,255,255,0.90),
    0 1px 0 rgba(255,255,255,0.95);
}
.login-container input::placeholder { color: rgba(28,35,51,0.38); }
.login-container input:focus {
  background: #FFFFFF;
  border-top-color: rgba(47,128,255,0.50);
  border-left-color: rgba(47,128,255,0.30);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.04),
    inset 0 -1px 0 rgba(255,255,255,0.95),
    0 0 0 3px rgba(47,128,255,0.14);
  transform: translateY(-1px);
}

/* ── Inputs — Dark ──────────────────────────────────────────── */
body.theme-dark .login-container input {
  color: var(--dk-text);
  caret-color: var(--dk-blue);
  background: rgba(10,11,22,0.65);
  border-top:    1px solid rgba(77,163,255,0.22);
  border-left:   1px solid rgba(77,163,255,0.13);
  border-right:  1px solid rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(0,0,0,0.35);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.32),
    inset 0 -1px 0 rgba(77,163,255,0.08);
}
body.theme-dark .login-container input::placeholder { color: rgba(170,180,195,0.42); }
body.theme-dark .login-container input:focus {
  background: rgba(14,15,28,0.82);
  border-top-color: rgba(77,163,255,0.52);
  border-left-color: rgba(77,163,255,0.32);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.38),
    inset 0 -1px 0 rgba(77,163,255,0.12),
    0 0 0 3px rgba(77,163,255,0.13);
  transform: translateY(-1px);
}

/* ── Botón principal — Blue Crystal (Light + Dark mismo estilo) ── */
.login-container button,
body.theme-dark .login-container button {
  width: 100%;
  padding: 14px;
  margin-top: 10px;
  border-radius: 50px;
  border: none;
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.20s ease;
  position: relative; z-index: 1;

  background: linear-gradient(160deg, #5DA9FF 0%, #2F80FF 45%, #1a6aee 100%);
  border-top:    1px solid rgba(255,255,255,0.55);
  border-left:   1px solid rgba(255,255,255,0.30);
  border-right:  1px solid rgba(20,80,200,0.25);
  border-bottom: 1px solid rgba(20,80,200,0.25);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.60),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 18px rgba(47,128,255,0.40),
    0 1px 4px rgba(47,128,255,0.25);
  text-shadow: 0 1px 3px rgba(0,50,160,0.30);
}
.login-container button:hover:not(:disabled),
body.theme-dark .login-container button:hover:not(:disabled) {
  background: linear-gradient(160deg, #70b8ff 0%, #4090ff 45%, #2575f0 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.70),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 8px 28px rgba(93,169,255,0.55),
    0 2px 8px rgba(47,128,255,0.35);
}
.login-container button:active:not(:disabled),
body.theme-dark .login-container button:active:not(:disabled) {
  transform: translateY(1px);
  background: linear-gradient(160deg, #1a6aee 0%, #2F80FF 100%);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(0,0,0,0.12),
    inset 0 -1px 0 rgba(255,255,255,0.20),
    0 2px 8px rgba(47,128,255,0.25);
}
.login-container button:disabled { cursor: not-allowed; opacity: 0.55; }
.login-container button.loading {
  background: linear-gradient(160deg, #4090ff 0%, #2575f0 100%);
}

/* ── Loader ─────────────────────────────────────────────────── */
.loader {
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,0.28);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px;
  position: sticky;
  top: 0;
  z-index: 500;

  /* Solid white smoke */
  background: var(--smoke);
  border-bottom: 1px solid rgba(190,200,220,0.55);
  box-shadow:
    inset 0 -1px 0 rgba(190,200,220,0.40),
    inset 0 1px 0 rgba(255,255,255,1.00),
    0 2px 20px rgba(0,0,0,0.06);
  color: var(--text);
}

body.theme-dark .topbar {
  background: linear-gradient(160deg, rgba(28,29,48,0.97) 0%, rgba(18,19,30,0.95) 100%);
  border-bottom: 1px solid rgba(77,163,255,0.14);
  box-shadow:
    inset 0 -1px 0 rgba(77,163,255,0.10),
    inset 0 1px 0 rgba(77,163,255,0.08),
    0 4px 24px rgba(0,0,0,0.45);
  color: var(--dk-text);
}

.topbar-logo img { height: 64px; }

/* ============================================================
   PERFIL / DROPDOWN
   ============================================================ */
.profile {
  position: relative;
  display: flex; align-items: center;
  gap: 12px; cursor: pointer;
  padding: 8px 14px; border-radius: 50px;
  transition: all 0.2s ease;
  color: var(--text);
}
body.theme-dark .profile { color: var(--dk-text); }

.profile:hover {
  background: rgba(47,128,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.80);
}
body.theme-dark .profile:hover {
  background: rgba(77,163,255,0.08);
  box-shadow: inset 0 1px 0 rgba(77,163,255,0.15);
}

.profile-text  { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.profile-welcome { font-size: 14px; opacity: 0.60; font-weight: 400; }
.profile-name    { font-size: 18px; font-weight: 300; }

.foto-avatar-wrap {
  width: 65px; height: 65px;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border-top:    1px solid rgba(255,255,255,0.95);
  border-left:   1px solid rgba(255,255,255,0.70);
  border-right:  1px solid rgba(180,190,210,0.28);
  border-bottom: 1px solid rgba(180,190,210,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 3px 12px rgba(0,0,0,0.09);
  display: flex; align-items: center; justify-content: center;
}
body.theme-dark .foto-avatar-wrap {
  border-top-color:    rgba(77,163,255,0.30);
  border-left-color:   rgba(77,163,255,0.18);
  border-right-color:  rgba(0,0,0,0.35);
  border-bottom-color: rgba(0,0,0,0.35);
  box-shadow:
    inset 0 1px 0 rgba(77,163,255,0.22),
    0 3px 12px rgba(0,0,0,0.40);
}
.foto-avatar-wrap img {
  width: var(--foto-zoom, 140%); height: var(--foto-zoom, 140%);
  object-fit: cover; object-position: center; flex-shrink: 0;
}

.profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px); right: 0;
  border-radius: 16px; min-width: 200px;
  z-index: 9999; overflow: hidden;

  /* Solid white dropdown */
  background: var(--smoke);
  border-top:    1px solid rgba(255,255,255,1.00);
  border-left:   1px solid rgba(255,255,255,0.85);
  border-right:  1px solid rgba(190,200,220,0.50);
  border-bottom: 1px solid rgba(190,200,220,0.50);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.06);
  color: var(--text);
}
body.theme-dark .profile-dropdown {
  background: linear-gradient(160deg, rgba(28,29,48,0.99) 0%, rgba(18,19,30,0.99) 100%);
  border: 1px solid rgba(77,163,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(77,163,255,0.12),
    0 16px 50px rgba(0,0,0,0.65),
    0 0 24px rgba(77,163,255,0.06);
  color: var(--dk-text);
}

.profile-dropdown.show { display: block; animation: dropdownFadeIn 0.2s ease; }

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.profile-dropdown-item {
  padding: 13px 20px; cursor: pointer;
  transition: background 0.16s;
  display: flex; align-items: center; gap: 10px; font-size: 14px;
  color: var(--text);
}
body.theme-dark .profile-dropdown-item { color: var(--dk-text); }
.profile-dropdown-item:hover { background: rgba(47,128,255,0.08); color: var(--blue); }
body.theme-dark .profile-dropdown-item:hover { background: rgba(77,163,255,0.08); color: var(--dk-blue); }

/* ============================================================
   BUSCADOR
   ============================================================ */
.search {
  width: 100%; max-width: 520px;
  margin: 48px auto; display: block;
  padding: 13px 26px; border-radius: 50px;
  outline: none;
  font-size: 15px; font-family: inherit;
  transition: all 0.22s ease;
  color: var(--text);
  caret-color: var(--blue);

  /* Solid white input */
  background: #FFFFFF;
  border-top:    1px solid rgba(255,255,255,1.00);
  border-left:   1px solid rgba(255,255,255,0.80);
  border-right:  1px solid rgba(170,180,205,0.35);
  border-bottom: 1px solid rgba(170,180,205,0.35);
  box-shadow:
    inset 0 1px 4px rgba(0,0,0,0.06),
    inset 0 -1px 0 rgba(255,255,255,0.95),
    0 2px 12px rgba(0,0,0,0.05);
}
.search::placeholder { color: rgba(28,35,51,0.36); }
.search:focus {
  background: #FFFFFF;
  border-top-color: rgba(47,128,255,0.45);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.04),
    inset 0 -1px 0 rgba(255,255,255,1.00),
    0 0 0 3px rgba(47,128,255,0.12),
    0 4px 16px rgba(0,0,0,0.07);
  transform: scale(1.01);
}

body.theme-dark .search {
  color: var(--dk-text);
  caret-color: var(--dk-blue);
  background: rgba(10,11,22,0.60);
  border-top:    1px solid rgba(77,163,255,0.20);
  border-left:   1px solid rgba(77,163,255,0.12);
  border-right:  1px solid rgba(0,0,0,0.28);
  border-bottom: 1px solid rgba(0,0,0,0.28);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.30),
    inset 0 -1px 0 rgba(77,163,255,0.06);
}
body.theme-dark .search::placeholder { color: rgba(170,180,195,0.40); }
body.theme-dark .search:focus {
  background: rgba(14,15,28,0.75);
  border-top-color: rgba(77,163,255,0.45);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.32),
    0 0 0 3px rgba(77,163,255,0.10),
    0 4px 20px rgba(0,0,0,0.30);
}

/* ============================================================
   GRID DE MÓDULOS
   ============================================================ */
.apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 50px 28px;
  max-width: 800px;
  margin: 20px auto 60px;
  justify-items: center;
  padding: 56px 20px;
}

.app-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  width: 120px; cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.app-item:hover  { transform: translateY(-6px) scale(1.04); }
.app-item:active { transform: scale(0.94); }

/* ── App Card — Light: solid white liquid glass ─────────────── */
.app-card {
  width: 108px; height: 108px;
  border-radius: 28px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.22s ease;
  position: relative; overflow: hidden;

  background: linear-gradient(160deg, #FFFFFF 0%, var(--smoke) 100%);
  border-top:    1px solid rgba(255,255,255,1.00);
  border-left:   1px solid rgba(255,255,255,0.85);
  border-right:  1px solid rgba(190,200,220,0.42);
  border-bottom: 1px solid rgba(190,200,220,0.42);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1.00),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    inset 1px 0 0 rgba(255,255,255,0.80),
    inset -1px 0 0 rgba(0,0,0,0.02),
    0 10px 32px rgba(0,0,0,0.07),
    0 2px 8px rgba(0,0,0,0.04);
}

/* Arco especular */
.app-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,1.00) 30%,
    rgba(255,255,255,1.00) 70%,
    transparent);
  border-radius: 0 0 50% 50%;
  pointer-events: none; z-index: 2;
}

.app-item:hover .app-card {
  background: linear-gradient(160deg, #FFFFFF 0%, #EBF2FF 100%);
  border-top-color:   rgba(47,128,255,0.28);
  border-left-color:  rgba(47,128,255,0.16);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1.00),
    inset 0 -1px 0 rgba(47,128,255,0.06),
    inset 1px 0 0 rgba(255,255,255,0.85),
    inset -1px 0 0 rgba(47,128,255,0.04),
    0 14px 44px rgba(47,128,255,0.14),
    0 4px 14px rgba(47,128,255,0.08);
}

/* ── App Card — Dark: translucent blue-black crystal ─────────── */
body.theme-dark .app-card {
  background: linear-gradient(160deg,
    rgba(36,38,62,0.90) 0%,
    rgba(24,25,46,0.82) 50%,
    rgba(18,19,30,0.74) 100%);
  border-top:    1px solid rgba(77,163,255,0.22);
  border-left:   1px solid rgba(77,163,255,0.12);
  border-right:  1px solid rgba(0,0,0,0.40);
  border-bottom: 1px solid rgba(0,0,0,0.40);
  box-shadow:
    inset 0 1px 0 rgba(77,163,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.50),
    inset 1px 0 0 rgba(77,163,255,0.08),
    inset -1px 0 0 rgba(0,0,0,0.22),
    0 12px 40px rgba(0,0,0,0.55),
    0 0 20px rgba(77,163,255,0.05);
}

body.theme-dark .app-item:hover .app-card {
  background: linear-gradient(160deg,
    rgba(42,44,72,0.96) 0%,
    rgba(30,31,56,0.90) 100%);
  border-top-color:  rgba(77,163,255,0.45);
  border-left-color: rgba(77,163,255,0.25);
  box-shadow:
    inset 0 1.5px 0 rgba(77,163,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    inset 2px 0 0 rgba(77,163,255,0.18),
    inset -2px 0 0 rgba(77,163,255,0.08),
    0 18px 55px rgba(0,0,0,0.65),
    0 0 30px rgba(77,163,255,0.12);
}

.icon-wrapper {
  width: 68px; height: 68px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 3;
}

.app-icon {
  width: 66px; height: 66px;
  object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12));
}

/* ── App Title ───────────────────────────────────────────────── */
.app-title {
  font-size: 13px; font-weight: 600;
  text-align: center;
  width: 100%; line-height: 1.3;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(255,255,255,0.80);
}
body.theme-dark .app-title {
  color: var(--dk-silver);
  text-shadow: none;
}

/* ============================================================
   MÓDULO CONTENT
   ============================================================ */
#moduloView { min-height: 100vh; animation: fadeIn 0.35s ease; }
#contenido  { padding: 30px; color: var(--text); }
body.theme-dark #contenido { color: var(--dk-text); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SPLASH
   ============================================================ */
#app-splash {
  position: fixed; inset: 0; z-index: 8000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
body.theme-dark #app-splash { background: var(--dk-bg1); }
#app-splash.splash-hide { opacity: 0; visibility: hidden; pointer-events: none; }

.splash-logo { height: 72px; margin-bottom: 32px; opacity: 0; animation: splashLogoIn 0.5s ease 0.1s both; }
.splash-spinner {
  width: 36px; height: 36px;
  border: 2.5px solid rgba(47,128,255,0.18);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}
.splash-text {
  margin-top: 16px; font-size: 13px;
  color: rgba(28,35,51,0.42); letter-spacing: 0.06em;
  animation: splashLogoIn 0.5s ease 0.2s both;
}
body.theme-dark .splash-text { color: rgba(170,180,195,0.45); }

@keyframes splashLogoIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   BOTÓN REGRESAR — Blue Crystal en ambos modos
   ============================================================ */
.btn-regresar {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 50px;
  padding: 9px 18px 9px 14px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: all 0.20s ease;
  border: none;

  /* Blue crystal — igual en light y dark */
  color: white;
  background: linear-gradient(160deg, #5DA9FF 0%, #2F80FF 50%, #1a6aee 100%);
  border-top:    1px solid rgba(255,255,255,0.55);
  border-left:   1px solid rgba(255,255,255,0.28);
  border-right:  1px solid rgba(20,80,200,0.22);
  border-bottom: 1px solid rgba(20,80,200,0.22);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.60),
    inset 0 -1px 0 rgba(0,0,0,0.16),
    0 4px 16px rgba(47,128,255,0.38),
    0 1px 4px rgba(47,128,255,0.22);
  text-shadow: 0 1px 3px rgba(0,50,160,0.30);
}
.btn-regresar:hover {
  background: linear-gradient(160deg, #70b8ff 0%, #4090ff 50%, #2575f0 100%);
  transform: translateX(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.70),
    inset 0 -1px 0 rgba(0,0,0,0.16),
    0 6px 24px rgba(93,169,255,0.52),
    0 2px 8px rgba(47,128,255,0.30);
}
.btn-regresar:active {
  transform: translateX(0) translateY(1px);
  background: linear-gradient(160deg, #1a6aee 0%, #2F80FF 100%);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.20),
    0 2px 8px rgba(47,128,255,0.20);
}

/* Dark mode: misma esencia blue crystal */
body.theme-dark .btn-regresar {
  background: linear-gradient(160deg, #5DA9FF 0%, #2F80FF 50%, #1a6aee 100%);
  color: white;
  text-shadow: 0 1px 3px rgba(0,50,160,0.30);
}
body.theme-dark .btn-regresar:hover {
  background: linear-gradient(160deg, #70b8ff 0%, #4090ff 50%, #2575f0 100%);
  transform: translateX(-2px);
}
body.theme-dark .btn-regresar:active {
  background: linear-gradient(160deg, #1a6aee 0%, #2F80FF 100%);
  transform: translateX(0) translateY(1px);
}

.btn-regresar svg { flex-shrink: 0; transition: transform 0.2s; }
.btn-regresar:hover svg { transform: translateX(-2px); }

/* ============================================================
   BOTONES UNIVERSALES — Blue Crystal en TODOS los modos
   Aplica a btn-regresar y todos los botones de módulos
   ============================================================ */

/* Mixin blue crystal reutilizable como clase de apoyo */
.btn-regresar,
.eval-btn,
.cfg-btn:not(.peligro):not(.secundario),
.ned-btn-nuevo,
.ned-btn-form.primario,
.ned-btn-form.secundario,
.nfb-btn-nuevo,
.nfb-btn-form.primario,
.nfb-btn-form.secundario,
.emp-btn-nuevo,
.emp-btn-back,
.btn-guardar,
.dev-btn:not(.peligro):not(.cancelar) {
  color: white !important;
  background: linear-gradient(160deg, #5DA9FF 0%, #2F80FF 50%, #1a6aee 100%) !important;
  border-radius: 50px !important;
  border-top:    1px solid rgba(255,255,255,0.55) !important;
  border-left:   1px solid rgba(255,255,255,0.28) !important;
  border-right:  1px solid rgba(20,80,200,0.22) !important;
  border-bottom: 1px solid rgba(20,80,200,0.22) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.60),
    inset 0 -1px 0 rgba(0,0,0,0.16),
    0 4px 16px rgba(47,128,255,0.38),
    0 1px 4px rgba(47,128,255,0.22) !important;
  text-shadow: 0 1px 3px rgba(0,50,160,0.30) !important;
  transition: all 0.20s ease !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
.btn-regresar:hover,
.eval-btn:hover:not(:disabled),
.cfg-btn:not(.peligro):not(.secundario):hover:not(:disabled),
.ned-btn-nuevo:hover,
.ned-btn-form.primario:hover:not(:disabled),
.ned-btn-form.secundario:hover:not(:disabled),
.nfb-btn-nuevo:hover,
.nfb-btn-form.primario:hover:not(:disabled),
.nfb-btn-form.secundario:hover:not(:disabled),
.emp-btn-nuevo:hover,
.emp-btn-back:hover,
.btn-guardar:hover:not(:disabled),
.dev-btn:not(.peligro):not(.cancelar):hover:not(:disabled) {
  background: linear-gradient(160deg, #70b8ff 0%, #4090ff 50%, #2575f0 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.70),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 8px 28px rgba(93,169,255,0.55),
    0 2px 8px rgba(47,128,255,0.35) !important;
}
.btn-regresar:hover { transform: translateX(-2px) !important; }

.eval-btn:active:not(:disabled),
.cfg-btn:not(.peligro):not(.secundario):active:not(:disabled),
.ned-btn-form.primario:active:not(:disabled),
.nfb-btn-form.primario:active:not(:disabled),
.btn-guardar:active:not(:disabled),
.dev-btn:not(.peligro):not(.cancelar):active:not(:disabled) {
  transform: translateY(1px) !important;
  background: linear-gradient(160deg, #1a6aee 0%, #2F80FF 100%) !important;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.25),
    inset 0 -1px 0 rgba(255,255,255,0.20),
    0 2px 8px rgba(47,128,255,0.20) !important;
}

/* Botones desactivados */
.eval-btn:disabled,
.ned-btn-form:disabled,
.nfb-btn-form:disabled,
.btn-guardar:disabled,
.dev-btn:disabled,
.cfg-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Secundario / cancelar: vidrio neutro */
.ned-btn-form.secundario,
.nfb-btn-form.secundario {
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body:not(.theme-dark) .ned-btn-form.secundario,
body:not(.theme-dark) .nfb-btn-form.secundario {
  background: rgba(0,0,0,0.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(190,200,220,0.65) !important;
  text-shadow: none !important;
}

/* ── Texto negro: sólo a los contenedores de módulo, no globalmente ── */
body:not(.theme-dark) #contenido,
body:not(.theme-dark) #moduloContenido {
  color: var(--text);
}

/* ============================================================
   ANIMACIONES
   ============================================================ */
.login-fadeout { animation: loginOut 0.28s ease forwards; pointer-events: none; }
@keyframes loginOut { to { opacity: 0; transform: scale(0.97); } }

@keyframes appItemIn {
  from { opacity: 0; transform: translateY(18px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.app-item { animation: appItemIn 0.40s cubic-bezier(0.22,0.61,0.36,1) both; }

/* ============================================================
   CARGADOR DE MÓDULO
   ============================================================ */
.modulo-loader {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 280px; gap: 16px;
  animation: fadeIn 0.25s ease;
}
.modulo-spinner {
  width: 44px; height: 44px;
  border: 2.5px solid rgba(47,128,255,0.15);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
body.theme-dark .modulo-spinner { border-top-color: var(--dk-blue); }
.modulo-loader-text {
  font-size: 13px;
  color: rgba(28,35,51,0.40);
  letter-spacing: 0.06em;
}
body.theme-dark .modulo-loader-text { color: rgba(170,180,195,0.40); }
#moduloContenido > *:first-child { animation: fadeIn 0.35s ease; }

/* ============================================================
   MISC
   ============================================================ */
.hidden { display: none !important; }
/* select options: dark by default, overridden per-mode below */
select option { background: #1e2535; color: white; }
body:not(.theme-dark) select option { background: #FFFFFF !important; color: var(--text) !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .topbar { padding: 10px 14px; gap: 8px; }
  .topbar-logo img { height: 44px; }
  .search { display: none; }
  .profile { padding: 6px 10px; gap: 8px; }
  .profile-text { display: none; }
  .foto-avatar-wrap { width: 44px; height: 44px; }
  .profile-dropdown { right: 0; min-width: 170px; }
  .apps { grid-template-columns: repeat(3, 1fr); gap: 28px 12px; padding: 28px 12px; max-width: 100%; }
  .app-item { width: 90px; }
  .app-card { width: 76px; height: 76px; border-radius: 22px; }
  .app-icon { width: 48px; height: 48px; }
  .app-title { font-size: 11px; }
  .login-container { margin: 40px 16px; padding: 36px 20px; }
  #moduloContenido { padding: 16px 12px; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .topbar-logo img { height: 54px; }
  .profile-text { display: none; }
  .apps { grid-template-columns: repeat(4, 1fr); gap: 36px 16px; padding: 40px 20px; }
}

@media (hover: hover) { .app-card:hover { transform: scale(1.04); } }

/* ============================================================
   MÓDULOS — Glass bevel + corrección de texto (light / dark)
   ============================================================ */

:root { --mod-accent: #1565C0; --mod-accent2: #1976D2; }

/* Texto global de wraps de módulo en modo claro */
body:not(.theme-dark) #eval-wrap,
body:not(.theme-dark) #mp-wrap,
body:not(.theme-dark) #rep-wrap,
body:not(.theme-dark) #seg-wrap,
body:not(.theme-dark) #fb-wrap,
body:not(.theme-dark) #nfb-wrap,
body:not(.theme-dark) #emp-wrap,
body:not(.theme-dark) #ned-wrap,
body:not(.theme-dark) #cfg-wrap,
body:not(.theme-dark) #dev-wrap { color: var(--text) !important; }

/* LIGHT: glass bevel sólido en todos los containers de módulos */
body:not(.theme-dark) .eval-card,
body:not(.theme-dark) #mp-container,
body:not(.theme-dark) .rep-glass,
body:not(.theme-dark) .seg-card,
body:not(.theme-dark) #seg-tabla-wrap,
body:not(.theme-dark) #fb-container,
body:not(.theme-dark) .fb-card,
body:not(.theme-dark) #nfb-form-wrap,
body:not(.theme-dark) #emp-tabla-wrap,
body:not(.theme-dark) #ned-tabla-wrap,
body:not(.theme-dark) .cfg-card,
body:not(.theme-dark) .pesos-col,
body:not(.theme-dark) .dev-card {
  background: var(--smoke) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top:    1px solid rgba(255,255,255,1.00) !important;
  border-left:   1px solid rgba(255,255,255,0.85) !important;
  border-right:  1px solid rgba(190,200,220,0.45) !important;
  border-bottom: 1px solid rgba(190,200,220,0.45) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,1.00),
    inset 0 -1px 0 rgba(0,0,0,0.05),
    0 10px 36px rgba(0,0,0,0.07),
    0 2px 8px rgba(0,0,0,0.04) !important;
  color: var(--text) !important;
}

/* DARK: glass bevel azul-negro en todos los containers */
body.theme-dark .eval-card,
body.theme-dark #mp-container,
body.theme-dark .rep-glass,
body.theme-dark .seg-card,
body.theme-dark #seg-tabla-wrap,
body.theme-dark #fb-container,
body.theme-dark .fb-card,
body.theme-dark #nfb-form-wrap,
body.theme-dark #emp-tabla-wrap,
body.theme-dark #ned-tabla-wrap,
body.theme-dark .cfg-card,
body.theme-dark .pesos-col,
body.theme-dark .dev-card {
  background: linear-gradient(160deg, rgba(36,38,62,0.90) 0%, rgba(24,25,46,0.82) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top:    1px solid rgba(77,163,255,0.24) !important;
  border-left:   1px solid rgba(77,163,255,0.13) !important;
  border-right:  1px solid rgba(0,0,0,0.42) !important;
  border-bottom: 1px solid rgba(0,0,0,0.42) !important;
  box-shadow: inset 0 1px 0 rgba(77,163,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.48),
    0 12px 40px rgba(0,0,0,0.52),
    0 0 22px rgba(77,163,255,0.05) !important;
  color: var(--dk-text) !important;
}

/* Banner evaluaciones SIEMPRE blanco (fondo azul oscuro) */
.eval-banner-covix {
  background: linear-gradient(135deg, #0d2644 0%, var(--mod-accent) 55%, var(--mod-accent2) 100%) !important;
}
.eval-banner-titulo { color: white !important; }
.eval-banner-sub    { color: rgba(144,202,249,0.90) !important; }
.eval-banner-tag    { color: white !important; }
.eval-banner-covix * { color: white !important; }

/* rep-reporte: siempre blanco sólido */
body:not(.theme-dark) #rep-reporte {
  background: #FFFFFF !important;
  color: #333 !important;
}
body.theme-dark #rep-reporte {
  background: rgba(28,30,50,0.98) !important;
  color: var(--dk-text) !important;
}

/* Chips / tabs de reportes en modo claro */
body:not(.theme-dark) .rep-tab {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(190,200,220,0.65) !important;
  color: var(--text) !important;
}
body:not(.theme-dark) .rep-tab:hover {
  background: rgba(47,128,255,0.08) !important;
  color: var(--blue) !important;
}
body:not(.theme-dark) .rep-tab.activo {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: white !important;
}

/* Tablas internas — modo claro */
body:not(.theme-dark) #seg-tabla-wrap table thead tr,
body:not(.theme-dark) #emp-tabla-wrap table thead tr,
body:not(.theme-dark) #ned-tabla-wrap table thead tr,
body:not(.theme-dark) #rep-tablaComp thead tr,
body:not(.theme-dark) #mp-detalle-tabla thead tr {
  background: var(--mod-accent) !important;
}
body:not(.theme-dark) #seg-tabla-wrap table th,
body:not(.theme-dark) #emp-tabla-wrap table th,
body:not(.theme-dark) #ned-tabla-wrap table th,
body:not(.theme-dark) #rep-tablaComp th,
body:not(.theme-dark) #mp-detalle-tabla th { color: white !important; }
body:not(.theme-dark) #seg-tabla-wrap table td,
body:not(.theme-dark) #emp-tabla-wrap table td,
body:not(.theme-dark) #ned-tabla-wrap table td,
body:not(.theme-dark) #rep-tablaComp td,
body:not(.theme-dark) #mp-detalle-tabla td,
body:not(.theme-dark) .mp-hist-tabla td {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border-bottom-color: rgba(190,200,220,0.35) !important;
}
body:not(.theme-dark) #seg-tabla-wrap table tbody tr:hover td,
body:not(.theme-dark) #emp-tabla-wrap table tbody tr:hover td,
body:not(.theme-dark) #ned-tabla-wrap table tbody tr:hover td {
  background: rgba(47,128,255,0.04) !important;
}

/* Select inputs en modo claro */
body:not(.theme-dark) .dev-bd-select,
body:not(.theme-dark) .rep-nav select {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(190,200,220,0.65) !important;
  color: var(--text) !important;
}

/* Mi Perfil */
body:not(.theme-dark) .mp-hist-header { background: var(--mod-accent) !important; color: white !important; }
body:not(.theme-dark) .mp-hist-badge  { background: rgba(255,255,255,0.25) !important; color: white !important; }
body:not(.theme-dark) .mp-hist-tabla td:last-child { color: var(--mod-accent) !important; }
body:not(.theme-dark) .mp-hist-comentario { background: rgba(0,0,0,0.03) !important; color: rgba(28,35,51,0.55) !important; }
body:not(.theme-dark) .mp-info h2 { color: var(--text) !important; }
body:not(.theme-dark) .mp-info p  { color: rgba(28,35,51,0.65) !important; }
body:not(.theme-dark) .mp-prog-wrap  { background: rgba(0,0,0,0.09) !important; }
body:not(.theme-dark) .mp-prog-label { color: white !important; }

/* Evaluaciones interiores en modo claro */
body:not(.theme-dark) .eval-perfil-info h3  { color: var(--mod-accent) !important; }
body:not(.theme-dark) .eval-pregunta-bloque { background: #F0F4FA !important; border-left-color: var(--mod-accent) !important; }
body:not(.theme-dark) .eval-pregunta-bloque p { color: var(--text) !important; }
body:not(.theme-dark) .eval-restantes-badge { background: rgba(21,101,192,0.08) !important; color: var(--mod-accent) !important; }
body:not(.theme-dark) #eval-comentarios { background: #FFFFFF !important; color: var(--text) !important; border-color: rgba(190,200,220,0.60) !important; }
body:not(.theme-dark) .eval-final-msg h3 { color: var(--mod-accent) !important; }
body:not(.theme-dark) .eval-final-msg p  { color: rgba(28,35,51,0.65) !important; }
body:not(.theme-dark) .eval-progress-container { background: rgba(0,0,0,0.10) !important; }
body:not(.theme-dark) .eval-progress-text { color: var(--text) !important; }

/* Developer panel — modo claro */
body:not(.theme-dark) .dev-section-title   { color: rgba(28,35,51,0.38) !important; }
body:not(.theme-dark) .dev-card h3          { color: var(--text) !important; }
body:not(.theme-dark) .dev-card p           { color: rgba(28,35,51,0.65) !important; }
body:not(.theme-dark) .dev-info-item        { color: rgba(28,35,51,0.75) !important; }
body:not(.theme-dark) .dev-info-item strong { color: rgba(28,35,51,0.40) !important; }
body:not(.theme-dark) .dev-table th         { color: rgba(28,35,51,0.45) !important; }
body:not(.theme-dark) .dev-table td         { color: var(--text) !important; border-top-color: rgba(190,200,220,0.28) !important; }
body:not(.theme-dark) .dev-table tr:hover td { background: rgba(47,128,255,0.04) !important; }
body:not(.theme-dark) .dev-sesion-info       { color: var(--text) !important; }
body:not(.theme-dark) .dev-sesion-info span  { color: rgba(28,35,51,0.48) !important; }
body:not(.theme-dark) .dev-sesion-row        { border-top-color: rgba(190,200,220,0.28) !important; }
body:not(.theme-dark) .dev-empty             { color: rgba(28,35,51,0.35) !important; }
body:not(.theme-dark) .dev-input { background: rgba(0,0,0,0.04) !important; border-color: rgba(190,200,220,0.65) !important; color: var(--text) !important; }
body:not(.theme-dark) .dev-input::placeholder { color: rgba(28,35,51,0.33) !important; }

/* Visor BD en modo claro */
body:not(.theme-dark) #dev-bd-wrap  { border-color: rgba(190,200,220,0.50) !important; }
body:not(.theme-dark) #dev-bd-tabla thead tr { background: var(--mod-accent) !important; }
body:not(.theme-dark) #dev-bd-tabla th { color: white !important; }
body:not(.theme-dark) #dev-bd-tabla td { background: #FFFFFF !important; color: var(--text) !important; border-top-color: rgba(190,200,220,0.22) !important; }
body:not(.theme-dark) #dev-bd-tabla tbody tr:hover td { background: rgba(47,128,255,0.04) !important; }
body:not(.theme-dark) .dev-bd-select { background: rgba(0,0,0,0.04) !important; border-color: rgba(190,200,220,0.65) !important; color: var(--text) !important; }
body:not(.theme-dark) .dev-bd-pg { color: rgba(28,35,51,0.55) !important; }
body:not(.theme-dark) .dev-bd-pg button { background: rgba(0,0,0,0.05) !important; border-color: rgba(190,200,220,0.55) !important; color: var(--text) !important; }
body:not(.theme-dark) .dev-bd-pg button:not(:disabled):hover { background: rgba(47,128,255,0.08) !important; }
body:not(.theme-dark) .dev-bd-pill { background: rgba(21,101,192,0.12) !important; color: var(--mod-accent) !important; }
body:not(.theme-dark) #dev-bd-info { color: rgba(28,35,51,0.48) !important; }

/* Panel tema — modo claro */
body:not(.theme-dark) .dev-tema-label { color: rgba(28,35,51,0.75) !important; }
body:not(.theme-dark) .dev-tema-fila  { border-top-color: rgba(190,200,220,0.30) !important; }
body:not(.theme-dark) .dev-tema-hex   { background: rgba(0,0,0,0.04) !important; border-color: rgba(190,200,220,0.55) !important; color: var(--text) !important; }

/* Badges en modo claro */
body:not(.theme-dark) .dev-badge.ok   { background: rgba(76,175,80,0.12)  !important; color: #2e7d32 !important; }
body:not(.theme-dark) .dev-badge.warn { background: rgba(255,152,0,0.12)  !important; color: #e65100 !important; }
body:not(.theme-dark) .dev-badge.bad  { background: rgba(244,67,54,0.12)  !important; color: #c62828 !important; }

/* Danger/cancel buttons — ambos modos */
.dev-btn.peligro,
body.theme-dark .dev-btn.peligro {
  background: rgba(180,30,30,0.80) !important;
  color: #ffcdd2 !important;
  border-color: rgba(244,67,54,0.55) !important;
  box-shadow: none !important; text-shadow: none !important;
}
body:not(.theme-dark) .dev-btn.peligro {
  background: rgba(211,47,47,0.10) !important;
  color: #c62828 !important;
  border-color: rgba(211,47,47,0.40) !important;
}
body.theme-dark .dev-btn.cancelar {
  background: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.70) !important;
  border-color: rgba(255,255,255,0.20) !important;
  box-shadow: none !important;
}
body:not(.theme-dark) .dev-btn.cancelar {
  background: rgba(0,0,0,0.05) !important;
  color: rgba(28,35,51,0.65) !important;
  border-color: rgba(190,200,220,0.65) !important;
  box-shadow: none !important;
}

/* Status messages en modo claro */
body:not(.theme-dark) .dev-status       { background: rgba(76,175,80,0.10)  !important; border-color: rgba(76,175,80,0.35)  !important; color: #2e7d32 !important; }
body:not(.theme-dark) .dev-status.error { background: rgba(244,67,54,0.10)  !important; border-color: rgba(244,67,54,0.35)  !important; color: #c62828 !important; }
body:not(.theme-dark) .dev-status.warn  { background: rgba(255,152,0,0.10)  !important; border-color: rgba(255,152,0,0.35)   !important; color: #e65100 !important; }

/* Empleados y forms de búsqueda */
body:not(.theme-dark) #emp-search-bar input {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border: 1px solid rgba(190,200,220,0.60) !important;
}
body:not(.theme-dark) .nfb-btn-nuevo,
body:not(.theme-dark) .ned-btn-nuevo {
  background: var(--blue) !important;
  color: white !important;
  border: none !important;
}

/* Config sliders */
body:not(.theme-dark) .pesos-suma.ok  { background: rgba(76,175,80,0.12)  !important; color: #2e7d32 !important; }
body:not(.theme-dark) .pesos-suma.err { background: rgba(244,67,54,0.12)  !important; color: #c62828 !important; }

/* ── nfb/ned btn-nuevo → ya cubierto por el bloque universal, quitar overrides ── */
body:not(.theme-dark) .nfb-btn-nuevo,
body:not(.theme-dark) .ned-btn-nuevo,
body:not(.theme-dark) .emp-btn-nuevo { border-radius: 50px !important; }

/* ============================================================
   CORRECCIONES ESPECÍFICAS POR MÓDULO
   ============================================================ */

/* Mi Perfil — tabla con esquinas redondeadas */
#mp-detalle-tabla {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  width: 100%;
  margin-top: 16px;
}
#mp-detalle-tabla thead tr:first-child th:first-child { border-top-left-radius:  12px; }
#mp-detalle-tabla thead tr:first-child th:last-child  { border-top-right-radius: 12px; }
#mp-detalle-tabla tbody tr:last-child td:first-child  { border-bottom-left-radius:  12px; }
#mp-detalle-tabla tbody tr:last-child td:last-child   { border-bottom-right-radius: 12px; }

/* Mi Perfil — historial grupos redondeados */
.mp-hist-grupo {
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 14px;
}

/* Reportes — texto BLANCO en modo oscuro (rep-glass y contenido) */
body.theme-dark #rep-wrap,
body.theme-dark #rep-wrap * {
  color: var(--dk-text);
}
/* Excepciones: elementos con color propio en reportes */
body.theme-dark #rep-reporte,
body.theme-dark #rep-reporte * { color: var(--dk-text); }
body.theme-dark .rep-info h2,
body.theme-dark .rep-info p   { color: white !important; }
body.theme-dark .rep-glass h3 { color: white !important; }
body.theme-dark .rep-glass    { color: white !important; }
body.theme-dark #rep-wrap p,
body.theme-dark #rep-wrap span,
body.theme-dark #rep-wrap label,
body.theme-dark #rep-wrap td,
body.theme-dark #rep-wrap th { color: white !important; }
/* Pero las celdas del reporte claro (el documento) no */
body.theme-dark .rep-kpi-group h4 { color: white !important; }
body.theme-dark .rep-kpi p        { color: white !important; }
body.theme-dark .percentage       { fill: white !important; }

/* Eval-btn dentro del eval-card → chip azul */
body:not(.theme-dark) .eval-btn,
body.theme-dark .eval-btn {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  font-weight: 700;
  margin-top: 20px;
  display: block;
}
/* El loader del eval-btn */
.eval-boton-loader {
  background: linear-gradient(160deg, #4090ff 0%, #2575f0 100%) !important;
  pointer-events: none;
}

/* Cfg-btn — todos chip azul, mismo padding que antes */
.cfg-btn:not(.peligro):not(.secundario) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  margin-right: 8px !important;
  margin-bottom: 4px !important;
}

/* ned-btn-nuevo / nfb-btn-nuevo / emp-btn-nuevo → chip con padding correcto */
.ned-btn-nuevo,
.nfb-btn-nuevo,
.emp-btn-nuevo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ned-btn-form y nfb-btn-form guardar/crear → chip */
.ned-btn-form.primario,
.nfb-btn-form.primario {
  padding: 11px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* emp-btn-back chip */
.emp-btn-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* btn-guardar (empleados) chip */
.btn-guardar {
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
}

/* dev-btn chip cuando no es peligro/cancelar */
.dev-btn:not(.peligro):not(.cancelar) {
  border-radius: 10px !important;
}

/* ── Garantizar texto blanco en btn-regresar SIEMPRE ─────────── */
.btn-regresar,
body:not(.theme-dark) .btn-regresar,
body.theme-dark .btn-regresar { color: white !important; }

/* ── Texto blanco en eval-btn SIEMPRE ──────────────────────── */
.eval-btn,
body:not(.theme-dark) .eval-btn,
body.theme-dark .eval-btn { color: white !important; }

/* ── Texto blanco en todos los botones de módulos ───────────── */
body:not(.theme-dark) .ned-btn-form.primario,
body:not(.theme-dark) .nfb-btn-form.primario,
body:not(.theme-dark) .ned-btn-nuevo,
body:not(.theme-dark) .nfb-btn-nuevo,
body:not(.theme-dark) .emp-btn-nuevo,
body:not(.theme-dark) .emp-btn-back,
body:not(.theme-dark) .btn-guardar,
body:not(.theme-dark) .cfg-btn:not(.peligro):not(.secundario) { color: white !important; }

/* ============================================================
   CORRECCIONES ESPECÍFICAS V3
   ============================================================ */

/* ── REPORTES: tabla de aspectos — celdas negras, header blanco ─ */
#rep-reporte .rep-result-table td,
body.theme-dark #rep-reporte .rep-result-table td {
  color: #333 !important;
}
#rep-reporte .rep-result-table th,
body.theme-dark #rep-reporte .rep-result-table th { color: white !important; }

/* ── REPORTES: dark mode — texto BLANCO excepto tabla de aspectos ─ */
body.theme-dark #rep-wrap > *,
body.theme-dark .rep-glass > *,
body.theme-dark .rep-glass h3,
body.theme-dark .rep-glass p,
body.theme-dark .rep-glass label,
body.theme-dark .rep-glass span,
body.theme-dark .rep-sec-hdr h3,
body.theme-dark .dep-nombre,
body.theme-dark .talento-nombre,
body.theme-dark .talento-badge,
body.theme-dark .talento-inicial,
body.theme-dark .riesgo-nombre,
body.theme-dark .riesgo-prom,
body.theme-dark .rep-kpi-group h4,
body.theme-dark .rep-kpi p,
body.theme-dark #rep-wrap h3,
body.theme-dark #rep-wrap p  { color: white !important; }
body.theme-dark .talento-puesto,
body.theme-dark .riesgo-puesto { color: rgba(180,200,230,0.75) !important; }

/* ── REPORTES light mode: secciones glassmorphism → texto negro ─ */
body:not(.theme-dark) .rep-glass,
body:not(.theme-dark) .rep-glass h3,
body:not(.theme-dark) .rep-glass p,
body:not(.theme-dark) .rep-glass span,
body:not(.theme-dark) .rep-glass label,
body:not(.theme-dark) .rep-sec-hdr h3,
body:not(.theme-dark) .dep-nombre,
body:not(.theme-dark) .talento-nombre,
body:not(.theme-dark) .riesgo-nombre,
body:not(.theme-dark) .riesgo-prom,
body:not(.theme-dark) .rep-kpi-group h4,
body:not(.theme-dark) .rep-kpi p     { color: var(--text) !important; }
body:not(.theme-dark) .talento-puesto,
body:not(.theme-dark) .riesgo-puesto { color: rgba(28,35,51,0.55) !important; }
body:not(.theme-dark) .talento-inicial { color: rgba(28,35,51,0.50) !important; }
body:not(.theme-dark) .percentage { fill: #333 !important; }

/* ── REPORTES: chips IA = mismo estilo que rep-tab ─────────── */
body:not(.theme-dark) .ia-chip {
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(190,200,220,0.65) !important;
  color: var(--text) !important;
}
body:not(.theme-dark) .ia-chip:hover { background: rgba(47,128,255,0.08) !important; color: var(--blue) !important; }
body:not(.theme-dark) .ia-chip.activo {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: white !important;
}
body.theme-dark .ia-chip { background: rgba(77,163,255,0.08) !important; border-color: rgba(77,163,255,0.30) !important; color: var(--dk-text) !important; }
body.theme-dark .ia-chip.activo { background: var(--dk-blue) !important; color: white !important; }

/* ── REPORTES: botones Imprimir PDF + Interpretar IA → blue crystal ─ */
.rep-btn,
.rep-btn.grande,
.rep-print-btn,
body:not(.theme-dark) .rep-btn,
body:not(.theme-dark) .rep-print-btn,
body.theme-dark .rep-btn,
body.theme-dark .rep-print-btn {
  color: white !important;
  background: linear-gradient(160deg, #5DA9FF 0%, #2F80FF 50%, #1a6aee 100%) !important;
  border-radius: 50px !important;
  border-top:    1px solid rgba(255,255,255,0.55) !important;
  border-left:   1px solid rgba(255,255,255,0.28) !important;
  border-right:  1px solid rgba(20,80,200,0.22) !important;
  border-bottom: 1px solid rgba(20,80,200,0.22) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.60),
    inset 0 -1px 0 rgba(0,0,0,0.16),
    0 4px 16px rgba(47,128,255,0.38),
    0 1px 4px rgba(47,128,255,0.22) !important;
  text-shadow: 0 1px 3px rgba(0,50,160,0.30) !important;
  padding: 9px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.rep-btn:hover:not(:disabled),
.rep-print-btn:hover {
  background: linear-gradient(160deg, #70b8ff 0%, #4090ff 50%, #2575f0 100%) !important;
  transform: translateY(-2px) !important;
}
.rep-btn.grande { padding: 14px 28px !important; font-size: 15px !important; }
.rep-btn:disabled { background: rgba(47,128,255,0.30) !important; opacity: 0.55 !important; cursor: not-allowed !important; transform: none !important; }

/* ia-ctrl-btn → estilo chip azul como rep-tab */
body:not(.theme-dark) .ia-ctrl-btn {
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(190,200,220,0.65) !important;
  color: var(--text) !important;
  border-radius: 20px !important;
}
body:not(.theme-dark) .ia-ctrl-btn:hover { background: rgba(47,128,255,0.08) !important; color: var(--blue) !important; }
body.theme-dark .ia-ctrl-btn { color: var(--dk-text) !important; }

/* ── BISEL MODO CLARO: bordes azul-gris MÁS GRUESOS ──────────── */
body:not(.theme-dark) .eval-card,
body:not(.theme-dark) #mp-container,
body:not(.theme-dark) .rep-glass,
body:not(.theme-dark) .seg-card,
body:not(.theme-dark) #seg-tabla-wrap,
body:not(.theme-dark) #fb-container,
body:not(.theme-dark) .fb-card,
body:not(.theme-dark) #nfb-form-wrap,
body:not(.theme-dark) #emp-tabla-wrap,
body:not(.theme-dark) #ned-tabla-wrap,
body:not(.theme-dark) .cfg-card,
body:not(.theme-dark) .pesos-col,
body:not(.theme-dark) .dev-card,
body:not(.theme-dark) .login-container,
body:not(.theme-dark) .app-card,
body:not(.theme-dark) .topbar,
body:not(.theme-dark) .profile-dropdown {
  border-top:    2px solid rgba(255,255,255,1.00) !important;
  border-left:   2px solid rgba(210,225,245,0.98) !important;
  border-right:  2px solid rgba(100,140,200,0.65) !important;
  border-bottom: 2px solid rgba(100,140,200,0.65) !important;
}

/* ── CONFIG: texto negro en modo claro ──────────────────────── */
body:not(.theme-dark) #cfg-wrap h2,
body:not(.theme-dark) #cfg-wrap h3,
body:not(.theme-dark) #cfg-wrap h4,
body:not(.theme-dark) #cfg-wrap p,
body:not(.theme-dark) #cfg-wrap label,
body:not(.theme-dark) #cfg-wrap span:not(.pesos-suma),
body:not(.theme-dark) .cfg-card h3,
body:not(.theme-dark) .cfg-card p,
body:not(.theme-dark) .cfg-card label,
body:not(.theme-dark) .cfg-card td,
body:not(.theme-dark) .cfg-card th { color: var(--text) !important; }
body:not(.theme-dark) .cfg-table th { background: var(--mod-accent) !important; color: white !important; }
body:not(.theme-dark) .cfg-table td { background: #FFFFFF !important; color: var(--text) !important; }

/* ── EVALUACIONES dark mode: textos específicos → blanco ──── */
body.theme-dark #eval-wrap h3,
body.theme-dark #eval-wrap p,
body.theme-dark #eval-wrap li,
body.theme-dark #eval-wrap label,
body.theme-dark #eval-wrap span,
body.theme-dark .eval-card h3,
body.theme-dark .eval-card p,
body.theme-dark .eval-perfil-info h3,
body.theme-dark .eval-perfil-info span,
body.theme-dark .eval-restantes-badge,
body.theme-dark .eval-progress-text { color: white !important; }
body.theme-dark .eval-pregunta-bloque p { color: white !important; }
body.theme-dark #eval-comentarios { color: white !important; background: rgba(255,255,255,0.08) !important; }
/* Instrucciones modo oscuro (hardcoded color:#444 y color:#555) */
body.theme-dark #eval-intro ol,
body.theme-dark #eval-intro ol li { color: rgba(200,215,240,0.90) !important; }
body.theme-dark #eval-intro label  { color: rgba(200,215,240,0.80) !important; }
/* "Modo simulación" texto */
body.theme-dark #eval-wrap [style*="color:#1565c0"],
body.theme-dark #eval-wrap [style*="color: #1565c0"] { color: white !important; }

/* ── NUEVA ED: banco de preguntas → blanco en light mode ───── */
body:not(.theme-dark) .ned-banco-wrap {
  background: var(--smoke) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  border-top:    1px solid rgba(255,255,255,1.00) !important;
  border-left:   1px solid rgba(210,225,245,0.95) !important;
  border-right:  1px solid rgba(140,170,210,0.50) !important;
  border-bottom: 1px solid rgba(140,170,210,0.50) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,1.00), 0 4px 16px rgba(0,0,0,0.05) !important;
}
body:not(.theme-dark) .ned-banco-wrap h3  { color: var(--text) !important; }
body:not(.theme-dark) .ned-banco-wrap p   { color: rgba(28,35,51,0.60) !important; }
body:not(.theme-dark) .ned-preg-field label { color: rgba(28,35,51,0.55) !important; }
body:not(.theme-dark) .ned-preg-field input {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border: 1px solid rgba(140,170,210,0.50) !important;
}
body:not(.theme-dark) .ned-preg-field input::placeholder { color: rgba(28,35,51,0.35) !important; }
body:not(.theme-dark) .ned-preg-field input:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(47,128,255,0.12) !important; }
body:not(.theme-dark) .ned-emp-select {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border: 1px solid rgba(140,170,210,0.50) !important;
}
body:not(.theme-dark) .ned-banco-status { color: var(--mod-accent) !important; }
body:not(.theme-dark) #ned-p15-loader,
body:not(.theme-dark) #ned-p610-loader { color: rgba(28,35,51,0.45) !important; }

/* ── EMPLEADOS: botón editar → outline gris/azul en light ── */
body:not(.theme-dark) .emp-btn-edit {
  background: rgba(0,0,0,0.03) !important;
  border: 1px solid rgba(140,170,210,0.60) !important;
  color: var(--mod-accent) !important;
  border-radius: 8px !important;
}
body:not(.theme-dark) .emp-btn-edit:hover {
  background: rgba(47,128,255,0.08) !important;
  border-color: var(--blue) !important;
}

/* ── SEGUIMIENTO: encabezado tabla → fondo blanco texto negro ─ */
body:not(.theme-dark) #seg-tabla thead tr {
  background: var(--mod-accent) !important;
}
body:not(.theme-dark) #seg-tabla th {
  color: white !important;
  border-right-color: rgba(255,255,255,0.20) !important;
}
body:not(.theme-dark) #seg-tabla td { background: #FFFFFF !important; color: var(--text) !important; }
body:not(.theme-dark) #seg-tabla tbody tr:hover td { background: rgba(47,128,255,0.04) !important; }
body:not(.theme-dark) #seg-tabla tbody tr:last-child td { border-bottom: none; }

/* ── SEGUIMIENTO: tarjeta de progreso (seg-card) en light ──── */
body:not(.theme-dark) .seg-card p,
body:not(.theme-dark) .seg-card strong { color: var(--text) !important; }
body:not(.theme-dark) .seg-progress-wrap { background: rgba(0,0,0,0.09) !important; }

/* ── REP-DEP: barra de nombres en luz → negro ──────────────── */
body:not(.theme-dark) .dep-nombre { color: var(--text) !important; }
body:not(.theme-dark) .dep-fill   { color: white !important; }

/* ── RIESGO/TALENTO chips en luz ──────────────────────────── */
body:not(.theme-dark) .riesgo-chip {
  background: rgba(47,128,255,0.10) !important;
  color: var(--mod-accent) !important;
  border: 1px solid rgba(47,128,255,0.25) !important;
}
body:not(.theme-dark) .talento-kpi {
  background: rgba(0,0,0,0.05) !important;
  color: var(--text) !important;
}
body:not(.theme-dark) .talento-kpi strong { color: var(--mod-accent) !important; }
body:not(.theme-dark) .talento-card,
body:not(.theme-dark) .riesgo-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(140,170,210,0.50) !important;
  border-top: 1px solid rgba(255,255,255,1.00) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07) !important;
  color: var(--text) !important;
}

/* ── REP-SEC-HDR light mode → negro ───────────────────────── */
body:not(.theme-dark) .rep-sec-hdr { border-bottom-color: rgba(140,170,210,0.40) !important; }
body:not(.theme-dark) .rep-sec-hdr h3 { color: var(--text) !important; }

/* ============================================================
   CORRECCIONES V4
   ============================================================ */

/* ── EVALUACIONES: preguntas → negro en modo oscuro (fondo de bloque claro) */
body.theme-dark .eval-pregunta-bloque p { color: #1C2333 !important; }

/* ── NUEVA ED: badge "Concluido" → texto gris oscuro en modo claro ─ */
body:not(.theme-dark) .ned-badge.concluido {
  background: rgba(120,120,120,0.15) !important;
  color: #555 !important;
}

/* ── NUEVO FEEDBACK: tabla → cabecera azul + cuerpo blanco/negro en modo claro ─ */
body:not(.theme-dark) #nfb-tabla-wrap {
  background: #FFFFFF !important;
}
body:not(.theme-dark) #nfb-tabla thead tr {
  background: var(--mod-accent) !important;
}
body:not(.theme-dark) #nfb-tabla th {
  color: white !important;
  border-bottom-color: rgba(255,255,255,0.20) !important;
}
body:not(.theme-dark) #nfb-tabla td {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border-bottom-color: rgba(140,170,210,0.25) !important;
}
body:not(.theme-dark) #nfb-tabla tbody tr:hover td {
  background: rgba(47,128,255,0.04) !important;
}

/* ── SEGUIMIENTO: caja de progreso global → blanco + texto negro en modo claro ─ */
body:not(.theme-dark) #seg-wrap { color: var(--text) !important; }
body:not(.theme-dark) .seg-global-box {
  background: #FFFFFF !important;
  border-top:    1px solid rgba(255,255,255,1.00) !important;
  border-left:   1px solid rgba(210,225,245,0.95) !important;
  border-right:  1px solid rgba(140,170,210,0.50) !important;
  border-bottom: 1px solid rgba(140,170,210,0.50) !important;
}
body:not(.theme-dark) .seg-global-box p,
body:not(.theme-dark) .seg-global-box strong { color: var(--text) !important; }
body:not(.theme-dark) .seg-progress-wrap {
  background: rgba(0,0,0,0.10) !important;
}

/* ── REPORTES: "Buscar por nombre:" → negro en modo claro ─────── */
body:not(.theme-dark) #rep-tab-evaluaciones label strong,
body:not(.theme-dark) #rep-tab-evaluaciones label { color: var(--text) !important; }

/* ── REPORTES comparativo: tabla con esquinas redondeadas ──────── */
#rep-tablaComp {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
body:not(.theme-dark) #rep-tablaComp thead tr { background: var(--mod-accent) !important; }
body:not(.theme-dark) #rep-tablaComp th { color: white !important; border-bottom-color: rgba(255,255,255,0.20) !important; }
body:not(.theme-dark) #rep-tablaComp td { color: var(--text) !important; background: white !important; border-bottom-color: rgba(140,170,210,0.25) !important; }
body:not(.theme-dark) #rep-tablaComp tbody tr:hover td { background: rgba(47,128,255,0.04) !important; }

/* ── REPORTES departamentos: barra visible + texto negro en modo claro ─ */
body:not(.theme-dark) .dep-track {
  background: rgba(0,0,0,0.08) !important;
}
body:not(.theme-dark) .dep-count {
  color: var(--text) !important;
}

/* ── REPORTES dispersión: texto SVG → negro en modo claro ──────── */
body:not(.theme-dark) #scatter-svg text {
  fill: #333 !important;
}
body:not(.theme-dark) #scatter-svg line {
  stroke: rgba(0,0,0,0.10) !important;
}
body:not(.theme-dark) #scatter-svg line[stroke-width="1.5"] {
  stroke: rgba(0,0,0,0.30) !important;
}
body:not(.theme-dark) .scatter-tooltip {
  color: #1C2333 !important;
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(140,170,210,0.50) !important;
}

/* ============================================================
   CORRECCIONES V5
   ============================================================ */

/* ── EVALUACIONES: preguntas negro en dark mode (selector más específico) ─ */
body.theme-dark #eval-wrap .eval-pregunta-bloque p { color: #1C2333 !important; }

/* ── NUEVO FEEDBACK: formulario crear → texto negro en modo claro ─ */
body:not(.theme-dark) #nfb-form-wrap {
  background: var(--smoke) !important;
}
body:not(.theme-dark) #nfb-form-wrap h3,
body:not(.theme-dark) .nfb-field label,
body:not(.theme-dark) .nfb-field span { color: var(--text) !important; }
body:not(.theme-dark) .nfb-field input,
body:not(.theme-dark) .nfb-field select {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border: 1px solid rgba(140,170,210,0.55) !important;
}
body:not(.theme-dark) .nfb-field input::placeholder { color: rgba(28,35,51,0.35) !important; }
body:not(.theme-dark) .nfb-warn { background: rgba(255,152,0,0.12) !important; color: #7a4a00 !important; border-color: rgba(255,152,0,0.35) !important; }

/* ── NUEVA ED: tabla periodos → fondo blanco + texto negro en modo claro ─ */
body:not(.theme-dark) #ned-wrap { color: var(--text) !important; }
body:not(.theme-dark) #ned-tabla-wrap {
  background: #FFFFFF !important;
}
body:not(.theme-dark) #ned-tabla thead tr { background: var(--mod-accent) !important; }
body:not(.theme-dark) #ned-tabla th {
  color: white !important;
  border-bottom-color: rgba(255,255,255,0.20) !important;
}
body:not(.theme-dark) #ned-tabla td {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border-bottom-color: rgba(140,170,210,0.25) !important;
}
body:not(.theme-dark) #ned-tabla tbody tr:hover td { background: rgba(47,128,255,0.04) !important; }

/* ── CONFIG: tabla en modo claro → cabecera azul + cuerpo blanco ─ */
body:not(.theme-dark) #cfg-tabla-wrap {
  background: #FFFFFF !important;
}
body:not(.theme-dark) #cfg-tabla thead tr { background: var(--mod-accent) !important; }
body:not(.theme-dark) #cfg-tabla th {
  color: white !important;
  border-bottom-color: rgba(255,255,255,0.20) !important;
}
body:not(.theme-dark) #cfg-tabla td {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border-bottom-color: rgba(140,170,210,0.25) !important;
}
body:not(.theme-dark) #cfg-tabla tbody tr:hover td { background: rgba(47,128,255,0.04) !important; }
body:not(.theme-dark) .cfg-clave { color: var(--mod-accent) !important; }
body:not(.theme-dark) .cfg-input {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border: 1px solid rgba(140,170,210,0.55) !important;
}
body:not(.theme-dark) .cfg-input:focus {
  border-color: var(--blue) !important;
  background: #FFFFFF !important;
}

/* ── CONFIG: sliders (deslizables) → pista visible en modo claro ─ */
body:not(.theme-dark) .pesos-slider {
  background: rgba(0,0,0,0.18) !important;
}
body:not(.theme-dark) .pesos-col h4,
body:not(.theme-dark) .pesos-row label,
body:not(.theme-dark) .pesos-auto-row label,
body:not(.theme-dark) .pesos-auto-label,
body:not(.theme-dark) .pesos-auto-val,
body:not(.theme-dark) .pesos-val { color: var(--text) !important; }