body {
    margin-bottom: 70px;
    font-size: 16px;
}

:root {
  /* Variables existentes */
  --color-label-local: #8F440B;
  --color-label-des: #1C6714;
  --color-label-pre:  #AF1C15;
  --color-panel-border: #ddd;
  --color-div-atenciones-border: #efefef;
  --color-btn-clave-bg: #ffffff;
  --color-btn-clave-border: #dddddd;
  --color-white: #ffffff;
  --color-header-bg: #337ab7;
  --color-footer-bg: #337ab7;
  --color-header-text: #1f496f;
  --color-btn-primary-bg: #1f496f;
  --color-btn-primary-border: #285E8F;
  --color-btn-primary-hover-bg: #354a5f;
  --color-btn-primary-hover-border: #8c8c8c;
  --color-panel-bg: #f9f9f9;
  --color-panel-danger: #AF1C15;
  --color-panel-border-info: #285E8F;
  --color-btn-default-bg: #ffffff;
  --color-btn-default-border: #1f496f;
  --color-btn-default-hover-bg: #354a5f;
  --color-btn-default-hover-border: #8c8c8c;
  --color-link-primary: #3276b1;
  --color-gray-light: #cccccc;
  --color-gray-hover: #f5f5f5;
  --color-table-header-bg: #444C55;
  --color-pagination-text: #305E6B;
  --color-pagination-hover-text: #848E9A;
  --color-pagination-disabled-text: #3D3D3D;
  --color-button-disabled-bg: #6c757d;

  --color-btn-grad-start: #357DC0;
  --color-btn-grad-mid: #1f496f;
  --color-btn-grad-end: #357DC0;
  --color-shadow-light: #eeeeee;
}

input {
    text-transform: uppercase;
}

/* -------------------------------------------------------------------
   LOGIN 
------------------------------------------------------------------- */
.label-LOCAL {
  background-color: var(--color-label-local);
}

.margin-top-login {
  margin-top: 5%;
}

.row-heading-meyss {
  margin: 0 0 10px 0;
}

.sede-title {
  color: var(--color-header-text);
  font-family: "Open Sans Bold", sans-serif;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.panel-default-login-left {
  border-color: var(--color-panel-border);
  margin-right: 5px;
}

.panel-default-login-right {
  border-color: var(--color-panel-border);
  margin-left: 5px;
}

.btn-clave-login-w {
  background-color: var(--color-btn-clave-bg);
  border: 1px solid var(--color-btn-clave-border);
  padding: 12px;
}

/* -------------------------------------------------------------------
   HEADER
------------------------------------------------------------------- */
.fondo_navbar_header {
  background-color: var(--color-header-bg);
}

.container_header {
  padding-left: 0;
}

body.loading {
  overflow: hidden;
}


/* LOGOS */
.cabecera_logos {
  height: 70px;                  /* Tamaño móvil */
  width: auto;
  background-color: var(--color-white);
}
@media (min-width: 768px) {
  .cabecera_logos {
    height: 100px;              /* Tamaño escritorio */
  }
}

.info_App {
  color: var(--color-white);
  margin-top: 5px;
  height: auto;
  overflow: visible;
}

.info_App b.siglas,
.info_App .info_siglas {
  line-height: 1.1;
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

/* Ajustes móviles */
@media (max-width: 576px) {

  .info_App {
    width: 100%;
    margin-left: 0 !important;
    text-align: center;
    margin-top: 10px;
  }

  .info_App .info_siglas {
    font-size: 0.85rem;
  }
}
/* BLOQUE USUARIO */
.info_usuario b.siglas {
  color: var(--color-white);
}

.navbar-button-header {
  padding: 5px 0;
  height: auto;
  font-size: 16px;
  line-height: 20px;
}


.form-control[readonly] {
  background-color: var(--bs-secondary-bg);
  opacity: 1;
  cursor: not-allowed;
}

.bootstrap-select.disabled .dropdown-toggle,
.bootstrap-select .dropdown-toggle:disabled {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  border-color: var(--bs-border-color);
  opacity: 1;
}
.bootstrap-select .dropdown-toggle:disabled:focus {
  box-shadow: none;
  outline: none;
}

/* -------------------------------------------------------------------
   HEADER
------------------------------------------------------------------- */
.fondo_navbar_header {
  background-color: var(--color-header-bg);
}

.container_header {
  padding-left: 0;
}

/* LOGOS */
.cabecera_logos {
  height: 70px; /* Tamaño móvil */
  width: auto;
  background-color: var(--color-white);
}

@media (min-width: 768px) {
  .cabecera_logos {
    height: 100px; /* Tamaño escritorio */
  }
}

.info_App {
  color: var(--color-white);
  margin-top: 5px;
  height: auto;
  overflow: visible;
}

.info_App b.siglas,
.info_App .info_siglas {
  line-height: 1.1;
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

/* Ajustes móviles */
@media (max-width: 576px) {
  .info_App {
    width: 100%;
    margin-left: 0 !important;
    text-align: center;
    margin-top: 10px;
  }

  .info_App .info_siglas {
    font-size: 0.85rem;
  }
}

/* BLOQUE USUARIO */
.info_usuario b.siglas {
  color: var(--color-white);
}

.navbar-button-header {
  padding: 5px 0;
  height: auto;
  font-size: 16px;
  line-height: 20px;
}

/* Ajustes para pantallas ≤1280px */
@media (max-width: 1280px) {
  /* Hacer que la fila principal permita que los bloques se envuelvan */
  .container_header .row {
    flex-wrap: wrap;
  }

  /* Logos ocupan toda la línea */
  .container_header .row > .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 10px; /* separa visualmente del bloque usuario */
  }

  /* Usuario y botones ocupan toda la línea pero alineados a la derecha */
  .container_header .row > .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  /* Mantener los botones alineados a la derecha dentro del bloque usuario */
  .navbar-button-header {
    justify-content: flex-end !important;
  }

  /* Ajustar info_App del bloque usuario para que no se deforme */
  .col-md-4 .info_App,
  .col-md-4 .info_usuario {
    text-align: right;
    align-items: flex-end;
  }
}



.label-DES {
	background-color: var(--color-label-des);
}

.label-PRE {
	background-color: var(--color-label-pre);
}

/* ------------------------ */
/*  FOOTER FIXED RESPONSIVE */
/* ------------------------ */

.footer {
  position: fixed;
  bottom: 0;
  left: 0;

  width: 100%;
  z-index: 999;

  background-color: var(--color-footer-bg);
  color: var(--color-white);

  /* No forzamos altura fija. El contenido manda */
  padding: 6px 10px;

  /* Asegura que el contenido nunca se pega al borde */
  display: flex;
  align-items: center;
}

/* Ajusta los párrafos */
.footer p {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
}

.footer p > span {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* ------------------------ */
/*  MARGEN PARA NO TAPAR LA PÁGINA */
/* ------------------------ */

/* Añade espacio al final del documento equivalente al tamaño del footer */
body {
  padding-bottom: 55px; /* ajustar si aumenta el alto real del footer */
}

/* ------------------------ */
/*  RESPONSIvIDAD MÓVIL */
/* ------------------------ */

/* En pantallas pequeñas el footer se apila verticalmente */
@media (max-width: 576px) {
  .footer {
    flex-direction: column;
    text-align: center;
    padding: 10px 5px;
  }

  .footer p {
    margin-bottom: 3px;
  }
}


/* -------------------------------------------------------------------
   BOTONES
------------------------------------------------------------------- */
.btn-primary {
  color: var(--color-white);
  background-color: var(--color-btn-primary-bg);
  border-color: var(--color-btn-primary-border);
}

.btn-primary:hover {
  color: var(--color-white);
  background-color: var(--color-btn-primary-hover-bg);
  border-color: var(--color-btn-primary-hover-border);
}

.btn-default {
  color: var(--color-header-text);
  background-color: var(--color-btn-default-bg);
  border-color: var(--color-btn-default-border);
}

.btn-default:hover {
  color: var(--color-white);
  background-color: var(--color-btn-default-hover-bg);
  border-color: var(--color-btn-default-hover-border);
}

.btn-clave-w {
  background-color: var(--color-btn-clave-bg);
  border: 1px solid var(--color-btn-clave-border);
  padding: 12px;
}

.btn-clave-w:hover {
  background-color: var(--color-btn-default-hover-border);
  border: 1px solid var(--color-btn-default-hover-bg);
  padding: 12px;
}
/******************************btn-danger-phantom*************************************************/
.btn-danger-phantom {
	color: #8E3534;
	background-color: #FFF;
	border-color: #8E3534;
}

.btn-danger-phantom.focus, .btn-danger-phantom:focus {
	color: #fff;
	background-color: #c9302c;
	border-color: #761c19
}

.btn-danger-phantom:hover {
	color: #fff;
	background-color: #c9302c;
	border-color: #ac2925
}

.btn-danger-phantom.active, .btn-danger-phantom:active, .open>.dropdown-toggle.btn-danger-phantom
	{
	color: #fff;
	background-color: #c9302c;
	border-color: #ac2925
}

.btn-danger-phantom.active.focus, .btn-danger-phantom.active:focus, .btn-danger-phantom.active:hover,
	.btn-danger-phantom:active.focus, .btn-danger-phantom:active:focus, .btn-danger-phantom:active:hover,
	.open>.dropdown-toggle.btn-danger-phantom.focus, .open>.dropdown-toggle.btn-danger-phantom:focus,
	.open>.dropdown-toggle.btn-danger-phantom:hover {
	color: #fff;
	background-color: #ac2925;
	border-color: #761c19
}

.btn-danger-phantom.active, .btn-danger-phantom:active, .open>.dropdown-toggle.btn-danger-phantom
	{
	background-image: none
}

.btn-danger-phantom.disabled.focus, .btn-danger-phantom.disabled:focus, .btn-danger-phantom.disabled:hover,
	.btn-danger-phantom[disabled].focus, .btn-danger-phantom[disabled]:focus, .btn-danger-phantom[disabled]:hover,
	fieldset[disabled] .btn-danger-phantom.focus, fieldset[disabled] .btn-danger-phantom:focus,
	fieldset[disabled] .btn-danger-phantom:hover {
	background-color: #8E3534;
	border-color: #d43f3a
}

.btn-danger-phantom .badge {
	color: #8E3534;
	background-color: #fff
}

/* -------------------------------------------------------------------
   MODAL LOGIN
------------------------------------------------------------------- */
.modal {
  text-align: center;
  padding: 0;
}

.modal:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

@media (min-width: 992px) {
  .modal-xl {
    width: 95%;
    max-width: 1200px;
  }
}

/* -------------------------------------------------------------------
   DIV DE ATENCION AL USUARIO
------------------------------------------------------------------- */
.divAtencionesUsuario {
  display: inline-block;
  border: 2px solid transparent;
  border-color: var(--color-div-atenciones-border);
  background-color: var(--color-panel-bg);
  color: var(--color-header-text);
  font-size: 14px;
  margin-top: 5px;
  padding: 15px;
}

/* -------------------------------------------------------------------
   PANELES
------------------------------------------------------------------- */
.card.border-info {
  border-color: var(--color-panel-border-info) !important;
  background-color: var(--color-panel-bg);
}

.card.border-info > .card-header {
  color: var(--color-white);
  background-color: var(--color-header-text);
  border-color: var(--color-panel-border-info);
}

.card.border-info > .card-header + .collapse > .card-body {
  border-top: 1px solid var(--color-panel-border-info);
}

.card.border-info > .card-header .badge {
  color: var(--color-header-text);
  background-color: var(--color-white);
}

.card.border-info > .card-footer + .collapse > .card-body {
  border-bottom: 1px solid var(--color-panel-border-info);
}

.panel-padding-15 {
  padding: 15px;
}

.card.panel-danger {
  border-color: var(--color-panel-danger);
  background-color: var(--color-white);
}
.card-header.panel-danger {
  color: var(--color-white);
  background-color: var(--color-panel-danger);
  border-color: var(--color-panel-danger);
}

.card-header .btn-phantom {
  color: var(--color-white);
  background-color: transparent;
  border-color: var(--color-white);
}

.card-header .btn-phantom:hover {
  color: var(--color-header-text);
  background-color: var(--color-white);
  border-color: var(--color-panel-border-info);
}


.icon-collapse {
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn-link.collapsed .icon-collapse {
  transform: rotate(0deg);
}

.btn-link:not(.collapsed) .icon-collapse {
  transform: rotate(90deg);
}

.icon-collapse {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* -------------------------------------------------------------------
   MENU SUPERIOR DE NAVEGACION
------------------------------------------------------------------- */

.navbar-meyss {
	margin-bottom: 0px;
  	min-height: 65px;
  	border: 1px solid var(--color-header-bg);
	border-radius: 5px;
	margin-top: 0px; 
	padding-top: 0px;
}
.navbar-meyss > .navbar-header {
	margin-right: 0px;
}
.navbar-brand-meyss{
	outline: none;
}
.navbar-brand-meyss > img {
	margin-left: -14px;
	margin-top: -15px;	
	width: 247px;
	height: 63px;
}
.navbar-meyss-app {
	margin-left: 0px;
	margin-top: 21px;
	margin-bottom: 22px;
}
.navbar-meyss-sede {
	margin-top: 6px;
}
.navbar-meyss-user{
	min-height: 38px;
	margin-top:2px;
	margin-bottom:2px;
}
.navbar-meyss-usuario {
	margin-left: 10px; 
	line-height: 3em;
}
.navbar-meyss-botonera {
	margin-right: 5px;
	line-height: 2.7em;
}

.nav-tabs-meyss li a{
   outline: 0;
}

.nav-tabs li.disabled { 
	color: grey; 
}
.nav-tabs li.disabled a:hover { 
	border-color: transparent; 
}

.nav-link {
    color: var(--color-header-text);
}

.nav-link:hover {
	color: var(--color-header-text);
	background-color: var(--color-gray-hover);
}

/** SUBMENÚ NIVEL 2 */
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}

.dropdown-submenu > a {
  position: relative;
  padding-right: 2rem;
}

.dropdown-submenu > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;  
  border-color: transparent;    
  border-left-color: var(--color-gray-light);
}

.dropdown-submenu:hover>a:after {
    border-left-color: var(--color-white);
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}


.nav-meyss > li > a {
  color: var(--color-link-primary);
  font-size: 1rem;
  padding-left: 10px;   
  padding-right: 10px;
}


.nav-meyss > li > a:hover {
  background-color: var(--color-gray-hover);
  color: var(--color-header-text);
}


.nav-meyss > li.active > a {
  background-color: var(--color-gray-hover);
  color: var(--color-header-bg);
  outline: none;
  box-shadow: none;
}


.nav-meyss .dropdown.show > a {
  background-color: var(--color-gray-hover);   
  border-color:    var(--color-header-bg);     
  color:           var(--color-header-text); 
}


.dropdown-menu-meyss .dropdown-item {
  color: inherit;               
  background-color: transparent; 
  font-size: 1rem; 

}

.dropdown-menu-meyss .dropdown-item:hover {
  background-color: var(--color-gray-hover);   
  color: var(--color-header-text);  
}

.dropdown-menu-meyss .dropdown-item:focus,
.dropdown-menu-meyss .dropdown-item:active {
  background-color: transparent;
  color: inherit;
  outline: none;
  box-shadow: none;
}

.dropdown-menu-meyss .dropdown-item:active:hover {
  background-color: var(--color-gray-hover); 
  color:            var(--color-header-text); 
}

/* -------------------------------------------------------------------
   DATATABLES
------------------------------------------------------------------- */

.custom-sortable-table thead th {
    position: relative;
    text-align: center;
}

.custom-sortable-table tbody td {
    text-align: center;
}


.custom-sortable-table thead th .header-content {
    display: inline-block;
    text-align: center;
    width: calc(100% - 0px);
}

.custom-sortable-table thead th .bi {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
}

.custom-sortable-table .text-left{
    text-align: left
}

/* --------------------------------------------------
   Encabezados de tabla
-------------------------------------------------- */
.bg-primary-table th {
  background-color: var(--color-table-header-bg);
  color:            var(--color-white);
}

tbody td span.badge {
	background-color: var(--color-table-header-bg) ;
  	color:            var(--color-white)           ;
}

/* --------------------------------------------------
   Paginación
-------------------------------------------------- */
.dt-paging .dt-paging-button {
  background: var(--color-white);
  color:      var(--color-pagination-text);
  border:     1px solid var(--color-panel-border);
  padding:    6px 12px;
  margin-left: -1px;
  border-radius: 0;
  cursor:     pointer;
}
.dt-paging .dt-paging-button.first {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  margin-left: 0;
}
.dt-paging .dt-paging-button.last {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
  background:   var(--color-div-atenciones-border);
  color:        var(--color-pagination-hover-text);
  border-color: var(--color-panel-border);
  z-index:      2;
}

.dt-paging .dt-paging-button:focus:not(.disabled):not(.current),
.dt-paging .dt-paging-button:active:not(.disabled):not(.current) {
  background:   var(--color-pagination-text);
  color:        var(--color-white);
  border-color: var(--color-pagination-text);
  z-index:      2;
}

.dt-paging .dt-paging-button.current,
.dt-paging .dt-paging-button.current > * {
  background:   var(--color-pagination-text);
  color:        var(--color-white);
  border-color: var(--color-pagination-text);
  cursor:       default;
  z-index:      3;
}

.dt-paging .dt-paging-button.disabled,
.dt-paging .dt-paging-button.disabled:hover {
  background:   var(--color-div-atenciones-border);
  color:        var(--color-pagination-disabled-text);
  border-color: var(--color-panel-border);
  cursor:       not-allowed;
}

/* --------------------------------------------------
   Texto de información y alineación de paginación
-------------------------------------------------- */
.dt-info {
  float:      left;
  text-align: left;
}

.dt-paging {
  float:      right;
  text-align: right;
}

/* --------------------------------------------------
   Ellipsis como botón desactivado
-------------------------------------------------- */
.dt-paging .ellipsis {
  display:      inline-block;
  padding:      6px 12px;
  background:   var(--color-div-atenciones-border);
  color:        var(--color-pagination-disabled-text);
  border:       1px solid var(--color-panel-border);
  margin-left:  -1px;
  cursor:       not-allowed;
  border-radius: 0;
}
.dt-paging .ellipsis.first {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  margin-left: 0;
}
.dt-paging .ellipsis.last {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* --------------------------------------------------
   Botones extra pequeños
-------------------------------------------------- */
.btn-xs {
  padding:    2px 6px;
  font-size:  0.75rem;
  line-height: 1.5;
}
.btn-xs .bi {
  font-size: 1rem;
}

/* --------------------------------------------------
   Iconos en cabeceras de tabla
-------------------------------------------------- */
.header-content i.bi {
  display:        inline-block;
  font-size:      1rem;
  vertical-align: middle;
  margin-left:    0.25rem;
}

/* --------------------------------------------------
   Celdas del cuerpo de la tabla
-------------------------------------------------- */
.custom-sortable-table tbody td {
  text-align:   center;
  font-weight:  normal;
}

.custom-sortable-table tbody td:nth-child(1) {
  font-weight: bold;
}

/* --------------------------------------------------
   Reglas para reposicionar el botón “Firmar seleccionados”
-------------------------------------------------- */
#contenedorBotonFirmar {
  clear:            both;
  width:            100%;
  margin-top:       10px;
  background-color: var(--color-panel-bg);
  padding-top:      10px;
  text-align:       right;
}

/* --------------------------------------------------
   Estilos para el botón en sus dos estados
-------------------------------------------------- */

#botonFirmarSeleccionados.btn-primary:not(:disabled) {
  background-color: var(--color-panel-border-info); 
  border-color:     var(--color-panel-border-info);
  color:            var(--color-white);
}

#botonFirmarSeleccionados.btn-primary:disabled {
  background-color: var(--color-button-disabled-bg); 
  border-color:     var(--color-button-disabled-bg);
  color:            var(--color-white);
  opacity:          1;
  cursor:           not-allowed;
}

							
/* -------------------------------------------------------------------
   MODALES
------------------------------------------------------------------- */

.modal-styled .modal-header {
  background-color: var(--color-header-text) !important;
  color:            var(--color-white) !important;
}

.modal-styled .btn-close-white {
  filter: invert(1);
}

.modal-styled .modal-body {
  padding: 1.5rem;
}
.modal-styled .modal-footer {
  padding: 1rem 1.5rem;
}

.modal-styled .modal-footer .btn-secondary {
  background-color: var(--color-btn-default-bg);
  border-color:     var(--color-btn-default-border);
  color:            var(--color-header-text);
}
.modal-styled .modal-footer .btn-secondary:hover {
  background-color: var(--color-btn-default-hover-bg);
  border-color:     var(--color-btn-default-hover-border);
  color:            var(--color-white);
}

.modal-styled .modal-footer .btn-primary {
  background-color: var(--color-btn-primary-bg);
  border-color:     var(--color-btn-primary-border);
}
.modal-styled .modal-footer .btn-primary:hover {
  background-color: var(--color-btn-primary-hover-bg);
  border-color:     var(--color-btn-primary-hover-border);
}

.modal-styled .selectpicker {
  width: 100%;
}
.modal-styled .selectpicker + .dropdown-menu {
  min-width: 100%;
}

.alert-error.d-none {
  display: none;
}

.gj-icon {
  color: var(--color-header-text);
}

.btn-outline-secondary:hover {
  background-color: var(--color-header-text);
  color: var(--color-white);
}

.btn-outline-secondary:hover .gj-icon {
  color: var(--color-white);
}

.bootstrap-select .dropdown-toggle {
  height: calc(2.25rem + 2px);

  background-color: var(--color-white);

  border: 1px solid var(--color-gray-light);

  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
}

.bootstrap-select .dropdown-toggle .filter-option {
  font-size: 1rem;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select .dropdown-toggle:hover {
  box-shadow: none;
}

.bootstrap-select .dropdown-toggle .caret {
  margin-top: 0.2rem;     
  float: right;           
  font-size: 0.75rem;     
  color: var(--color-header-text);
}

.bootstrap-select .dropdown-menu {
  min-width: 100%;
  border-radius: 0.25rem;
}

.bootstrap-select .dropdown-menu .dropdown-item {
  padding: 0.25rem 0.75rem;
  font-size: 1rem;
}

.bootstrap-select {
  width: 100% !important;
}

.bootstrap-select .dropdown-menu .inner {
  max-height: 12rem;
  overflow-y: auto;
}

.bootstrap-select .dropdown-menu .dropdown-item {
  white-space: normal;
  word-break: break-word;
  padding: 0.25rem 0.75rem;
  font-size: 1rem;
}

.bootstrap-select .dropdown-menu {
  max-width: 300px;
  width: auto !important;
}

.bootstrap-select .dropdown-menu .inner {
  max-height: 12rem;
  overflow-y: auto;
}
.alert-error.d-none.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus {
  background-color: var(--color-gray-corporate);
  color: var(--color-header-text);
}

.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item.active:hover {
  background-color: var(--color-gray-corporate);
  color: var(--color-header-text);
}

.bootstrap-select .dropdown-menu .dropdown-item:active {
  background-color: var(--color-gray-corporate);
  color: var(--color-header-text);
}

/* -------------------------------------------------------------------
   HOME PUBLICA
------------------------------------------------------------------- */

.btn-grad {
  /* Degradado usando variables */
  background-image: linear-gradient(
    to right,
    var(--color-btn-grad-start) 0%,
    var(--color-btn-grad-mid) 51%,
    var(--color-btn-grad-end) 100%
  );
  margin: 10px;
  padding: 15px 25px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: var(--color-white);
  box-shadow: 0 0 20px var(--color-shadow-light);
  border-radius: 10px;

  /* Icono y texto alineados */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  font-size: 1.2rem;
  line-height: 1;
}

.btn-grad .span-principal-button,
.btn-grad i.bi {
  font-size: inherit;
}

.btn-grad:hover {
  background-position: right center;
  color: var(--color-white);
  text-decoration: none;
}

.sede-title {
  padding-top: 1%;
  color: var(--color-header-text);
  font-family: "Open Sans Bold", sans-serif;
}

/* Ambos paneles dentro de esa columna tendrán el mismo ancho */

/* Separa uno del otro */
#bibliotecaRecomendaciones {
  margin-top: 0.5rem;
}

#atencionUsuario {
  margin-top: 6rem;
}

.divPanelesHomePublica {
  display: inline-block;
  border: 2px solid transparent;
  border-color: var(--color-div-atenciones-border);
  background-color: var(--color-panel-bg);
  color: var(--color-header-text);
  font-size: 16px;
  margin-top: 2px;
  padding: 8px;
}

a {
  color: var(--color-link-primary);
  text-decoration: none;
}

.col-lg-2 {
  padding-right: 2rem !important;
}

table.dataTable>tbody>tr {
	background-color: #F5F5F5 !important;
}
table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1) {
	background-color: #f9f9f9 !important;
}



/* BASE LAYOUT*/
/**********************************************************************************/

.form-group {
  margin-bottom: 15px;
}

.btn-secondary {
  color: var(--color-white);
  background-color: /* no hay variable definida para este tono */ #305E6B;
  border-color: /* no hay variable definida para este tono */ #3F7C8D;
}

.btn-secondary:focus,
.btn-secondary.focus {
  color: var(--color-white);
  background-color: /* no hay variable definida para este tono */ #39707F;
  border-color: var(--color-header-bg);
}

.btn-secondary:hover {
  color: var(--color-white);
  background-color: /* no hay variable definida para este tono */ #39707F;
  border-color: /* no hay variable definida para este tono */ #269abc;
}

.btn-secondary.active,
.btn-secondary:active,
.open>.dropdown-toggle.btn-secondary {
  color: var(--color-white);
  background-color: /* no hay variable definida para este tono */ #39707F;
  border-color: /* no hay variable definida para este tono */ #269abc;
}

.btn-secondary.active:focus,
.btn-secondary.active.focus,
.btn-secondary.active:hover,
.btn-secondary:active:focus,
.btn-secondary:active:hover,
.open>.dropdown-toggle.btn-secondary:focus,
.open>.dropdown-toggle.btn-secondary:hover {
  color: var(--color-white);
  background-color: /* no hay variable definida para este tono */ #269abc;
  border-color: /* no hay variable definida para este tono */ #1b6d85;
}

.btn-secondary.active,
.btn-secondary:active,
.open>.dropdown-toggle.btn-secondary {
  background-image: none;
}

.btn-secondary.disabled:focus,
.btn-secondary.disabled.focus,
.btn-secondary.disabled:hover,
.btn-secondary[disabled]:focus,
.btn-secondary[disabled]:hover,
fieldset[disabled] .btn-secondary:focus,
fieldset[disabled] .btn-secondary:hover {
  background-color: /* no hay variable definida para este tono */ #305E6B;
  border-color: /* no hay variable definida para este tono */ #3F7C8D;
}

.btn-secondary .badge {
  color: /* no hay variable definida para este tono */ #305E6B;
  background-color: var(--color-white);
}

.btn-default {
  color: var(--color-header-text);
  background-color: var(--color-btn-default-bg);
  border-color: var(--color-btn-default-border);
}

.btn-default:focus,
.btn-default.focus {
  color: var(--color-white);
  background-color: var(--color-btn-default-hover-bg);
  border-color: var(--color-btn-default-hover-border);
}

.btn-default:hover {
  color: var(--color-white);
  background-color: var(--color-btn-default-hover-bg);
  border-color: var(--color-btn-default-hover-border);
}

.btn-default.active,
.btn-default:active,
.open>.dropdown-toggle.btn-default {
  color: var(--color-white);
  background-color: var(--color-header-text);
  border-color: var(--color-btn-default-hover-border);
}

.btn-default.active:focus,
.btn-default.active.hover,
.btn-default:active.focus,
.btn-default:active:hover,
.open>.dropdown-toggle.btn-default:focus,
.open>.dropdown-toggle.btn-default:hover {
  color: var(--color-white);
  background-color: var(--color-btn-default-hover-bg);
  border-color: var(--color-btn-default-hover-border);
}

.btn-default.active,
.btn-default:active,
.open>.dropdown-toggle.btn-default {
  background-image: none;
}

.btn-default:disabled,
.btn-default.disabled,
.btn-default.disabled:focus,
.btn-default.disabled:hover,
.btn-default[disabled]:focus,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default:hover {
  background-color: var(--color-btn-default-bg);
  color: var(--color-pagination-disabled-text);
  border-color: var(--color-pagination-disabled-text);
}

.btn-default .badge {
  color: var(--color-white);
  background-color: /* no hay variable definida para este tono */ #333;
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary.disabled:focus,
.btn-primary.disabled:hover,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:hover {
  background-color: var(--color-button-disabled-bg);
  color: var(--color-white);
  border-color: var(--color-button-disabled-bg);
  opacity: 1; /* opcional, elimina el gris opaco de Bootstrap */
  cursor: not-allowed;
}

.text-left {
  text-align: left;
}

table.dataTable thead th,
table.dataTable tbody td {
  vertical-align: middle !important;
}

/* Ajuste fino para los iconos de Bootstrap Icons */
table.dataTable thead th i.bi,
table.dataTable tbody td i.bi {
  vertical-align: middle;
  line-height: 1;
}

.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: var(--color-gray-hover);
  border-radius: 4px;
}

.breadcrumb>li {
  display: inline-block;
}

.breadcrumb>li+li:before {
  padding: 0 5px;
  color: var(--color-gray-light);
  content: "/\00a0";
}

.breadcrumb>.active {
  color: /* no hay variable definida para este tono */ #777;
}

.form-check-input[type="checkbox"] {
  transform: scale(1.5);
  transform-origin: top left;
  margin-top: 0.25rem;
  margin-right: 0.5rem;
}

.checkbox-permisos {
  width: 1.55rem;
  height: 1.55rem;
  margin-top: 0.2rem;
}

.no-marging {
  margin: 0 !important;
}

/* Más espacio en cada elemento de la lista de roles/permiso */
.list-group-flush .list-group-item {
  padding-top: 0.75rem;    /* antes .5rem */
  padding-bottom: 0.75rem;
  padding-left: 1.25rem;   /* antes 1rem */
  padding-right: 1.25rem;
}

.list-group-item-action.active {
  background-color: var(--color-gray-hover) !important;
  border-color:    var(--color-gray-hover) !important;
  color:           inherit;
}

/* 1) Cada TH ordenable es contenedor relativo */
table.custom-sortable-table th.sortable {
  position: relative;
}

/* 2) El wrapper .d-flex lo convertimos en bloque para no interferir */
table.custom-sortable-table th.sortable > .d-flex {
  display: block !important;
  position: relative;
}

/* 3) Centramos el texto absolutándolo */
table.custom-sortable-table th.sortable .header-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

/* 4) El icono lo sacamos igualmente y lo pegamos a la derecha */
table.custom-sortable-table th.sortable i.bi {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  margin: 0 !important;
}

/* Sin halo/borde de foco (global) */
.modal .modal-header .btn-close,
.modal .modal-header .btn-close:focus,
.modal .modal-header .btn-close:focus-visible,
.modal .modal-header .btn-close:active,
.card  .card-header  .btn-close,
.card  .card-header  .btn-close:focus,
.card  .card-header  .btn-close:focus-visible,
.card  .card-header  .btn-close:active {
  --bs-btn-close-focus-shadow: 0 0 0 0 transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Firefox antiguo */
.modal .modal-header .btn-close::-moz-focus-inner,
.card  .card-header  .btn-close::-moz-focus-inner {
  border: 0 !important;
}

/* HOVER: solo la “X” en blanco (fondo transparente) */
.modal .modal-header .btn-close:hover,
.card  .card-header  .btn-close:hover {
  background-color: transparent !important;
  opacity: 1 !important;
  filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* Si usas .btn-close-white, ya es blanca; mantenla igual en hover */
.modal .modal-header .btn-close.btn-close-white:hover,
.card  .card-header  .btn-close.btn-close-white:hover {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* Botón fantasma para headers (texto + borde blanco “gordito”) */
.btn-header-ghost {
  --_border-w: 2.5px;                 /* grosor del borde */
  --_radius: .4rem;

  color: var(--color-white) !important;
  background-color: transparent;
  border: var(--_border-w) solid var(--color-white);
  border-radius: var(--_radius);
  font-weight: 600;
  line-height: 1;
  padding: .25rem .75rem;
  box-shadow: none !important;
}

.btn-header-ghost i { color: inherit; }

/* Hover: mantiene blanco y añade un leve “velo” */
.btn-header-ghost:hover {
  color: var(--color-white);
  background-color: rgba(255,255,255,.12);
  border-color: var(--color-white);
  text-decoration: none;
}

/* Focus/Active: sin halo ni reborde feo */
.btn-header-ghost:focus,
.btn-header-ghost:active,
.btn-header-ghost:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Disabled coherente */
.btn-header-ghost:disabled,
.btn-header-ghost.disabled {
  opacity: .6;
  color: var(--color-white);
  border-color: var(--color-white);
}

/* Espacio del icono “+” */
.btn-header-ghost .bi { margin-right: .35rem; }

.text-info {
	color: var(--color-header-text) !important;
}

.bootstrap-select.no-fullwidth {
    width: auto !important;
}

fieldset.scheduler-border {
  border: 1px solid var(--color-panel-border-info) !important;
  background-color: var(--color-panel-bg);
  border-radius: .375rem;

  padding: 1.75rem 1rem 1rem 1rem !important;
  margin: 0 0 1.5rem 0 !important;

  position: relative;
}

legend.scheduler-border {
  position: absolute;
  top: -0.8rem;             
  left: 1rem;               

  margin: 0 !important;
  padding: 0 .6rem;         
  background: var(--color-panel-bg); 
  border: none !important;

  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--color-header-text);
  line-height: 1.2;
  width: auto;              
}

fieldset.scheduler-border-label {
  border: 1px solid var(--color-panel-border-info) !important;
  background-color: var(--color-panel-bg);
  border-radius: .375rem;
  padding: 1.75rem 1rem 1rem 1rem !important;
  margin: 0 0 1.5rem 0 !important;
  position: relative;
}
legend.scheduler-border-label {
  position: absolute;
  top: -0.8rem;
  left: 1rem;

  margin: 0 !important;
  padding: 0 .6rem;
  background: var(--color-panel-bg);
  border: none !important;

  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--color-header-text);
  line-height: 1.2;
  width: auto;
}

@media (max-width: 576px) {
  legend.scheduler-border,
  legend.scheduler-border-label { top: -0.7rem; left: .8rem; }
}

.form-fieldset {
    display: block;
    width: 100%;
    padding: .45rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color-panel-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s 
				ease-in-out, box-shadow .15s 
				ease-in-out;
}

/*********************************jodit*************************************************/
div.jodit-container:not(.jodit_inline) {
    border: 1px solid var(--color-header-text) !important;
}

div.jodit .jodit-workplace,
.jodit-container .jodit-workplace {
	background-color: var(--color-white) !important;
}

div.jodit-toolbar-collection_size_middle.jodit-toolbar-collection_mode_horizontal, 
.jodit-toolbar-collection_size_middle.jodit-toolbar-editor-collection_mode_horizontal, 
.jodit-toolbar-editor-collection_size_middle.jodit-toolbar-collection_mode_horizontal, 
.jodit-toolbar-editor-collection_size_middle.jodit-toolbar-editor-collection_mode_horizontal {
	border-bottom: 1px solid var(--color-header-text) !important;
}

.textoLargo{
	max-width:2em;
}

.textoLargoDatatable {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    max-width: 225ch !important; /* Limita aproximadamente a 150 caracteres */
}

.style-button-volver-id{
	float: right;
    margin-top: -4em;
    margin-right: 0.5rem;
}

/* 1) Label siempre en su propia línea, con margen inferior corto */
.form-label.d-block { margin-bottom: .25rem; }

/* 2) Grupo sin huecos entre botones, solape correcto del activo */
.btn-group-tight > .btn { margin: 0; }
.btn-group-tight > .btn + .btn { margin-left: -1px; } /* elimina “hueco” de borde doble */
.btn-group-tight .btn.active { z-index: 1; }

/* 3) Si tu .btn-default corporativo introduce margen, neutralízalo dentro de grupos */
.btn-group > .btn.btn-default { margin: 0; }


.modal-wide .modal-dialog { max-width: 1100px; }
 @media (min-width: 1400px){
   .modal-wide .modal-dialog { max-width: 1250px; }
}

.modal .bootstrap-select .dropdown-menu{
  width: auto !important;
  min-width: 100% !important; /* igual al ancho del toggle */
  max-width: 100% !important;
}
/* Blindaje extra si alguna vez se usa .bs-container (container:'body') */
.bs-container .dropdown-menu{
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Área de documento: ocupar más pantalla */
.iframe{
  width: 100%;
  min-height: 78vh; /* más alto que antes */
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .25rem;
}
@media (min-height: 900px){
  .iframe{ min-height: 82vh; }
}

/* Bloque de botones: barra amplia y clara */
.sign-toolbar{
  padding: 1rem 0;
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
}
.sign-toolbar .btn{
  padding: .75rem 1.25rem;      /* más grande */
  font-size: 1.0625rem;         /* más grande */
}

/* Info alert limpia y a todo lo ancho */
.alert-info.float-left-div-contenedor{
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  width: 100%;
}

.custom-sortable-table { table-layout: fixed; width: 100%; }

/* Celdas con texto largo: saltos de línea y corte de palabras largas */
.dt-wrap,
.text-break {                 /* .text-break es de Bootstrap; .dt-wrap refuerza */
  white-space: normal !important;
  overflow-wrap: anywhere !important;   /* estándar */
  word-break: break-word !important;    /* fallback */
}

/* Evita que .textoLargo (2em) te rompa columnas si se quedó en el markup */
.custom-sortable-table td.textoLargo,
.custom-sortable-table th.textoLargo {
  max-width: none !important;
}

/******************************** MENU LATERAL *****************************************/
.menu-lateral-left>.navbar-inner>.flex-column {
  border-bottom: none;
  padding-top: 2px;
}
.menu-lateral-left>.navbar-inner>.flex-column>li {
  float: none;
  margin-bottom: 2px;
  font-size: 1.25rem;
}
.menu-lateral-left>.navbar-inner>.flex-column>li {
  margin-right: -1px;
}
.menu-lateral-left>.navbar-inner>.flex-column>li>a.active,
.menu-lateral-left>.navbar-inner>.flex-column>li>a.active:hover,
.menu-lateral-left>.navbar-inner>.flex-column>li>a.active:focus {
  border-bottom-color: #ddd;
  border-right-color: transparent;
}

.menu-lateral-left>.navbar-inner>.flex-column>li>a {
  background-color:	var(--color-white);
  border-radius: 4px 0 0 4px;
  margin-right: 0;
  display:block;
}

.menu-lateral-left>.navbar-inner>.flex-column>li>span {
	color: var(--color-pagination-hover-text);
    text-decoration: none;
    background-color: var(--color-white);
    border-radius: 4px 0 0 4px;
    margin-right: 0;
    display: block;
    padding: 5px 10px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    position: relative;
}

.menu-lateral-left>.navbar-inner>.nav-tabs>li>a.active,
.menu-lateral-left>.navbar-inner>.nav-tabs>li>a.active:focus{
    color: var(--color-btn-primary-bg);
    cursor: default;
    background-color: var(--color-gray-hover) ;
    border: 1px solid var(--color-gray-hover);
    border-right-color: transparent;
}

.menu-lateral-left>.navbar-inner>.nav-tabs>li{
	 border: transparent;
     margin-right: -1px;
     border-right-color: transparent;
     
}
.menu-lateral-left>.navbar-inner>.nav-tabs>li>a:hover,
.menu-lateral-left>.navbar-inner>.nav-tabs>li>a.active:hover  {
    color: var(--color-white);
    cursor: default;
    background-color: var(--color-btn-primary-bg) ;
    border: 1px solid var(--color-btn-primary-bg);
    border-right-color: transparent;
}
.panel-tab-menu-lateral{
	border-radius: 4px;
	margin-left: -15px;
	background-color: var(--color-gray-hover);
}
.subpanel-tab-menu-lateral{
	margin-left: 15px;
	margin-right: 15px;
	background-color: var(--color-gray-hover);
	min-height: 350px;
}

.subpanel-tab-menu-lateral>.border-info>.card-header {
    color: var(--color-white);
    background-color: var(--color-btn-primary-bg);
    border-color: #5c797e;
}

.subpanel-tab-menu-lateral>*>.border-info>.card-header {
    color: var(--color-white);
    background-color: var(--color-btn-primary-bg);
    border-color: #5c797e;
}

.subpanel-tab-menu-lateral>.row>div>h2{	
	color: var(--color-btn-primary-bg)
}
.btn-default-panel-menu-lateral{	
	color: var(--color-btn-primary-bg);
	background-color: transparent;
	border-color: var(--color-btn-primary-bg);
}
.btn-default-panel-menu-lateral:hover{	
	color: var(--color-white);
	background-color: var(--color-btn-primary-bg);
	border-color: var(--color-white);
}

.subpanel-tab-menu-lateral table.table>thead>tr.bg-primary>th {
   color: var(--color-white);
   background-color: var(--color-button-disabled-bg);
}

.btn-phantom{
   color: var(--color-white);
   background-color: transparent;
   border-color: var(--color-white);
}
.btn-phantom:hover{
   color: var(--color-btn-primary-bg);
   background-color: var(--color-white);
   border-color: var(--color-btn-primary-bg);
}

.btn-outline-primary {
    color: var(--color-btn-primary-bg);
    background-color: transparent;
    border-color: var(--color-btn-primary-bg);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: var(--color-white);
  	background-color: var(--color-btn-default-hover-bg);
  	border-color: var(--color-btn-default-hover-border);
}

.nivel-1 { margin-left: 0; }
.nivel-2 { margin-left: 20px; }
.nivel-3 { margin-left: 40px; }

.cover{
  position: fixed;
  inset: 0;                    
  display: flex;
  align-items: center;         
  justify-content: center;     
  background: rgba(0,0,0,.4);  
  z-index: 1055;               
}

.bi-square-fill.estadoDenominacionRegistrada
{
	color:red !important;;
}

.bi-square-fill.estadoDenominacionTramite
{
	color:red !important;;
}

.bi-square-fill.estadoDenominacionReservada
{
	color:orange!important;;
}

.bi-square-fill.estadoDenominacionDisponible
{
	color:green!important;;
}

.bi-square-fill.estadoDenominacionBajaDisponible
{
	color:green!important;;
}

.custom-style-table{
	table-layout: fixed; 
	word-wrap: break-word;
}

#loaderDialog.fade {
  transition: none !important;
}

.table .panel-info-color{
	color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.scrollFormularioValidacion{
	overflow-y: scroll;
	height : 90%; 
	max-height:600px;
}