/* ============================================================
   NUEZ — Tokens visuales · modo claro + modo oscuro
   ------------------------------------------------------------
   Se carga DESPUÉS de core.css y theme-default.css, así que a
   igual especificidad gana por orden (sin recurrir a !important).

   Regla del proyecto: los colores viven aquí; ninguna pantalla
   define color propio. Si algo no se adapta al tema oscuro, se
   agrega el token aquí, no un parche en la vista.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- Marca ---------- */
  --nz-primario: #4F7A3F;          /* 5.0:1 sobre blanco · AA texto */
  --nz-primario-hover: #3F6233;
  --nz-primario-suave: #E8F0E6;
  --nz-primario-texto: #3F6233;    /* verde para texto SOBRE el tinte suave (AA) */
  --nz-acento: #8A5A12;            /* 6.0:1 sobre blanco */
  --nz-acento-suave: #FBF3E4;
  --nz-apoyo: #A8C256;

  /* ---------- Superficies ---------- */
  --nz-fondo: #FBFAF5;
  --nz-card: #FFFFFF;
  --nz-card-soft: #F5F1E8;
  --nz-menu-bg: #F6F3EA;
  --nz-borde: #E4DFD3;
  --nz-borde-fuerte: #CFC7B6;

  /* ---------- Texto ---------- */
  --nz-tinta: #1B1A17;             /* 15.8:1 */
  --nz-text-muted: #6B655A;        /* 5.8:1 */
  --nz-text-soft: #8B8477;
  --nz-muted-rgb: 107, 101, 90;    /* para las utilidades .text-muted de BS */

  /* ---------- Estado ---------- */
  --nz-peligro: #B03A3A;
  --nz-peligro-bg: #FAEFF1;
  --nz-info: #2C63A8;
  --nz-info-bg: #EFF6FE;
  --nz-exito: #2F6B3C;
  --nz-exito-bg: #E9F4EA;
  --nz-aviso: #8A5A12;
  --nz-aviso-bg: #FBF3E4;

  /* Rellenos sólidos: están pensados para llevar texto blanco encima,
     por eso NO cambian entre temas (un relleno claro no soportaría
     .text-white, que es lo que usan las tarjetas de inicio). */
  --nz-fill-primary: #4F7A3F;
  --nz-fill-success: #2F6B3C;
  --nz-fill-danger: #A93939;
  --nz-fill-warning: #8A5A12;
  --nz-fill-info: #2C63A8;

  /* ---------- Elevación (tinte cálido, nunca negro puro) ---------- */
  --nz-shadow-xs: 0 1px 2px rgba(27, 26, 23, .06);
  --nz-shadow-sm: 0 2px 8px -4px rgba(27, 26, 23, .14);
  --nz-shadow-md: 0 8px 24px -12px rgba(27, 26, 23, .22);
  --nz-shadow-lg: 0 16px 48px -16px rgba(27, 26, 23, .28);

  /* ---------- Radios ---------- */
  --nz-radius-sm: 8px;
  --nz-radius-md: 12px;
  --nz-radius-lg: 16px;
  --nz-radius-xl: 20px;
  --nz-radius-pill: 999px;

  /* ---------- Movimiento ---------- */
  --nz-ease: cubic-bezier(.2, .8, .2, 1);
  --nz-trans: 220ms var(--nz-ease);

  /* ---------- Tipografía ---------- */
  --nz-body-size: 14.5px;
  --nz-body-lh: 1.55;
  --nz-label-size: .72rem;
  --nz-table-head-size: .78rem;

  /* ---------- Superficies compuestas ---------- */
  --nz-navbar-bg: rgba(251, 250, 245, .82);
  --nz-navbar-borde: rgba(228, 223, 211, .9);
  --nz-input-bg: #FFFFFF;
  --nz-row-hover: rgba(79, 122, 63, .06);
  --nz-overlay: rgba(27, 26, 23, .45);
}

/* ============================================================
   MODO OSCURO
   Apagado por defecto; se activa con data-nz-theme="dark" en <html>
   (lo pone np-dark-mode.js, antes del primer pintado).
   ============================================================ */
html[data-nz-theme="dark"] {
  color-scheme: dark;

  --nz-primario: #9BC97F;          /* 9.1:1 sobre el fondo oscuro */
  --nz-primario-hover: #B4D89B;
  --nz-primario-suave: #26301F;
  --nz-primario-texto: #9BC97F;
  --nz-acento: #E0A93F;
  --nz-acento-suave: #332A18;
  --nz-apoyo: #84CC16;

  --nz-fondo: #17150F;
  --nz-card: #201D17;
  --nz-card-soft: #2A261E;
  --nz-menu-bg: #1B1913;
  --nz-borde: #3A352B;
  --nz-borde-fuerte: #4C4638;

  --nz-tinta: #F2EDE4;
  --nz-text-muted: #B3AB9C;        /* 7.4:1 */
  --nz-text-soft: #8E8577;
  --nz-muted-rgb: 179, 171, 156;

  --nz-peligro: #F08A8A;
  --nz-peligro-bg: #3A2222;
  --nz-info: #8BB8F0;
  --nz-info-bg: #1C2A3C;
  --nz-exito: #8FD3A2;
  --nz-exito-bg: #1E2E23;
  --nz-aviso: #E0A93F;
  --nz-aviso-bg: #332A18;

  --nz-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --nz-shadow-sm: 0 2px 8px -4px rgba(0, 0, 0, .5);
  --nz-shadow-md: 0 8px 24px -12px rgba(0, 0, 0, .6);
  --nz-shadow-lg: 0 16px 48px -16px rgba(0, 0, 0, .7);

  --nz-navbar-bg: rgba(23, 21, 15, .84);
  --nz-navbar-borde: rgba(58, 53, 43, .9);
  --nz-input-bg: #26221B;
  --nz-row-hover: rgba(155, 201, 127, .07);
  --nz-overlay: rgba(0, 0, 0, .65);
}

/* ============================================================
   BASE DEL DOCUMENTO
   Se usa "html body" para ganarle a styles.css, que se carga
   después en inicio.php y traía Trebuchet MS.
   ============================================================ */
html body {
  font-family: var(--nz-font-sans);
  font-size: var(--nz-body-size);
  line-height: var(--nz-body-lh);
  color: var(--nz-tinta);
  background-color: var(--nz-fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Puente con Bootstrap: casi todos los componentes lo respetan */
  --bs-body-bg: var(--nz-fondo);
  --bs-body-color: var(--nz-tinta);
  --bs-emphasis-color: var(--nz-tinta);
  --bs-secondary-color: var(--nz-text-muted);
  --bs-secondary-rgb: var(--nz-muted-rgb);
  --bs-border-color: var(--nz-borde);
  --bs-primary: var(--nz-primario);
  --bs-primary-rgb: 79, 122, 63;
  --bs-link-color: var(--nz-primario);
  --bs-link-hover-color: var(--nz-primario-hover);
  --bs-card-bg: var(--nz-card);
  --bs-card-border-color: var(--nz-borde);
  /* Las tarjetas de producto de inicio usan .bg-body-tertiary; sin este
     puente se quedaban con el #f5f5f9 del vendor y en oscuro aparecian
     como un bloque claro sobre la pagina. */
  --bs-tertiary-bg: var(--nz-card);
  --bs-secondary-bg: var(--nz-card-soft);
  --bs-table-bg: var(--nz-card);
  --bs-table-color: var(--nz-tinta);
  --bs-table-border-color: var(--nz-borde);
  --bs-table-striped-bg: var(--nz-card-soft);
  --bs-table-hover-bg: var(--nz-row-hover);
  --bs-dropdown-bg: var(--nz-card);
  --bs-dropdown-color: var(--nz-tinta);
  --bs-dropdown-border-color: var(--nz-borde);
  --bs-modal-bg: var(--nz-card);
  --bs-modal-color: var(--nz-tinta);
  --bs-modal-border-color: var(--nz-borde);
  --bs-popover-bg: var(--nz-card);
  --bs-popover-border-color: var(--nz-borde);
}

/* Unico puente de Bootstrap que NO puede resolverse con var(): los
   componentes que construyen rgba(var(--bs-primary-rgb), α) — focus rings
   nativos, .bg-opacity-*, .btn-check — necesitan los canales del primario
   del tema. Va sobre body (no sobre html) porque la declaracion de
   "html body" gana por herencia a la del bloque oscuro de <html>. */
html[data-nz-theme="dark"] body {
  --bs-primary-rgb: 155, 201, 127;   /* = #9BC97F */
}

/* El login va a sangre sobre la foto: el shell no pinta nada */
body.nz-auth {
  background: transparent;
}
body.nz-auth .container-xxl,
body.nz-auth .container-fluid,
body.nz-auth .layout-wrapper,
body.nz-auth .content-wrapper,
body.nz-auth .authentication-wrapper,
body.nz-auth .authentication-inner {
  background: transparent;
}

/* ============================================================
   SHELL
   ============================================================ */
.layout-wrapper,
.layout-container,
.layout-page,
.content-wrapper,
.main-content,
.container-fluid,
.container-xxl {
  background-color: transparent;
}

/* ============================================================
   SIDEBAR
   theme-default.css fija .bg-menu-theme con background-color
   !important; contra eso no hay orden que valga, así que aquí sí
   se responde con !important (único caso del archivo junto a la
   navbar).
   ============================================================ */
.layout-menu,
.bg-menu-theme {
  background-color: var(--nz-menu-bg) !important;
  color: var(--nz-tinta);
  border-right: 1px solid var(--nz-borde);
}

.menu-inner,
.menu-item {
  background-color: transparent;
}

/* Misma cadena que usa theme-default para que la especificidad
   alcance sin !important. */
.bg-menu-theme .menu-inner .menu-item .menu-link {
  color: var(--nz-tinta);
  border-radius: var(--nz-radius-sm);
  transition: background-color var(--nz-trans), color var(--nz-trans);
}

.bg-menu-theme .menu-inner .menu-item .menu-link i {
  color: var(--nz-text-muted);
  transition: color var(--nz-trans);
}

html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover,
.bg-menu-theme .menu-inner .menu-item.open > .menu-link {
  background-color: var(--nz-row-hover);
  color: var(--nz-primario);
}

html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover i,
.bg-menu-theme .menu-inner .menu-item.open > .menu-link i {
  color: var(--nz-primario);
}

/* theme-default.css pinta el ítem activo en morado y con !important;
   se replica la cadena y se responde con !important. */
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link,
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
  background-color: var(--nz-primario-suave) !important;
  color: var(--nz-primario-texto);
}

.bg-menu-theme .menu-inner .menu-item.active > .menu-link i {
  color: var(--nz-primario-texto);
}

/* theme-default dibuja el indicador del item activo como un ::before violeta
   (#696cff) pegado al borde derecho del menu. Se replica la cadena exacta
   para conservar la geometria y solo se cambia el color: el violeta no
   existe en la paleta y en oscuro se veia como una franja ajena. */
.bg-menu-theme .menu-inner > .menu-item.active::before {
  background-color: var(--nz-primario);
}

.menu-header-text {
  color: var(--nz-text-muted);
  font-size: var(--nz-label-size);
  letter-spacing: .08em;
}

.app-brand-text,
.bg-menu-theme .app-brand-text,
.bg-menu-theme .menu-text {
  color: var(--nz-tinta);
}

/* ============================================================
   NAVBAR
   theme-default.css también la fija con !important.
   ============================================================ */
.layout-navbar,
.bg-navbar-theme {
  background-color: var(--nz-navbar-bg) !important;
  color: var(--nz-tinta);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--nz-navbar-borde);
}

.navbar .nav-link,
.navbar .nav-item .text-muted {
  color: var(--nz-text-muted);
}

/* ============================================================
   TOGGLE DE TEMA
   El boton vive en modulos/header.php con .btn .btn-icon .btn-sm.
   Sneat lo deja como un icono suelto sin hover ni foco propios; aqui
   se le da forma de pastilla para que se lea como control, no como
   adorno. Misma especificidad que .btn-icon, pero este archivo carga
   despues: gana por orden.
   ============================================================ */
.nz-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  line-height: 1;
  color: var(--nz-text-muted);
  background-color: var(--nz-card);
  border: 1px solid var(--nz-borde);
  border-radius: var(--nz-radius-pill);
  transition: background-color var(--nz-trans),
              border-color var(--nz-trans),
              color var(--nz-trans),
              transform var(--nz-trans);
}

.nz-theme-toggle i {
  font-size: 1.05rem;
  line-height: 1;
  transition: transform var(--nz-trans);
}

.nz-theme-toggle:hover {
  background-color: var(--nz-primario-suave);
  border-color: var(--nz-primario);
  color: var(--nz-primario-texto);
}

/* El giro es la senal de que el control cambia de estado, no solo de color. */
.nz-theme-toggle:hover i {
  transform: rotate(-18deg) scale(1.08);
}

.nz-theme-toggle:active {
  transform: scale(.94);
}

.nz-theme-toggle:focus-visible {
  outline: 3px solid var(--nz-primario);
  outline-offset: 2px;
}

/* ============================================================
   TARJETAS
   ============================================================ */
.card {
  background-color: var(--nz-card);
  border: 1px solid var(--nz-borde);
  border-radius: var(--nz-radius-lg);
  box-shadow: var(--nz-shadow-xs);
}

.card-header,
.card-footer {
  background-color: transparent;
  border-color: var(--nz-borde);
}

/* ============================================================
   TABLAS
   ============================================================ */
.table {
  --bs-table-bg: var(--nz-card);
  --bs-table-color: var(--nz-tinta);
  --bs-table-border-color: var(--nz-borde);
  --bs-table-striped-bg: var(--nz-card-soft);
  --bs-table-striped-color: var(--nz-tinta);
  --bs-table-hover-bg: var(--nz-row-hover);
  --bs-table-hover-color: var(--nz-tinta);
  background-color: var(--nz-card);
  color: var(--nz-tinta);
  border-color: var(--nz-borde);
}

.table thead th {
  background-color: var(--nz-card-soft);
  color: var(--nz-text-muted);
  font-size: var(--nz-table-head-size);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-color: var(--nz-borde);
  white-space: nowrap;
}

.table td,
.table th {
  border-color: var(--nz-borde);
  vertical-align: middle;
}

/* core.css: ".table:not(.table-dark) th { color: #566a7f }" gana por
   especificidad; se replica la misma cadena. */
.table:not(.table-dark) th {
  color: var(--nz-text-muted);
}

.table td {
  color: var(--nz-tinta);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--nz-row-hover);
  color: var(--nz-tinta);
}

.table > :not(caption) > * > * {
  background-color: transparent;
  box-shadow: none;
}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.form-control,
.form-select {
  background-color: var(--nz-input-bg);
  border: 1px solid var(--nz-borde);
  color: var(--nz-tinta);
  border-radius: var(--nz-radius-sm);
  transition: border-color var(--nz-trans), box-shadow var(--nz-trans);
}

.form-control::placeholder {
  color: var(--nz-text-soft);
  opacity: 1;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--nz-input-bg);
  /* El vendor fija el borde de foco en violeta con !important
     (.form-control:focus { border: #696cff !important }), asi que aqui se
     responde igual. Sin esto, todos los campos mostraban un borde violeta
     al enfocar aunque el anillo de 3px ya fuera verde. */
  border-color: var(--nz-primario) !important;
  color: var(--nz-tinta);
  box-shadow: 0 0 0 3px rgba(79, 122, 63, .18);
}

.input-group-text {
  background-color: var(--nz-card-soft);
  border-color: var(--nz-borde);
  color: var(--nz-text-muted);
}

.form-label,
.form-check-label {
  color: var(--nz-text-muted);
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn-primary {
  background-color: var(--nz-primario);
  border-color: var(--nz-primario);
  color: #FFFFFF;
  box-shadow: 0 2px 6px -2px rgba(79, 122, 63, .45);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--nz-primario-hover);
  border-color: var(--nz-primario-hover);
  color: #FFFFFF;
}

.btn-outline-primary {
  color: var(--nz-primario);
  border-color: var(--nz-primario);
}

/* theme-default.css fija el hover del outline con !important. */
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--nz-primario) !important;
  border-color: var(--nz-primario) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px -2px rgba(79, 122, 63, .45) !important;
  transform: none !important;
}

html[data-nz-theme="dark"] .btn-primary {
  color: #14200F;
}

html[data-nz-theme="dark"] .btn-primary:hover,
html[data-nz-theme="dark"] .btn-primary:focus,
html[data-nz-theme="dark"] .btn-primary:active {
  color: #14200F;
}

html[data-nz-theme="dark"] .btn-outline-primary:hover,
html[data-nz-theme="dark"] .btn-outline-primary:focus,
html[data-nz-theme="dark"] .btn-outline-primary:active {
  color: #14200F !important;
}

/* Botones de estado: Sneat los deja pastel con texto blanco (1.7:1).
   Se usan rellenos oscuros que sí soportan texto blanco. */
.btn-secondary {
  background-color: var(--nz-card-soft);
  border-color: var(--nz-borde);
  color: var(--nz-tinta);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--nz-borde);
  border-color: var(--nz-borde-fuerte);
  color: var(--nz-tinta);
}

.btn-success,
.btn-danger,
.btn-info,
.btn-warning {
  color: #FFFFFF;
}

.btn-success { background-color: var(--nz-fill-success); border-color: var(--nz-fill-success); }
.btn-danger  { background-color: var(--nz-fill-danger);  border-color: var(--nz-fill-danger); }
.btn-info    { background-color: var(--nz-fill-info);    border-color: var(--nz-fill-info); }
.btn-warning { background-color: var(--nz-fill-warning); border-color: var(--nz-fill-warning); }

.btn-success:hover, .btn-success:focus, .btn-success:active { background-color: #255630; border-color: #255630; color: #FFFFFF; }
.btn-danger:hover,  .btn-danger:focus,  .btn-danger:active  { background-color: #8F2F2F; border-color: #8F2F2F; color: #FFFFFF; }
.btn-info:hover,    .btn-info:focus,    .btn-info:active    { background-color: #24528C; border-color: #24528C; color: #FFFFFF; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { background-color: #6F480E; border-color: #6F480E; color: #FFFFFF; }

/* Contornos: el hover del vendor trae !important */
.btn-outline-success { color: var(--nz-fill-success); border-color: var(--nz-fill-success); }
.btn-outline-danger  { color: var(--nz-fill-danger);  border-color: var(--nz-fill-danger); }
.btn-outline-info    { color: var(--nz-fill-info);    border-color: var(--nz-fill-info); }
.btn-outline-warning { color: var(--nz-fill-warning); border-color: var(--nz-fill-warning); }

.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active { background-color: var(--nz-fill-success) !important; border-color: var(--nz-fill-success) !important; color: #FFFFFF !important; }
.btn-outline-danger:hover,  .btn-outline-danger:focus,  .btn-outline-danger:active  { background-color: var(--nz-fill-danger) !important;  border-color: var(--nz-fill-danger) !important;  color: #FFFFFF !important; }
.btn-outline-info:hover,    .btn-outline-info:focus,    .btn-outline-info:active    { background-color: var(--nz-fill-info) !important;    border-color: var(--nz-fill-info) !important;    color: #FFFFFF !important; }
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active { background-color: var(--nz-fill-warning) !important; border-color: var(--nz-fill-warning) !important; color: #FFFFFF !important; }

/* ============================================================
   BADGES
   Se usan como etiqueta de estado (Activo/Inactivo), no como
   contador sólido: fondo suave + texto del mismo tono. El verde
   de Sneat (#71dd37) con texto blanco daba 1.9:1.
   ============================================================ */
.badge {
  font-weight: 600;
  letter-spacing: .01em;
  padding: .38em .6em;
}

.badge.bg-primary,
.bg-label-primary {
  background-color: var(--nz-primario-suave) !important;
  color: var(--nz-primario-texto) !important;
}

.badge.bg-success,
.bg-label-success {
  background-color: var(--nz-exito-bg) !important;
  color: var(--nz-exito) !important;
}

.badge.bg-danger,
.bg-label-danger {
  background-color: var(--nz-peligro-bg) !important;
  color: var(--nz-peligro) !important;
}

.badge.bg-warning,
.bg-label-warning {
  background-color: var(--nz-aviso-bg) !important;
  color: var(--nz-aviso) !important;
}

.badge.bg-info,
.bg-label-info {
  background-color: var(--nz-info-bg) !important;
  color: var(--nz-info) !important;
}

.badge.bg-secondary,
.bg-label-secondary {
  background-color: var(--nz-card-soft) !important;
  color: var(--nz-text-muted) !important;
}

/* Rellenos sólidos (los usan las tarjetas de producto con .text-white).
   Sneat los deja en tonos pastel donde el blanco no se lee. */
.bg-primary { background-color: var(--nz-fill-primary) !important; }
.bg-success { background-color: var(--nz-fill-success) !important; }
.bg-danger  { background-color: var(--nz-fill-danger) !important; }
.bg-warning { background-color: var(--nz-fill-warning) !important; }
.bg-info    { background-color: var(--nz-fill-info) !important; }

/* ============================================================
   MENÚS FLOTANTES Y MODALES
   ============================================================ */
.dropdown-menu {
  background-color: var(--nz-card);
  border: 1px solid var(--nz-borde);
  box-shadow: var(--nz-shadow-md);
}

.dropdown-item {
  color: var(--nz-tinta);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--nz-row-hover);
  color: var(--nz-primario);
}

.dropdown-divider {
  border-color: var(--nz-borde);
}

.modal-content,
.offcanvas {
  background-color: var(--nz-card);
  color: var(--nz-tinta);
  border-color: var(--nz-borde);
}

.modal-header,
.modal-footer {
  border-color: var(--nz-borde);
}

/* ============================================================
   DATATABLES / SELECT2 / SWEETALERT
   ============================================================ */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background-color: var(--nz-input-bg);
  border: 1px solid var(--nz-borde);
  color: var(--nz-tinta);
  border-radius: var(--nz-radius-sm);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_processing {
  color: var(--nz-text-muted);
}

.page-link {
  background-color: var(--nz-card);
  border-color: var(--nz-borde);
  color: var(--nz-tinta);
}

.page-item.active .page-link {
  background-color: var(--nz-primario);
  border-color: var(--nz-primario);
  color: #FFFFFF;
}

.page-item.disabled .page-link {
  background-color: var(--nz-card-soft);
  border-color: var(--nz-borde);
  color: var(--nz-text-muted);
}

html[data-nz-theme="dark"] .page-item.active .page-link {
  color: #14200F;
}

/* Casillas y radios: Sneat los pinta en morado al marcar */
.form-check-input:checked,
.form-check-input:indeterminate {
  background-color: var(--nz-primario);
  border-color: var(--nz-primario);
}

.form-check-input:focus {
  border-color: var(--nz-primario);
  box-shadow: 0 0 0 3px rgba(79, 122, 63, .18);
}

.form-check-input {
  background-color: var(--nz-input-bg);
  border-color: var(--nz-borde-fuerte);
}

/* Opción activa de un desplegable (Sneat la fija con !important) */
.dropdown-item.active,
.dropdown-item:not(.disabled).active,
.dropdown-item:not(.disabled):active {
  background-color: var(--nz-primario-suave) !important;
  color: var(--nz-primario) !important;
}

/* Alertas */
.alert {
  background-color: var(--nz-card);
  border-color: var(--nz-borde);
  color: var(--nz-tinta);
}

/* Barras de progreso */
.progress {
  background-color: var(--nz-card-soft);
}

.progress-bar {
  background-color: var(--nz-primario);
  color: #FFFFFF;
  box-shadow: none;
}

html[data-nz-theme="dark"] .progress-bar {
  color: #14200F;
}

.select2-container--bootstrap-5 .select2-selection {
  background-color: var(--nz-input-bg);
  border-color: var(--nz-borde);
  color: var(--nz-tinta);
}

/* El tema de Select2 trae el texto en #212529 fijo: en oscuro queda
   casi invisible sobre el campo oscuro. */
.select2-container--bootstrap-5 .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-results__option,
.select2-container--bootstrap-5 .select2-search__field {
  color: var(--nz-tinta);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: var(--nz-tinta);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
  color: var(--nz-text-muted);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
  border-color: var(--nz-text-muted) transparent transparent;
}

.select2-container--bootstrap-5 .select2-dropdown {
  background-color: var(--nz-card);
  border-color: var(--nz-borde);
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: var(--nz-primario);
  color: #FFFFFF;
}

html[data-nz-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
  color: #14200F;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  background-color: var(--nz-primario-suave);
  border-color: var(--nz-borde);
  color: var(--nz-primario);
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
  background-color: var(--nz-input-bg);
  border-color: var(--nz-borde);
  color: var(--nz-tinta);
}

.swal2-popup {
  background-color: var(--nz-card);
  color: var(--nz-tinta);
  border: 1px solid var(--nz-borde);
}

/* Estos cuatro no llevan !important a proposito: se comprobo en el navegador
   (popup real, tema claro y oscuro) que sweetalert2 NO fija estas propiedades
   con !important, asi que basta el orden — este archivo se carga despues. */
.swal2-title,
.swal2-html-container {
  color: var(--nz-tinta);
}

.swal2-styled.swal2-confirm {
  background-color: var(--nz-primario);
  color: #FFFFFF;
}

.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
  background-color: var(--nz-card-soft);
  color: var(--nz-tinta);
}

html[data-nz-theme="dark"] .swal2-styled.swal2-confirm {
  color: #14200F;
}

.swal2-toast {
  background-color: var(--nz-card) !important;
  color: var(--nz-tinta) !important;
}

.swal2-timer-progress-bar {
  background-color: var(--nz-primario) !important;
}

/* ============================================================
   COMPONENTES VARIOS
   ============================================================ */
.accordion {
  --bs-accordion-bg: var(--nz-card);
  --bs-accordion-color: var(--nz-tinta);
  --bs-accordion-border-color: var(--nz-borde);
  --bs-accordion-btn-color: var(--nz-tinta);
  --bs-accordion-btn-bg: var(--nz-card);
  --bs-accordion-active-bg: var(--nz-primario-suave);
  --bs-accordion-active-color: var(--nz-primario);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(79, 122, 63, .18);
}

.accordion-item {
  background-color: var(--nz-card);
  border-color: var(--nz-borde);
}

.accordion-button {
  background-color: var(--nz-card);
  color: var(--nz-tinta);
}

.accordion-button:not(.collapsed) {
  background-color: var(--nz-primario-suave);
  color: var(--nz-primario);
}

.list-group-item {
  background-color: var(--nz-card);
  color: var(--nz-tinta);
  border-color: var(--nz-borde);
}

.nav-tabs {
  border-color: var(--nz-borde);
}

.nav-tabs .nav-link {
  color: var(--nz-text-muted);
}

.nav-tabs .nav-link.active {
  background-color: var(--nz-card);
  color: var(--nz-primario);
  border-color: var(--nz-borde) var(--nz-borde) var(--nz-card);
}

.nav-pills .nav-link {
  color: var(--nz-text-muted);
}

.nav-pills .nav-link.active {
  background-color: var(--nz-primario);
  color: #FFFFFF;
}

html[data-nz-theme="dark"] .nav-pills .nav-link.active {
  color: #14200F;
}

/* La "x" de Bootstrap es un SVG negro: en oscuro desaparece */
html[data-nz-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1) brightness(1.8);
}

html[data-nz-theme="dark"] img.nz-invert-none {
  filter: none;
}

.tooltip-inner {
  background-color: var(--nz-tinta);
  color: var(--nz-fondo);
}

.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--nz-tinta); }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--nz-tinta); }
.tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--nz-tinta); }
.tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--nz-tinta); }

/* ============================================================
   UTILIDADES DE TEXTO
   ============================================================ */
/* core.css fija los títulos en #566a7f (azul gris de Sneat); con
   el prefijo html ganamos sin tocar el vendor. */
html h1, html h2, html h3, html h4, html h5, html h6,
html .h1, html .h2, html .h3, html .h4, html .h5, html .h6 {
  color: var(--nz-tinta);
}

/* Las utilidades de Bootstrap usan !important: se responde igual, pero
   con el token del tema (si no, el gris azulado del vendor se queda
   fijo y no cambia en oscuro). */
.text-muted,
.text-body-secondary {
  color: var(--nz-text-muted) !important;
}

.text-heading {
  color: var(--nz-tinta) !important;
}

.text-body-emphasis {
  color: var(--nz-tinta);
}

a {
  color: var(--nz-primario);
}

a:hover {
  color: var(--nz-primario-hover);
}

/* Cifras que deben alinear en columna (folios, totales) */
.nz-mono,
.folio,
td.folio,
.table .folio {
  font-family: var(--nz-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   FOCO VISIBLE (accesibilidad)
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--nz-primario);
  outline-offset: 2px;
}

/* ============================================================
   MOVIMIENTO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
    scroll-behavior: auto;
  }
}

/* ============================================================
   IMPRESIÓN
   Las reglas de papel viven en np-print.css, que se carga despues
   de este archivo. Se movieron alla para que el tema oscuro y la
   impresion no se pisen: aqui solo quedaba un bloque a medias que
   no forzaba los tokens y dejaba la hoja oscura al imprimir.
   ============================================================ */