/* ======================
   Overrides de estilos
   ======================
   Objetivo: sobreescribir el background del sidebar (data-color="orange")
   con el color #1f2937 y asegurar visibilidad de texto/iconos.
*/

/* Fondo principal del sidebar cuando tiene data-color="orange" */
.sidebar[data-color="orange"] {
  background-color: #1f2937 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Forzar transparencia en wrappers internos para que el nuevo fondo sea visible */
.sidebar[data-color="orange"] .sidebar-wrapper,
.sidebar[data-color="orange"] .logo {
  background-color: transparent !important;
}

/* Colores de texto e iconos dentro del sidebar */
.sidebar[data-color="orange"] .nav li a,
.sidebar[data-color="orange"] .nav li a i,
.sidebar[data-color="orange"] .nav li a p,
.sidebar[data-color="orange"] .user .info a span {
  color: #e5e7eb !important; /* gris claro */
}

/* Estados hover y activo */
.sidebar[data-color="orange"] .nav li.active > a,
.sidebar[data-color="orange"] .nav li a:hover {
  background-color: rgba(255,255,255,0.04) !important;
  color: #ffffff !important;
}

/* Ajuste para el caret y elementos de usuario */
.sidebar[data-color="orange"] .user .info .caret {
  border-top-color: #e5e7eb !important;
}

/* Reglas más específicas para anular gradientes, imágenes o pseudo-elementos heredados */
html body .sidebar[data-color="orange"],
html body .sidebar[data-color="orange"] .sidebar-wrapper,
html body .sidebar[data-color="orange"] .logo {
  background: #1f2937 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Eliminar pseudo-elementos que puedan estar pintando el fondo naranja */
html body .sidebar[data-color="orange"]::before,
html body .sidebar[data-color="orange"] .sidebar-wrapper::before {
  background: none !important;
  content: none !important;
  display: none !important;
}

/* Logo y contenedores internos */
html body .sidebar[data-color="orange"] .logo .logo-image-big,
html body .sidebar[data-color="orange"] .logo .photo {
  background: transparent !important;
}

/* Fuerza colores de elementos que pudieran mantenerse naranja */
.sidebar[data-color="orange"] .nav li a .sidebar-mini-icon,
.sidebar[data-color="orange"] .nav li a .sidebar-normal {
  color: #e5e7eb !important;
}

/* Estilos para la nueva marca en el sidebar (evitar usar la clase .logo del theme) */
.rppm-logo{
  position: relative;
  padding: 7px 0.7rem;
  z-index: 4;
  display: flex;
  align-items: center;
}
.rppm-logo .brand-mini{
  display: block;
  float: left;
  width: 34px;
  text-align: center;
  margin-left: 10px;
  margin-right: 12px;
}
.rppm-logo .photo img{
  height: 40px;
  max-width: 100%;
  display: block;
}
.rppm-logo .brand-text{
  display: inline-block;
  margin-left: 4px;
  font-size: 20px;
  color: #e5e7eb !important;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

/* Asegurar que no haya bordes ni pseudo-elementos en la nueva marca */
.rppm-logo:after,
.rppm-logo:before{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Forzar fondo oscuro en la zona superior del sidebar (logo area) */
html body .sidebar[data-color="orange"] .rppm-logo{
  background: #1f2937 !important;
  background-image: none !important;
}

/* Desactivar cualquier fondo/overlay de .sidebar-background que muestre naranja */
html body .sidebar[data-color="orange"] .sidebar-background,
html body .sidebar[data-color="orange"] .sidebar-background:after {
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Asegurar que el primer hijo del sidebar (encabezado) no tenga color naranja */
html body .sidebar[data-color="orange"] > *:first-child,
html body .sidebar[data-color="orange"] > .rppm-logo {
  background: #1f2937 !important;
}

/* Ocultar el widget fijo del theme y sus badges (fixed-plugin) */
.fixed-plugin,
.fixed-plugin * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Ocultar Laravel / PHP Debugbar en caso de estar activo */
#phpdebugbar,
.phpdebugbar,
.phpdebugbar *,
#laravel-debugbar,
.laravel-debugbar,
.laravel-debugbar * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Estilos para el nuevo bloque inferior personalizado */
.rppm-bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 18px;
  z-index: 5;
  display: block;
}
.rppm-bottom-inner{
  height: 100%;
  background: #1f2937 !important; /* mismo color que sidebar */
  box-shadow: none !important;
}

/* Responsive: ocultar texto cuando el sidebar esté en modo mini */
body.sidebar-mini .rppm-logo .brand-text,
body.sidebar-mini .rppm-logo .brand-text * {
  display: none !important;
  visibility: hidden !important;
}

/* Ocultar labels/textos largos al contraer el sidebar */
body.sidebar-mini .sidebar .sidebar-wrapper .nav li a p,
body.sidebar-mini .sidebar .sidebar-wrapper .nav li a .sidebar-normal,
body.sidebar-mini .sidebar .sidebar-wrapper .nav li a .sidebar-mini-icon + .sidebar-normal {
  display: none !important;
  opacity: 0 !important;
}

/* Ajustes para iconos y espaciado en modo mini */
body.sidebar-mini .sidebar .sidebar-wrapper .nav li a i,
body.sidebar-mini .sidebar .sidebar-wrapper .nav li a .sidebar-mini-icon {
  margin-right: 0 !important;
}

/* Asegurar que el logo mini se muestre en modo mini */
body.sidebar-mini .rppm-logo .brand-mini{opacity:1 !important;}

/* Usuario: icono izquierda, nombre centrado, caret derecha */
.sidebar .user .info a.user-toggle{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
}
.sidebar .user .info a.user-toggle .user-icon{
  flex: 0 0 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #eeb15d !important;
  font-size: 20px !important;
}
.sidebar .user .info a.user-toggle .user-name{
  flex: 1 1 auto !important;
  text-align: center !important;
  color: #e5e7eb !important;
  font-weight: 600 !important;
}
.sidebar .user .info a.user-toggle .user-caret{
  flex: 0 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e5e7eb !important;
}

/* Ajuste para estado collapsed - mantener alineación */
.sidebar .user .info a.user-toggle.collapsed .user-caret{
  transform: rotate(0deg) !important;
}


/* Anular líneas/bordes/pseudo-elementos naranja alrededor del logo y en el fondo */
.sidebar[data-color="orange"] .logo:after,
.sidebar[data-color="orange"] .sidebar-background:after,
.sidebar[data-color="orange"] .sidebar-wrapper::before,
.sidebar[data-color="orange"] .sidebar-wrapper::after {
  background: none !important;
  background-image: none !important;
  content: none !important;
  display: none !important;
}

/* Limpiar bordes que puedan mostrar color naranja */
.sidebar[data-color="orange"] .logo,
.sidebar[data-color="orange"] .sidebar-wrapper,
.sidebar[data-color="orange"] {
  border: 0 none !important;
}

/* Forzar que cualquier elemento con border-top/bottom dentro del sidebar sea transparente */
.sidebar[data-color="orange"] * {
  border-color: transparent !important;
  background-image: none !important;
}

/* Color para menús de primer nivel (módulos) */
/* Color solo para los iconos de menús de primer nivel (módulos). */
html body .sidebar > .sidebar-wrapper > .nav > li > a i,
html body .sidebar > .sidebar-wrapper > .nav > li > a .sidebar-mini-icon,
html body .sidebar > .sidebar-wrapper > .nav > li > a .caret,
html body .sidebar > .sidebar-wrapper > .nav > li.nav-item > a.nav-link i {
  color: #eeb15d !important;
}

/* Restaurar color de texto de los módulos (labels) al gris claro original */
html body .sidebar > .sidebar-wrapper > .nav > li > a p,
html body .sidebar > .sidebar-wrapper > .nav > li > a .sidebar-normal,
html body .sidebar > .sidebar-wrapper > .nav > li.nav-item > a.nav-link p {
  color: #e5e7eb !important;
}

/* Submódulos / items dentro de colapsables: color blanco/gris claro */
html body .sidebar .collapse .nav li a i,
html body .sidebar .collapse .nav li a p,
html body .sidebar .collapse .nav li a .sidebar-mini-icon,
html body .sidebar .collapse .nav li a .sidebar-normal {
  color: #e5e7eb !important;
}

/* Forzar blanco en labels de submenú incluso en estados hover/active */
html body .sidebar .collapse .nav li a:hover,
html body .sidebar .collapse .nav li.active > a {
  color: #e5e7eb !important;
}

/* Regla definitiva: anular cualquier borde/pseudo-elemento aplicado al elemento .sidebar
   Esto cubre selectores del theme que añadan ::before / ::after o bordes finos en la base. */
html body .sidebar,
.sidebar,
html body .sidebar[data-color="orange"],
.sidebar[data-color="orange"] {
  background: #1f2937 !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 none !important;
  border-top: 0 none !important;
  border-bottom: 0 none !important;
}

html body .sidebar::before,
html body .sidebar::after,
.sidebar::before,
.sidebar::after,
.sidebar[data-color="orange"]::before,
.sidebar[data-color="orange"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  height: 0 !important;
  border: 0 none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

/* --- Caret display & positioning --- */
/* Reserve space for caret on top-level links and prevent long labels from overlapping it */
html body .sidebar .nav > li > a p{
  margin: 0 !important;
  padding: 2px 10px 2px 14px !important; /* top right bottom left */
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important; /* allow at most 2 lines */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important; /* allow wrapping between words */
  word-break: normal !important; /* avoid breaking words */
  overflow-wrap: normal !important;
  hyphens: none !important;
  padding-right: 28px !important; /* reserve space so caret doesn't overlap */
}

/* Espaciado entre items del menú (top-level) */
html body .sidebar > .sidebar-wrapper > .nav > li {
  margin-bottom: 14px !important;
}
html body .sidebar > .sidebar-wrapper > .nav > li:last-child {
  margin-bottom: 0 !important;
}
/* Mantener espaciado en modo mini */
body.sidebar-mini .sidebar > .sidebar-wrapper > .nav > li {
  margin-bottom: 10px !important;
}
html body .sidebar .nav > li > a p{
  margin: 0 !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
  white-space: normal !important; /* allow wrapping */
  word-break: break-word !important;
  padding-right: 28px !important; /* reserve space so caret doesn't overlap */
}

/* Caret as sibling element (moved outside <p>) */
html body .sidebar .nav > li > a > .menu-caret{
  display: block !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 8px solid #e5e7eb !important;
  opacity: 1 !important;
  z-index: 3 !important;
}

/* Rotate and color caret when menu is active/expanded */
html body .sidebar .nav li.active > a > .menu-caret,
html body .sidebar .nav li > a[aria-expanded="true"] > .menu-caret,
html body .sidebar .nav li > a[data-toggle="collapse"][aria-expanded="true"] > .menu-caret {
  transform: translateY(-50%) rotate(90deg) !important;
  border-left-color: #eeb15d !important;
}

/* Ensure caret remains visible in sidebar-mini (collapsed) */
body.sidebar-mini .sidebar .nav > li > a > .menu-caret{
  display: block !important;
}

/* --- Mostrar textos y submenús al hacer hover sobre sidebar-mini --- */
/* Asegura que el contenedor permita overflow visible para mostrar líneas envueltas */
body.sidebar-mini .sidebar:hover,
body.sidebar-mini .sidebar:hover .sidebar-wrapper,
body.sidebar-mini .sidebar:hover .nav{
  overflow: visible !important;
}

/* Top-level labels: mismo color que cuando está extendido */
/* Mostrar labels top-level (anular display:none del theme) */
body.sidebar-mini .sidebar:hover .sidebar-wrapper .nav > li > a p,
body.sidebar-mini .sidebar:hover .sidebar-wrapper .nav > li > a .sidebar-normal,
body.sidebar-mini .sidebar:hover .sidebar-wrapper .nav > li > a .sidebar-mini-icon + .sidebar-normal {
  display: block !important;
  color: #e5e7eb !important; /* texto de módulos */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Submenus: mantener color blanco como en sidebar extendido */
/* Mostrar submenus y sus labels */
body.sidebar-mini .sidebar:hover .sidebar-wrapper .nav .collapse li a,
body.sidebar-mini .sidebar:hover .sidebar-wrapper .nav .submenu li a,
body.sidebar-mini .sidebar:hover .sidebar-wrapper .nav .child-menu a,
body.sidebar-mini .sidebar:hover .sidebar-wrapper .nav .collapse li a p,
body.sidebar-mini .sidebar:hover .sidebar-wrapper .nav .submenu li a p {
  display: block !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mostrar caret y colorearlo al hover del sidebar-mini */
body.sidebar-mini .sidebar:hover .nav > li > a > .menu-caret{
  display: block !important;
  border-left-color: #eeb15d !important;
}





/* ======================================
   Paleta de colores RPPMNC - overrides
   Reemplaza las clases semánticas (primary/secondary/...) para
   buttons, badges, alerts, fondos y textos.
   ====================================== */

:root{
  --rppm-primary: #161d27;
  --rppm-secondary: #eeb15d;
  --rppm-info: #1f57b8;
  --rppm-success: #0ea271;
  --rppm-warning: #f59e04;
  --rppm-danger: #ca1a41;
  --rppm-dark: #090d15;
  --rppm-gray: #2d3542;
  --rppm-light: #e3e7ec;
  --rppm-white: #f2f2f2;
  --rppm-tertiary: #292959;
  /* Hover variants requested */
  --rppm-primary-hover: #1a232f;
  --rppm-secondary-hover: #f2c689;
  --rppm-info-hover: #1e52af;
  --rppm-success-hover: #34c494;
  --rppm-warning-hover: #fcb63b;
  --rppm-danger-hover: #bf193d;
  --rppm-dark-hover: #0e131f;
  --rppm-gray-hover: #2c3441;
  --rppm-light-hover: #f4f6f7;
  --rppm-white-hover: #ffffff;
  --rppm-tertiary-hover: #2a2a5a;
}

/* Generic helpers for each semantic color */
/* Primary */
.btn-primary, .badge-primary, .alert-primary, .bg-primary { background-color: var(--rppm-primary) !important; color: var(--rppm-white) !important; border-color: var(--rppm-primary) !important; }
.text-primary { color: var(--rppm-primary) !important; }
.border-primary { border-color: var(--rppm-primary) !important; }
.btn-outline-primary { color: var(--rppm-primary) !important; border-color: var(--rppm-primary) !important; background-color: transparent !important; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--rppm-primary) !important; color: var(--rppm-white) !important; }

/* Secondary */
.btn-secondary, .badge-secondary, .alert-secondary, .bg-secondary { background-color: var(--rppm-secondary) !important; color: var(--rppm-dark) !important; border-color: var(--rppm-secondary) !important; }
.text-secondary { color: var(--rppm-secondary) !important; }
.border-secondary { border-color: var(--rppm-secondary) !important; }
.btn-outline-secondary { color: var(--rppm-secondary) !important; border-color: var(--rppm-secondary) !important; background-color: transparent !important; }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { background-color: var(--rppm-secondary) !important; color: var(--rppm-dark) !important; }

/* Info */
.btn-info, .badge-info, .alert-info, .bg-info { background-color: var(--rppm-info) !important; color: var(--rppm-white) !important; border-color: var(--rppm-info) !important; }
.text-info { color: var(--rppm-info) !important; }
.border-info { border-color: var(--rppm-info) !important; }
.btn-outline-info { color: var(--rppm-info) !important; border-color: var(--rppm-info) !important; background-color: transparent !important; }
.btn-outline-info:hover, .btn-outline-info:focus { background-color: var(--rppm-info) !important; color: var(--rppm-white) !important; }

/* Success */
.btn-success, .badge-success, .alert-success, .bg-success { background-color: var(--rppm-success) !important; color: var(--rppm-white) !important; border-color: var(--rppm-success) !important; }
.text-success { color: var(--rppm-success) !important; }
.border-success { border-color: var(--rppm-success) !important; }
.btn-outline-success { color: var(--rppm-success) !important; border-color: var(--rppm-success) !important; background-color: transparent !important; }
.btn-outline-success:hover, .btn-outline-success:focus { background-color: var(--rppm-success) !important; color: var(--rppm-white) !important; }

/* Warning */
.btn-warning, .badge-warning, .alert-warning, .bg-warning { background-color: var(--rppm-warning) !important; color: var(--rppm-dark) !important; border-color: var(--rppm-warning) !important; }
.text-warning { color: var(--rppm-warning) !important; }
.border-warning { border-color: var(--rppm-warning) !important; }
.btn-outline-warning { color: var(--rppm-warning) !important; border-color: var(--rppm-warning) !important; background-color: transparent !important; }
.btn-outline-warning:hover, .btn-outline-warning:focus { background-color: var(--rppm-warning) !important; color: var(--rppm-dark) !important; }

/* Danger */
.btn-danger, .badge-danger, .alert-danger, .bg-danger { background-color: var(--rppm-danger) !important; color: var(--rppm-white) !important; border-color: var(--rppm-danger) !important; }
.text-danger { color: var(--rppm-danger) !important; }
.border-danger { border-color: var(--rppm-danger) !important; }
.btn-outline-danger { color: var(--rppm-danger) !important; border-color: var(--rppm-danger) !important; background-color: transparent !important; }
.btn-outline-danger:hover, .btn-outline-danger:focus { background-color: var(--rppm-danger) !important; color: var(--rppm-white) !important; }

/* Dark */
.btn-dark, .badge-dark, .alert-dark, .bg-dark { background-color: var(--rppm-dark) !important; color: var(--rppm-white) !important; border-color: var(--rppm-dark) !important; }
.text-dark { color: var(--rppm-dark) !important; }
.border-dark { border-color: var(--rppm-dark) !important; }
.btn-outline-dark { color: var(--rppm-dark) !important; border-color: var(--rppm-dark) !important; background-color: transparent !important; }
.btn-outline-dark:hover, .btn-outline-dark:focus { background-color: var(--rppm-dark) !important; color: var(--rppm-white) !important; }

/* Gray */
.btn-gray, .badge-gray, .alert-gray, .bg-gray { background-color: var(--rppm-gray) !important; color: var(--rppm-white) !important; border-color: var(--rppm-gray) !important; }
.text-gray { color: var(--rppm-gray) !important; }
.border-gray { border-color: var(--rppm-gray) !important; }

/* Light */
.btn-light, .badge-light, .alert-light, .bg-light { background-color: var(--rppm-light) !important; color: var(--rppm-dark) !important; border-color: var(--rppm-light) !important; }
.text-light { color: var(--rppm-light) !important; }
.border-light { border-color: var(--rppm-light) !important; }

/* White */
.bg-white, .text-white, .btn-white, .badge-white { background-color: var(--rppm-white) !important; color: var(--rppm-dark) !important; border-color: var(--rppm-white) !important; }

/* Tertiary */
.btn-tertiary, .badge-tertiary, .alert-tertiary, .bg-tertiary { background-color: var(--rppm-tertiary) !important; color: var(--rppm-white) !important; border-color: var(--rppm-tertiary) !important; }
.text-tertiary { color: var(--rppm-tertiary) !important; }
.border-tertiary { border-color: var(--rppm-tertiary) !important; }

/* Ensure link/button focus outlines remain visible with new palette */
.btn:focus, .btn:active, .btn:active:focus { box-shadow: 0 0 0 0.15rem rgba(0,0,0,0.12) !important; }

/* Small utility fallbacks for badges and pills where theme uses .badge-<color> */
.badge { color: var(--rppm-white) !important; }

/* --- Hover color overrides for interactive elements --- */
/* Primary hover */
.btn-primary:hover, .badge-primary:hover, .alert-primary:hover, .bg-primary:hover, .border-primary:hover, .text-primary:hover,
.btn-outline-primary:hover, a.text-primary:hover, .nav > li > a:hover {
  background-color: var(--rppm-primary-hover) !important;
  color: var(--rppm-white-hover) !important;
  border-color: var(--rppm-primary-hover) !important;
}

/* Secondary hover */
.btn-secondary:hover, .badge-secondary:hover, .alert-secondary:hover, .bg-secondary:hover, .border-secondary:hover, .text-secondary:hover,
.btn-outline-secondary:hover {
  background-color: var(--rppm-secondary-hover) !important;
  color: var(--rppm-dark) !important;
  border-color: var(--rppm-secondary-hover) !important;
}

/* Info hover */
.btn-info:hover, .badge-info:hover, .alert-info:hover, .bg-info:hover, .border-info:hover, .text-info:hover,
.btn-outline-info:hover {
  background-color: var(--rppm-info-hover) !important;
  color: var(--rppm-white) !important;
  border-color: var(--rppm-info-hover) !important;
}

/* Success hover */
.btn-success:hover, .badge-success:hover, .alert-success:hover, .bg-success:hover, .border-success:hover, .text-success:hover,
.btn-outline-success:hover {
  background-color: var(--rppm-success-hover) !important;
  color: var(--rppm-white) !important;
  border-color: var(--rppm-success-hover) !important;
}

/* Warning hover */
.btn-warning:hover, .badge-warning:hover, .alert-warning:hover, .bg-warning:hover, .border-warning:hover, .text-warning:hover,
.btn-outline-warning:hover {
  background-color: var(--rppm-warning-hover) !important;
  color: var(--rppm-dark) !important;
  border-color: var(--rppm-warning-hover) !important;
}

/* Danger hover */
.btn-danger:hover, .badge-danger:hover, .alert-danger:hover, .bg-danger:hover, .border-danger:hover, .text-danger:hover,
.btn-outline-danger:hover {
  background-color: var(--rppm-danger-hover) !important;
  color: var(--rppm-white) !important;
  border-color: var(--rppm-danger-hover) !important;
}

/* Dark hover */
.btn-dark:hover, .badge-dark:hover, .alert-dark:hover, .bg-dark:hover, .border-dark:hover, .text-dark:hover,
.btn-outline-dark:hover {
  background-color: var(--rppm-dark-hover) !important;
  color: var(--rppm-white) !important;
  border-color: var(--rppm-dark-hover) !important;
}

/* Gray hover */
.btn-gray:hover, .badge-gray:hover, .alert-gray:hover, .bg-gray:hover, .border-gray:hover, .text-gray:hover {
  background-color: var(--rppm-gray-hover) !important;
  color: var(--rppm-white) !important;
  border-color: var(--rppm-gray-hover) !important;
}

/* Light / White hover */
.btn-light:hover, .badge-light:hover, .alert-light:hover,  .text-light:hover, .btn-white:hover, .bg-white:hover {
  background-color: var(--rppm-light-hover) !important;
  color: var(--rppm-dark) !important;
  border-color: var(--rppm-light-hover) !important;
}

/* Tertiary hover */
.btn-tertiary:hover, .badge-tertiary:hover, .alert-tertiary:hover, .bg-tertiary:hover, .text-tertiary:hover, .border-tertiary:hover {
  background-color: var(--rppm-tertiary-hover) !important;
  color: var(--rppm-white) !important;
  border-color: var(--rppm-tertiary-hover) !important;
}

/* Generic interactive elements fallback */
a:hover, .dropdown-item:hover, .list-group-item:hover { color: inherit !important; background-color: rgba(0,0,0,0.02) !important; }


/* --- Checkboxes: fondo cuando están seleccionados --- */
/* Modern browsers: simple y efectivo */
input[type="checkbox"] {
  accent-color: #1f2937 !important;
}

/* Bootstrap 5 .form-check-input */
.form-check-input:checked {
  background-color: #1f2937 !important;
  border-color: #1f2937 !important;
}

/* Bootstrap 4 custom controls and common label pseudo-elements */
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
input[type="checkbox"]:checked + label::before,
input[type="checkbox"]:checked + .custom-control-label::before {
  background-color: #1f2937 !important;
  border-color: #1f2937 !important;
}

/* Focus ring for accessibility */
.form-check-input:focus, .custom-control-input:focus, input[type="checkbox"]:focus {
  box-shadow: 0 0 0 0.18rem rgba(31,41,55,0.22) !important; /* rgba(31,41,55) == #1f2937 */
}

/* ======================================
   Navbar dropdown contrast fixes
   Ensures dropdown-menu items remain readable (dark text on light background)
   and prevents hover from making text disappear due to inherited white color.
   ====================================== */
.navbar .dropdown-menu {
  background-color: #ffffff !important;
  color: var(--rppm-dark) !important;
  border-radius: 6px !important;
  min-width: 180px !important;
  box-shadow: 0 6px 16px rgba(2,6,23,0.12) !important;
}
.navbar .dropdown-menu .dropdown-item {
  color: var(--rppm-dark) !important;
  background: transparent !important;
  padding: .5rem 1rem !important;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  background-color: rgba(22,29,39,0.06) !important;
  color: var(--rppm-dark) !important;
}

/* If theme forces white color via inheritance, override it explicitly for dropdowns */
.navbar .dropdown-toggle,
.navbar .dropdown-menu,
.navbar .dropdown-menu a,
.navbar .dropdown-menu .dropdown-item {
  color: var(--rppm-dark) !important;
}

/* Modern Sidebar Styling Override */
html body .sidebar,
.sidebar,
html body .sidebar[data-color],
.sidebar[data-color] {
  background: linear-gradient(180deg, #800020 0%, #4a0013 100%) !important;
  background-color: #800020 !important;
}

html body .sidebar::after,
.sidebar::after,
html body .sidebar[data-color]::after,
.sidebar[data-color]::after,
.sidebar-background::after {
  background: linear-gradient(180deg, #800020 0%, #4a0013 100%) !important;
  opacity: 1 !important;
  display: block !important;
  content: "" !important;
}

/* ==========================================================================
   Minimalist & Modern Bootstrap Table Overrides (Global INSEJUPY Theme)
   ========================================================================== */
.bootstrap-table,
.fixed-table-container,
.table-responsive.bootstrap-table-container {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.fixed-table-container {
  border: none !important;
}

.bootstrap-table .table thead th,
.table-responsive .table thead th,
.table > thead > tr > th,
.table-striped > thead > tr > th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  padding: 14px 16px !important;
  border-top: none !important;
  border-bottom: 2px solid #e2e8f0 !important;
  border-left: none !important;
  border-right: none !important;
  vertical-align: middle !important;
}

.bootstrap-table .table tbody td,
.table-responsive .table tbody td,
.table > tbody > tr > td {
  font-size: 0.875rem !important;
  color: #1e293b !important;
  padding: 13px 16px !important;
  vertical-align: middle !important;
  border-top: 1px solid #f1f5f9 !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

.bootstrap-table .table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #fafbfc !important;
}

.bootstrap-table .table-striped > tbody > tr:nth-of-type(even),
.table-striped > tbody > tr:nth-of-type(even) {
  background-color: #ffffff !important;
}

.bootstrap-table .table tbody tr:hover,
.table-responsive .table tbody tr:hover {
  background-color: rgba(128, 0, 32, 0.03) !important;
  transition: background-color 0.15s ease-in-out !important;
}

.bootstrap-table .detail-icon,
.fixed-table-container .detail-icon,
a.detail-icon {
  color: #800020 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: rgba(128, 0, 32, 0.08) !important;
  transition: all 0.2s ease !important;
}

.bootstrap-table .detail-icon:hover,
a.detail-icon:hover {
  background: #800020 !important;
  color: #ffffff !important;
  transform: scale(1.1);
}

.bootstrap-table .detail-view,
tr.detail-view {
  background-color: #f8fafc !important;
}

.bootstrap-table tr.detail-view > td {
  padding: 16px 20px !important;
  background: #f8fafc !important;
  border-left: 4px solid #800020 !important;
}

.bootstrap-table tr.detail-view .fixed-table-container {
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #e2e8f0 !important;
}

.bootstrap-table tr.detail-view th {
  background: #edf2f7 !important;
  color: #334155 !important;
  font-size: 0.75rem !important;
}

.fixed-table-pagination {
  padding: 10px 16px !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
}

.fixed-table-pagination .pagination-info {
  font-size: 0.825rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.fixed-table-pagination .pagination {
  margin: 0 !important;
}

.fixed-table-pagination .pagination .page-item .page-link,
.pagination > li > a, 
.pagination > li > span {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  margin: 0 3px !important;
  padding: 6px 12px !important;
  font-size: 0.825rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  height: auto !important;
  line-height: normal !important;
}

.fixed-table-pagination .pagination .page-item.active .page-link,
.pagination > .active > a, 
.pagination > .active > span {
  background: #1e293b !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(30, 41, 59, 0.25) !important;
}

.fixed-table-pagination .pagination .page-item .page-link:hover,
.pagination > li > a:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}

/* Forzar colores nítidos en el banner de bienvenida del Dashboard */
.card-welcome-banner h4.welcome-title {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.card-welcome-banner .welcome-text-group,
.card-welcome-banner .welcome-text-group * {
  background-color: transparent;
}

.card-welcome-banner .badge-pill-header {
  background: rgba(238, 177, 93, 0.15) !important;
  color: #eeb15d !important;
}

/* Forzar badges de conteo en estadísticos de inicio */
.badge-stat-count {
  background-color: #1e293b !important;
  background: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
}

/* ==========================================
   Dashboard y Navbar Responsive & Layout
   ========================================== */

/* Alturas iguales y distribución para cards del dashboard */
.row-deck-dashboard {
  display: flex;
  flex-wrap: wrap;
}

.row-deck-dashboard > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.card-dashboard-equal {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.stat-item-row:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  transform: translateX(3px);
}

.transition-all {
  transition: all 0.2s ease-in-out;
}

/* ==========================================================================
   Componentes Reutilizables de Búsqueda y Formularios Limpios (UI/UX Homologado)
   ========================================================================== */
.precaptura-hero {
  background: linear-gradient(135deg, #800020 0%, #4a0013 100%);
  color: #ffffff;
  border-radius: 16px;
  padding: 24px 30px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(128, 0, 32, 0.2);
  position: relative;
  overflow: hidden;
}

.precaptura-hero .hero-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
  color: #ffffff !important;
}

.precaptura-hero .hero-subtitle {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.precaptura-badge-tag {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.precaptura-badge-tag i {
  color: #eab308;
}

/* Tarjetas Modernas de Planes de Suscripción */
.card-plans-wrapper {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid #edf2f7 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  padding: 35px 30px !important;
  margin-bottom: 30px !important;
}

.plans-header h3 {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 8px !important;
}

.plans-header p {
  color: #64748b !important;
  font-size: 0.95rem !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

.card-pricing-modern {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 30px 22px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  position: relative !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

.card-pricing-modern:hover {
  transform: translateY(-6px) !important;
  border-color: #800020 !important;
  box-shadow: 0 16px 32px rgba(128, 0, 32, 0.12) !important;
}

.pricing-badge-category {
  display: inline-block !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: #800020 !important;
  background: #fdf2f2 !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  border: 1px solid #fecaca !important;
  margin-bottom: 16px !important;
}

.pricing-icon-bubble {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.6rem !important;
  color: #800020 !important;
  margin-bottom: 18px !important;
  transition: all 0.25s ease !important;
}

.card-pricing-modern:hover .pricing-icon-bubble {
  background: #800020 !important;
  border-color: #800020 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

.pricing-price-display {
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin-bottom: 14px !important;
}

.pricing-price-display p {
  margin: 0 !important;
  font-weight: 800 !important;
  color: #1e293b !important;
}

.pricing-description-text {
  font-size: 0.825rem !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  margin-bottom: 22px !important;
  min-height: 50px !important;
}

.pricing-buttons-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

.btn-plan-subscribe {
  height: 42px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.4px !important;
  border-radius: 25px !important;
  background: linear-gradient(135deg, #c59b27 0%, #a67c1e 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(197, 155, 39, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.btn-plan-subscribe:hover {
  background: linear-gradient(135deg, #b88d1d 0%, #916a14 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(197, 155, 39, 0.35) !important;
}

.btn-plan-format {
  height: 42px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.3px !important;
  border-radius: 25px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.btn-plan-format:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
}

/* Botones de Búsqueda y Filtro Homologados */
.btn-filter-search {
  height: 38px !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.4px !important;
  border-radius: 20px !important;
  padding: 0 18px !important;
  background: linear-gradient(135deg, #c59b27 0%, #a67c1e 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(197, 155, 39, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.btn-filter-search:hover,
.btn-filter-search:focus {
  background: linear-gradient(135deg, #b88d1d 0%, #916a14 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 12px rgba(197, 155, 39, 0.35) !important;
}

.btn-new-tramite {
  height: 42px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.5px !important;
  border-radius: 25px !important;
  padding: 0 24px !important;
  background: linear-gradient(135deg, #c59b27 0%, #a67c1e 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(197, 155, 39, 0.28) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.btn-new-tramite:hover,
.btn-new-tramite:focus {
  background: linear-gradient(135deg, #b88d1d 0%, #916a14 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(197, 155, 39, 0.38) !important;
}

.btn-requisitos-hero {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 25px !important;
  height: 42px !important;
  padding: 0 20px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.btn-requisitos-hero:hover,
.btn-requisitos-hero:focus {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* Acciones en Formulario de Precaptura (Con Veda: Slate / Gris Neutro) */
.btn-primary-action {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25) !important;
  transition: all 0.2s ease !important;
}

.btn-primary-action:hover {
  background: #020617 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35) !important;
}

.btn-secondary-action {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.btn-secondary-action:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
}

.btn-regresar-top {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  height: 38px !important;
  padding: 0 16px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.btn-regresar-top:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Tarjetas de Pago y Suscripción Pendiente */
.card-payment-pending-wrapper {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid #edf2f7 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  padding: 35px 30px !important;
  margin-bottom: 30px !important;
}

.payment-pending-header h3 {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 12px !important;
}

.payment-pending-header p {
  color: #64748b !important;
  font-size: 0.95rem !important;
  max-width: 800px !important;
  margin: 0 auto 8px !important;
  line-height: 1.5 !important;
}

.payment-amount-highlight {
  color: #800020 !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  background: #fdf2f2 !important;
  padding: 2px 10px !important;
  border-radius: 8px !important;
  border: 1px solid #fecaca !important;
  display: inline-block !important;
}

.card-payment-option {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 30px 20px !important;
  text-align: center !important;
  transition: all 0.25s ease-in-out !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.card-payment-option:hover {
  background: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
  border-color: #cbd5e1 !important;
}

.card-payment-option.option-danger:hover {
  border-color: #fca5a5 !important;
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.08) !important;
}

.payment-option-icon {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.75rem !important;
  color: #475569 !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease !important;
}

.card-payment-option:hover .payment-option-icon {
  transform: scale(1.08) !important;
  background: #800020 !important;
  border-color: #800020 !important;
  color: #ffffff !important;
}

.card-payment-option.option-danger:hover .payment-option-icon {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

.payment-option-desc {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  line-height: 1.4 !important;
}

.btn-payment-action {
  height: 42px !important;
  font-weight: 700 !important;
  font-size: 0.825rem !important;
  letter-spacing: 0.5px !important;
  padding: 0 24px !important;
  border-radius: 25px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  max-width: 220px !important;
}

.btn-payment-gold {
  background: linear-gradient(135deg, #c59b27 0%, #a67c1e 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(197, 155, 39, 0.25) !important;
}

.btn-payment-gold:hover {
  background: linear-gradient(135deg, #b88d1d 0%, #916a14 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(197, 155, 39, 0.35) !important;
}

.btn-payment-danger {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}

.btn-payment-danger:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35) !important;
}

.btn-payment-verify {
  background: linear-gradient(135deg, #c59b27 0%, #a67c1e 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  border-radius: 25px !important;
  padding: 10px 28px !important;
  box-shadow: 0 4px 12px rgba(197, 155, 39, 0.25) !important;
  transition: all 0.2s ease !important;
}

.btn-payment-verify:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(197, 155, 39, 0.35) !important;
  color: #ffffff !important;
}
.card-clean-form {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #edf2f7;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-section-header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.card-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-section-title i {
  color: #800020;
  font-size: 1.15rem;
}

/* Nav Pills Modernos para Criterios / Subcategorías */
.nav-pills-modern {
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  padding: 4px;
  background: #f8fafc;
  display: inline-flex;
  flex-wrap: wrap;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
}

.nav-pills-modern .nav-item .nav-link {
  border-radius: 25px;
  padding: 8px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  transition: all 0.2s ease-in-out;
  border: none;
  background: transparent;
}

.nav-pills-modern .nav-item .nav-link:hover {
  color: #800020;
}

.nav-pills-modern .nav-item .nav-link.active,
.nav-pills-modern .nav-item .nav-link.active:focus,
.nav-pills-modern .nav-item .nav-link.active:hover {
  background: linear-gradient(135deg, #800020 0%, #4a0013 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(128, 0, 32, 0.3) !important;
}

/* Input Groups Modernos */
.custom-input-group {
  display: flex;
  align-items: stretch;
  border-radius: 10px;
  transition: all 0.2s ease;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.custom-input-group:focus-within {
  border-color: #800020;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.12);
}

.custom-input-group .input-icon-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: #64748b;
  font-size: 0.95rem;
}

.custom-input-group .form-control {
  border: none !important;
  background: transparent !important;
  height: 44px !important;
  padding-left: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: #1e293b;
}

.custom-input-group select.form-control {
  padding-left: 8px;
}

.custom-input-group .form-control:focus {
  box-shadow: none !important;
}

/* Botones de Acción de Búsqueda */
.btn-search-action {
  height: 44px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  border-radius: 10px;
  background: linear-gradient(135deg, #c59b27 0%, #a67c1e 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(197, 155, 39, 0.28);
  transition: all 0.2s ease;
}

.btn-search-action:hover,
.btn-search-action:focus {
  background: linear-gradient(135deg, #b88d1d 0%, #916a14 100%);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(197, 155, 39, 0.36);
}

.btn-clear-action {
  height: 44px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  transition: all 0.2s ease;
}

.btn-clear-action:hover,
.btn-clear-action:focus {
  background: #e2e8f0;
  color: #1e293b;
  transform: translateY(-1px);
}

/* Contenedor de Resultados */
.card-results-container {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #edf2f7;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  padding: 22px;
}

.results-header-badge {
  font-size: 0.78rem;
  font-weight: 700;
  color: #800020;
  background: #fdf2f2;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #fecaca;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ==========================================================================
   Mejoras Avanzadas y Responsive para Navbar Global (Adaptable a todos los dispositivos)
   ========================================================================== */
.main-panel > .navbar.app-main-navbar {
  min-height: 64px;
  padding: 10px 24px;
  transition: all 0.25s ease-in-out;
  background: rgba(248, 249, 250, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  z-index: 1029;
}

.main-panel > .navbar.app-main-navbar .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: 0;
  min-width: 0;
}

/* Wrapper del título y controles de sidebar */
.main-panel > .navbar.app-main-navbar .navbar-wrapper {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 15px;
}

/* Botón de minimizar en Desktop */
.main-panel > .navbar.app-main-navbar .navbar-minimize {
  margin-right: 12px;
  flex-shrink: 0;
}

.main-panel > .navbar.app-main-navbar .navbar-minimize .btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
}

.main-panel > .navbar.app-main-navbar .navbar-minimize .btn:hover {
  background: #800020;
  border-color: #800020;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(128, 0, 32, 0.2);
}

.main-panel > .navbar.app-main-navbar .navbar-minimize .btn i {
  font-size: 14px;
  font-weight: bold;
}

/* Título de la vista / módulo */
.main-panel > .navbar.app-main-navbar .navbar-brand {
  margin: 0;
  padding: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.01em;
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Píldora / Botón de usuario & menú en el Navbar */
.main-panel > .navbar.app-main-navbar .navbar-user-pill {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.main-panel > .navbar.app-main-navbar .navbar-user-pill:hover,
.main-panel > .navbar.app-main-navbar .navbar-user-pill:focus,
.main-panel > .navbar.app-main-navbar .nav-item.show .navbar-user-pill {
  background: #800020;
  border-color: #800020;
  color: #ffffff !important;
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(128, 0, 32, 0.22);
}

.main-panel > .navbar.app-main-navbar .navbar-user-pill i {
  font-size: 1.25rem;
  margin: 0;
}

/* Dropdown de usuario moderno */
.main-panel > .navbar.app-main-navbar .dropdown-menu {
  min-width: 250px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: 8px;
  margin-top: 10px;
  border: 1px solid #e2e8f0 !important;
}

.main-panel > .navbar.app-main-navbar .dropdown-menu .user-avatar-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #800020;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.main-panel > .navbar.app-main-navbar .dropdown-menu .user-info-text strong {
  font-size: 0.88rem;
  color: #0f172a;
}

.main-panel > .navbar.app-main-navbar .dropdown-menu .user-info-text small {
  font-size: 0.75rem;
  color: #64748b;
}

.main-panel > .navbar.app-main-navbar .dropdown-menu .dropdown-item {
  border-radius: 8px;
  padding: 9px 14px;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.main-panel > .navbar.app-main-navbar .dropdown-menu .dropdown-item:hover {
  background: #fef2f2;
  color: #b91c1c !important;
  transform: translateX(2px);
}

/* ==========================================================================
   Breakpoints Responsivos para Móviles y Tablets
   ========================================================================== */

/* Dispositivos con ancho menor a 992px (Móviles y Tablets) */
@media screen and (max-width: 991px) {
  /* Navbar superior en móviles */
  .main-panel > .navbar.app-main-navbar,
  .main-panel > .navbar {
    padding: 8px 16px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    min-height: 56px !important;
  }

  .main-panel > .navbar .navbar-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 8px;
  }

  .main-panel > .navbar .navbar-toggle {
    margin-right: 10px;
    flex-shrink: 0;
  }

  .main-panel > .navbar .navbar-toggle .navbar-toggler {
    padding: 6px 8px !important;
    outline: none !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    width: 38px;
    height: 38px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .main-panel > .navbar .navbar-toggle .navbar-toggler:active {
    background: #e2e8f0 !important;
  }

  .main-panel > .navbar .navbar-toggler-bar {
    background: #1e293b !important;
    height: 2px !important;
    border-radius: 2px;
    width: 18px;
    margin: 2px 0;
  }

  .main-panel > .navbar .navbar-wrapper .navbar-brand {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-left: 4px !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100vw - 140px);
  }

  /* Botón kebab en móviles */
  .main-panel > .navbar > .container-fluid > button.navbar-toggler {
    padding: 6px 8px !important;
    outline: none !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    width: 38px;
    height: 38px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .main-panel > .navbar > .container-fluid > button.navbar-toggler .navbar-kebab {
    width: 4px;
    height: 4px;
    margin: 1.5px 0;
    background: #475569 !important;
    border-radius: 50%;
  }

  /* Menú colapsable en móviles */
  .navbar-collapse#navigation {
    background: #ffffff !important;
    border-radius: 14px;
    padding: 16px;
    margin-top: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
    width: 100%;
  }

  .navbar-collapse#navigation .navbar-nav {
    width: 100%;
  }

  .navbar-collapse#navigation .navbar-nav .nav-item {
    margin: 4px 0 !important;
    width: 100%;
  }

  .navbar-collapse#navigation .navbar-user-pill {
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    justify-content: flex-start !important;
  }

  .navbar-collapse#navigation .dropdown-menu {
    border: none !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    padding: 8px !important;
    margin-top: 8px !important;
    border-radius: 10px !important;
    width: 100%;
    position: static !important;
    float: none !important;
  }

  .navbar-collapse#navigation .dropdown-item {
    padding: 10px 16px !important;
    color: #334155 !important;
    border-radius: 8px !important;
  }

  /* Panel y contenido en móviles */
  .main-panel {
    width: 100% !important;
  }

  .content {
    padding: 74px 14px 28px !important;
  }

  /* Tabla Bootstrap responsive en dashboard */
  .card-dashboard-equal .table-responsive {
    border: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .card-dashboard-equal .fixed-table-pagination {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center !important;
  }

  .card-welcome-banner .welcome-text-group h4 {
    font-size: 1.15rem !important;
  }

  .card-welcome-banner .welcome-logo img {
    max-height: 40px !important;
  }
}

/* Pantallas Extra Pequeñas (Smartphones en vertical, < 576px) */
@media screen and (max-width: 575.98px) {
  .main-panel > .navbar.app-main-navbar,
  .main-panel > .navbar {
    padding: 6px 10px !important;
  }

  .main-panel > .navbar .navbar-wrapper .navbar-brand {
    font-size: 0.92rem !important;
    max-width: calc(100vw - 125px);
  }

  .main-panel > .navbar .navbar-toggle .navbar-toggler,
  .main-panel > .navbar > .container-fluid > button.navbar-toggler {
    width: 34px !important;
    height: 34px !important;
  }

  .content {
    padding: 68px 10px 24px !important;
  }
}

@media screen and (min-width: 992px) {
  .card-dashboard-equal {
    min-height: 480px;
  }
}

/* Badges tipo Píldora para Estatus de Trámites */
.badge-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.badge-status-firmado {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

.badge-status-pagado {
  background-color: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
}

.badge-status-recepcion {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd !important;
}

.badge-status-captura {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

.badge-status-cobro {
  background-color: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}

.badge-status-pendiente {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

.badge-status-diferencia {
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}

/* Badge suave de conteo / cabeceras de sección */
.badge-primary-soft {
  background-color: #f8fafc !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
}

/* Acciones en tabla de trámites */
#gridDocumento tbody td .btn.btn-round.btn-icon.btn-sm,
.table tbody td .btn.btn-round.btn-icon.btn-sm {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 2px 3px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
}

#gridDocumento tbody td .btn.btn-round.btn-icon.btn-sm:hover,
.table tbody td .btn.btn-round.btn-icon.btn-sm:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
}