/* --- 1. Estilos Globales y Tipografía --- */

html {
  overflow-y: scroll;
  /* Siempre mostrar la barra de desplazamiento vertical */
}

body,
html {
  font-family: "Roboto Condensed", Roboto, sans-serif !important;
  font-size: 10.5px !important;
  background-color: #f0f2f5;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.card,
.card-title,
.card-body,
.card-text,
.alert,
.form-control,
.btn {
  font-family: "Roboto Condensed", Roboto, sans-serif !important;
}

.form-control:focus,
.form-select:focus {
  border-color: #016d38;
  box-shadow: 0 0 0 0.15rem rgba(1, 109, 56, 0.25);
}

/* .form-control {
    width: 60%; Afecta cosas que no debería afectar 
} 
*/

/* --- 2. Layout Principal y Barra de Navegación --- */

.main-container {
  padding: 2rem;
  max-width: 1700px;
  /* Ancho máximo deseado, puedes ajustarlo */
  margin-right: auto;
  /* Centra el contenedor horizontalmente */
  margin-left: auto;
  /* Centra el contenedor horizontalmente */
}

/* --- Shell: barra lateral de navegación a altura completa (bajo el navbar) --- */
.dashboard-below-navbar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: calc(100vh - 50px);
  width: 100%;
  background-color: #f0f2f5;
}

.dashboard-sidenav-outer {
  flex: 0 0 220px;
  width: 220px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  position: sticky;
  top: 50px;
  height: calc(100vh - 50px);
  min-height: calc(100vh - 50px);
  background-color: #ffffff;
  border-right: 1px solid #dee2e6;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.04);
}

.dashboard-content-outer {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dashboard-main-container {
  flex: 1 1 auto;
  max-width: 1700px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (max-width: 767.98px) {
  .dashboard-below-navbar {
    flex-direction: column;
    min-height: auto;
  }

  .dashboard-sidenav-outer {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    position: relative;
    top: auto;
    height: auto;
    min-height: auto;
    align-self: stretch;
    border-right: none;
    border-bottom: 1px solid #dee2e6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  }
}

.custom-navbar {
  background-color: #F8F9FA !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 6px;
  position: sticky;
  top: 0;
  z-index: 1020;
  height: 50px;
}

.navbar-brand-logo {
  height: 35px;
  margin-right: 17px;
  padding-left: 16px;
}

.navbar-brand-title {
  font-family: "Roboto Condensed", Roboto, sans-serif !important;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0;
  margin-left: 4px;
}

/* --- 3. Estilos de Tarjetas (Cards) --- */

.card {
  border: none;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px;
  border-radius: 6px !important;
}

.card .card-title {
  color: #016d38;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 1.1rem !important;
  margin-bottom: 1rem !important;
}

/* --- 4. Componentes Específicos --- */

.upload-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;
  border: 2px dashed #adb5bd;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
}

.upload-area:hover {
  background-color: #f1f3f5;
  border-color: #016d38;
}

.upload-main-text {
  color: #343a40;
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 5px;
}

.upload-secondary-text {
  color: #6c757d;
  font-size: 0.98rem;
  margin-top: 5px;
  margin-bottom: 3px;
}

.upload-icon {
  font-size: 2.5rem;
  color: #016d38;
  margin-bottom: 5px;
  margin-top: 3px;
}

/* --- 5. Pantalla de Carga con Progreso --- */

.custom-spinner {
  background-color: rgba(240, 242, 245, 0.9) !important;
  position: fixed !important;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-spinner .dash-spinner {
  display: none;
}

#loading-content-wrapper {
  background-color: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  text-align: center;
  width: 100%;
  max-width: 400px;
  min-width: 350px;
  border-top: 4px solid #016d38;
}

#loading-title {
  color: #016d38;
  font-weight: bold;
  font-size: 1.1rem !important;
  margin-bottom: 1rem !important;
}

#loading-step-message {
  color: #343a40;
  font-size: 1.1rem;
  font-weight: bold;
}

.loading-stages-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

#loading-progress-bar .progress-bar {
  background-color: #016d38 !important;
}

/* --- 6. Estilos de Tablas --- */

.info-general-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  overflow: hidden;
  font-size: 10px !important;
  /* Asegurar fuente pequeña */
}

/* MODIFICACIÓN AQUÍ: Reducción drástica del padding para disminuir altura */
.info-general-table td {
  padding: 1px 8px !important;
  height: 20px !important;
  /* Forzar altura mínima baja */
  vertical-align: middle;
  /* Centrar texto verticalmente */
  line-height: 1.1;
  /* Reducir altura de línea */
}

.info-general-table td:nth-child(3) {
  border-left: 1px solid #dee2e6;
}

/* --- 7. Estilos de Componentes Personalizados --- */

#confirm-emission-input:focus {
  border-color: #016d38;
  box-shadow: 0 0 0 0.15rem rgba(1, 109, 56, 0.25);
}

.loading-overlay-style {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}

.position-relative {
  position: relative;
}

.restart-button-style {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  margin-top: -5px;
  padding-top: 2px;
  padding-bottom: 0.5px;
  padding-left: 6px;
  font-size: 10px;
}

.btn-custom-green-outline {
  color: #016d38;
  background-color: transparent;
  border-color: #016d38;
}

.btn-custom-green-outline:hover {
  color: #ffffff;
  background-color: #016d38;
  border-color: #016d38;
}

.btn-success:active,
.btn-outline-success:active {
  background-color: #004a25 !important;
  border-color: #004a25 !important;
  color: #ffffff !important;
}

/* --- 8. Media Queries y Estilos Responsivos --- */

@media (max-width: 768px) {
  .navbar-brand-title {
    margin-top: 3px;
    text-align: center;
  }
}

#sarlaft-button:not(:disabled) {
  background-color: #016d38 !important;
  color: #ffffff !important;
  border-color: #016d38 !important;
}

#sarlaft-button:not(:disabled):hover {
  background-color: #005c2e !important;
  border-color: #005c2e !important;
}

/* --- 9. Componentes Personalizados Adicionales (Modal) --- */

.modal-content {
  border-radius: 8px !important;
  border: none !important;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.modal-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.modal-title {
  color: #016d38;
  font-weight: bold;
  font-size: 1.2rem !important;
}

.premium-option-box {
  border: 2px solid #dee2e6;
  border-radius: 6px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: #ffffff;
}

.premium-option-box:hover {
  border-color: #016d38;
  background-color: #f7fdf9;
}

.premium-option-box.selected {
  border-color: #016d38;
  background-color: #e6f0eb;
  box-shadow: 0 0 0 2px rgba(1, 109, 56, 0.25);
}

.premium-title {
  font-weight: bold;
  color: #343a40;
  font-size: 1rem;
  margin-bottom: 10px;
}

.premium-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: #016d38;
  margin-bottom: 5px;
}

.premium-sub-value {
  font-size: 0.98rem;
  color: #6c757d;
}

.premium-option-box * {
  pointer-events: none;
}

.modal-footer {
  border-top: 1px solid #dee2e6;
  background-color: #f8f9fa;
}

/* --- 10. Estilos Personalizados para AG Grid (Final con Selector Fuerte) --- */

.ag-theme-alpine {
  /* --- Tipografía --- */
  --ag-font-family: "Roboto Condensed", Roboto, sans-serif !important;
  --ag-font-size: 10px !important;
  --ag-line-height: 1.3 !important;

  /* --- Dimensiones Ultra-Compactas --- */
  --ag-row-height: 22px !important;
  --ag-header-height: 24px !important;
  --ag-list-item-height: 22px !important;

  /* --- Espaciado Interno Mínimo --- */
  --ag-cell-vertical-padding: 2px !important;
  --ag-cell-horizontal-padding: 8px !important;
}

/* 1. Centrado y Control de Desbordamiento de Celdas */
.ag-theme-alpine .ag-cell {

  font-size: 10.5px !important;

  display: flex !important;
  align-items: center !important;
  /* Centrado Vertical */
  justify-content: center !important;
  /* Centrado Horizontal */
  text-align: center !important;

  /* --- NUEVAS LÍNEAS PARA EVITAR SUPERPOSICIÓN --- */
  overflow: hidden !important;
  /* Recorta lo que se salga de la celda */
  white-space: nowrap !important;
  /* Fuerza al texto a quedarse en una sola línea */
  text-overflow: ellipsis !important;
  /* (Opcional) Pone "..." si el texto es muy largo */
}

/* Centrar los títulos de las columnas */
.ag-theme-alpine .ag-header-cell-label {
  justify-content: center !important;
}

.ag-theme-alpine .ag-cell.text-start-cell {
  justify-content: flex-start !important;
  /* Alinea al inicio (izquierda) en Flexbox */
  text-align: left !important;
  padding-left: 12px !important;
  /* Un poco de espacio para que no se pegue al borde */
}

/* 4. Anular min-height del campo de filtro usando un selector ultra-específico */
.ag-theme-alpine .ag-floating-filter-input {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.ag-theme-alpine .ag-floating-filter-input .ag-input-field-input {
  min-height: unset !important;
  height: 17px !important;
  padding: 1px 4px !important;
  margin: 0 !important;
  border-radius: 3px !important;
}

/* 3. Estilo para el contador de filas */
.table-footer-style {
  font-size: 10px;
  color: #6c757d;
  text-align: right;
  padding: 4px 8px;
  margin-top: -8px;
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0 0 6px 6px;
  background-color: #f8f9fa;
  position: relative;
  z-index: 10;
}

/* --- 11. Ajustes Finos Ag Grid (Líneas y Selección) --- */

/* Forzar líneas verticales claras entre columnas */
.ag-theme-alpine .ag-cell {
  border-right: 1px solid #dde2eb !important;
  /* Gris claro visible */
}

/* Eliminar borde de la última columna para limpieza visual */
.ag-theme-alpine .ag-cell:last-child {
  border-right: none !important;
}

/* Permitir selección de texto nativa del navegador */
.ag-theme-alpine .ag-root-wrapper {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* --- 12. Corrección de Fondos y Transparencias --- */

/* Fondo blanco base para evitar superposición de texto al hacer scroll */
.ag-theme-alpine .ag-center-cols-container .ag-cell,
.ag-theme-alpine .ag-pinned-left-cols-container .ag-cell,
.ag-theme-alpine .ag-pinned-right-cols-container .ag-cell {
  background-color: #ffffff;
}

/* Mantener el estilo de selección de fila (opcional, para feedback visual) */
.ag-theme-alpine .ag-row-hover .ag-cell {
  background-color: #f0f2f5;
}

/* --- 13. Ajustes específicos para columna Fijada (No.) --- */

/* Forzar borde derecho (línea separadora) y reducir padding para que quepa en 35px */
.ag-theme-alpine .ag-pinned-left-cols-container .ag-cell {
  border-right: 1px solid #dde2eb !important;
  /* Línea un poco más visible */
  padding-left: 4px !important;
  /* Menos relleno a la izquierda */
  padding-right: 4px !important;
  /* Menos relleno a la derecha */
}

/* Ajustar también la cabecera de esa columna */
.ag-theme-alpine .ag-pinned-left-header {
  border-right: 1px solid #dde2eb !important;
}

.modal-body {
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  border: none !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  border-top: 5px solid #016d38 !important;
}

.login-logo {
  height: 50px;
  margin-bottom: 1.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.login-title {
  text-align: center;
  color: #016d38;
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.login-subtitle {
  text-align: center;
  color: #6c757d;
  font-size: 1rem;
  margin-bottom: 2rem;
}

.login-subtitle-a {
  text-align: center;
  color: #6c757d;
  font-size: 1rem;
  margin-bottom: 1px;
}


/* --- Estilos para redondear las tablas AG Grid --- */
.ag-theme-alpine .ag-root-wrapper {
  border-radius: 6px !important;
  overflow: hidden !important;
  /* INDISPENSABLE: Recorta las esquinas cuadradas de la cabecera */
  border: 1px solid #dee2e6 !important;
  /* Define un borde sutil gris para enmarcar la curva */
}

/* --- 15. Corrección de Bordes Dobles (Limpieza Final) --- */

/* 1. Para la Tabla de Info General (HTML Estándar) */
/* Quita el borde de abajo de las celdas de la última fila para que no se sume con el borde de la tabla */
.info-general-table tr:last-child td {
  border-bottom: none !important;
}

/* 2. Para las Tablas AG Grid */
/* Quita el borde superior del panel de paginación para que se vea integrado y no como una caja separada */
.ag-theme-alpine .ag-paging-panel {
  border-top: 1px solid #f0f2f5 !important;
  /* Muy sutil o 'none' si prefieres sin línea */
  background-color: #ffffff !important;
  /* Fondo blanco para que se fusione con la tabla */
}

/* Asegura que no haya doble borde en el contenedor principal */
.ag-theme-alpine .ag-root-wrapper-body {
  border: none !important;
}

/* Centrar el input de confirmación "emitir" en su contenedor */
#confirm-emission-input {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  /* Asegura comportamiento de bloque para que funcionen los márgenes */
}

.info-general-table {
  text-transform: uppercase !important;
}

/* --- 16. Estilos Nuevos Tarjetas de Selección (Modal) --- */

.resumen-tile {
  transition: all 0.2s ease-in-out;
  border-radius: 12px !important;
  background-color: #fafafa;
  cursor: pointer;
  position: relative;
  /* Necesario para posicionar el icono en la esquina */
}

/* Efecto Hover */
.resumen-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Colores de texto auxiliares */
.text-success-custom {
  color: #016d38 !important;
  /* Tu verde corporativo */
}

.text-dark-custom {
  color: #343a40 !important;
}

/* --- 18. Corrección Definitiva Altura Mínima (Override 150px) --- */

/* Atacamos los contenedores centrales que tienen la regla de los 150px */
.ag-theme-alpine .ag-layout-auto-height .ag-center-cols-viewport,
.ag-theme-alpine .ag-layout-auto-height .ag-center-cols-container {
  min-height: 0px !important;
  /* Forzamos a 0 para que crezca según el contenido */
}

/* Opcional: Aseguramos también el contenedor principal del cuerpo */
.ag-theme-alpine .ag-layout-auto-height .ag-body-viewport {
  min-height: 0px !important;
}

/* --- CONTENEDOR DATEPICKER PERSONALIZADO --- */

.date-input-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.date-input-wrapper input[type="date"] {
  width: 100%;
  padding-right: 2.5rem;
  appearance: none;
  -webkit-appearance: none;
  font-family: "Roboto Condensed", sans-serif !important;
  font-size: 10.5px !important;
}

.date-input-wrapper::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  pointer-events: none;
  /* Icono Calendario con color corporativo #016d38 */
  background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="calendar-alt" class="svg-inline--fa fa-calendar-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%236c757d" d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"></path></svg>');
  background-position: center;
  background-size: contain;
}

.date-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 5px;
  top: 0;
  width: 40px;
  height: 100%;
  cursor: pointer;
  z-index: 5;
}

/* --- ESTILOS DEL MODAL DE RESUMEN (Estilo Guía Técnica) --- */

.modal-summary-container {
  padding: 0 5px;
}

/* Títulos de sección */
.modal-section-title {
  color: #016d38;
  /* Verde Corporativo */
  font-size: 0.96rem;
  font-weight: 700;
  /* Bold fuerte */
  text-transform: uppercase;
  /* margin-top: 1.5rem; */
  border-bottom: 2px solid #e9ecef;
  /* Línea un poco más visible */
  padding-left: 2px;
  padding-bottom: 5px;
  margin-bottom: 8px;
  font-family: "Roboto Condensed", sans-serif;
}

/* Tabla de datos minimalista */
.table-clean {
  width: 100%;
  margin-bottom: 0;
  font-family: "Roboto Condensed", sans-serif;
}

.table-clean td {
  padding: 1px 10px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f3f5;
}

.table-clean tr:last-child td {
  border-bottom: none;
}

/* Etiquetas (Columna izquierda) */
.clean-label {
  color: #6c757d;
  font-weight: 600;
  width: 50%;
  /* Ajustado para balancear nombres largos */
  font-size: 1rem;
}

/* Valores (Columna derecha) */
.clean-value {
  color: #212529;
  font-weight: 500;
  font-size: 0.95rem;
  text-align: right;
}

/* Filas resaltadas (Totales o Ahorros) */
.highlight-row {
  background-color: #f0f9f4;
  /* Verde muy pálido, casi blanco */
}

.highlight-row td {
  border-bottom: 1px solid #d3e9d8;
  color: #016d38;
}

.highlight-value {
  font-weight: 800;
  /* Extra bold */
  text-align: right;
  font-size: 1.1rem;
  /* Un poco más grande para el total */
}

/* Alerta informativa inferior */
.custom-alert-brand {
  background-color: #f8f9fa;
  border-left: 4px solid #016d38;
  color: #495057;
  padding: 1rem;
  border-radius: 4px;
  margin-top: 25px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.text--muted {
  font-size: 0.97rem;
  color: #6c757d;
}

/* --- File: /ms-patr-makers-tranquilidad/assets/styles.css --- */

/* ... (Todo tu código CSS anterior) ... */


/* --- 19. Fix para Fila de Totales (Pinned Bottom) --- */

/* 
   Esto apunta específicamente a la fila fijada al fondo en AG Grid (donde está el TOTAL).
   1. pointer-events: none -> Evita que el mouse interactúe (quita hover, selección, cambio de cursor).
   2. background-color -> Fuerza el color verde corporativo claro para que no cambie nunca.
*/
.ag-theme-alpine .ag-floating-bottom .ag-row {
  pointer-events: none !important;
  background-color: #d1e7dd !important;
  /* El mismo verde que definiste en Python */
}

/* Aseguramos que las celdas individuales hereden este comportamiento */
.ag-theme-alpine .ag-floating-bottom .ag-cell {
  background-color: #d1e7dd !important;
  color: #0f5132 !important;
  font-weight: bold !important;
  font-size: 10.5px !important;
}

/* --- 20. Ajustes de Botones Pequeños (Logout) --- */
.btn-group-sm>.btn,
.btn-sm {
  --bs-btn-padding-y: 0.2rem !important;
  --bs-btn-padding-x: 0.8rem !important;
  --bs-btn-font-size: 0.98rem !important;
  /* Opcional: Centrar verticalmente el icono y el texto si se desalinean */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   21. AJUSTES VISUALES FINALES (Negrillas, Líneas y Bordes Fuertes)
   ========================================================================== */

/* --- Requerimiento #1: Títulos de columnas en Negrilla --- */
.ag-theme-alpine .ag-header-cell-label,
.ag-theme-alpine .ag-header-group-cell-label {
  font-weight: 700 !important;
  color: #000000 !important;
  /* Asegura un gris oscuro legible */
  font-size: 10.5px !important;
}

/* --- Requerimiento #2: Líneas separadoras de columnas invisibles --- */
/* El separador visual en Alpine es un pseudo-elemento ::after en la celda */
.ag-theme-alpine .ag-header-cell::after,
.ag-theme-alpine .ag-header-group-cell::after {
  background-color: transparent !important;
  /* Lo hace invisible */
  width: 0px !important;
}

/* También nos aseguramos de quitar cualquier borde derecho estándar */
.ag-theme-alpine .ag-header-cell {
  border-right: none !important;
}

/* --- Requerimiento #3: Bordes inferiores fuertes (#BFBFBF) --- */

/* A. Borde inferior fuerte para la fila de Títulos (Cabecera) */
.ag-theme-alpine .ag-header {
  border-bottom: 1px solid #BFBFBF !important;
}

/* B. Borde inferior fuerte para la Última Fila de datos */
/* Apunta a la última fila renderizada dentro del contenedor central */
.ag-theme-alpine .ag-center-cols-container .ag-row:last-child,
.ag-theme-alpine .ag-row-last {
  border-bottom: 1px solid #bfbfbf9f !important;
}

.ag-theme-alpine .ag-header-cell-resize::after {
  background-color: #fafafb !important;
  height: 0 !important;
  /* Esto asegura que desaparezca visualmente */
}

.ag-theme-alpine :where(.ag-ltr) .ag-header-cell-resize::after {
  background-color: #fafafb !important;
  /* El color que solicitaste */
  /* Opcional: si quieres que sea totalmente invisible usa: background-color: transparent !important; */
}

:where(.ag-ltr) .ag-header-cell-resize {
  &:after {
    left: calc(50% - var(--ag-header-column-resize-handle-width));
    background-color: #fafafb;
  }
}

/* ==========================================================================
   22. MODIFICACIONES ESPECÍFICAS DE TEXTO (RIESGOS E INFO GENERAL)
   ========================================================================== */

/* --- 1. Tabla Riesgos de Maquinaria: Celdas Mayúsculas y Centradas --- */
/* Usamos el ID #tabla-riesgos para no afectar a la tabla de Coberturas o Tarifas */
#tabla-riesgos .ag-cell {
  text-transform: uppercase !important;

  /* Reforzamos el centrado */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* --- 2. Tabla Información General: Ajuste de Mayúsculas/Minúsculas --- */

/* Columnas de Títulos (Impares 1 y 3): Aumentar a 11px */
.info-general-table td:nth-child(1),
.info-general-table td:nth-child(3) {
  text-transform: none !important;
  font-size: 10.5px !important;
  /* NUEVO: Títulos más grandes */
}

/* Columnas de Valores (Pares 2 y 4): Mantener en 10px */
.info-general-table td:nth-child(2),
.info-general-table td:nth-child(4) {
  text-transform: uppercase !important;
  font-size: 10.5px !important;
  /* Asegura que los valores se queden pequeños */
}

/* --- Tablas extraídas: cabecera título + vista ampliada en una línea; separador entre bloques --- */
.tabla-extraida-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.65rem;
  border-bottom: 1px solid #dee2e6;
}

.tabla-extraida-titulo {
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.tabla-extraida-header-actions {
  flex: 0 0 auto;
  margin-top: -7px;
}

.tabla-extraida-fila--separada {
  border-top: 1px solid #c5cdd6;
  padding-top: 0.85rem;
  margin-top: 0.15rem;
}

/* Cards de tablas extraídas: sin bordes redondeados, borde blanco (plano) */
.tabla-extraida-fila .card {
  border-radius: 0 !important;
  box-shadow: none;
  border: 1px solid #ffffff !important;
}

/* Card de información general: mismo estilo plano */
.card.info-card {
  border-radius: 0 !important;
  box-shadow: none;
  border: 1px solid #ffffff !important;
}

/* --- Modales vista ampliada: tarifación o riesgos (cada uno fullscreen) --- */
.modal-tablas-ext .modal-dialog {
  margin: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
  max-height: 100vh;
}

.modal-tablas-ext .modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  border: none;
}

.modal-tablas-ext .modal-header {
  flex-shrink: 0;
}

.modal-tablas-ext .modal-footer {
  flex-shrink: 0;
}

.modal-tablas-ext .modal-body.modal-tablas-ext-body,
.modal-tablas-ext .modal-tablas-ext-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem 0.75rem;
}

.modal-tablas-ext-body-inner {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Contenedor intermedio que Dash puede insertar */
.modal-tablas-ext-body-inner>div {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* La grilla Dash/AG ocupa todo el cuerpo del modal */
.modal-tablas-ext-body-inner .ag-grid-extended-view.ag-theme-alpine {
  flex: 1 1 auto;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.ag-grid-extended-view.ag-theme-alpine {
  --ag-header-height: 28px;
}

/* --- Navegación lateral Cotización / Modificación --- */
.dashboard-sidenav-outer .lateral-nav-card {
  background-color: transparent;
}

.lateral-nav-card-body {
  flex: 1 1 auto;
}

.lateral-nav-title {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.lateral-nav-card .card-title {
  margin-bottom: 1rem;
}

.lateral-nav-btn {
  text-align: left;
}

/* Panel «Modificación de póliza»: misma escala tipográfica que el formulario */
.modificacion-panel-root {
  font-size: 10.5px;
  line-height: 1.45;
}

.modificacion-panel-root .form-control,
.modificacion-panel-root .btn {
  font-size: 1em;
}

.modificacion-panel-heading {
  font-size: 1.1em;
  font-weight: 700;
}

/* Pestañas del panel de modificación */
.modificacion-main-tabs .nav-link {
  font-weight: 600;
  font-size: 11px;
  color: #495057;
}

.modificacion-main-tabs .nav-link.active {
  color: #016d38;
}

/* Tipografía del módulo (re-cotización): base 10.5px ≈ «1rem»; títulos 1.1em ≈ 11.55px; subtítulos 11px */
.modificacion-formulario-root {
  max-width: 100%;
  font-size: 10.5px;
  line-height: 1.45;
}

.modificacion-formulario-root .form-control,
.modificacion-formulario-root .btn {
  font-size: 1em;
}

.mod-form-body {
  font-size: 1em;
}

.mod-form-subtitle {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

/* Multiselect de factores: texto alineado al cuerpo del formulario */
.modificacion-formulario-root .mod-tipo-modificacion-dropdown,
.modificacion-formulario-root .mod-tipo-modificacion-dropdown .dash-dropdown,
.modificacion-formulario-root .mod-tipo-modificacion-dropdown .dash-dropdown input {
  font-size: 1em;
}

.modificacion-formulario-root .mod-tipo-modificacion-dropdown .dash-dropdown input {
  min-height: 2.25rem;
}

/* dcc.Dropdown multi (react-select clásico en Dash): chips con fondo verde, texto heredado */
.modificacion-formulario-root .mod-tipo-modificacion-dropdown .Select--multi .Select-value {
  background-color: #b8dfc8 !important;
  border: 1px solid #8fc9a8 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Chips del multiselect: id + !important para ganar a estilos inline de react-select */
.modificacion-formulario-root .mod-tipo-modificacion-dropdown .Select--multi .Select-value-label,
.modificacion-formulario-root .mod-tipo-modificacion-dropdown .Select--multi a.Select-value-label,
#mod-tipo-modificacion-select.Select--multi .Select-value-label,
#mod-tipo-modificacion-select.Select--multi a.Select-value-label,
#mod-tipo-modificacion-select .Select--multi .Select-value-label,
#mod-tipo-modificacion-select .Select--multi a.Select-value-label {
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
  cursor: default;
  padding: 2px 5px;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.modificacion-formulario-root .mod-tipo-modificacion-dropdown .Select--multi .Select-value-icon {
  border-right-color: #8fc9a8 !important;
}

.modificacion-formulario-root .mod-tipo-modificacion-dropdown .Select--multi .Select-value-icon:focus,
.modificacion-formulario-root .mod-tipo-modificacion-dropdown .Select--multi .Select-value-icon:hover {
  background-color: #9ecfae !important;
}

.modificacion-formulario-root .mod-tipo-modificacion-dropdown .Select-option.is-selected {
  background-color: #b8dfc8 !important;
  color: #0f5132 !important;
}

.modificacion-formulario-root .mod-tipo-modificacion-dropdown .Select-option.is-focused {
  background-color: #d1e7dd !important;
  color: #0f5132 !important;
}

/* Si en el futuro Dash usa react-select v5+ (clases con hash), mantener tonos verdes */
.modificacion-formulario-root .mod-tipo-modificacion-dropdown [class*="multiValue"] {
  background-color: #b8dfc8 !important;
  border-radius: 4px;
  font-size: 11px !important;
}

.modificacion-formulario-root .mod-tipo-modificacion-dropdown [class*="multiValue"] [class*="MultiValueGeneric"] {
  font-size: 11px !important;
}

.modificacion-formulario-root .mod-tipo-modificacion-dropdown [class*="multiValue"] [class*="multiValueRemove"]:hover {
  background-color: #9ecfae !important;
}

.modificacion-form-section-title {
  font-size: 1.1em;
  font-weight: 700;
  color: #0f5132;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid #d1e7dd;
}

.modificacion-form-ag-grid.ag-theme-alpine {
  --ag-header-height: 30px;
  --ag-font-size: 10.5px;
}

/* Inclusión de riesgo: viewport de tabla más alto; el desplegable usa valueListMaxHeight en código */
.modificacion-inclusion-ag-grid.ag-theme-alpine {
  min-height: min(52vh, 480px);
}

/* Resultado re-cotización: panel aparte del bloque de factores */
.mod-cotizacion-loading-wrap {
  width: 100%;
}

.mod-cotizacion-resultado-wrap:empty {
  min-height: 0;
}

.mod-cotiz-resultado-panel {
  margin-bottom: 0.25rem;
  padding: 1.15rem 1.25rem 1.2rem;
  background: linear-gradient(165deg, #f4fbf6 0%, #ffffff 55%);
  border: 1px solid #b8dfc8;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(1, 109, 56, 0.07);
}

.mod-cotiz-panel-title {
  font-size: 1.1em;
  font-weight: 700;
  color: #0f5132;
  margin-bottom: 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid #a3cfbb;
}

.mod-cotiz-subheading {
  font-size: 11px;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.35rem;
  line-height: 1.35;
}

.mod-cotiz-meta {
  font-size: 1em;
  line-height: 1.5;
  color: #6c757d;
  margin-bottom: 0.5rem;
}

.mod-cotiz-meta-value {
  color: #212529;
  font-weight: 600;
}

.mod-cotiz-meta-muted {
  color: #6c757d;
}

.mod-cotiz-info-consolidada {
  font-size: 1em;
  line-height: 1.5;
  color: #495057;
}

.mod-cotiz-desglose-grid.ag-theme-alpine {
  --ag-header-height: 30px;
  --ag-font-size: 10.5px;
}

/* Celdas con texto multilínea (columna Detalle): alinear arriba y padding cómodo */
.mod-cotiz-desglose-grid.ag-theme-alpine .ag-cell {
  align-items: flex-start;
  padding-top: 6px;
  padding-bottom: 6px;
}

#mod-cotiz-grid-desglose-plataforma .ag-root,
#mod-cotiz-grid-desglose-manual .ag-root {
  min-height: 47px !important;
}

.mod-cotiz-totales {
  margin-top: 0.35rem;
  padding: 0.85rem 1rem;
  font-size: 1em;
  line-height: 1.45;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
}

.mod-cotiz-total-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-bottom: 0.4rem;
}

.mod-cotiz-total-line:last-of-type {
  margin-bottom: 0;
}

.mod-cotiz-total-line-label,
.mod-cotiz-total-grand-label {
  color: #495057;
}

.mod-cotiz-total-grand {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid #ced4da;
}

.mod-cotiz-total-grand-label {
  font-weight: 700;
  font-size: 1em;
  color: #0f5132;
}

.mod-cotiz-total-grand-amount {
  font-weight: 700;
  font-size: 1.1em;
}

.mod-cotiz-alert-error {
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Separación visual entre resultado de cotización y grillas de factores */
.mod-post-cotizacion-separator {
  margin-top: 1.35rem;
  margin-bottom: 1.1rem;
  padding-top: 1.1rem;
  border-top: 2px solid #dee2e6;
}

.mod-post-cotizacion-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6c757d;
  line-height: 1.35;
}

#mod-valor-grid-edit .ag-root,
#mod-standby-grid-edit .ag-root,
#mod-excl-grid-read .ag-root {
  min-height: 47px !important;
}

.modificacion-manual-root .mod-manual-upload-area {
  border: 2px dashed #adb5bd;
  border-radius: 5px;
  padding: 14px;
  text-align: center;
  background: #f8f9fa;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.modificacion-manual-root .mod-manual-upload-area:hover {
  border-color: #016d38;
  background: #f1f3f5;
}

.modificacion-manual-root .mod-manual-upload-hint {
  font-size: 0.95em;
  color: #495057;
}

/* --- Custom fractional columns for main panels --- */
@media (min-width: 768px) {
  .col-md-9-5 {
    flex: 0 0 auto;
    width: 79.166667%;
  }

  .col-md-2-5 {
    flex: 0 0 auto;
    width: 20.833333%;
  }
}