@font-face {
    font-family: "NeueHaasDisplay";
    src: url("/fonts/neueHaas/NeueHaasDisplayThin.ttf") format("truetype");
    font-weight: 100; /* Thin */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "NeueHaasDisplay";
    src: url("/fonts/neueHaas/NeueHaasDisplayLight.ttf") format("truetype");
    font-weight: 300; /* Light */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "NeueHaasDisplay";
    src: url("/fonts/neueHaas/NeueHaasDisplayRoman.ttf") format("truetype");
    font-weight: 400; /* Regular / Roman */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "NeueHaasDisplay";
    src: url("/fonts/neueHaas/NeueHaasDisplayMedium.ttf") format("truetype");
    font-weight: 500; /* Medium */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "NeueHaasDisplay";
    src: url("/fonts/neueHaas/NeueHaasDisplayBold.ttf") format("truetype");
    font-weight: 700; /* Bold */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "NeueHaasDisplay";
    src: url("/fonts/neueHaas/NeueHaasDisplayBlack.ttf") format("truetype");
    font-weight: 900; /* Black */
    font-style: normal;
    font-display: swap;
}

/*************************************************
 * Sistema de títulos – Neue Haas Display
 *************************************************/

/* Títulos “globales” en el nuevo tema */
/* Títulos globales */
h1, h2, h3, h4, h5, h6 {
    font-family: "NeueHaasDisplay", sans-serif;
    font-weight: 900; /* BLACK */
    color: #111827;
    letter-spacing: -0.01em;
}

/* Texto general del sitio */
body {
    font-family: "NeueHaasDisplay", sans-serif;
    font-weight: 400; /* Regular */
    font-size: 12px;
    color: #111827;
    line-height: 1.55; /* mejor lectura */
}

/* Estilos modernos para párrafos */
p {
    font-family: "NeueHaasDisplay", sans-serif;
    font-weight: 400;        /* Regular */
    font-size: 18px;         /* Tamaño solicitado */
    line-height: 1.55;       /* Mejor lectura */
    color: #374151;          /* Gris elegante y profesional */
    margin-bottom: 12px;     /* Separación entre párrafos */
}

/*************************************************
 * Sidebar oscuro elegante - Neue Haas
 *************************************************/

/* FONDO GENERAL DEL MENÚ */
.left.side-menu {
    background-color: #0F0F0F !important;  /* negro elegante */
    color: #F3F4F6 !important;
}

/* Tipografía general del menú */
.left.side-menu,
.left.side-menu #sidebar-menu,
.left.side-menu #sidebar-menu ul li a,
.left.side-menu .menu-title {
    font-family: "NeueHaasDisplay", sans-serif !important;
    font-size: 13px;
    letter-spacing: 0.2px;
    color: #F3F4F6 !important; /* blanco suave */
}

/* Título “Menú principal” */
.left.side-menu .menu-title strong {
    font-weight: 700;
    font-size: 14px;
    color: #FFFFFF !important;
    opacity: 0.9;
}

/* ENLACES */
#sidebar-menu ul li a {
    font-weight: 500;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    color: #F3F4F6 !important;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

/* ÍCONOS */
#sidebar-menu ul li a i {
    font-size: 16px;
    margin-right: 10px;
    color: #D1D5DB !important; /* gris claro */
}

/* HOVER */
#sidebar-menu ul li a:hover {
    background: #1F1F1F !important; /* gris profundo */
    color: #FFFFFF !important;
}
#sidebar-menu ul li a:hover i {
    color: #FFFFFF !important;
}

/* ITEM ACTIVO */
#sidebar-menu ul li.active > a {
    background: #27272A !important; /* gris oscuro elegante */
    color: #FFFFFF !important;
    font-weight: 600;
    position: relative;
}

/* Barra decorativa a la izquierda (opcional, muy moderna) */
#sidebar-menu ul li.active > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: #3B82F6; /* azul elegante */
    border-radius: 3px;
}

/*************************************************
 * BOTONES LIMPIOS Y MODERNOS
 *************************************************/

.btn {
  border-radius: 4px !important;
  padding: 6px 16px !important;
  font-weight: 500 !important;
  font-family: "NeueHaasDisplay", sans-serif;
  border: none !important;
  transition: all 0.2s ease-in-out !important;
}

/* Hover / focus */
.btn:hover,
.btn:focus {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Icono dentro del botón */
.btn i {
  margin-right: 4px;
}

/* Botón de limpiar / cerrar íconos */
.btn-clean {
  background-color: transparent !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer;
}
.btn-clean .glyphicon-remove {
  color: #d9534f;
  font-size: 14px;
}
.btn-clean:hover .glyphicon-remove {
  color: #a94442;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

/* COLORES PERSONALIZADOS */
.btn-success {
  background-color: #2ecc71 !important;
  color: #ffffff !important;
}

.btn-primary {
  background-color: #3498db !important;
  color: #ffffff !important;
}

.btn-danger {
  background-color: #e74c3c !important;
  color: #ffffff !important;
}

.btn-info {
  background-color: #1abc9c !important;
  color: #ffffff !important;
}


/* INPUTS Y SELECTS */
.form-control,
.select2-container .select2-selection--single {
  border-radius: 4px !important;
  box-shadow: none !important;
  border-color: #d0d6e2 !important;
  height: 34px;
}
.form-control:focus {
  border-color: #3498db !important;
  box-shadow: 0 0 3px rgba(52, 152, 219, 0.3) !important;
}
.form-group label {
  display: block;
  margin-bottom: 3px;
  color: #555;
  font-weight: 500;
}
.form-group,
.col-lg-3,
.col-lg-6,
.col-md-6,
.col-sm-6 {
  margin-bottom: 15px;
}

/*
paneles de arriba de botones selecciones
*/

.panel-acciones {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 4px 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.boton-accion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  width: 110px;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
  text-align: center;
}

.boton-accion:hover {
  background-color: #f0f9ff;
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.boton-accion img {
  width: 36px;
  height: 36px;
  transition: transform 0.2s ease;
}

.boton-accion:hover img {
  transform: scale(1.05);
}

.boton-accion span {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  font-family: "Roboto", sans-serif;
  line-height: 1.3;
}

/* Responsivo */
@media (max-width: 768px) {
  .boton-accion {
    width: 100px;
    padding: 10px 12px;
  }

  .boton-accion img {
    width: 30px;
    height: 30px;
  }

  .boton-accion span {
    font-size: 13px;
  }
}

/* ===============================
   TABLAS REDISEÑADAS (modo claro)
   =============================== */
.table {
  font-size: 13px;
  background-color: #ffffff;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #dbe4f1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  overflow: hidden;
}

/* ==================== ENCABEZADO ==================== */
.table thead {
  background: #8ec1f7; /* azul muy suave */
  box-shadow: inset 0 -1px 0 #c7dbf3;
}

.table thead th {
  color: #f5f8ff;
  font-weight: 600;
  text-align: center !important;
  vertical-align: middle;
  padding: 12px 10px;
  font-size: 13.5px;
  border-bottom: 1px solid #c7dbf3;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ==================== CUERPO ==================== */
.table tbody tr:hover {
  background-color: #f1f8ff;
}

.table tbody tr:nth-child(even) {
  background-color: #fafdff;
}

.table td {
  padding: 10px 12px;
  text-align: center;
  vertical-align: middle !important;
  border-top: 1px solid #eceff4;
  color: #34495e;
  font-size: 13.2px;
}

/* ==================== ACCIONES ==================== */
.table .actions a {
  margin: 0 4px;
  font-size: 14px;
  color: #6b7280;
  transition: all 0.2s ease;
}

.table .actions a:hover {
  color: #0d6efd;
  text-decoration: none;
}

/* ==================== CHECKBOX ==================== */
.table td input[type="checkbox"] {
  margin: 0 auto;
  display: block;
  transform: scale(1.15);
}

/* ==================== ESPECIAL ==================== */
.table .text-bold {
  font-weight: 600;
  color: #2c3e50;
}

/* ==================== RESPONSIVE ==================== */
.table-responsive {
  overflow-x: auto;
  margin-top: 0px;
  border-radius: 8px;
  background: #fff;
}

@media (min-width: 992px) {
  .table-responsive {
    overflow-x: visible !important;
  }
}

/* CELDAS ESPECIALES */
.table-detalle td,
.tabprueba td {
  vertical-align: middle !important;
  text-align: center;
}

/* COLUMNAS DE ACCIÓN */
.actions a {
  margin: 0 5px;
  font-size: 14px;
  color: #34495e;
}
.actions a:hover {
  color: #2980b9;
}

/* CHECKBOX */
.checkbox1 {
  transform: scale(1.2);
  margin-top: 2px;
}

/* MODALS */
.modal-content {
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border: none;
}

/* SWEETALERT CLÁSICO */
.sweet-alert {
  font-size: 25px !important;
  font-weight: 400;
  padding: 20px;
  border-radius: 6px;
}
.sweet-alert h2 {
  font-size: 26px !important;
  font-weight: 600 !important;
}
.sweet-alert p {
  font-size: 18px !important;
  line-height: 22px !important;
}

/* Para SweetAlert v1 (swal) */
.sweet-overlay {
  z-index: 9999 !important;
}

.sweet-alert {
  z-index: 10000 !important;
}

/* PROGRESS BAR */
.progress {
  height: 22px;
  background-color: #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}
.progress-bar {
  font-size: 13px;
  font-weight: 600;
  line-height: 22px;
  color: #fff;
  text-align: center;
  transition: width 0.6s ease-in-out;
  border-radius: 0 12px 12px 0;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.progress-bar-inverse {
  background-color: #6c757d !important;
}
.progress-bar-success {
  background-color: #28a745 !important;
}
.progress-bar-warning {
  background-color: #ffc107 !important;
  color: #333;
}
.progress-bar-danger {
  background-color: #dc3545 !important;
}
.progress-bar-primary {
  background-color: #007bff !important;
}
.progress-bar-pink {
  background-color: #e83e8c !important;
}
.progress-bar-purple {
  background-color: #6f42c1 !important;
}

/* ETIQUETAS Y ESTADOS */
.label-green {
  background-color: #bcf5a9;
  color: #2d862d;
  padding: 5px 10px;
  border-radius: 3px;
  display: inline-block;
}
.text-muted {
  color: #95a5a6 !important;
}
.text-bold {
  font-weight: 600;
}

/* TARJETAS Y CONTENEDORES */
.card-box {
  padding: 20px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}
.panel-body > .row {
  margin-top: 15px;
}

/* DOCK ICONS */
#dock-container ul li {
  transition: transform 0.2s ease-in-out;
}
#dock-container ul li:hover {
  transform: scale(1.08);
}

/* BLOQUE DETALLE */
.bloque-detalles .panel-heading {
  background-color: #337ab7;
  color: white;
  font-weight: bold;
  font-size: 16px;
}
.bloque-total .panel-heading {
  background-color: #5cb85c;
  color: white;
  font-weight: bold;
  font-size: 16px;
}

.total-destacado {
  font-size: 40px;
  font-weight: bold;
  color: #5cb85c;
  padding: 4px!important;
}
.tabla-detalles-proyecto {
  margin-bottom: 0;
  border: none;
}
.tabla-detalles-proyecto td {
  padding: 8px 10px;
  vertical-align: middle;
  border-top: 1px solid #e0e0e0;
}
.tabla-detalles-proyecto .etiqueta {
  font-size: 14px;
  font-weight: bold;
  background-color: #f7f7f7;
  text-align: right;
}

/* BOTONES DE FACTURAS */
.botones-acciones-facturas button {
  margin-right: 10px;
  min-width: 160px;
}
.botones-acciones-facturas i {
  margin-right: 5px;
}

.resumen-fondos th,
.resumen-fondos td {
  font-size: 13px;
  padding: 8px;
  vertical-align: middle;
  border: 1px solid #dcdfe6;
}

.resumen-fondos thead th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
}

.text-bold {
  font-weight: 600;
}

.credit-summary {
  background: #f6f6f6 !important;
  border-radius: 8px; /* Borde redondeado */
  padding: 15px 20px; /* Espaciado interno */
  border: 1px solid #e1e4e8; /* Borde sutil */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Sombra suave */
}

.result-l7 {
  background: #3490dc !important;
  border-radius: 8px; /* Borde redondeado */
  padding: 15px 20px; /* Espaciado interno */
  border: 1px solid #e1e4e8; /* Borde sutil */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Sombra suave */
}

.credit-label {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  margin-bottom: 3px;
  display: block;
}

.credit-prestatario {
  font-weight: 600;
  font-size: 13px;
  color: #222;
  background-color: #eef1f5;
  border-radius: 4px;
  /*padding: 6px 10px;*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.credit-monto {
  padding: 4px;
  background-color: #eef1f5;
  border-radius: 4px;
  margin: 2px;
  font-size: 11px;
  font-weight: 500;
}

.credit-monto div {
  font-weight: 600;
  font-size: 11px;
  color: #555;
}
.credit-monto-success {
  padding: 4px 8px;
  background-color: #d4edda; /* Verde claro elegante */
  color: #155724; /* Verde oscuro para texto */
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  margin: 2px;
  font-size: 11px;
  font-weight: 500;
}

.credit-monto-warning {
  padding: 4px 8px;
  background-color: #fff3cd; /* Amarillo suave */
  color: #856404; /* Amarillo oscuro para texto */
  border: 1px solid #ffeeba;
  border-radius: 4px;
  margin: 2px;
  font-size: 11px;
  font-weight: 500;
}
.credit-monto-primary {
  padding: 4px 8px;
  background-color: #cce5ff; /* Azul claro tipo Bootstrap */
  color: #004085; /* Azul oscuro para texto */
  border: 1px solid #b8daff;
  border-radius: 4px;
  margin: 2px;
  font-size: 11px;
  font-weight: 500;
}
.credit-monto-orange {
  padding: 4px 8px;
  background-color: #e8be99; /* Verde claro elegante */
  color: #311d0c; /* Verde oscuro para texto */
  border: 1px solid #c7844a;
  border-radius: 4px;
  margin: 2px;
  font-size: 11px;
  font-weight: 500;
}

/* modales*/

/* Elimina el padding general del modal-body */
.modal-body {
  padding: 10px !important;
  background-color: #fff; /* o usa transparente si prefieres */
}

/* Asegura que los form-group estén bien alineados sin espacio innecesario */
.modal-body .form-group {
  margin-bottom: 8px !important;
}

/* Labels definidos pero sin alterar tu fuente */
.modal-body .form-group label {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 3px;
  display: block;
  color: #333;
}

/* Estilo base para los inputs/selects */
.modal-body .form-control {
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 4px 8px;
  font-size: 13px;
  height: auto;
  box-shadow: none;
}

/* Focus limpio sin sombra agresiva */
.modal-body .form-control:focus {
  border-color: #66afe9;
  outline: none;
}

.modal-header-rounded {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

/* Ajuste para Select2 para que se vea integrado */
.select2-container--default .select2-selection--single {
  height: 30px !important;
  padding: 2px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  display: flex;
  align-items: center;
  font-size: 13px;
}

/* Asegura altura uniforme para input y botones */
.input-group .form-control,
.input-group-btn > .btn {
  height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.42857143;
  border-radius: 4px;
}

/* Opcional: espacio entre íconos y bordes */
.input-group-btn > .btn i {
  vertical-align: middle;
}

/* Base para todos los botones personalizados */
.btn-custom {
  color: #fff;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-custom:hover {
  filter: brightness(90%);
}

.btn-custom:active {
  transform: scale(0.96);
}

.btn-custom:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

/* Colores personalizados */
.btn-blue {
  background-color: #007bff;
  color: #fff;
}

.btn-blue:hover {
  background-color: #1f6fb1;
  color: #fff;
}

.btn-olive {
  background-color: #556b2f;
  color: #fff;
}

.btn-purple {
  background-color: #6f42c1;
  color: #fff;
}

.btn-orange {
  background-color: #fd7e14;
}

.btn-pink {
  background-color: #e83e8c;
}

.btn-dark {
  background-color: #343a40;
  color: #fff;
}

/* Definición de colores de fondo */
.bg-blue {
  background-color: #3490dc; /* Azul */
  color: #ffffff !important;
}

.bg-green {
  background-color: #38c172; /* Verde */
}

.bg-red {
  background-color: #e3342f; /* Rojo */
}

.bg-yellow {
  background-color: #ffed4a; /* Amarillo */
}

.bg-gray {
  background-color: #6c757d; /* Gris */
}

/* Definición de colores de texto */
.text-white {
  color: #ffffff;
}

.text-black {
  color: #000000;
}

.text-blue {
  color: #3490dc;
}

.text-green {
  color: #38c172;
}

.text-red {
  color: #e3342f;
}

.text-gray {
  color: #6c757d;
}

/* Modal XL personalizado para Bootstrap 3 */
.modal-xl {
  width: 90% !important; /* Puedes ajustar este valor según tu preferencia */
  max-width: 1150px;
}

@media (min-width: 768px) {
  .modal-xl {
    width: 90% !important;
    margin: 30px auto;
  }
}

/* Estilo base del contenedor */
.select2-container .select2-selection--single {
  height: 38px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color 0.2s;
}

/* Texto dentro del select */
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #555;
  line-height: 24px;
  font-size: 14px;
}

/* Flecha del dropdown */
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 36px;
  right: 10px;
  top: 1px;
  width: 25px;
}

/* Hover */
.select2-container--default .select2-selection--single:hover {
  border-color: #999;
}

/* Focus */
.select2-container--default.select2-container--focus
  .select2-selection--single {
  border-color: #66afe9;
  outline: 0;
  box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
}

/* Estilo del dropdown (lista) */
.select2-container--default .select2-results > .select2-results__options {
  max-height: 250px;
  overflow-y: auto;
  font-size: 14px;
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: #3490dc;
  color: white;
}

/* Estilo base para todas las alertas */
.alert {
  position: relative; /* Necesario para que la posición absoluta funcione */
  padding-right: 35px; /* Espacio extra para que no tape el texto */
}

/* Alerta de éxito */
.alert-success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.alert-danger {
  background-color: #f61f33;
  border-color: #f5c6cb;
  color: #ffebed;
}

/* Alerta de advertencia */
.alert-warning {
  background-color: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
}

/* Alerta de información */
.alert-info {
  background-color: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
}
.alert .close {
  position: absolute;
  top: 6px;
  right: 12px;
  font-size: 26px;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
}

.alert .close:hover {
  opacity: 1;
}

/* Estilos del checkbox custom */
.chx {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 26px;
  /* Tamaño del texto "REVISADO" */
  font-weight: 700;
  color: #4a5568;
  /* Gris similar al de la imagen */
}

.chx input {
  position: absolute;
  opacity: 0;
  /* Oculta el checkbox nativo */
  pointer-events: none;
}

.chx-box {
  width: 28px;
  /* Tamaño del cuadro */
  height: 28px;
  border-radius: 6px;
  /* Bordes redondeados del cuadro */
  border: 2px solid #cbd5e0;
  /* Borde gris claro cuando no está marcado */
  background: #fff;
  display: inline-block;
  position: relative;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  transition: all 0.15s ease-in-out;
}

/* Estado marcado: fondo verde azulado + borde del mismo color */
.chx input:checked + .chx-box {
  background: #14b8a6;
  /* Teal (similar al de tu ejemplo) */
  border-color: #14b8a6;
}

/* Check dibujado con CSS */
.chx-box:after {
  content: "";
  position: absolute;
  width: 7px;
  height: 12px;
  border: 3px solid transparent;
  border-right-color: #fff;
  /* color del check */
  border-bottom-color: #fff;
  transform: rotate(45deg) scale(0);
  top: 3px;
  left: 9px;
  transition: transform 0.12s ease-in-out;
}

.chx input:checked + .chx-box:after {
  transform: rotate(45deg) scale(1);
  /* Muestra el check */
}

/* Enfoque accesible con teclado */
.chx input:focus + .chx-box {
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25);
}

/* XXL real para Bootstrap 3 */
.modal-xxl-dialog {
  width: 96%;
  max-width: 1400px;   /* sube a 1600px si lo necesitas */
  margin: 20px auto;
}

.modal-xxl .modal-content {
  border-radius: 12px;
  border: 0;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

/* Altura con scroll interno en el cuerpo */
.modal-xxl .modal-body {
  max-height: calc(100vh - 160px); /* header + footer */
  overflow: auto;
}

/* Valores base por si otro CSS los rompió */
.modal-backdrop { z-index: 1040; }
.modal { z-index: 1050; }


/*LOGIN*/

/*************************************************
 * LOGIN HABITAT – Minimalista, elegante y más cómodo
 *************************************************/

/* Fondo */
.login-body {
    background-color: #eef1f5; 
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Botón de ayuda */
.login-help {
    position: absolute;
    top: 20px;
    right: 20px;
}
.login-help .btn {
    font-size: 20px;
    padding: 8px 14px!important;
}

/* Contenedor general */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 15px;
}

/* Tarjeta */
.login-card {
    width: 100%;
    max-width: 440px; /* MÁS ANCHO */
    background: #ffffff;
    padding: 10px 40px; /* MÁS ESPACIADO */
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.06);
}

/* Logo */
.login-logo-img {
    max-width: 200px; /* MÁS GRANDE */
    margin-bottom: 14px;
}

/* Títulos */
.login-title {
    font-size: 24px; /* MÁS GRANDE */
    font-weight: 600;
    text-align: center;
    margin-bottom: 6px;
}

.login-subtitle {
    font-size: 15px;
    color: #6b7280;
    text-align: center;
    margin-bottom: 28px; /* MÁS CERCA DEL FORMULARIO */
}

/* Alert mensaje */
.login-alert {
    font-size: 14px;
    padding: 12px;
    margin-bottom: 20px;
}

/* Grupos de formulario */
.login-card .form-group {
    margin-bottom: 20px; /* Más espacio entre inputs */
}

/* Label */
.login-card .control-label {
    font-size: 14px;
    margin-bottom: 6px;
}

/* Inputs */
.login-card .form-control {
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background-color: #f9fafb;
    padding: 12px 14px;   /* MÁS ALTOS Y CÓMODOS */
    font-size: 15px;      /* MÁS GRANDE */
    height: 46px;         /* ALTURA FIJA */
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.login-card .form-control:focus {
    border-color: #111827;
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.1);
}

/* Errores */
.login-card .help-block {
    font-size: 13px;
    margin-top: 6px;
}

/* Fila recordar/olvidaste */
.login-remember-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Checkbox */
.login-card .checkbox label {
    font-size: 14px;
}

/* Link olvidaste */
.login-forgot a {
    font-size: 14px;  /* MÁS GRANDE */
    color: #2563eb;
}

/* Botón ingresar */
.login-card .btn-login {
    width: 100%;
  /*  border-radius: 999px!important;*/
    padding: 14px 18px!important;   /* MUCHO MÁS ALTO */
    font-size: 16px;      /* MÁS GRANDE */
    font-weight: 600;
    background: #111827;
    color: #ffffff;
    border: none;
    box-shadow: 0 10px 20px rgba(17, 24, 39, 0.2);
    transition:
        transform .08s ease,
        box-shadow .12s ease,
        filter .12s ease;
}

.login-card .btn-login:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 16px 28px rgba(17, 24, 39, 0.22);
}

.login-card .btn-login:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.18);
}