/* ==========================================================================
   ESTILOS GLOBALES Y SISTEMA DE DISEÑO - VAGIBIOM
   ========================================================================== */

html {
  font-size: 14px;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f6f9;
  color: #333;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ==========================================================================
   Navegación Personalizada (Custom Navbar & Breakpoints)
   ========================================================================== */
.navbar-custom {
  background: linear-gradient(135deg, #1e1e2f 0%, #0f0f1a 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1060 !important;
}

.navbar .dropdown-menu {
  z-index: 1070 !important;
}

.navbar-brand {
  font-weight: 800;
  letter-spacing: 1px;
  color: #00f2fe !important;
  cursor: default;
  user-select: none;
}

.nav-link-custom {
  color: #ffffff !important;
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 6px;
  padding: 8px 16px !important;
}

.nav-link-custom:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #00f2fe !important;
}

/* Custom Navbar Expand Breakpoint (1501px) */
@media (min-width: 1501px) {
    .navbar-custom-expand {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-custom-expand .navbar-nav {
        flex-direction: row;
    }
    .navbar-custom-expand .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-custom-expand .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x, 0.5rem);
        padding-left: var(--bs-navbar-nav-link-padding-x, 0.5rem);
    }
    .navbar-custom-expand .navbar-nav-scroll {
        overflow: visible;
    }
    .navbar-custom-expand .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-custom-expand .navbar-toggler {
        display: none !important;
    }
}

@media (max-width: 1500px) {
    .navbar-custom-expand .navbar-toggler {
        display: block !important;
    }
    .navbar-custom-expand .navbar-collapse {
        flex-basis: 100%;
        flex-grow: 1;
        align-items: center;
    }
    .navbar-custom-expand .navbar-collapse:not(.show) {
        display: none !important;
    }
    .navbar-custom-expand .navbar-collapse.show {
        display: flex !important;
        flex-direction: column;
        width: 100%;
    }
    .navbar-custom-expand .navbar-nav {
        flex-direction: column;
        width: 100%;
    }
}

/* Sincronización de grillas (Tabla vs Tarjetas) con el breakpoint del menú hamburguesa (1500px) */
@media (min-width: 1501px) {
    .grid-tabla-responsive {
        display: block !important;
    }
    .grid-tarjetas-responsive {
        display: none !important;
    }
}

@media (max-width: 1500px) {
    .grid-tabla-responsive {
        display: none !important;
    }
    .grid-tarjetas-responsive {
        display: block !important;
    }
}

/* Tarjetas y Componentes */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}

footer {
  background-color: #0f0f1a;
  color: #aaa;
}

/* Clases de Utilidad de Estilos */
.style-muted {
  opacity: 0.6;
}

.tabla-super-compacta td, .tabla-super-compacta th {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.85rem !important;
}

/* ==========================================================================
   ESTILOS Y CONTROL DE DESBORDAMIENTO EN MODALES RESPONSIVE (BOOTSTRAP 5)
   ========================================================================== */

/* 1. Restricción estricta de la altura del modal respecto al viewport */
.modal-dialog-scrollable {
    max-height: 90vh !important;
}

.modal-dialog-scrollable .modal-content {
    max-height: 90vh !important;
    display: flex;
    flex-direction: column;
}

@media (max-width: 575.98px) {
    .modal-dialog-scrollable,
    .modal-dialog-scrollable .modal-content {
        max-height: 100vh !important;
        height: 100vh !important;
        margin: 0;
        border-radius: 0 !important;
    }
}

/* 2. Encabezado y Pie de página fijos */
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
    flex-shrink: 0;
}

/* 3. Cuerpo de modal flexible y scrolleable */
.modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 4. Tablas y listas con contenedor de scroll dinámico interno sin scroll horizontal */
.modal-body .table-responsive {
    max-height: 45vh;
    overflow-y: auto;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.5rem;
    width: 100%;
}

@media (max-width: 991.98px) {
    .modal-body .table-responsive {
        max-height: 40vh;
    }
}

/* Fijar encabezados de tablas al hacer scroll vertical interno */
.modal-body .table-responsive thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-light, #f8f9fa);
    white-space: normal;
}

/* Prevenir deformación de filas por textos extensos */
.modal-body table td, 
.modal-body table th {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-body table td.text-break-cell {
    white-space: normal !important;
    word-break: break-word !important;
}

/* 5. Ajuste Responsivo para Canvas / Chart.js e imágenes */
.modal-body canvas,
.modal-body img {
    max-width: 100% !important;
    height: auto !important;
}