.nav-item.dropdown:hover .dropdown-menu {
  display: block; /* Muestra el submenú al hacer hover */
  margin-top: 0; /* Alinea el submenú con el botón principal */
}

/* Estilo del submenú */
.dropdown-menu {
  background-color: #80cc33; /* Mismo color que el menú principal */
  border: none; /* Sin bordes */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

/* Ajuste dinámico del contenedor principal */
.content {
  margin-left: 50px; /* Ancho del menú expandido */
  transition: margin-left 0.3s ease;
  padding: 20px;
  width: calc(100% - 250px);
}

/* Ocultar el menú lateral en pantallas pequeñas */
@media screen and (max-width: 1024px) {
  .sidebar {
    width: 0;
    overflow: hidden;
    transition: width 0.3s ease-in-out;
  }

  .sidebar.expanded {
    width: 250px; /* Ajusta según el ancho deseado */
  }

  .main-content {
    margin-left: 0; /* Evita que el contenido se desplace */
  }

  /* Botón para mostrar el menú */
  .menu-toggle {
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    background: #80cc33;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1000;
  }
}

/* Mantener el botón oculto en resoluciones grandes */
.menu-toggle {
  display: none;
}

/* Estructura base */
body,
html {
  font-size: 14px; /* Reduce el tamaño global en 2 puntos */
  font-family: "Poppins", Arial, sans-serif; /* Fallback en caso de que 'Poppins' no cargue */
  background-color: #f9f9f9;
  color: #333;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s, color 0.3s;
  height: 100%; /* Asegura que el contenedor ocupe toda la pantalla */
}

body {
  min-height: 100vh;
}

/* Contenedor para los logos del encabezado */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #80cc33; /* Color verde de los botones al pasar el ratón */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

.header-container .logo {
  height: 50px;
  margin: 0 15px;
}

.tab-nav {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}

/* Botones del menú con ancho reducido */
.tab-button {
  padding: 10px; /* Mantiene el mismo padding */
  text-align: center;
  background-color: #80cc33;
  color: white;
  border: 1px solid #80cc33;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem; /* Mantiene el tamaño de fuente */
  width: 250px; /* Establece un ancho fijo más pequeño para los botones */
}

.tab-button:hover {
  background-color: #80cc33;
  color: white;
}

.section-title {
  font-size: 1.8em;
  text-align: center;
  padding: 10px;
  color: #333;
}

.section-title-icon {
  margin-right: 8px;
  font-size: 1.4em;
  color: #80cc33;
}

.input-container {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.generate-button {
  width: 100px;
  background-color: #80cc33;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 10px 20px;
  transition: background-color 0.3s;
}

.generate-button:hover {
  background-color: #80cc33;
}

.info-box {
  padding: 20px;
  background-color: #e8f5e9;
  border-radius: 8px;
  margin-top: 20px;
  display: none;
}

/* Contenedor para los logos del encabezado */
.header-container {
  display: flex;
  justify-content: center; /* Centra los logos horizontalmente */
  align-items: center;
  padding: 20px;
  background-color: #80cc33; /* Fondo oscuro */
}

.header-container .logo {
  height: 50px; /* Tamaño de los logos */
  margin: 0 15px; /* Espacio entre los logos */
}

.header-container .logo:hover {
  opacity: 0.8; /* Efecto al pasar el cursor */
}

/* Contenedor para centrar vertical y horizontalmente el mensaje de bienvenida */
.welcome-message {
  display: flex;
  flex-direction: column; /* Coloca el texto y el botón en una columna */
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #ffffff; /* Fondo blanco */
  color: #80cc33; /* Color de texto */
  font-size: 1.2rem;
  font-weight: bold;
  padding: 20px;
  margin: 0 auto; /* Centra el contenedor */
  width: 80%;
  height: 100vh; /* Ocupa toda la altura de la ventana */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para darle profundidad */
  z-index: 1000; /* Asegura que esté visible por encima de otros elementos */
}

/* Estilo responsivo para dispositivos más pequeños */
@media (max-width: 768px) {
  .welcome-message {
    font-size: 1rem;
    width: 90%; /* Ajusta el ancho para pantallas pequeñas */
  }
}

.main-container {
  padding-top: 200px; /* Espacio suficiente para los logos, menú y mensaje de bienvenida */
}

/* Ajuste en el menú de navegación para posicionarlo debajo de los logos */
.fixed-nav {
  position: fixed;
  top: 80px; /* Ajusta este valor si los logos ocupan más o menos espacio */
  left: 0;
  right: 0;
  background-color: #80cc33;
  z-index: 999;
}

/* Contenedor para centrar el botón */
.button-container {
  display: flex;
  justify-content: center;
  margin-top: 40px; /* Espacio adicional encima del botón */
}

/* Espaciado para el botón */
.start-button {
  margin-top: 40px; /* Añade espacio entre el texto y el botón */
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #80cc33;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.start-button:hover {
  background-color: #80cc33; /* Color de fondo cuando se pasa el ratón */
}

/* Estilo para el contenedor del formulario */
#risk-form-container {
  margin: 20px auto;
  padding: 20px;
  max-width: 1050px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilos para las etiquetas y campos del formulario */
#risk-form label {
  display: block;
  font-weight: bold;
  margin-top: 15px;
  color: #333;
}

#risk-form select,
#risk-form input[type="text"],
#risk-form input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #fff;
  transition: border-color 0.3s;
}

#risk-form select:focus,
#risk-form input[type="text"]:focus,
#risk-form input[type="number"]:focus {
  border-color: #80cc33; /* Color al seleccionar el campo */
}

/* Botón del formulario */
#risk-form button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #80cc33;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 250px;
}

#risk-form button:hover {
  background-color: #80cc33;
}

/* Estilos básicos de la tabla de resultados */
#result-container table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 1rem;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#result-container th,
#result-container td {
  padding: 15px;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
}

#result-container th {
  background-color: #80cc33;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

#result-container td {
  color: #0f8a38;
  line-height: 1.5;
}

#result-container tr:nth-child(even) {
  background-color: #f9f9f9;
}

#riesgo-preloader {
  display: none; /* Oculto por defecto */
  position: absolute; /* Posición relativa al contenedor padre */
  top: 50%; /* Centrado vertical */
  left: 50%; /* Centrado horizontal */
  transform: translate(-50%, -50%); /* Ajusta el centrado */
  z-index: 9998; /* Asegura que esté encima del contenido */
  background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco translúcido */
  padding: 20px; /* Espaciado interno */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra elegante */
  text-align: center; /* Centrado del contenido */
}

.riesgo-preloader-logo {
  width: 55px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
}

#riesgo-preloader .loader {
  border: 4px solid #f3f3f3; /* Fondo del círculo */
  border-top: 4px solid #353535; /* Color del spinner */
  border-radius: 50%; /* Forma circular */
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite; /* Animación del giro */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Preloader centrado */
.analyzeRiskReport-preloader {
  position: relative;
  z-index: 2; /* Por encima del grid */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco translúcido */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* Animación del loader */
#analyzeRiskReport-preloader .loader {
  border: 6px solid #f3f3f3; /* Gris claro */
  border-top: 6px solid #80cc33; /* Azul */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

.analyzeRiskReport-preloader-logo {
  width: 55px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
}

/* Animación de rotación */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none; /* Oculto por defecto */
  align-items: center;
  justify-content: center;
  z-index: 99999; /* Asegura que esté por encima de otros elementos */
}

/* Fondo con grid translúcido */
.overlay.active {
  display: flex; /* Mostrar el overlay */
}

/* Contenedor principal del preloader */
/* Contenedor principal del preloader */
.preloader {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column; /* Organiza el contenido verticalmente */
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 30px;
  border-radius: 25px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* Spinner circular */
/* Spinner circular */
.loader {
  position: relative;
  width: 70px; /* Tamaño del spinner */
  height: 70px;
  display: flex; /* Alineación del contenido interno */
  align-items: center; /* Centrar verticalmente */
  justify-content: center; /* Centrar horizontalmente */
  margin-bottom: 20px; /* Espaciado entre el spinner y el texto */
}

/* Borde giratorio como pseudo-elemento */
.loader::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Igual al tamaño del .loader */
  height: 100%; /* Igual al tamaño del .loader */
  border: 7.5px solid #f3f3f3; /* Fondo del círculo */
  border-top: 7.5px solid #80cc33 !important; /* Color del spinner */
  border-radius: 50%;
  animation: spin 1s linear infinite; /* Rotar solo el borde */
}

/* Logo dentro del spinner */
.preloader-logo {
  width: 35px; /* Tamaño del logo */
  height: auto; /* Mantener proporción */
  position: relative; /* Asegurar que sea independiente del borde */
  z-index: 1; /* Colocar el logo encima del pseudo-elemento */
  pointer-events: none; /* Evitar interacción */
}

/* Texto debajo del preloader */
.preloader-text {
  font-size: 16px;
  color: #333;
  text-align: center;
  line-height: 1.5;
}

/* Animación del spinner */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Estilos para el botón Sugerir */
#suggest-button {
  position: relative;

  padding: 5px 10px; /* Ajusta el relleno para que el botón sea menos ancho */
  font-size: 0.9rem; /* Reduce el tamaño de la fuente si es necesario */
  margin-left: 10px; /* Añade un pequeño espacio entre el campo de texto y el botón */
  background-color: #525252; /* Color de fondo del botón */
  color: white; /* Color del texto */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#suggest-button:hover {
  background-color: #80cc33; /* Color de fondo al pasar el ratón */
}

.process-container {
  display: flex;
  align-items: center; /* Centra el contenido verticalmente */
}

#risk-title {
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.8rem; /* Ajusta el tamaño según tu preferencia */
  color: #333;
  margin-top: 20px;
  margin-bottom: 20px;
}

#risk-identification-form-container,
#risk-evaluation-form-container {
  width: 1200px; /* Ancho fijo de 800px */
  margin: 20px auto; /* Centrado horizontal */
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative; /* Necesario para el posicionamiento del preloader */
}

#risk-identification-form-container h1#risk-title,
#risk-evaluation-form-container h1 {
  text-align: left; /* Alinear a la izquierda */
  margin-left: 0; /* Asegurar que no haya márgenes adicionales */
  font-size: 1.5rem; /* Opcional: Ajustar el tamaño del texto */
  color: #333; /* Opcional: Cambiar el color del texto */
  margin-bottom: 20px; /* Opcional: Espaciado inferior */
  font-weight: bold;
  text-transform: uppercase;
}

#risk-identification-form-container label,
#risk-evaluation-form-container label {
  display: block;
  font-weight: bold;
  margin-top: 15px;
  color: #333;
}

#risk-identification-form-container select,
#risk-evaluation-form-container select,
#risk-identification-form-container input[type="text"],
#risk-evaluation-form-container input[type="text"],
#risk-identification-form-container input[type="number"],
#risk-evaluation-form-container input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  transition: border-color 0.3s;
}

#risk-identification-form-container select:focus,
#risk-evaluation-form-container select:focus,
#risk-identification-form-container input[type="text"]:focus,
#risk-evaluation-form-container input[type="text"]:focus,
#risk-identification-form-container input[type="number"]:focus,
#risk-evaluation-form-container input[type="number"]:focus {
  border-color: #80cc33;
}

/* Botón del formulario */
#risk-identification-form-container button,
#risk-evaluation-form-container button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #80cc33;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
}

#risk-identification-form-container button:hover,
#risk-evaluation-form-container button:hover {
  background-color: #80cc33;
}

#risk-evaluation-form-container textarea {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #fff;
  transition: border-color 0.3s;
  resize: vertical; /* Permite ajustar el tamaño vertical */
  min-height: 80px; /* Altura mínima para una mejor usabilidad */
}

#risk-evaluation-form-container textarea:focus {
  border-color: #80cc33;
}

/* Estilo de la tabla del cuestionario */
#questionnaire-container table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 1rem;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#questionnaire-container th,
#questionnaire-container td {
  padding: 15px;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
}

#questionnaire-container th {
  background-color: #80cc33;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

#questionnaire-container td {
  color: #333;
  line-height: 1.5;
}

/* Alternar color de filas para mejor legibilidad */
#questionnaire-container tr:nth-child(even) {
  background-color: #f9f9f9;
}

.form-button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #80cc33;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: auto;
}

.form-button:hover {
  background-color: #80cc33;
}

.styled-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 1rem;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.styled-table th,
.styled-table td {
  padding: 15px;
  border: 1px solid #ddd;
  text-align: left;
}

.styled-table th {
  background-color: #80cc33;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

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

#new-variable-form {
  display: none; /* Inicialmente oculto */
  margin: 0 auto; /* Centrar horizontalmente */
  max-width: 400px; /* Ancho máximo */
  width: 100%; /* Ajuste dinámico */
  background-color: #ffffff; /* Fondo blanco */
  padding: 20px; /* Espaciado interno */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
  position: relative; /* Para evitar superposición */
  text-align: left; /* Alineación del texto */
}

.respuesta-item {
  border: 1px solid #ddd;
  max-width: 500px;
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0;
  align-content: center;
}

.variable-item {
  text-align: center; /* Centra el texto dentro de cada contenedor de variable */
  margin-bottom: 20px; /* Añade espacio inferior entre variables para mejorar la visualización */
  padding: 10px; /* Opcional: agrega un padding para que el texto no esté pegado a los bordes */
  border: 1px solid #ddd; /* Opcional: bordes para separar visualmente cada variable */
  border-radius: 5px; /* Opcional: bordes redondeados */
}

.variable-item h3 {
  margin: 0;
  color: #80cc33;
}

button {
  padding: 5px 10px;
  background-color: #80cc33;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;
}

button:hover {
  background-color: #80cc33;
}

.respuesta-item {
  margin-left: 20px;
  padding-left: 10px;
  border-left: 2px solid #80cc33;
}

/* Estilos para la lista de variables */
#variables-list {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.variable-item h3 {
  font-size: 1.2em;
  color: #80cc33;
}

.variable-item p {
  margin: 5px 0;
}

.respuesta-item {
  margin-left: 20px;
  padding-left: 10px;
  border-left: 2px solid #80cc33;
}

/* Estructura vertical para los campos del formulario */
.input-container label {
  display: block;
  width: 100%;
  margin-top: 15px;
}

.input-container input,
.input-container select {
  width: 100%;
  margin-top: 5px;
}

#variable-container {
  display: flex;
  justify-content: center; /* Centrar el formulario horizontalmente */
  padding-top: 20px; /* Espacio opcional para separarlo del contenido superior */
}

#new-variable-form {
  max-width: 500px;
  font-weight: bold;
  width: 100%; /* Asegura que el formulario ocupe el ancho completo del contenedor */
  margin: 0 auto; /* Centra el formulario si se aplica en otros contextos */
}

#variables-list {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
}

.variable-type-container {
  width: 1200px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.variable-type-container h2 {
  font-size: 1.5rem;
  color: #80cc33;
  text-align: center;
  margin-bottom: 10px;
}

.variable-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

.variable-item:last-child {
  border-bottom: none; /* Evita la línea al final de la lista */
}

/* Centrar y ajustar ancho del botón "Nueva Variable" */
#new-variable-button {
  display: block;
  margin: 0 auto 20px auto; /* Añade 20px de espacio debajo del botón */
  width: 200px; /* Asegura que el texto esté en una sola línea */
  text-align: center;
}

/* Contenedor similar para la definición de fórmula */
#calculation-formula-container {
  width: 100%; /* Ajusta el ancho según tus necesidades */
  margin: 0 auto 20px auto; /* Centrar horizontalmente y añadir espacio inferior */
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

#calculation-formula-container h2 {
  font-size: 1.5rem;
  color: #80cc33;
  margin-bottom: 10px;
}

#current-formula-display {
  margin-top: 20px;
}

/* Contenedor principal para evaluación de riesgos */
.risk-assessment-container {
  width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}

.risk-assessment-container h2 {
  text-align: center;
  color: #333;
  font-size: 1.5em;
  margin-bottom: 10px;
}

/* Grupos de formulario */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  font-weight: bold !important;
  display: block;
  margin-bottom: 5px;
  color: #272727 !important;
}

.input-field,
select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 5px;
}

/* Estilo de botón principal */
.button-primary {
  display: inline-block;
  background-color: #80cc33;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 10px;
  width: 100%;
}

.button-primary:hover {
  background-color: #80cc33;
}

/* Contenedor de resultados */
.result-container {
  margin-top: 20px;
  padding: 15px;
  border-top: 2px solid #4caf50;
}

.result-container h3 {
  font-size: 1.3em;
  margin-bottom: 10px;
  color: #333;
  text-align: center;
}

.result-container p {
  font-size: 1em;
  margin: 5px 0;
  line-height: 1.4;
}

.result-container strong {
  color: #333;
}

.button-primary {
  display: block; /* Esto asegura que el botón esté en una línea independiente */
  background-color: #80cc33;
  color: white;
  border: none;
  padding: 12px; /* Un poco más de espacio para hacerlo más amplio */
  text-align: center;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin: 10px auto; /* Centra el botón horizontalmente */
  width: 10%; /* Ajusta el ancho del botón */
  max-width: 400px; /* Opcional: establece un máximo para evitar que se expanda demasiado */
}

.button-primary:hover {
  background-color: #80cc33;
}

/* Centrado de los textos y contenedores de variables */
.centered-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.variable-group-title {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  margin: 10px 0;
}

.variable-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px; /* Limita el ancho del contenedor */
}

/* Contenedor centrado de variables y respuestas */
.centered-definition-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto;
  width: 100%;
  max-width: 1000px; /* Ajusta el ancho máximo a 800px o al valor que prefieras */
  padding: 10px; /* Opcional: añadir un pequeño padding para darle más espacio interno */
  box-sizing: border-box; /* Asegura que el padding no aumente el ancho total */
}

/* Estilos para los títulos de cada grupo */
.definition-group-title {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  margin: 10px 0;
}

/* Botones principales */
.menu-button {
  width: 200px; /* Ancho más amplio */
  padding: 15px 20px; /* Espaciado interno más grande */
  font-size: 16px; /* Tamaño de texto aumentado */
  font-weight: bold; /* Letras en negrita */
  color: #ffffff; /* Texto en blanco */
  background-color: #80cc33; /* Azul claro */
  border: none;
  border-radius: 8px; /* Bordes redondeados */
  margin: 10px auto; /* Margen vertical y centrado horizontal */
  display: block; /* Se asegura de que esté centrado */
  text-align: center;
  transition: all 0.3s ease-in-out; /* Suavizado de transiciones */
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

/* Hover: efecto al pasar el ratón */
.menu-button:hover {
  background-color: #80cc33; /* Azul más oscuro */
  transform: scale(1.05); /* Efecto de agrandamiento */
  box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}

/* Botón activo o seleccionado */
.menu-button.active {
  background-color: #80cc33; /* Verde para el estado seleccionado */
  transform: scale(1.1); /* Se agranda un poco más */
  box-shadow: 4px 8px 12px rgba(0, 128, 0, 0.4); /* Sombra verde */
}

/* Texto más grande para un botón activo */
.menu-button.active span {
  font-size: 20px;
  font-weight: bold;
}

#suggest-variables-button {
  width: 200px; /* Ancho más amplio */
  display: block;
  margin: 20px auto; /* Centra horizontalmente */
  padding: 10px 20px;
  background-color: #383838;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

/* Hover: efecto al pasar el ratón */
.suggest-variables-button:hover {
  background-color: #80cc33; /* Azul más oscuro */
}

#suggested-variables-container {
  display: block;
  margin: 20px auto; /* Centrar horizontalmente */
  max-width: 600px; /* Ancho máximo del contenedor */
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#suggested-variables-list {
  list-style: none;
  padding: 0;
}

#suggested-variables-list li {
  margin: 5px 0;
  padding: 10px;
  background-color: #e8f5e9;
  border-radius: 4px;
  font-size: 14px;
}

#risk-report-analysis-container {
  margin: 20px auto;
  padding: 20px;
  max-width: 600px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#risk-report-analysis-container label {
  display: block;
  font-weight: bold;
  margin-top: 15px;
  color: #333;
}

#risk-report-analysis-container select,
#risk-report-analysis-container input[type="file"] {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
}

#risk-report-analysis-container button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #80cc33;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
}

#risk-report-analysis-container button:hover {
  background-color: #80cc33;
}

#risk-report-form label {
  font-weight: bold;
  margin-top: 10px;
  display: block;
}

#risk-report-file {
  margin-top: 10px;
}

#analysis-result {
  margin-top: 20px;
  font-size: 1rem;
  color: #333;
}

.close-modal-button:hover {
  background-color: #0f8a38 !important;
}
/* Ajustar el ancho del campo de importancia */
input[type="number"][id^="importancia-"] {
  width: 50px !important; /* Fuerza el ancho */
  text-align: center;
  padding: 2px;
}

select[id^="respuesta-"] {
  width: 400px !important; /* Ajusta el ancho según sea necesario */
  text-align: left; /* Alineación del texto */
  padding: 2px; /* Opcional para ajustar el padding interno */
}

/* Centrar y mostrar modal */
#email-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#email-modal.show {
  visibility: visible;
  opacity: 1;
}

/* Contenido del modal */
#email-modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 600px;
  max-width: 90%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#email-modal-content h3 {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
}

/* Campos de entrada */
.email-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

/* Footer del modal */
.email-modal-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

/* Botones */
#email-modal-content button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

#send-email-submit {
  background-color: #80cc33;
  color: white;
}

#send-email-submit:hover {
  background-color: #80cc33;
}

#email-modal-content button:last-child {
  background-color: #0f8a38;
  color: white;
}

#email-modal-content button:last-child:hover {
  background-color: #0f8a38;
}

/* Modal de error */
#error-modal {
  z-index: 2000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: none;
  transition: opacity 0.3s ease-in-out;
}

#error-modal.show {
  display: block;
}

.button-row {
  display: flex; /* Configura el contenedor como fila flexible */
  justify-content: center; /* Centra los botones horizontalmente */
  gap: 20px; /* Espaciado entre botones */
  margin: 0 auto; /* Asegura que el contenedor esté centrado */
  max-width: 100%; /* Limita el ancho máximo del contenedor */
}

.button-row button {
  flex: 1; /* Hace que los botones ocupen proporciones iguales */
  max-width: 30%; /* Limita el ancho de cada botón a 1/3 del contenedor */
  padding: 10px; /* Añade espacio interno para estética */
  text-align: center; /* Centra el texto dentro de los botones */
  font-size: 14px; /* Tamaño de fuente ajustado */
  box-sizing: border-box; /* Incluye relleno y borde en el tamaño total */
}

.button-row button:hover {
  background-color: #0f8a38; /* Color de fondo al pasar el cursor */
}

#policies-form-container {
  margin: 20px auto;
  padding: 20px;
  max-width: 800px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Títulos de secciones */
.section-title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  color: #2c3e50;
}

/* Estilo del formulario */
.styled-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Grupos de formulario */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: #34495e;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #3498db;
  outline: none;
}

/* Botón Generar Política */
.generate-button {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  background-color: #80cc33;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
}

.generate-button:hover {
  background-color: #80cc33;
}

#policy-result {
  padding: 20px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 20px;
}

#policy-result h1,
#policy-result h2,
#policy-result h3 {
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
}

#policy-result p {
  margin-bottom: 10px;
  text-align: justify;
}

#policy-result ul,
#policy-result ol {
  margin-left: 20px;
  margin-bottom: 15px;
}

#download-button-container {
  display: flex;
  justify-content: center; /* Centra el botón horizontalmente */
  margin-top: 20px; /* Espacio superior opcional */
}

.styled-button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  width: 800px;
}

.styled-button:hover {
  background-color: #80cc33; /* Cambia a un tono más claro */
  transform: scale(1.05); /* Efecto de aumento */
}

.styled-button:active {
  transform: scale(0.95); /* Efecto de clic */
}

/* Contenedor principal */
/* General */
body.login-page {
  font-family: Arial, sans-serif;
  background: #f4f4f4; /* Gris claro */
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

body.login-page h1 {
  font-size: 20px; /* Tamaño reducido */
  font-weight: bold;
  color: #333;
  text-align: center; /* Mantenerlo centrado */
  margin-bottom: 20px; /* Espaciado inferior */
}

/* Estilo para las etiquetas en la página de login */
body.login-page .form-label {
  font-size: 14px; /* Tamaño ajustado */
  color: #555; /* Color para buena legibilidad */
  font-weight: bold; /* Texto en negrita */
  margin-bottom: 5px;
  text-align: left; /* Alineación a la izquierda */
  display: block; /* Mantener en su propia línea */
}

/* Ajuste para ambos campos */
body.login-page .form-control {
  text-align: left; /* Asegura que el texto dentro del campo esté alineado a la izquierda */

  font-size: 14px; /* Tamaño consistente */
}

/* Contenedor principal */
.login-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 400px;
  width: 100%;
  box-sizing: border-box; /* Asegura que los bordes no excedan el tamaño */
}

/* Logo */
.logo-container {
  text-align: center;
  margin-bottom: 20px;
}

/* Tamaño consistente del logo */
.logo {
  max-width: 250px; /* Tamaño máximo del ancho */
  height: auto; /* Mantener la proporción */
  display: block;
  margin: 0 auto; /* Centrado */
}

/* Título */
h1 {
  font-size: 1.5rem; /* Tamaño de fuente consistente */
  font-weight: bold; /* Negrita para uniformidad */
  text-transform: uppercase; /* Texto en mayúsculas */
  color: #333; /* Color oscuro consistente */
  margin-top: 20px; /* Espaciado superior */
  margin-bottom: 20px; /* Espaciado inferior */
  text-align: left; /* Alineación a la izquierda como en el título especificado */
}

/* Formularios */
label {
  display: block;
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
  text-align: left;
}

input {
  width: 90%; /* Ancho total uniforme */
  padding: 10px;
  font-size: 14px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  height: 42px; /* Altura fija para mantener uniformidad */
}

/* Contenedor del campo de contraseña */
/* Contenedor del campo de contraseña */
/* Contenedor del campo de contraseña */
.password-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 15px;
}

.password-container input[type="password"],
.password-container input[type="text"] {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  height: 42px;
  margin-bottom: 5px; /* Espacio con el checkbox */
}

/* Estilo del checkbox */
.show-password-checkbox {
  margin-right: 5px;
  transform: scale(1.2); /* Aumenta el tamaño del checkbox */
  cursor: pointer;
}

/* Estilo de la etiqueta para "Mostrar" */
.show-password-label {
  font-size: 14px;
  color: #555;
  cursor: pointer;
}

/* Botón del ojo */
.toggle-password {
  position: absolute;
  right: 5px; /* Margen desde el borde derecho del contenedor */
  background: #80cc33; /* Fondo verde */
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; /* Tamaño cuadrado del botón */
  height: 36px; /* Tamaño cuadrado del botón */
  border-radius: 4px; /* Bordes redondeados */
  box-shadow: none;
}

.toggle-password svg {
  fill: white; /* Color del icono */
  width: 18px; /* Tamaño del icono */
  height: 18px; /* Tamaño del icono */
}

.toggle-password:hover {
  background-color: #45a049; /* Color más oscuro al pasar el ratón */
}

/* Botón de login */
.login-button {
  background: #80cc33;
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  width: 100%; /* Botón ancho completo */
  transition: background 0.3s;
  height: 42px; /* Altura consistente */
}

.login-button:hover {
  background: #1c8125;
}

/* Mensaje de error */
.error-message {
  color: red;
  font-size: 14px;
  margin-top: 10px;
}
/* Mensaje de error */
.error-message {
  color: red;
  font-size: 14px;
  margin-top: 10px;
}

.logout-container {
  display: flex;
  justify-content: flex-end; /* 🔹 Mueve el botón completamente a la derecha */
  align-items: center;
  width: 100%; /* 🔹 Ocupará todo el ancho disponible */
  padding-right: 20px; /* 🔹 Espaciado a la derecha */
}

.logout-button {
  background-color: #e74c3c;
  color: #ffffff;
  border: none;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.logout-button:hover {
  background-color: #c0392b;
}

.input-group .form-control {
  border-radius: 0.375rem 0 0 0.375rem; /* Bordes redondeados en los extremos */
}

.input-group .btn {
  border-radius: 0 0.375rem 0.375rem 0; /* Botón derecho con bordes redondeados */
}

.logo-index {
  max-width: 250px; /* Igual al tamaño del login */
  height: auto; /* Mantener proporciones */
  display: block;
  margin: 0 auto; /* Centrar el logo */
}

.user-info {
  position: absolute;
  right: 10px; /* Ajusta según el diseño */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 15px;
}

.username-display {
  font-size: 16px;
  font-weight: bold;
  color: #424242;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050; /* Siempre visible por encima de otros elementos */
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.2rem;
  color: #333;
}

.navbar .form-control {
  width: 300px;
}

.navbar .dropdown-toggle {
  font-size: 1rem;
  color: #333;
}

.navbar .dropdown-menu {
  min-width: 200px;
}

#wrapper {
  margin-top: 56px;
  min-height: 100vh;
  max-height: none;
}

/* Ajuste del contenido principal para compensar el cabecero dinámico */
.main-content {
  margin-left: 250px;
  width: calc(100% - 250px);
  padding: 20px;
  background-color: #f9f9f9;
  box-sizing: border-box;
  transition: margin-left 0.3s ease, width 0.3s ease;
  height: auto; /* Permitir crecimiento dinámico */
  overflow: visible;
  max-height: none !important;
}

.full-height-content {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

.dashboard-content {
  margin-left: 280px;
  width: calc(100% - 310px);
  padding: 20px 30px;
  background-color: #f9f9f9;
  box-sizing: border-box;
  transition: all 0.3s ease;
  overflow-y: auto;
  height: auto;
  max-height: 100vh;
}

/* Ajuste del contenido principal para compensar el cabecero dinámico */
/* Ajuste del contenido principal para compensar el cabecero dinámico */
.main-content-sinonimos {
  margin-top: 120px; /* 60px para la barra + 60px para el cabecero */
  margin-left: auto; /* Centrado horizontal */
  margin-right: auto; /* Centrado horizontal */
  width: 1200px; /* Ancho fijo del contenido */
  padding: 20px;
  background-color: #f9f9f9;
  box-sizing: border-box;
  transition: margin-left 0.3s ease, width 0.3s ease;
}

.dynamic-header {
  position: absolute;
  top: 60px; /* Altura de la barra de navegación */
  left: 270px; /* Margen inicial del sidebar expandido */
  width: calc(100% - 290px); /* Ajustar el ancho con margen */
  height: 60px;
  background-color: white; /* 🔹 Fondo blanco */
  color: rgb(70, 70, 70); /* 🔹 Texto negro */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050; /* Mantenerlo encima del contenido */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
  transition: left 0.3s ease, width 0.3s ease;

  /* 🔹 Nuevos estilos */
  border: 2px solid #80cc33; /* 🔹 Borde verde con grosor medio */
  border-radius: 10px; /* Esquinas redondeadas */
  padding: 10px 20px; /* Espaciado interno */
  margin-top: 20px; /* Separación superior */
  margin-left: 0px; /* Separación izquierda */
}

/* Estilo del texto dentro del header */
.dynamic-header h2 {
  margin: 0;
  font-size: 1.5rem; /* Texto más pequeño */
  font-weight: bold; /* Negrita */
  text-transform: uppercase; /* Mantiene el texto en mayúsculas */
}

/* Ajuste cuando el menú lateral está colapsado */
.sidebar.collapsed + .dynamic-header + .static-header + .custom-container + .dashboard-content.custom-container {
  left: 100px; /* Ajustado al sidebar colapsado */
  width: calc(100% - 120px); /* Ajuste del ancho */
}

.static-header {
  position: absolute;
  top: 60px;
  left: 270px;
  width: calc(100% - 290px);
  height: auto;
  background-color: #ffffff;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 16px 24px;
  border-radius: 12px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  font-family: "Poppins", sans-serif;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.static-header h2 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  color: #2c3e50;
}

.static-header .brand {
  color: #80cc33;
  font-weight: bold;
}

.header-icon {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  vertical-align: middle;
}

.static-header {
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInDown 0.6s ease-out forwards;
}

@keyframes fadeInDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto; /* Centra horizontalmente */
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

/* Asegura que el contenedor de bienvenida tenga prioridad */
#welcome-container {
  display: none; /* Oculto por defecto, controlado por JS */
  position: fixed;
  top: 60px; /* Para evitar la superposición con la barra de navegación */
  left: 250px; /* Ajuste según el menú expandido */
  width: calc(100% - 250px);
  height: calc(100vh - 60px); /* Ocupa el área visible debajo del navbar */
  background-color: #ffffff; /* Fondo blanco */
  color: #80cc33; /* Texto azul oscuro */
  z-index: 1050; /* Asegura prioridad */
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Transición suave */
  opacity: 0; /* Oculto por defecto */
  visibility: hidden; /* Oculta el contenedor de manera más precisa */
}

/* Estado visible para el contenedor de bienvenida */
#welcome-container.active {
  display: flex; /* Lo muestra como contenedor flexible */
  opacity: 1; /* Totalmente visible */
  visibility: visible; /* Asegura que se renderiza */
}

/* Ajuste para el menú colapsado */
.sidebar.collapsed + #welcome-container {
  left: 80px; /* Ajusta el margen izquierdo */
  width: calc(100% - 80px);
}

.welcome-container h1 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.welcome-container p {
  font-size: 1.2rem;
  color: #555;
}

#metadata-grid {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #f9f9f9;
}

#metadata-grid table {
  width: 100%;
  border-collapse: collapse;
}

#metadata-grid th,
#metadata-grid td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

#metadata-grid th {
  background-color: #f2f2f2;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f4f4f4;
}

#risk-identification-form-container,
#risk-evaluation-form-container {
  width: 1200px; /* Ancho fijo de 800px */
  margin: 20px auto; /* Centrado horizontal */
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative; /* Necesario para el posicionamiento del preloader */
  overflow: hidden;
  transition: height 0.4s ease, opacity 0.4s ease;
}

#risk-identification-form-container h1,
#risk-evaluation-form-container h1 {
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}

#risk-identification-form-container label,
#risk-evaluation-form-container label {
  display: block;
  font-weight: bold;
  margin-top: 15px;
  color: #333;
}

#risk-identification-form-container select,
#risk-evaluation-form-container select,
#risk-identification-form-container input[type="text"],
#risk-evaluation-form-container input[type="text"],
#risk-identification-form-container input[type="number"],
#risk-evaluation-form-container input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  transition: border-color 0.3s;
}

#risk-identification-form-container select:focus,
#risk-evaluation-form-container select:focus,
#risk-identification-form-container input[type="text"]:focus,
#risk-evaluation-form-container input[type="text"]:focus,
#risk-identification-form-container input[type="number"]:focus,
#risk-evaluation-form-container input[type="number"]:focus {
  border-color: #80cc33;
}

/* Botón del formulario */
#risk-identification-form-container button,
#risk-evaluation-form-container button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #80cc33;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
}

#risk-identification-form-container button:hover,
#risk-evaluation-form-container button:hover {
  background-color: #80cc33;
}

/* Estado colapsado */
#risk-identification-form-container.collapsed {
  visibility: hidden;
  height: 0;
  overflow: hidden; /* Evita contenido visible */
  opacity: 0;
  transition: height 0.8s ease, opacity 0.8s ease;
}

/* Estado expandido */
#risk-identification-form-container.expanded {
  visibility: visible;
  height: auto;
  margin-top: 20px;
  opacity: 1;
  transition: height 0.8s ease, opacity 0.8s ease;
}

/* Contenedor principal */
#risk-metadata-container {
  display: flex;
  flex-direction: column; /* Elementos en columna */
  align-items: stretch; /* Asegura que los elementos ocupen el ancho disponible */
  margin: 20px auto;
  width: 1200px;
  position: relative; /* Para posicionar el botón dentro del contenedor */
}

.selected-row {
  background-color: rgba(167, 185, 243, 0.7); /* Color suave con transparencia */
  transition: background-color 0.3s ease; /* Transición para suavizar el cambio */
}

/* Botón */
#toggle-risk-form {
  width: 200px; /* Ancho fijo */
  position: absolute; /* Posiciona el botón dentro del contenedor */
  top: 20px; /* Ajusta la posición vertical */
  right: 0; /* Alinea el botón al borde derecho */
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #80cc33; /* Mismo color de otros botones */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

/* Efecto hover */
#toggle-risk-form:hover {
  background-color: #80cc33;
  transform: scale(1.05);
}

/* Título */
#risk-title {
  text-align: left;
  margin-bottom: 20px;
}

/* Grid */
#metadata-grid {
  margin-top: 60px; /* Espacio para evitar que se superponga al botón */
}

.delete-button {
  background-color: #dc3545; /* Rojo */
  position: relative;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Tooltip */
.delete-button::after {
  content: "Eliminar registro"; /* Texto del tooltip */
  position: absolute;
  bottom: 125%; /* Posición del tooltip encima del botón */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0; /* Tooltip inicialmente oculto */
  visibility: hidden;
  transition: opacity 0.6s ease 0.3s; /* Aparece gradualmente con un retraso de 0.3s */
  pointer-events: none; /* Evita que el tooltip interfiera con el mouse */
}

.delete-button:hover::after {
  opacity: 1; /* Muestra el tooltip */
  visibility: visible; /* Asegura que sea visible */
}

.delete-button2 {
  background-color: #dc3545; /* Rojo */
  color: white;
}

/* Tooltip */
.delete-button2::after {
  content: "Eliminar registro"; /* Texto del tooltip */
  position: absolute;
  bottom: 125%; /* Posición del tooltip encima del botón */
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0; /* Tooltip inicialmente oculto */
  visibility: hidden;
  transition: opacity 0.6s ease 0.3s; /* Aparece gradualmente con un retraso de 0.3s */
  pointer-events: none; /* Evita que el tooltip interfiera con el mouse */
}

.delete-button2:hover::after {
  opacity: 1; /* Muestra el tooltip */
  visibility: visible; /* Asegura que sea visible */
}

/* Clase para títulos de sección */
.section-title {
  text-align: left !important; /* Forzar alineación */
  font-size: 2rem !important; /* Tamaño consistente para todos los títulos */
  font-weight: bold !important; /* Negrita para destacar los títulos */
  color: #2c3e50 !important; /* Color oscuro elegante */
  margin-bottom: 20px; /* Espaciado inferior */
  margin-top: 20px; /* Espaciado superior */
  text-transform: uppercase; /* Opcional: texto en mayúsculas */
  letter-spacing: 1px; /* Espaciado entre letras */
}

/* Ajuste responsivo para pantallas pequeñas */
@media (max-width: 768px) {
  .section-title {
    font-size: 1.5rem; /* Tamaño más pequeño en pantallas pequeñas */
  }
}

.contenedorbase {
  max-width: 1200px !important;
  margin: 0 auto !important; /* Centra horizontalmente */
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.contenedorbase-variables {
  max-width: 1200px !important;
  margin: 0 auto !important; /* Centra horizontalmente */
  padding: 20px !important;
  background-color: #f9f9f9 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.styled-table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  font-family: Arial, sans-serif;
  width: 100%;
  border: 1px solid #dddddd;
}

.styled-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}

.styled-table th,
.styled-table td {
  padding: 12px 15px;
  border: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.styled-table tbody tr:hover {
  background-color: #f1f1f1;
}

#risks-table-container {
  display: flex;
  justify-content: center; /* Centrar horizontalmente */
  align-items: flex-start; /* Alinear verticalmente arriba */
  margin: 20px auto; /* Espaciado superior e inferior */
  padding: 10px; /* Opcional: Espaciado interno */
  max-width: 1200px; /* Limitar el ancho máximo del grid */
  background-color: #f9f9f9; /* Opcional: Color de fondo */
  border: 1px solid #ddd; /* Opcional: Borde para resaltar el contenedor */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Opcional: Sombra */
}

#risks-table-container table {
  width: 100%; /* La tabla ocupará todo el ancho disponible */
  border-collapse: collapse;
  margin: 0 auto; /* Centrar la tabla dentro del contenedor */
  font-size: 16px;
  text-align: left;
}

#risks-table-container th,
#risks-table-container td {
  padding: 8px 12px; /* Espaciado interno de celdas */
  border: 1px solid #ddd; /* Líneas entre celdas */
}

#risks-table-container th {
  background-color: #003366; /* Color de encabezado */
  color: white;
  text-align: center;
}

#risks-table-container td {
  vertical-align: top;
}

#result-container {
  display: flex;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Opcional: centrar verticalmente si es necesario */
  margin: 20px auto; /* Añadir espacio superior e inferior */
  max-width: 1200px; /* Limitar el ancho máximo del grid */
}

.details-table {
  width: 100%; /* Ajustar al 100% del contenedor */
  border-collapse: collapse;
  margin: 0 auto; /* Centrar la tabla dentro del contenedor */
  font-size: 16px;
  text-align: left;
}

.details-table thead tr {
  background-color: #f4f4f4;
  border-bottom: 2px solid #ddd;
}

.details-table th,
.details-table td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}

.details-table tbody tr:nth-of-type(even) {
  background-color: #f9f9f9; /* Alternar colores para filas */
}

.details-table tbody tr:hover {
  background-color: #f1f1f1; /* Destacar fila al pasar el ratón */
}

.details-table td {
  vertical-align: top;
  word-wrap: break-word; /* Asegurar que el texto no se desborde */
}

#risk-identification-form-container {
  display: none; /* Inicialmente oculto */
  position: relative; /* Mantiene el ancho relativo a su contenedor padre */
  width: 1200px; /* Se asegura de que no exceda el ancho del contenedor principal */
  z-index: 10; /* Asegura que esté encima de otros elementos */
  margin: 0 auto; /* Centra el contenedor si es necesario */
  padding: 20px; /* Añade un padding para un diseño más limpio */
  box-sizing: border-box; /* Incluye padding y bordes en el ancho total */
}

#risk-identification-form-container.visible {
  display: block; /* Muestra el formulario cuando tiene la clase visible */
}

.view-details-button {
  background-color: #1a43c9 !important; /* Rojo */
  position: relative !important;
  color: white !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 5px 10px !important;
  cursor: pointer !important;
  width: 34px !important;
  transition: background-color 0.3s ease !important;
}

/* Tooltip */
.view-details-button::after {
  content: "Ver detalles"; /* Texto del tooltip */
  position: absolute;
  bottom: 125%; /* Posición del tooltip encima del botón */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0; /* Tooltip inicialmente oculto */
  visibility: hidden;
  transition: opacity 0.6s ease 0.3s; /* Aparece gradualmente con un retraso de 0.3s */
  pointer-events: none; /* Evita que el tooltip interfiera con el mouse */
}

.view-details-button:hover::after {
  opacity: 1; /* Muestra el tooltip */
  visibility: visible; /* Asegura que sea visible */
}

.select-risks-button {
  background-color: #80cc33 !important; /* Rojo */
  position: relative !important;
  color: white !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 5px 10px !important;
  cursor: pointer !important;
  width: 34px !important;
  transition: background-color 0.3s ease !important;
}

/* Tooltip */
.select-risks-button::after {
  content: "Seleccionar"; /* Texto del tooltip */
  position: absolute;
  bottom: 125%; /* Posición del tooltip encima del botón */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0; /* Tooltip inicialmente oculto */
  visibility: hidden;
  transition: opacity 0.6s ease 0.3s; /* Aparece gradualmente con un retraso de 0.3s */
  pointer-events: none; /* Evita que el tooltip interfiera con el mouse */
}

.select-risks-button:hover::after {
  opacity: 1; /* Muestra el tooltip */
  visibility: visible; /* Asegura que sea visible */
}

/* Centrar los botones en la columna */
td > button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto; /* Asegura el centrado completo */
}

/* Cambios principales para mejorar formularios y tablas */
/* Contenedor del listado */
.table-container {
  width: 100%; /* Ancho completo del contenedor principal */
  max-width: 100%; /* Limitar el ancho máximo al 100% */
  margin: 0 auto; /* Centrar horizontalmente */
  padding: 0 20px; /* Espaciado interno opcional */
  box-sizing: border-box; /* Incluir padding y bordes en el ancho */
}

/* Asegurar que la tabla se adapte */
table {
  width: 100%; /* Ancho completo de la tabla */
  table-layout: fixed; /* Distribución uniforme de las columnas */
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  text-align: left;
}

.table-container th,
.table-container td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}

.table-container th {
  background-color: #80cc33;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

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

.table-container tbody tr:hover {
  background-color: #f1f1f1;
}

.table-container td {
  color: #333;
  word-wrap: break-word;
  vertical-align: top;
}

/* Botones */
.button {
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  background-color: #80cc33;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  width: 100%;
}

.button:hover {
  background-color: #80cc33;
  transform: scale(1.05);
}

.button:active {
  transform: scale(0.95);
}

/* Modales */

/* Centrado de botones en tablas */
.table-container td > .button {
  display: block;
  margin: 0 auto;
  text-align: center;
}

/* Contenedor de la fila de botones */
/* Contenedor de la fila de botones */
.button-row {
  display: flex; /* Flexbox para alinear los elementos en una fila */
  justify-content: space-around; /* Espaciado uniforme entre columnas */
  align-items: center; /* Centrar verticalmente */
  margin-bottom: 20px;
  gap: 10px; /* Espaciado entre columnas */
}

/* Columnas para cada botón */
.column {
  flex: 1; /* Cada columna ocupa un espacio igual */
  text-align: center; /* Centrar contenido dentro de la columna */
}

/* Botones */
.generate-button2 {
  background-color: #4e73df !important; /* Color base */
  color: white !important; /* Texto blanco */
  border: none !important;
  border-radius: 5px !important;
  padding: 15px !important; /* Ajustar tamaño del botón */
  font-size: 16px !important; /* Tamaño del texto */
  font-weight: bold !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  width: 100% !important; /* Botón ocupa todo el ancho de la columna */
  box-sizing: border-box !important; /* Incluye el padding en el ancho total */
}

/* Efecto hover */
.generate-button2:hover {
  background-color: #2e59d9; /* Color más oscuro */
}

/* Evitar que el texto se divida */
.generate-button2 span {
  white-space: nowrap;
}

/* Contenedor de la fila de botones */
/* Contenedor de la fila de botones */
.button-row2 {
  display: flex; /* Alineación en fila */
  justify-content: space-between; /* Distribuir espacio entre columnas */
  align-items: center; /* Centrar verticalmente */
  margin-bottom: 20px; /* Separación inferior */
  gap: 10px; /* Espaciado uniforme entre columnas */
  width: 100%; /* Ocupa todo el ancho del contenedor */
}

/* Columnas para cada botón */
.column {
  flex: 1; /* Cada columna ocupa un tercio del espacio */
  text-align: center; /* Centrar contenido dentro de la columna */
}

/* Estilo común para los botones */
.action-button {
  background-color: #4e73df; /* Color base del botón */
  color: white; /* Texto blanco */
  border: none;
  border-radius: 5px;
  padding: 10px 20px; /* Aumenta el tamaño del botón */
  font-size: 16px; /* Tamaño de fuente adecuado */
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s ease;
  width: 30%; /* Cada botón ocupa 30% de la fila */
}

/* Estilo al pasar el ratón */
.action-button:hover {
  background-color: #2e59d9;
}

/* Para asegurarse de que los botones no estén en varias filas */
.action-button span {
  white-space: nowrap; /* Evitar salto de línea */
}

/* Añadir este estilo a tu archivo CSS */
.highlighted-row {
  background-color: #abd2ff !important; /* Azul claro */
  font-weight: bold;
}

#cancel-variable-btn {
  background-color: #f44336;
  color: white;
  border: none;

  cursor: pointer;
  border-radius: 5px;
  margin-left: 10px;
}

#cancel-variable-btn:hover {
  background-color: #d32f2f;
}

.charts-container {
  max-width: 1400px;
  height: 400px; /* Define el alto del contenedor */
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 40px; /* Espaciado entre filas */
}

.row {
  display: flex;
  justify-content: space-between; /* Espaciado entre gráficos */
  gap: 20px; /* Espaciado horizontal */
}

.chart-box {
  width: 600px; /* Ancho fijo */
  height: 500px; /* Altura fija */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #ffffff;
}

canvas {
  width: 100%; /* Gráfico ocupa todo el ancho del contenedor */
  height: 100%; /* Gráfico ocupa toda la altura del contenedor */
}

#casesPerYearChart {
  max-width: 100%; /* Permite que el gráfico se adapte al ancho */
  height: 400px; /* Fija el alto a 400px */
}

/* Estilo para el encabezado */
.table-primary {
  background-color: #80cc33;
  color: white;
  text-transform: uppercase;
}

/* Ajusta las tablas dentro del DataTable */
.dataTable {
  width: 100% !important; /* Obliga a la tabla a ocupar todo el ancho disponible */
  table-layout: fixed; /* Distribuye las columnas de forma uniforme */
}

/* Ajustes para la barra de búsqueda y paginación */
.dataTables_filter input {
  border: 1px solid #dee2e6;
  border-radius: 20px;
  padding: 5px 10px;
  margin-left: 10px;
}

.dataTables_length select {
  border: 1px solid #dee2e6;
  border-radius: 5px;
  padding: 5px;
  margin-left: 10px;
}

/* Botones */
.dataTables_paginate .paginate_button {
  border-radius: 5px;
  margin: 0 2px;
  padding: 5px 10px;
  border: none;
  background-color: #80cc33;
  color: white;
}

.dataTables_paginate .paginate_button:hover {
  background-color: #80cc33;
  color: white;
}

.table {
  width: 100%; /* Asegura que la tabla respete el ancho del contenedor */
  table-layout: auto; /* Permite ajustar automáticamente las columnas */
  margin-bottom: 0; /* Evita márgenes que puedan cortar el borde */
}

.modal-backdrop {
  display: none !important; /* Garantiza que no se quede bloqueando */
  z-index: 1050 !important; /* 🔹 Fondo oscurecido detrás del modal */
}

.modal-ancho-personalizado {
  max-width: 90% !important; /* Ocupa el 90% del ancho de la pantalla */
}

@media (min-width: 1200px) {
  .modal-ancho-personalizado {
    max-width: 1200px !important; /* Fija el máximo a 1200px en pantallas grandes */
  }
}

#jurisprudenciaModal .modal-dialog {
  max-width: 1200px; /* Asegura el ancho para este modal en específico */
  width: 100%;
}

#jurisprudenciaModal .modal-content-ancho-personalizado {
  width: 1200px;
  max-width: 100%;
}

#detallesModal .modal-content-ancho-personalizado {
  width: 1200px;
  max-width: 100%;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1200px; /* Asegura que el dialog permite un contenido de 1200px */
  width: 100%; /* Hace que use todo el espacio permitido */
  min-height: 100vh; /* Asegura que el modal esté centrado verticalmente */
  transform: translateY(150px); /* Desplaza el modal hacia abajo */
}

.modal-content-ancho-personalizado {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 1200px !important;
  text-align: center;
  max-height: calc(90vh - 150px); /* Altura ajustada teniendo en cuenta el desplazamiento */
  overflow-y: auto; /* Permite desplazamiento vertical */
}

.modal-content-ancho-personalizado ul {
  list-style: none;
  padding: 0;
}

.modal-content-ancho-personalizado ul li {
  padding: 8px;
  cursor: pointer;
  color: #80cc33;
}

.modal-content-ancho-personalizado ul li:hover {
  background-color: #f0f0f0;
}

body.modal-open {
  overflow: hidden !important; /* Bootstrap agrega esta clase al abrir modales */
}

.card-body {
  overflow-x: auto; /* Permite desplazamiento horizontal */
  padding: 15px; /* Ajusta el padding para evitar cortes */
}

.table-responsive {
  overflow-x: auto; /* Permitir desplazamiento horizontal */
}

#sentenciasTable_wrapper {
  overflow: auto;
}

#sentenciasTable {
  width: 100%; /* Asegurar que la tabla ocupe el espacio disponible */
  table-layout: auto; /* Permitir ajuste automático de columnas */
}

.dataTables_wrapper {
  max-width: 100%;
  overflow-x: auto; /* Garantiza que no se corte el contenido */
}

#sentenciasTable_filter input {
  height: 38px; /* Altura uniforme */
  width: 100% !important; /* Ajusta el ancho del input al contenedor */
  max-width: 250px; /* Evita que el input sea demasiado grande */
  box-sizing: border-box !important; /* Asegura que padding y bordes no alteren el ancho */
  padding: 6px 12px; /* Espaciado interno */
}

/* Contenedor del texto y desplegable */
/* Contenedor del texto y el desplegable */
.dataTables_length select,
.dataTables_filter input {
  height: 38px; /* Altura uniforme */
  padding: 6px 12px; /* Espaciado interno */
  border: 1px solid #dee2e6; /* Borde consistente */
  border-radius: 5px; /* Bordes redondeados */
  box-sizing: border-box; /* Incluye el padding en la altura */
  font-size: 14px; /* Tamaño de la fuente */
}

/* Ajustes específicos para el desplegable */
.dataTables_length select {
  margin: 0; /* Elimina márgenes predeterminados */
  border: 1px solid #dee2e6; /* Borde ligero */
  border-radius: 5px; /* Bordes redondeados */
  padding: 4px 8px; /* Espaciado interno */
  box-sizing: border-box; /* Padding dentro del tamaño total */
  height: auto; /* Ajusta la altura al contenido */
  line-height: 1.2; /* Alinea la altura de la fuente */
  width: 50%; /* Ajusta el ancho al 50% */
  min-width: 80px; /* Ancho mínimo */
  display: inline-block; /* Asegura que se alinee correctamente */
}

#questionnaire-container {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
}
.table-bordered td,
.table-bordered th {
  text-align: center;
  vertical-align: middle;
}
.response-value {
  font-weight: bold;
}

.otp-container {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 100%;
  max-width: 400px;
}

.otp-container h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

.otp-container p {
  font-size: 14px;
  margin-bottom: 20px;
  color: #6c757d;
}

.otp-container input {
  font-size: 16px;
  padding: 10px;
  width: 100%;
  margin-bottom: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.otp-container button {
  font-size: 16px;
  padding: 10px 20px;
  background-color: #80cc33;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.otp-container button:hover {
  background-color: #80cc33;
}

.error-message {
  color: #dc3545;
  font-size: 14px;
  margin-top: 10px;
}

/* Contenedor para evitar desbordamiento horizontal */
.custom-datatable {
  width: 100%;
  overflow-x: auto; /* Agrega scroll solo si es necesario */
  border-collapse: collapse;
}

.custom-datatable thead th {
  text-align: center; /* Centrar encabezados */
  vertical-align: middle;
  white-space: nowrap; /* Evita que el texto se quiebre */
}

.custom-datatable tbody td {
  white-space: nowrap; /* Evita que el contenido se quiebre */
  text-align: center; /* Centrar contenido */
}

.custom-datatable_wrapper {
  margin-top: 20px;
}

.custom-datatable .dataTables_filter {
  float: right;
  margin-bottom: 10px;
}

.custom-datatable .dataTables_length {
  float: left;
  margin-bottom: 10px;
}

/* Ajustar contenedor de la tabla */
#users-table_wrapper {
  width: 100%; /* Asegura que la tabla ocupe todo el ancho disponible */
  overflow-x: auto; /* Permitir scroll horizontal solo si es necesario */
}

/* Asegurar que las columnas de la tabla se ajusten automáticamente */
#users-table {
  width: 100% !important;
  table-layout: auto !important;
}

/* Alinear encabezados y celdas */
#users-table th,
#users-table td {
  white-space: nowrap; /* Evitar quiebres de línea */
  text-align: center;
}
/* Espaciado para el buscador y paginación */
.dataTables_wrapper .dataTables_filter {
  float: right;
  margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_length {
  float: left;
  margin-bottom: 10px;
}

/* Reducir el tamaño del selector de registros por página */
#users-table_wrapper .dataTables_length select {
  width: 60px; /* Reduce el ancho del selector */
  height: 30px; /* Ajusta la altura del campo */
  font-size: 14px; /* Ajusta el tamaño del texto */
  padding: 5px; /* Reduce el espacio interno */
}

/* Ajustar el texto al lado del selector */
#users-table_wrapper .dataTables_length label {
  font-size: 14px; /* Reduce el tamaño del texto */
  margin-right: 5px; /* Espaciado entre el texto y el selector */
}

/* Reducir el ancho del campo de búsqueda específico para #users-table */
#users-table_wrapper .dataTables_filter input {
  width: 75%; /* Reduce el ancho al 75% de su tamaño original */
  max-width: 200px; /* Opcional: establece un ancho máximo */
  height: 30px; /* Ajusta la altura */
  font-size: 14px; /* Tamaño de la fuente */
  padding: 5px; /* Espaciado interno */
}

/* Ajustar el contenedor del buscador */
#users-table_wrapper .dataTables_filter {
  float: right; /* Asegurar que esté alineado a la derecha */
  margin-bottom: 10px; /* Espaciado con la tabla */
}

#editUserModal .modal-dialog {
  margin-top: 100px; /* Baja el modal 250px desde la parte superior */
}

.input-group .form-control {
  height: 40px !important; /* Asegura que el campo se ajuste al contenido */
  display: flex;
  align-items: baseline !important;
}

.input-group .btn {
  height: 110% !important; /* Igualar la altura al campo */
  padding: 10; /* Elimina el padding extra */
  display: flex;
  align-items: baseline !important;
  justify-content: center; /* Centra horizontalmente el ícono */
  width: 45px; /* Fija un ancho adecuado para el botón */
  box-sizing: border-box; /* Asegura que el padding no altere el tamaño total */
}

.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.custom-modal {
  background: white;
  width: 400px;
  max-width: 90%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.custom-modal-header {
  background-color: #80cc33;
  color: white;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.custom-modal-header .close-modal {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.custom-modal-body {
  padding: 15px;
  font-size: 16px;
  color: #333;
}

.custom-modal-footer {
  padding: 10px 15px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.custom-modal-footer .btn {
  padding: 8px 15px;
  font-size: 14px;
  cursor: pointer;
}

.custom-modal-footer .btn-primary {
  background-color: #3d3d3d;
  color: white;
  border: none;
  border-radius: 4px;
}

.custom-modal-footer .btn-primary:hover {
  background-color: #414141;
}

#output {
  overflow: visible;
  height: auto;
}

/* Estilo para las secciones */
#output h3 {
  margin-top: 50px; /* Espacio de 50px antes de cada título */
}

#output table {
  margin-bottom: 50px; /* Espacio de 50px después de cada tabla */
}

/* Estilo para el encabezado */
.header {
  width: 100%;
  background-color: #80cc33; /* Fondo oscuro */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0; /* Espaciado arriba y abajo */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para separar el encabezado */
}

/* Estilo para el logo */
.logo {
  max-width: 200px; /* Ancho máximo del logo */
  height: auto; /* Mantener proporción */
}

/* Ajustar ancho del botón y del grupo de entrada */
#suggestBtn {
  width: auto; /* Ajustar automáticamente al contenido */
  white-space: nowrap; /* Evitar cortes de texto */
  padding: 0.5rem 1rem; /* Espaciado interno para un diseño limpio */
  text-align: center; /* Centrar el texto en el botón */
}

.input-group .form-control {
  flex: 2; /* Permitir que el campo de entrada ocupe más espacio */
}

.input-group #suggestBtn {
  flex: 1; /* Reducir ligeramente el ancho del botón */
}

/* Modal más ancho personalizado */
.modal-dialog {
  max-width: 800px; /* Ajusta el ancho deseado */
}

#output ul {
  list-style-type: disc;
  margin-left: 20px;
}

#guarantees-list {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#guarantees-list h3 {
  color: #80cc33;
}

#guarantees-list h4 {
  color: #80cc33;
  margin-top: 10px;
}

#guarantees-list ul {
  list-style-type: disc;
  margin-left: 20px;
}

#guarantees-list li {
  margin-bottom: 5px;
  color: #333;
}

/* Ajustar el contenedor de la tabla para evitar espacios adicionales */
#output table {
  margin: 0 !important;
  padding: 0 !important;
}

/* Limitar el ancho máximo de las tablas y centrarlas */

/* Asegurar que la tabla ocupe todo el ancho disponible */
/* Tabla del DataTable */
table.dataTable {
  width: 100% !important; /* Asegurar que la tabla ocupe el 100% del contenedor */
  table-layout: fixed; /* Ajustar automáticamente el ancho de las columnas */
}

/* Reducir la altura de las filas en DataTable */

/* Reducir la altura de las filas solo en #analisisTable */
#analisisTable.dataTable tbody tr {
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
}

/* Reducir padding interno de las celdas solo en #analisisTable */
#analisisTable.dataTable tbody td {
  padding: 2px 5px !important; /* Reduce espacio dentro de las celdas */
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Contenedor del DataTable */
.dataTables_wrapper {
  width: 100%; /* Asegurar que el contenedor del DataTable ocupe el 100% */
  max-width: 100%; /* Limitar el ancho máximo */
  margin: 0 auto; /* Centrar horizontalmente */
}

/* Ajustar columnas para textos largos */
table.dataTable tbody td {
  word-wrap: break-word; /* Permitir saltos de línea en textos largos */
  white-space: normal; /* Ajustar texto automáticamente */
  text-align: left; /* Alinear texto a la izquierda */
  vertical-align: top; /* Alinear texto verticalmente al inicio */
  padding: 8px 10px; /* Reducir relleno interno */
  overflow: hidden; /* Evitar desbordamiento */
}

/* Mejorar visibilidad del encabezado */
table.dataTable thead th {
  background-color: #f4f4f4; /* Fondo claro */
  color: #333; /* Texto oscuro */
  font-weight: bold; /* Texto en negrita */
  text-align: center; /* Centrar encabezados */
  padding: 10px;
}

/* Mantener el color gris cuando la fila está seleccionada */
table.dataTable tbody tr.selected td {
  color: #001263 !important; /* Gris oscuro */
}

/* Evitar los bordes en la fila seleccionada */
table.dataTable tbody tr.selected {
  border: none !important; /* Elimina cualquier borde */
  outline: none !important; /* Evita contornos adicionales */
}

/* Ajustar espacio entre encabezado y cuerpo */
.dataTables_wrapper .dataTables_scrollBody {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.moved {
  background-color: #d1ecf1 !important; /* Azul claro */
  transition: background-color 0.5s ease;
}

/* Ajustar el ancho de la columna de acciones */
table.dataTable td:last-child,
table.dataTable th:last-child {
  text-align: center;
  white-space: nowrap;
  width: auto; /* Ajustar al mínimo espacio posible */
}

.custom-blue-btn {
  background-color: #80cc33; /* Azul Bootstrap */
  color: white; /* Texto blanco */
  border: none; /* Sin borde */
  border-radius: 4px; /* Bordes redondeados */
  padding: 10px 20px; /* Espaciado */
  font-size: 1rem; /* Tamaño del texto */
  cursor: pointer; /* Manita al pasar */
  transition: background-color 0.3s ease;
}

.custom-blue-btn:hover {
  background-color: #39833a; /* Azul más oscuro al pasar el ratón */
}

.dataTables_wrapper th {
  cursor: pointer; /* Cambiar el cursor al pasar sobre un encabezado */
}

.error-message {
  color: red; /* Texto en rojo */
  font-size: 1.2rem; /* Tamaño de fuente más grande */
  font-weight: bold; /* Negrita */
  text-transform: uppercase; /* Convertir el texto a mayúsculas */
  margin-top: 10px; /* Espacio superior */
  text-align: center; /* Centrado */
}

.suggestion-message {
  color: #333;
  font-size: 0.9rem;
  margin-top: 5px;
}

.file-error-message {
  color: red; /* Texto en rojo */
  font-size: 1.5rem; /* Tamaño de fuente grande */
  font-weight: bold; /* Negrita */
  text-transform: uppercase; /* Convertir el texto a mayúsculas */
  text-align: center; /* Centrar el texto */
  margin-top: 20px; /* Espacio superior */
}

#output p {
  color: #212529;
  font-size: 1.2rem; /* Tamaño de fuente más grande */
  font-weight: bold; /* Texto en negrita */
  text-transform: uppercase; /* Texto en mayúsculas */
  text-align: center; /* Centrar el texto */
  margin-top: 20px; /* Espaciado superior */
}

.selected-row {
  /* tu verde corporativo (ajústalo al que uses) */
  background-color: #A0E7A0 !important;
}

.styled-header {
  background-color: #797979; /* Fondo azul */
  color: white; /* Texto blanco */
  padding: 15px; /* Espaciado interno */
  text-align: center; /* Centrar el texto */
  font-size: 1.5rem; /* Tamaño del texto */
  font-weight: bold; /* Negrita */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
  margin-bottom: 20px; /* Espaciado inferior */
}

.global-header {
  background-color: white; /* Fondo blanco */
  color: rgb(61, 61, 61); /* Texto blanco */
  padding: 20px; /* Espaciado interno */
  text-align: center; /* Centrar el texto */
  border: 2px solid #80cc33; /* Borde estilizado (color azul) */
  font-size: 2rem; /* Tamaño del texto */
  font-weight: bold; /* Negrita */
  text-transform: uppercase; /* Texto en mayúsculas */
  border-radius: 12px; /* Bordes redondeados */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Sombra */
  margin-bottom: 30px; /* Espaciado inferior */
  letter-spacing: 1px; /* Espaciado entre letras */
  transition: all 0.3s ease; /* Transiciones suaves */
}

/* Contenedor del texto */
.text-container {
  display: flex;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente si el contenedor tiene más altura */
  margin: 20px auto; /* Espaciado superior e inferior */
  max-width: 1200px; /* Ancho máximo */
  text-align: center; /* Centrar el texto dentro del contenedor */
}

/* Estilos del párrafo */
.styled-paragraph {
  background-color: #f8f9fa; /* Fondo claro */
  color: #212529; /* Texto oscuro */
  padding: 15px; /* Espaciado interno */
  border: 0px solid #dee2e6; /* Borde gris claro */
  border-radius: 0px; /* Bordes redondeados */
  font-size: 1.3rem; /* Tamaño del texto */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

/* Estilo para el botón encabezado */
.styled-header-btn {
  background-color: #80cc33; /* Fondo azul */
  color: white; /* Texto blanco */
  padding: 15px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
  border: none; /* Sin borde */
  cursor: pointer; /* Cambiar el cursor al pasar el mouse */
  width: 100%; /* Ocupa todo el ancho */
  max-width: 800px; /* Ancho máximo */
  margin: 20px auto; /* Centrar horizontalmente */
  transition: background-color 0.3s, transform 0.2s; /* Transiciones suaves */
}

/* Efecto al pasar el mouse */
.styled-header-btn:hover {
  background-color: #80cc33; /* Fondo azul oscuro */
  transform: scale(1.02); /* Efecto de zoom ligero */
}

/* Estilo compartido entre el encabezado principal y el botón */
.shared-header-style {
  background-color: #717171; /* Fondo azul */
  color: white; /* Texto blanco */
  padding: 15px;
  text-align: center;
  font-size: 1.5rem; /* Tamaño del texto */
  font-weight: bold; /* Negrita */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
  border: none; /* Sin borde */
  cursor: pointer; /* Cambiar el cursor al pasar el mouse */
  width: 100%; /* Ocupa todo el ancho */
  max-width: 100%; /* Limitar el ancho máximo */
  margin: 20px auto; /* Centrar horizontalmente */
  transition: background-color 0.3s, transform 0.2s; /* Transiciones suaves */
}

/* Efecto al pasar el mouse en el botón */
.styled-header-btn:hover {
  background-color: #414141; /* Fondo azul oscuro */
  transform: scale(1.02); /* Efecto de zoom ligero */
}

/* Eliminar márgenes del encabezado */
#header {
  margin: 0;
  padding: 0;
}

/* Posicionar el contenedor principal justo debajo del encabezado */
#mainContainer {
  margin-top: 50px; /* Espacio de 50px debajo del encabezado */
  padding: 0 20px; /* Espaciado interno opcional */
  box-sizing: border-box; /* Incluir padding en el ancho */
}

/* Estilo del botón con borde estilizado */
.styled-outline-btn {
  background-color: white; /* Fondo blanco */
  color: #333; /* Texto oscuro */
  padding: 15px 20px; /* Espaciado interno */
  font-size: 1.2rem; /* Tamaño del texto */
  font-weight: bold; /* Texto en negrita */
  border: 2px solid #80cc33; /* Borde estilizado (color azul) */
  border-radius: 12px; /* Bordes redondeados */
  text-align: center; /* Centrar texto */
  width: 100%; /* Ocupa todo el ancho */
  max-width: 100%; /* Limitar el ancho máximo */
  margin: 20px auto; /* Centrar horizontalmente */
  cursor: pointer; /* Cursor de mano al pasar */
  transition: all 0.3s ease; /* Transiciones suaves */
  display: flex; /* Alinear contenido */
  align-items: center; /* Centrar icono y texto verticalmente */
  justify-content: center; /* Centrar contenido horizontalmente */
}

/* Hover (efecto al pasar el mouse) */
.styled-outline-btn:hover {
  background-color: #80cc33; /* Fondo azul claro */
  color: white; /* Texto blanco */
  transform: scale(1.05); /* Efecto de zoom */
}

/* Icono dentro del botón */
.styled-outline-btn i {
  margin-left: 10px; /* Espacio entre el texto y el icono */
  color: #80cc33; /* Mismo color que el borde */
  transition: color 0.3s ease; /* Transición suave */
}

/* Hover en el icono */
.styled-outline-btn:hover i {
  color: white; /* Cambiar el color del icono al pasar el mouse */
}

/* Estilo del botón con borde estilizado */
.styled-outline-btn-guardar {
  background-color: white; /* Fondo blanco */
  color: #80cc33; /* Texto oscuro */
  padding: 15px 20px; /* Espaciado interno */
  font-size: 1.2rem; /* Tamaño del texto */
  font-weight: bold; /* Texto en negrita */
  border: 2px solid #80cc33; /* Borde estilizado (color azul) */
  border-radius: 12px; /* Bordes redondeados */
  text-align: center; /* Centrar texto */
  width: 100%; /* Ocupa todo el ancho */
  max-width: 100%; /* Limitar el ancho máximo */
  margin: 20px auto; /* Centrar horizontalmente */
  cursor: pointer; /* Cursor de mano al pasar */
  transition: all 0.3s ease; /* Transiciones suaves */
  display: flex; /* Alinear contenido */
  align-items: center; /* Centrar icono y texto verticalmente */
  justify-content: center; /* Centrar contenido horizontalmente */
}

/* Hover (efecto al pasar el mouse) */
.styled-outline-btn-guardar:hover {
  background-color: #80cc33; /* Fondo azul claro */
  color: white; /* Texto blanco */
  transform: scale(1.05); /* Efecto de zoom */
}

/* Icono dentro del botón */
.styled-outline-btn-guardar i {
  margin-left: 10px; /* Espacio entre el texto y el icono */
  color: #80cc33; /* Mismo color que el borde */
  transition: color 0.3s ease; /* Transición suave */
}

/* Hover en el icono */
.styled-outline-btn-guardar:hover i {
  color: white; /* Cambiar el color del icono al pasar el mouse */
}

.modal-content {
  border-radius: 12px;
  padding: 20px;
}
.modal-footer {
  justify-content: space-between;
}

/* Estilo general del contenido del asistente */
.shepherd-theme-arrows .shepherd-content {
  font-size: 1.4rem; /* Tamaño aumentado para el texto del asistente */
  line-height: 1.8; /* Mayor altura de línea */
  color: #333; /* Color oscuro para texto */
  padding: 20px; /* Espaciado interno */
  border-radius: 12px; /* Bordes redondeados */
  background-color: #f8f9fa; /* Fondo claro */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra */
  max-width: 500px; /* Ancho máximo */
}

/* Botón "X" para cerrar */
.assistant-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #80cc33; /* Fondo verde */
  border: none;
  font-size: 20px; /* Tamaño adecuado */
  font-weight: bold;
  color: #ffffff; /* Color visible */
  cursor: pointer;
  transition: color 0.3s ease;
}

.assistant-close:hover {
  background-color: #4e4e4e; /* Fondo verde */
  color: #ffffff; /* Cambiar a rojo al pasar el mouse */
}

/* Contenedor del checkbox y texto */
.assistant-checkbox {
  display: flex;
  align-items: center; /* Alinear verticalmente */
  gap: 8px; /* Espaciado entre el checkbox y el texto */
  margin-top: 15px; /* Separación del texto superior */
}

/* Checkbox ajustado */
.assistant-checkbox input[type="checkbox"] {
  width: 18px; /* Tamaño del checkbox */
  height: 18px;
  accent-color: #80cc33; /* Color verde */
  margin: 0; /* Sin márgenes adicionales */
}

/* Texto del checkbox */
.assistant-checkbox label {
  font-size: 1rem; /* Tamaño del texto del checkbox */
  color: #333;
  margin: 0; /* Sin márgenes adicionales */
  line-height: 1.2; /* Asegura buena alineación */
}

/* Estilo del botón "Abrir Asistente" */
.custom-assistant-btn {
  background-color: #80cc33 !important; /* Fondo verde */
  color: white; /* Texto blanco */
  font-size: 1rem; /* Tamaño del texto */
  padding: 8px 15px; /* Espaciado interno */
  border: none; /* Sin borde */
  border-radius: 8px; /* Bordes redondeados */
  cursor: pointer; /* Cambiar a cursor de mano al pasar */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Transición suave */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
  position: relative;
  left: 250px; /* Mueve el botón a la derecha */
  transition: left 0.3s ease; /* Transición suave */
}

/* Efecto hover (al pasar el mouse) */
.custom-assistant-btn:hover {
  background-color: #80cc33 !important; /* Verde más oscuro */
  transform: scale(1.05); /* Efecto de zoom ligero */
}

/* Efecto de clic */
.custom-assistant-btn:active {
  background-color: #3a3a3a !important; /* Verde aún más oscuro */
  transform: scale(0.95); /* Reducir ligeramente al hacer clic */
}

/* Estilo inicial del contenedor del asistente */
.shepherd-element {
  opacity: 0; /* Totalmente transparente al inicio */
  transition: opacity 2s ease; /* Transición de 1 segundo para opacidad */
}

/* Cuando el asistente está visible */
.shepherd-element.shepherd-enabled {
  opacity: 1; /* Totalmente visible */
}

/* Estilo base para la flecha del asistente */

/* Resaltar el botón */
/* Clase para resaltar el input de subida */
.highlight {
  animation: pulse 1s infinite; /* Animación de pulso */
  box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.795); /* Brillo alrededor del input */
  border: 2px solid #80cc33; /* Borde azul */
  border-radius: 8px; /* Bordes redondeados */
  outline: none; /* Sin contorno adicional */
}

/* Animación de pulso */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Estilo del botón "Abrir Asistente" */
.custom-polizas-btn {
  background-color: #80cc33 !important; /* Fondo verde */
  color: white; /* Texto blanco */
  font-size: 1rem; /* Tamaño del texto */
  padding: 8px 15px; /* Espaciado interno */
  border: none; /* Sin borde */
  border-radius: 8px; /* Bordes redondeados */
  cursor: pointer; /* Cambiar a cursor de mano al pasar */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Transición suave */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
}

/* Efecto hover (al pasar el mouse) */
.custom-polizas-btn:hover {
  background-color: #80cc33 !important; /* Verde más oscuro */
  transform: scale(1.05); /* Efecto de zoom ligero */
}

/* Efecto de clic */
.custom-polizas-btn:active {
  background-color: #3a3a3a !important; /* Verde aún más oscuro */
  transform: scale(0.95); /* Reducir ligeramente al hacer clic */
}

.shepherd-button {
  background-color: #80cc33 !important; /* Fondo verde */
  color: white; /* Texto blanco */
  font-size: 1rem; /* Tamaño del texto */
  padding: 8px 15px; /* Espaciado interno */
  border: none; /* Sin borde */
  border-radius: 8px; /* Bordes redondeados */
  cursor: pointer; /* Cambiar a cursor de mano al pasar */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Transición suave */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
}

button#start-assistant {
  margin-top: 10px;
  padding: 10px;
  background-color: #80cc33;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button#start-assistant:hover {
  background-color: #80cc33;
}

.modal {
  display: nonde !important; /* 🔹 Permite centrar con flexbox */
  align-items: center !important; /* 🔹 Centra verticalmente */
  justify-content: center !important; /* 🔹 Centra horizontalmente */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1050;
}

.modal.active {
  display: flex;
}

/* 🔹 Estilos del contenido del modal */
.modal-dialog {
  max-width: 500px; /* 🔹 Limita el ancho del modal */
  margin: auto; /* 🔹 Asegura que esté centrado */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh; /* Ocupa toda la altura de la pantalla */
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 80%;
  max-width: 500px;
  z-index: 1070 !important; /* 🔹 Contenido aún más arriba */
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal-content h4 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.modal-content button {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #80cc33;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.modal-content button:hover {
  background-color: #80cc33;
}

.assistant-banner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #f8f9fa;
  color: #333;
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  font-size: 14px;
  line-height: 1.5;
}

.assistant-banner p {
  margin: 0;
}

.dismiss-banner {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 5px 10px;
  margin-left: 10px;
  border-radius: 4px;
  cursor: pointer;
}

.dismiss-banner:hover {
  background-color: #c82333;
}

.toggle-button {
  display: block;
  width: 100%;
  padding: 10px 15px;
  margin: 10px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background-color: #f8f9fa;
  border: 2px solid #333;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.toggle-button:hover {
  background-color: #e2e6ea;
}

#newComparativeForm {
  display: none; /* Ocultar inicialmente */
  opacity: 0; /* Completamente transparente por defecto */
  transition: opacity 0.5s ease; /* Suavizar la opacidad */
}

#guaranteesTable {
  width: 100%; /* Asegurar que ocupe todo el ancho disponible */
}

#guaranteesTable .row-checkbox {
  transform: scale(1.2); /* Escala adicional para ajustar el tamaño */
}

#guaranteesTable td.text-center input[type="checkbox"] {
  transform: scale(1.2) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

#guaranteesTable td:first-child, /* Aplica a la celda de la primera columna */
  #guaranteesTable th:first-child {
  /* Aplica al encabezado de la primera columna */
  width: 10px !important; /* Ancho fijo de la columna */
  text-align: center; /* Centrar el contenido dentro de la celda */
}

#guaranteesTable th:nth-child(1),
#guaranteesTable td:nth-child(1) {
  width: 25%; /* Columna de Garantía */
}

#guaranteesTable th:nth-child(2),
#guaranteesTable td:nth-child(2) {
  width: 35%; /* Columna de la primera aseguradora */
}

#guaranteesTable th:nth-child(3),
#guaranteesTable td:nth-child(3) {
  width: 40%; /* Columna de la segunda aseguradora */
}

/* Aplica el encabezado fijo solo a #guaranteesTable */
#guaranteesTable thead {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1020;
  display: table-header-group !important;
  height: auto !important;
}

#guaranteesTable thead th div.dataTables_sizing {
  display: none !important; /* 🔥 Oculta el div que DataTables usa para forzar altura */
}

/* Corrige la alineación del encabezado */
#guaranteesTable thead th {
  padding: 10px;

  text-align: left;
  border-bottom: 2px solid #ddd;
}

/* Evita que las filas sean más anchas que el encabezado */
#guaranteesTable tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
}

#generalDataTable,
#riskCharacteristicsTable {
  table-layout: fixed; /* Forzar un diseño fijo */
  width: 100%; /* Asegurar que las tablas ocupen todo el ancho */
}

#generalDataTable th:first-child,
#generalDataTable td:first-child,
#riskCharacteristicsTable th:first-child,
#riskCharacteristicsTable td:first-child {
  width: 20%; /* Ancho fijo para la primera columna */
  text-align: left; /* Alinear texto a la izquierda */
}

#generalDataTable th,
#generalDataTable td,
#riskCharacteristicsTable th,
#riskCharacteristicsTable td {
  text-align: left; /* Alinear texto a la izquierda por defecto */
}

#capitalsTable .row-checkbox {
  width: 15px; /* Ancho del checkbox */
  height: 15px; /* Altura del checkbox */
  transform: scale(0.8); /* Escala adicional para ajustar el tamaño */
  margin: 0 auto; /* Centra el checkbox dentro de la celda */
}

#capitalsTable #selectAllCapitalsCheckbox {
  width: 15px !important;
  height: 15px !important;
  transform: scale(0.8) !important;
  margin: 0 auto !important;
}

#capitalsTable td:first-child, /* Aplica a la celda de la primera columna */
  #capitalsTable th:first-child {
  /* Aplica al encabezado de la primera columna */
  width: 10px !important; /* Ancho fijo de la columna */
  text-align: center; /* Centrar el contenido dentro de la celda */
}

.analysis-header {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.analysis-header h2 {
  margin: 0 0 10px;
  color: #333;
  font-weight: bold;
}

.analysis-header p {
  margin: 0 0 5px;
  color: #555;
}

/* Color de la fila seleccionada */
table.dataTable tbody tr.selected {
  background-color: #aaccfc !important; /* Verde claro cuando está seleccionada */
  color: #6c757d !important; /* Gris oscuro */
  border: none !important; /* Elimina cualquier borde */
  outline: none !important; /* Evita contornos adicionales */
}

/* Color al pasar el ratón sobre la fila seleccionada */
table.dataTable tbody tr.selected:hover {
  background-color: #c4ddff !important; /* Azul claro al hacer hover */
  color: #6c757d !important; /* Gris oscuro */
}

/* Si DataTables usa box-shadow para la selección, reemplázalo */
table.dataTable tbody tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(196, 221, 255, 0.9) !important; /* Azul claro */
}

/* Ajuste para todas las filas al pasar el ratón (si se necesita) */
table.dataTable tbody tr:hover {
  background-color: #c4ddff !important; /* Azul claro */
}
:root {
  --dt-row-selected: 196, 221, 255; /* Verde claro cuando está seleccionada */
  --dt-row-selected-hover: 196, 221, 255; /* Azul claro en hover */

  /* Debug toggle / topbar */
  --debug-switch-h: 1.6rem;
  --debug-switch-w: 3rem;
  --debug-accent:  #0d6efd;
  --topbar-gap:    12px;
}

/* Opcional: estilo de las celdas dentro de la fila seleccionada */

.description-textarea {
  background-color: transparent !important; /* Fondo transparente */
  border: none; /* Eliminar el borde */
  resize: none; /* Evitar que el usuario cambie el tamaño */
  box-shadow: none; /* Eliminar cualquier sombra */
}

/* ======== Estilos específicos para el modal de edición de pólizas ======== */
.custom-modalpolizas {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1050;
}

/* Contenedor principal del modal */
.custom-modalpolizas-dialog {
  max-width: 900px;
  width: 80%;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  padding: 20px;
  position: relative;
}

/* Encabezado del modal */
.custom-modalpolizas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 10px 20px;
}

.custom-modalpolizas-header h5 {
  margin: 0;
}

/* Cuerpo del modal */
.custom-modalpolizas-body {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

/* Footer con los botones */
.custom-modalpolizas-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid #ddd;
}

/* Botón de cierre */
.custom-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

/* Fondo del modal */
.custom-modalpolizas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1049;
}

/* Editor de texto enriquecido */
.text-editor {
  border: 1px solid #ccc;
  min-height: 100px;
  padding: 10px;
  overflow-y: auto;
  background-color: #fff;
  text-align: left;
}

/* Botones de edición */
.text-editor-toolbar {
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid #ccc;
  background: #f8f9fa;
  border-radius: 5px;
  margin-bottom: 5px;
}

.text-editor-toolbar button {
  border: none;
  background: #80cc33;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 14px;
}

.text-editor-toolbar button:hover {
  background: #7a7a7a;
  border-radius: 3px;
}

/* Botón Guardar en verde */
.btn-primary.save-edit-guarantee {
  background-color: #80cc33;
  border: none;
}

.btn-primary.save-edit-guarantee:hover {
  background-color: #419c43;
}

/* Establecer el ancho fijo de la columna Acciones en Datos Generales y Características del Riesgo */
/* Ajustar el ancho de la columna Acciones SOLO en las tablas específicas */
#generalDataTable th:last-child,
#generalDataTable td:last-child,
#riskCharacteristicsTable th:last-child,
#riskCharacteristicsTable td:last-child {
  width: 75px !important;
  min-width: 75px !important;
  max-width: 75px !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.is-invalid {
  border: 2px solid red !important;
  background-color: #ffe6e6;
}

.styled-outline-btn-export {
  border: 2px solid #0053be;
  color: #0053be;
  background-color: transparent;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  text-transform: uppercase;
  font-weight: bold;
  width: 100%;
  margin: 10px 0;
}

.styled-outline-btn-export:hover {
  background-color: #0053be;
  color: white;
}

.kpi-box {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  width: 90%;
  max-width: 250px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px; /* Extra espaciado debajo de cada KPI */
}

/* Espaciado entre el filtro y los KPIs */
.row.mb-5 {
  margin-bottom: 50px !important;
}

/* Espaciado entre KPIs y la tabla */
.container.mt-5 {
  margin-top: 50px !important;
}

.kpi-box h4 {
  font-size: 1.2em; /* Reducimos el tamaño del texto */
  font-weight: bold;
  margin-bottom: 5px;
}

.kpi-box p {
  font-size: 1.5em; /* Ajustamos el tamaño del número */
  font-weight: bold;
  color: #80cc33;
  margin: 0;
}

/* Asegurar que la fila no se divida */
.row.text-center {
  flex-wrap: nowrap;
}

/* Contenedor principal centrado */
.main-container {
  max-width: 800px;
  height: 300px;
  margin: 50px auto; /* Centrado en la pantalla */
  text-align: center; /* Centra los elementos internos */
  background: #f9f9f9; /* Color de fondo opcional */
  padding: 20px;
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

/* Botón similar al de "Abrir Asistente" */
.custom-button {
  background-color: #80cc33; /* Verde similar al de "Abrir Asistente" */
  color: white;
  padding: 15px 20px;
  font-size: 1.2rem;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  text-align: center;
  width: 100%;
  margin: 15px 0;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-button:hover {
  background-color: #419442; /* Verde más oscuro en hover */
  transform: scale(1.05);
}

.sidebar {
  width: 250px;
  background-color: #f8f9fa !important; /* 🔹 Gris muy claro */
  border-right: 1px solid #dadada; /* 🔹 Borde gris oscuro de 1px */
  transition: background-color 0.3s ease, border-right 0.3s ease;
  height: calc(2000vh - 50px); /* Ajusta la altura restando el contenedor del usuario */
  position: fixed;
  top: 0px; /* Altura del contenedor del usuario */
  left: 0;
  z-index: 100;
  overflow: hidden;
}

/* Estilo base para los enlaces del submenú */
.sidebar .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px; /* Espaciado entre icono y texto */
}

/* Cuando la barra lateral está contraída */
.sidebar.collapsed .dropdown-menu .dropdown-item span {
  display: none; /* Oculta el texto del submenú */
}

.sidebar.collapsed .dropdown-menu .dropdown-item i {
  margin-right: 0; /* Ajusta la posición del ícono */
  font-size: 1.2em; /* Asegura que el ícono se vea bien */
}

/* Opcional: Estilo para el ícono del submenú */
.sidebar .dropdown-menu .dropdown-item i {
  color: #ffffff; /* Color del ícono */
  transition: all 0.3s ease; /* Transición suave para hover */
}

/* Hover en el submenú */
.sidebar .dropdown-menu .dropdown-item:hover {
  background-color: #2b3e64; /* Fondo en hover */
  color: #ffffff;
}
.sidebar.collapsed {
  width: 80px; /* Ancho reducido */
}

.sidebar.collapsed + .main-content {
  margin-left: 80px; /* Margen reducido */
  width: calc(100% - 80px);
}

/* Estilo base para los botones del menú */
.sidebar .nav-link {
  color: #686868 !important; /* 🔹 Gris muy oscuro */
  background-color: transparent; /* Fondo transparente por defecto */
  padding: 10px 15px;
  margin-bottom: 10px;
  border-radius: 8px; /* Bordes redondeados */
  transition: all 0.3s ease; /* Suaviza los cambios */
  font-size: 14px;
  gap: 10px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  border-left: none; /* Sin borde para los no activos */
}

/* Iconos dentro del menú */
process_pdfs.py.sidebar .nav-link i {
  margin-right: 10px; /* Espaciado entre el icono y el texto */
  font-size: 12px !important; /* 🔹 Reduce el tamaño del texto */

  transition: transform 0.3s ease, color 0.3s ease; /* Suaviza transformaciones y color */
}

/* Efecto hover moderno */
.sidebar .nav-link:hover {
  background-color: #ffffff !important; /* Fondo resaltado */
  color: #414141 !important; /* Cambia el color del texto */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Sombra moderna */
  transform: translateY(-2px); /* Efecto de flotación */
}

/* 🔹 Cuando el enlace del menú está activo (seleccionado) */
.sidebar .nav-link.active {
  background-color: #e2e3e5 !important; /* 🔹 Gris claro */
  color: #000 !important; /* Texto en negro */
  border-radius: 8px; /* Bordes redondeados para mejor apariencia */
}

/* 🔹 Efecto hover para mejor UX */
.sidebar .nav-link:hover {
  background-color: #d6d8db !important; /* Un poco más oscuro que el gris claro */
  color: #000 !important;
}

.nav-item.dropdown:hover .dropdown-menu {
  display: block; /* Muestra el submenú al hacer hover */
  margin-top: 0; /* Alinea el submenú con el botón principal */
}

/* Estilo del submenú */
.sidebar .dropdown-menu {
  background-color: #80cc33; /* Mismo color que el menú principal */
  border: none; /* Sin bordes */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

/* Ocultar texto en la barra contraída */
.sidebar.collapsed .nav-link span {
  display: none; /* Oculta el texto */
}
/* Estilo de los enlaces del submenú */
.sidebar .dropdown-menu .dropdown-item {
  color: #ffffff; /* Texto blanco */
  font-size: 16px; /* Tamaño del texto */
  padding: 10px 15px; /* Espaciado */
  border-radius: 8px; /* Bordes redondeados */
  transition: all 0.3s ease; /* Transición suave */
}

/* Hover en el submenú */
.sidebar .dropdown-menu .dropdown-item:hover {
  background-color: #0031c4; /* Fondo azul claro al pasar el ratón */
  color: #ffffff; /* Texto blanco */
  transform: translateY(-2px); /* Efecto de flotación */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Sombra destacada */
}

/* Eliminar padding entre elementos del submenú */
.sidebar .dropdown-menu .dropdown-item:not(:last-child) {
  margin-bottom: 5px; /* Separación entre elementos */
}

.sidebar .nav-link span {
  display: inline-block;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out;
  overflow: hidden;
}

.sidebar.collapsed .nav-link span {
  opacity: 0; /* Ocultar el texto */
  width: 0; /* Reducir el espacio ocupado por el texto */
  display: none; /* Ocultar la palabra SUITECO */
}

.sidebar.collapsed .nav-link i {
  margin-right: 0; /* Ajustar la posición del ícono */
}

.sidebar .navbar-brand span {
  transition: opacity 0.2s ease-in-out;
}

.sidebar.collapsed .navbar-brand span {
  display: none !important; /* Asegura que el texto se oculte */
}

.sidebar.collapsed + .content {
  margin-left: 80px; /* Ancho del menú contraído */
  width: calc(100% - 80px);
}

.coverize-logo {
  width: 150px; /* Tamaño normal */
  height: auto;
  transition: width 0.3s ease, opacity 0.3s ease;
}

/* Cuando el menú está colapsado, cambia el tamaño */
.sidebar.collapsed .coverize-logo {
  width: 60px; /* Tamaño reducido */
}
/* Asegurar que el logo esté centrado en el menú */
.sidebar .navbar-brand {
  width: 100%; /* Ocupar todo el ancho del menú */
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  padding: 10px 0; /* Espaciado arriba y abajo */
}

#toggleSidebarButton {
  color: rgb(0, 5, 48) !important; /* 🔹 Ícono en blanco */
  border: none; /* Elimina cualquier borde */
  padding: 8px 12px;
  border-radius: 5px; /* Esquinas redondeadas */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* 🔹 Efecto hover para el botón */
#toggleSidebarButton:hover {
  color: rgb(71, 71, 71); /* 🔹 Ícono en blanco */
  transform: scale(1.1); /* Ligero efecto de agrandamiento */
}

/* 🔹 Si el menú está colapsado, cambiar color */
.sidebar.collapsed #toggleSidebarButton {
  color: #001366; /* Un tono más oscuro cuando el menú está colapsado */
}

/* Solo afecta a los modales específicos como errorComparativeModal */
#errorComparativeModal .modal-dialog,
#customModal .modal-dialog,
#confirmModal .modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 100px); /* Ajuste para evitar bloquear la pantalla */
}

.button-group {
  display: inline-flex; /* 🔹 Mantiene los botones en una sola línea sin expandirse */
  align-items: center;
  gap: 10px; /* 🔹 Espacio entre botones */
  margin-top: 10px;
  justify-content: flex-start; /* 🔹 Alinea los botones a la izquierda */
}

/* 🔹 Ajuste del ancho de los botones */
.styled-outline-btn {
  padding: 8px 12px; /* 🔹 Padding más reducido */
  font-size: 0.9rem; /* 🔹 Tamaño de fuente más compacto */
  font-weight: bold;
  border: 2px solid #80cc33;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: white;
  color: #80cc33;
  white-space: nowrap; /* 🔹 Evita saltos de línea en el texto */
  width: auto; /* 🔹 Permite que el botón solo ocupe el espacio del texto */
  min-width: fit-content; /* 🔹 Evita expansión innecesaria */
}

/* 🔹 Ocultar los botones sin perder su espacio */
#exportToWord,
#saveToDB {
  visibility: hidden; /* 🔹 Oculta pero mantiene el espacio */
  width: 0; /* 🔹 Reduce su tamaño a 0 */
  padding: 0;
  margin: 0;
  border: none;
}

#exportToWord {
  background-color: #ffffff; /* azul personalizado */
  color: #3399cc;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.3s ease;
}

#exportToWord:hover {
  background-color: #2a89b5;
  color: #ffffff;
}

#exportToWord i {
  color: #3399cc;
  transition: color 0.3s ease;
}

#exportToWord:hover i {
  color: #ffffff;
}

#saveToDB {
  background-color: #ffffff; /* azul personalizado */
  color: #0f8a38;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.3s ease;
}

#saveToDB:hover {
  background-color: #0f8a38;
  color: #ffffff;
}

#btnBucearGarantias {
  background-color: #ffffff; /* azul personalizado */
  color: #3399cc;
  border: 2px solid #2a89b5;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.3s ease;
}

#btnBucearGarantias:hover {
  background-color: #2a89b5;
  color: #ffffff;
}

#btnBucearGarantias i {
  color: #3399cc;
}

#btnBucearGarantias:hover i {
  color: #ffffff;
}

/* 🔹 Cuando se complete un análisis, los botones reaparecen */
.analysis-done #exportToWord,
.analysis-done #saveToDB {
  visibility: visible;
  width: auto;
  padding: 8px 12px;
  border: 2px solid;
}

/* 🔹 Efecto hover */
.styled-outline-btn:hover {
  background-color: #80cc33;
  color: white;
  transform: scale(1.05);
}

/* 🔹 Botón "Exportar a Word" - Azul Claro */
.export-btn {
  border-color: #0f8a38;
  color: #0f8a38;
}

.export-btn:hover {
  background-color: #4a90e2;
  color: white;
}

/* 🔹 Botón "Guardar Comparativa" - Verde */
.save-btn {
  border-color: #80cc33;
  color: #80cc33;
}

.save-btn:hover {
  background-color: #80cc33;
  color: white;
}

/* 🔹 Estilos responsivos: En pantallas pequeñas, mantener la estructura */
@media (max-width: 768px) {
  .button-group {
    flex-direction: column; /* 🔹 En móviles los botones estarán en columna */
    align-items: center;
  }
}

#generateComparative {
  display: inline-block;
  flex-shrink: 0; /* 🔹 Evita que cambie de tamaño */
  text-align: left; /* 🔹 Asegura que el texto no se centre */
}

.sidebar .navbar-brand {
  margin-bottom: 30px; /* 🔹 Aumenta la separación entre el logo y las opciones */
  padding-top: 10px; /* 🔹 Ajuste adicional si es necesario */
}

/* Ajustar el ancho del modal de selección de documentos */
#insurerModal .modal-dialog {
  max-width: 800px !important; /* Ancho fijo del modal */
  width: 100%; /* Permitir que se ajuste si la pantalla es más pequeña */
}

/* 🔹 Cuando se complete un análisis, los botones reaparecen */
.analysis-done #exportToWord,
.analysis-done #saveToDB {
  display: inline-block; /* 🔹 Los muestra */
  padding: 8px 12px;
  border: 2px solid;
  margin: 5px;
}

/* 🔹 Mejora el estilo del dropdown y la barra de búsqueda */
.tom-select .ts-control {
  border-radius: 6px;
  padding: 10px;
  border: 1px solid #ced4da;
  background: #fff;
  font-size: 14px;
}

/* 🔹 Estilo del placeholder */
.tom-select .ts-control input {
  color: #6c757d;
  font-size: 14px;
}

/* 🔹 Mejorar la visibilidad del dropdown */
.ts-dropdown {
  border-radius: 6px;
  border: 1px solid #ced4da;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}

/* 🔹 Estilo de los elementos de la lista */
.ts-dropdown .option {
  padding: 10px;
  border-bottom: 1px solid #f1f1f1;
  font-size: 14px;
  cursor: pointer;
}

/* 🔹 Al pasar el mouse por un elemento */
.ts-dropdown .option:hover {
  background: #f8f9fa;
  color: #80cc33;
}

/* 🔹 Mejorar el estilo del elemento seleccionado */
.ts-dropdown .selected {
  font-weight: bold;
  background: #e9ecef;
  color: #80cc33;
}

/* 🔹 Ajustar la caja de búsqueda */
.ts-dropdown .dropdown-input {
  padding: 8px;
  font-size: 14px;
  border-bottom: 1px solid #e0e0e0;
}

/* 🔹 Mejorar la visibilidad cuando el select está enfocado */
.tom-select .ts-control.focus {
  border-color: #80cc33;
  box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.3);
}

input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #444; /* Cambia el color, si quieres, en navegadores modernos */
}
#modalGarantiaComparativa {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  /* Evita que se pueda scrollear el body */
  overflow: hidden; /* <-- Esto hace que el body no se mueva */
}
/* REGLAS ESPECÍFICAS PARA #modalGarantiaComparativa */
#modalGarantiaComparativa .modal-dialog {
  margin: auto; /* Horizontal (Bootstrap) */
  top: 50%;
  transform: translateY(-50%);
  position: relative;
  /* ... */
}

.dt-wrap {
  white-space: normal !important;
  word-wrap: break-word;
  /* Opcional: text-align: left; si hiciera falta */
}

#tablaComparativaGarantiasAdicionales {
  width: 100%;
  table-layout: fixed; /* Fija el ancho de la tabla para que las columnas respeten los porcentajes */
}

#tablaComparativaGarantiasAdicionales th:first-child,
#tablaComparativaGarantiasAdicionales td:first-child {
  width: 20%; /* La primera columna ocupa el 20% */
}

#tablaComparativaGarantiasAdicionales th:not(:first-child),
#tablaComparativaGarantiasAdicionales td:not(:first-child) {
  width: auto; /* El resto de columnas se distribuyen automáticamente */
  word-wrap: break-word;
  white-space: normal;
}

.toggle-table {
  color: #333;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  background: #f1f1f1;
  padding: 12px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.6s ease-in-out, color 0.6s ease-in-out;
  border: 1px solid #ddd;
  margin-bottom: 5px;
}

.toggle-table:hover {
  background: #e9ecef;
  color: #80cc33;
}

.toggle-table i {
  transition: transform 0.6s ease-in-out;
  font-size: 1.2rem;
}

/* Cuando el bloque está expandido */
.toggle-table.expanded i {
  transform: rotate(180deg);
}

/* 🔹 Asegura que los bloques ocultos desaparezcan completamente */
.hidden {
  display: none !important;
}

/* Asegurar que el texto dentro de las celdas de DataTable esté siempre justificado */
table.dataTable tbody td {
  text-align: justify !important;
  vertical-align: top !important; /* Alinear el texto en la parte superior */
  white-space: normal !important; /* Permitir que el texto fluya correctamente */
}

.content {
  margin-left: 220px;
  padding: 20px;
}
/* 🔹 Contenedor principal del chatbot */
#chatbotContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 1250px;
  margin: auto;
  position: relative;
}

#chat-container {
  max-width: 1250px;
  width: 100%;
}

/* 🔹 Estilizar el título con avatar */
#chatbotContainer h2 {
  font-size: 1.8em;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
}

/* 🔹 Avatar del Chatbot */
#chatbotAvatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
  background: white;
  padding: 5px;
  border: 2px solid #80cc33;
}

/* Mensajes genéricos */
.message {
  max-width: 85%;
  padding: 10px 15px;
  border-radius: 10px;
  word-wrap: break-word;
}

/* Usuario (alineado derecha) */
.message.user {
  align-self: flex-end;
  background: #80cc33;
  color: white;
  border-radius: 12px 12px 0 12px;
}

/* Bot (alineado izquierda) */
.message.bot {
  align-self: flex-start;
  background: #e1e1e1;
  color: #333;
  border-left: 4px solid #595959;
  border-radius: 12px 12px 12px 0;
}

.message {
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px;
}
.user {
  background: #3498db;
  color: white;
}
.bot {
  background: #f0f0f0; /* Un gris claro */
  color: #333; /* Texto oscuro para mejor contraste */
  border-left: 4px solid #80cc33; /* Añade una línea azul a la izquierda */
  padding: 10px;
  border-radius: 8px;
}

#chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: white;
}

.chat-table th,
.chat-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
  white-space: normal; /* Permitir saltos de línea */
  word-wrap: break-word; /* Romper palabras largas */
  overflow-wrap: break-word; /* Evitar que el texto sobresalga */
}

.chat-table th {
  background-color: #80cc33;
  color: white;
  text-transform: uppercase;
}

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

/* 🔹 Diseño del mensaje de ChatGPT */
.message {
  padding: 10px;
  margin: 5px 0;
  border-radius: 8px;
}

.user {
  background: #80cc33;
  color: white;
  text-align: right;
}

/* 🔹 Preloader animado en el chat */
.typing-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.typing-dots span {
  width: 8px;
  height: 8px;
  margin: 0 2px;
  background-color: #575757;
  border-radius: 50%;
  animation: bounce 1.5s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) {
  animation-delay: 0s;
}
.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
    opacity: 0.3;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 🔹 Texto "Pensando..." animado */
.loading-text {
  font-size: 14px;
  margin-left: 8px;
  font-style: italic;
  color: #3d3d3d;
  opacity: 0.8;
  animation: fadeInOut 1.5s infinite;
}

@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* 🔹 Resaltar palabras coincidentes en amarillo */
.highlight {
  background-color: yellow;
  font-weight: bold;
  padding: 2px;
  border-radius: 3px;
}

/* 🔹 Ajustar ancho del campo de búsqueda en el chat */
#searchChat {
  width: 400px;
  max-width: 100%;
  margin-bottom: 10px; /* Añadir espacio debajo */
}

.avatar-clickable {
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.avatar-clickable:hover {
  transform: scale(1.1);
}

.save-question-btn {
  background-color: #0f8a38; /* verde Coverize */
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.save-question-btn:hover {
  background-color: #80cc33;
}

.export-word-btn {
  background-color: #0f8a38; /* azul suave */
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.export-word-btn:hover {
  background-color: #80cc33;
}

#conditionedTable td {
  text-align: justify !important;
}

.comparative-title {
  width: 100%;
  font-size: 1.6rem;
  font-weight: 600;
  color: #2c3e50;
  text-align: center; /* ✅ Centrar el contenido */
  text-transform: uppercase;
  padding: 14px 24px;
  margin: 0 auto 16px auto;
  border-radius: 12px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  font-family: "Poppins", sans-serif;

  display: inline-flex; /* ✅ inline-flex para centrar internamente */
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.comparative-title .emoji-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.icon-left {
  width: 22px;
  height: 22px;
  margin-right: 8px;
}

/* Asegurar que todas las celdas sean justificadas */
#competitiveTable td,
#competitiveTable th {
  text-align: left; /* Asegurar alineación inicial */
  vertical-align: top;
}

/* Forzar la justificación del texto dentro de un contenedor */
.justify-text div {
  text-align: justify;
  display: block;
  word-break: break-word; /* Evitar que el texto desborde */
  max-width: 100%;
  white-space: normal; /* Permitir saltos de línea */
}

/* 🔹 Modal exclusivo para el Asistente de Siniestros */

/* 🔹 Fondo oscuro al abrir el modal */
#modalAsistenteSiniestros::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

/* 🔹 Botón de cierre */
#modalAsistenteSiniestros .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;
  font-weight: bold;
}

/* 🔹 Contenedor de botones y preguntas */
#modalAsistenteSiniestros #pasosAsistente {
  margin-top: 20px;
}

/* 🔹 Botones de opciones */
#modalAsistenteSiniestros .opcion-btn {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 12px;
  border: none;
  border-radius: 5px;
  background-color: #002855;
  color: white;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

#modalAsistenteSiniestros .opcion-btn:hover {
  background-color: #004a99;
}

/* 🔹 Botón "Siguiente" */
#modalAsistenteSiniestros #btnSiguientePaso {
  background-color: #28a745;
  color: white;
  font-weight: bold;
  padding: 12px;
  width: 100%;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 15px;
}

#modalAsistenteSiniestros #btnSiguientePaso:hover {
  background-color: #218838;
}

/* Botón de envío */
#btnEnviarSiniestro {
  background-color: #28a745;
  color: white;
  font-weight: bold;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 15px;
}

#btnEnviarSiniestro:hover {
  background-color: #218838;
}

.bloque-preguntas {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.encabezado {
  background: #acb4bb;
  color: white;
  padding: 10px;
  font-weight: normal;
  cursor: pointer;
}

.lista-preguntas {
  background: #ecf0f1;
  padding: 10px;
}

.lista-preguntas.oculto {
  display: none;
}

.pregunta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  color: #272727;
  padding: 8px;
  margin: 5px 0;
  border-radius: 5px;
  border-color: #212529;
  width: 1000px;
}

.pregunta-btn {
  flex-grow: 1;
  background: none;
  color: #272727;
  text-align: left;
  border: none;
  cursor: pointer;
  padding: 0;
}

.pregunta-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.delete-btn {
  background: none;
  border: none;
  color: red;
  font-size: 18px;
  cursor: pointer;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 🔹 Campo de entrada del usuario en el chatbot */
#user-input {
  width: 100%; /* Ajusta el ancho según sea necesario */
  padding: 12px; /* Espaciado interno para mejor apariencia */
  font-size: 16px; /* Tamaño de letra más legible */
  border: 4px solid #000f42; /* Color y grosor del borde */
  border-radius: 5px; /* Bordes redondeados */
  outline: none; /* Evitar el contorno azul en algunos navegadores */
  background: #f9f9f9; /* Color de fondo más suave */
  color: #333; /* Color del texto */
}

/* 🔹 Cambio de color al enfocar el campo */
#user-input:focus {
  border-color: #0f8a38; /* Azul más oscuro al seleccionar */
  background: #ffffff; /* Fondo blanco para destacar */
}

/* Cambiar color del botón "Cargar Condicionado" */
button.btn.btn-primary.mt-3 {
  background-color: #0f8a38 !important; /* Verde */
  border-color: #0f8a38 !important; /* Borde más oscuro */
  color: white !important; /* Texto blanco */
}

.container-form {
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Fondo semitransparente */
  z-index: 9999;
}

.card {
  width: 1000px;
  padding: 20px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Contenedor general del Dashboard */
#dashboard-container {
  max-width: 1800px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background: #ffffff; /* Fondo blanco */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); /* Sombra más visible */
  border: 1px solid #ddd; /* Borde sutil */
}
/* Contenedor del DataTable */
#datatable-container {
  max-width: 1800px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Personalización del título */
h2.text-center {
  margin-bottom: 20px;
  font-weight: 600;
}

/* Personalización de los KPIs */
.kpi-box {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  width: 250px;
  text-align: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  #datatable-container {
    width: 95%; /* Reducir el ancho */
    padding: 10px;
  }
}

.quick-actions {
  margin-top: 20px;
}

.quick-actions button {
  font-size: 14px;
  padding: 10px 15px;
}

#landingContainer {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centrar verticalmente */
  align-items: center; /* Centrar horizontalmente */
  height: 55vh; /* Ocupar toda la altura de la pantalla */
  text-align: center;
  background-color: #ffffff;
}

.search-container {
  max-width: 1500px;
  display: flex;
  flex-direction: column;
  align-items: center; /* 🔥 Centrar horizontalmente */
  width: 100%;
}

.search-box {
  width: 1000px; /* 🔥 Ancho fijo */
  max-width: 90%; /* Mantener responsive */
  padding: 10px;
  font-size: 18px;
  border-radius: 8px;
  border: 1px solid #ccc;
  text-align: center; /* 🔥 Centrar placeholder */
}

.search-container button {
  margin-top: 10px; /* 🔥 Espacio entre el buscador y el botón */
  width: 150px; /* 🔥 Para que el botón tenga tamaño proporcional */
  text-align: center;
  background-color: #80cc33;
  border: none;
}

.search-container button:hover {
  background-color: #0f8a38;
}

.landing-header {
  display: block;         /* para respetar márgenes */
  width: 100%;            /* ocupa todo el ancho disponible */
  max-width: 100%;        /* no crecerá más allá de su padre */
  height: auto;           /* mantiene la proporción */
  object-fit: cover;      /* no se deforma */
  border-radius: 10px;    /* bordes redondeados */
  margin: 0 auto;         /* centra horizontalmente */
}

#chatbotModal1 .modal-dialog {
  max-width: 600px; /* 🔥 Aumenta el ancho del modal */
}

#chatbotModal1 .modal-body {
  text-align: center;
}

#chatbotModal1 .btn-option {
  width: 220px; /* 🔥 Botones más grandes */
  font-size: 16px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* 🔥 Espaciado entre icono y texto */
}

#chatbotModal1 .btn-container {
  display: flex;
  justify-content: space-around;
  gap: 10px;
}

#condicionadoModal .modal-dialog {
  max-width: 600px; /* 🔥 Aumenta el ancho del modal */
}

#condicionadoModal .modal-body {
  text-align: center;
}

#condicionadoModal .btn-option {
  width: 220px; /* 🔥 Botones más grandes */
  font-size: 16px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* 🔥 Espaciado entre icono y texto */
}

#condicionadoModal .btn-container {
  display: flex;
  justify-content: space-around;
  gap: 10px;
}

#analisisModal .modal-dialog {
  max-width: 600px; /* 🔥 Aumenta el ancho del modal */
}

#analisisModal .modal-body {
  text-align: center;
}

#analisisModal .btn-option {
  width: 220px; /* 🔥 Botones más grandes */
  font-size: 16px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* 🔥 Espaciado entre icono y texto */
}

#analisisModal .btn-container {
  display: flex;
  justify-content: space-around;
  gap: 10px;
}

/* 🔹 Estilos del Modal de Error con tonos azules */
#errorBuscaLanding .modal-header {
  background-color: #ffffff !important; /* 🔥 Azul oscuro */
  color: #000f42 !important;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#errorBuscaLanding .modal-body {
  background-color: #ffffff; /* 🔥 Azul claro */
  color: #003366;
}

#errorBuscaLanding .modal-footer {
  background-color: #ffffff;
}

#errorBuscaLanding .btn-primary {
  background-color: #80cc33; /* 🔥 Azul brillante */
  border-color: #80cc33;
}

#errorBuscaLanding .btn-primary:hover {
  background-color: #80cc33;
  border-color: #80cc33;
}

.score-bar {
  margin-bottom: 12px;
}

.score-label {
  font-weight: 600;
  margin-bottom: 4px;
}

.score-fill {
  background: linear-gradient(to right, #80cc33, #28a745);
  height: 12px;
  border-radius: 8px;
}

.score-container {
  background: #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  height: 12px;
}

.score-text {
  font-size: 13px;
  color: #333;
  margin-left: 8px;
}

.highlighted-header {
  background-color: #cceeff !important;
  font-weight: bold;
}

.benchmark-conclusions {
  background-color: #f9f9fc;
  border: 1px solid #dce0e6;
  border-radius: 12px;
  padding: 24px;
  font-size: 15px;
  line-height: 1.6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  color: #212529;
}

.benchmark-analysis p {
  margin: 0 0 12px;
  padding: 0;
  text-align: left;
  text-transform: none;
  font-weight: normal;
}

.benchmark-analysis strong {
  display: block;
  color: #1d3557;
  font-size: 16px;
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 6px;
  text-transform: none;
}

.benchmark-scores .score-bar {
  margin-bottom: 12px;
}

.benchmark-scores .score-label {
  font-weight: 600;
  margin-bottom: 4px;
  padding-left: 0;
}

.benchmark-scores .score-fill {
  background: linear-gradient(to right, #80cc33, #28a745);
  height: 12px;
  border-radius: 8px;
}

.benchmark-scores .score-container {
  background: #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  height: 12px;
}

.benchmark-scores .score-text {
  font-size: 13px;
  color: #333;
  margin-left: 8px;
}

.benchmark-analysis-text {
  text-align: left;
  color: #212529;
  font-size: 15px;
  line-height: 1.6;
}

.benchmark-analysis-text p {
  margin: 0 0 12px;
}

.benchmark-analysis-text strong {
  display: block;
  color: #1d3557;
  font-size: 16px;
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 6px;
  text-transform: none;
}

.benchmark-analysis-section {
  margin-bottom: 20px;
}

.benchmark-analysis-section strong {
  display: block;
  color: #1d3557;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.benchmark-analysis-text {
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  color: #212529;
}

.benchmark-global-title {
  color: #343a40; /* gris oscuro Bootstrap */
  font-size: 18px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 16px;
  text-align: left;
}

.badge.bg-primary {
  background-color: #80cb34;
  font-size: 0.75rem;
  font-weight: 500;
}

.modal-xl-custom {
  max-width: 1300px;
  width: 100%;
}

.highlighted-col {
  background-color: #cfe9f9 !important;
  border-left: 4px solid #80cb34 !important;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}

/* Botón Guardar en verde */
.btn-primary {
  background-color: #0a94eb;
  border: none;
}

.btn-primary:hover {
  background-color: #006db2;
  border: none;
}

.btn-primary:checked {
  background-color: #0f8a38;
  border: none;
}

#chatbot-summary {
  background-color: #f0ffe0; /* ejemplo: verde muy claro */
  color: #333; /* cambia también el color del texto si es necesario */
  border-color: #cde7b0; /* opcional: color del borde */
}

.custom-send-button {
  background-color: #80cc33 !important; /* tu verde personalizado */
  color: white;
}

.custom-send-button:hover {
  background-color: #0f8a38 !important; /* tu verde personalizado */
  color: white;
}

.declaration-section {
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #ffffff;
  color: #4e4e4e !important; /* negro normal */
  font-size: 14px;
  font-family: Arial, sans-serif;
  text-transform: none !important;
}

.declaration-section p {
  text-align: justify !important;
  font-weight: normal;
  color: #4e4e4e !important;
  text-transform: none !important;
}

.declaration-title {
  font-weight: bold;
  margin-bottom: 15px;
  color: black !important;
  text-transform: none !important;
}

.declaration-paragraph.error {
  color: black !important;
}

.btn-coverize {
  background-color: #80cc33;
  color: white;
  border: none;
  padding: 8px 16px;
  font-weight: 600;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.btn-coverize:hover {
  background-color: #6eb82d;
}

.chatbot-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 600;
  background-color: #f9f9f9;
  color: #2c3e50;
  padding: 14px 24px;
  margin: 0 0 24px 0;
  border-radius: 12px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  font-family: "Poppins", sans-serif;
  width: 100%;
  text-align: center;
  gap: 16px;
}

.chatbot-avatar {
  width: 64px; /* Aumentado de 50px a 64px */
  height: 64px;
  border-radius: 50%;
  background: white;
  padding: 5px;
  border: 2px solid #80cc33;
}

.modal-header-coverize {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.benchmarking-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.6rem;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  color: #2c3e50;
  font-family: "Poppins", sans-serif;
}

.emoji-icon {
  font-size: 1.6rem;
}

.modal-xl-coverize {
  max-width: 1000px;
}

#benchmarkingModal .modal-content {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.modal-title.benchmarking-title {
  display: flex;
  align-items: center;
  justify-content: center; /* ✅ Esto centra el contenido horizontalmente */
  gap: 10px;
  font-size: 1.6rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #2c3e50;
  width: 100%;
  text-align: center;
}

.modal-header-coverize {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.upload-comparative-title {
  display: flex;
  align-items: center;
  justify-content: center; /* ✅ Centrado horizontal */
  gap: 12px;
  font-size: 1.6rem;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  color: #2c3e50;
  font-family: "Poppins", sans-serif;
  width: 100%;
  text-align: center;
}

.emoji-icon {
  font-size: 1.6rem;
  line-height: 1;
}

#uploadComparativeModal .modal-dialog.modal-xl-upload {
  max-width: 800px !important;
  width: 100% !important;
}

.modal-header-coverize {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.guarantee-search-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 1.6rem;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  color: #2c3e50;
  font-family: "Poppins", sans-serif;
  width: 100%;
  text-align: center;
}

.emoji-icon {
  font-size: 1.6rem;
  line-height: 1;
}

#guaranteeSearchModal .modal-dialog.modal-xl-search {
  max-width: 1000px !important;
  width: 100% !important;
}

.cell-advantage {
  background-color: #d1e7dd !important; /* verde claro */
}

.cell-disadvantage {
  background-color: #f8d7da !important; /* rojo claro */
}

.highlighted-col {
  background-color: #e7f1ff !important; /* celeste para columna seleccionada */
}

.soft-alert {
  border: 1px solid #dee2e6;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}

.soft-alert .modal-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  color: #333;
}

#output,
.main-content,
.tabla-wrapper,
.container,
.benchmark-container {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

#tablaBenchmark thead th {
  position: sticky;
  top: 0px;
  background-color: white;
  z-index: 5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#scrollToTopBenchmark {
  position: fixed;
  bottom: 30px;
  right: 40px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  font-size: 24px;
  background-color: #0d6efd;
  color: white;
  border: none;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

#scrollToTopBenchmark.visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 24px;
  background-color: #80cc33 !important; /* 🟢 Cambia este valor si usas otro verde corporativo */
  color: white;
  border: none;
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: opacity 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Opcional: sombra externa */
}

.scroll-top-btn.visible {
  display: flex;
}

#tablaBenchmark thead {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1020;
  display: table-header-group !important;
  height: auto !important;
}

#tablaBenchmark thead th {
  padding: 10px;
  text-align: left;
  border-bottom: 2px solid #ddd;
}

#tablaBenchmark th,
#tablaBenchmark td {
  width: auto !important;
  word-break: break-word;
}

#tablaBenchmark {
  width: 100%;
}

div.dtfh-floatingparenthead {
  background-color: white !important;
  overflow: visible !important;
  z-index: 1100 !important;
}

#primaTable {
  width: 100%; /* Asegurar que ocupe todo el ancho disponible */
}

#primaTable .row-checkbox {
  transform: scale(1.2); /* Escala adicional para ajustar el tamaño */
}

#primaTable td.text-center input[type="checkbox"] {
  transform: scale(1.2) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

#primaTable td:first-child, /* Aplica a la celda de la primera columna */
  #primaTable th:first-child {
  /* Aplica al encabezado de la primera columna */
  width: 10px !important; /* Ancho fijo de la columna */
  text-align: center; /* Centrar el contenido dentro de la celda */
}

#primaTable th:nth-child(1),
#primaTable td:nth-child(1) {
  width: 25%; /* Columna de Garantía */
}

#primaTable th:nth-child(2),
#primaTable td:nth-child(2) {
  width: 35%; /* Columna de la primera aseguradora */
}

#primaTable th:nth-child(3),
#primaTable td:nth-child(3) {
  width: 40%; /* Columna de la segunda aseguradora */
}

/* Aplica el encabezado fijo solo a #primaTable */
#primaTable thead {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1020;
  display: table-header-group !important;
  height: auto !important;
}

#primaTable thead th div.dataTables_sizing {
  display: none !important; /* 🔥 Oculta el div que DataTables usa para forzar altura */
}

/* Corrige la alineación del encabezado */
#primaTable thead th {
  padding: 10px;

  text-align: left;
  border-bottom: 2px solid #ddd;
}

/* Evita que las filas sean más anchas que el encabezado */
#primaTable tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.merge-guarantee {
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.custom-green-btn {
  background-color: #28a745; /* ✅ Verde corporativo */
  border-color: #28a745;
  color: #fff;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.custom-green-btn:hover {
  background-color: #218838; /* ✅ Versión más oscura al pasar el mouse */
  border-color: #1e7e34;
}

.btn-buscar-externo {
  border: 2px solid #28a745;
  color: #28a745;
  font-weight: 600;
  background-color: white;
  transition: all 0.3s ease;
}

.btn-buscar-externo:hover {
  background-color: #28a745;
  color: white;
  border: 2px solid #28a745;
}

#tablaCondicionados1 .sticky-col {
  position: sticky;
  left: 0;
  background-color: #def7ff !important; /* ✅ Azul clarito */
  z-index: 2;
  text-align: left;
  font-weight: bold;
  box-shadow: 2px 0 0 0 #dee2e6 !important; /* ✅ Simula borde derecho */
}

#tablaCondicionados2 .sticky-col {
  position: sticky;
  left: 0;
  background-color: #e2ffdd !important; /* ✅ Verde clarito */
  z-index: 2;
  text-align: left;
  font-weight: bold;
  box-shadow: 2px 0 0 0 #dee2e6 !important; /* ✅ Simula borde derecho */
}

/* Fondo blanco también en tbody */
#tablaCondicionados1 tbody,
#tablaCondicionados2 tbody {
  background-color: #ffffff;
}

#tablaCondicionados1 td.sticky-col,
#tablaCondicionados2 td.sticky-col,
#tablaCondicionados1 th.sticky-col,
#tablaCondicionados2 th.sticky-col {
  border-right: 1px solid #dee2e6 !important; /* Forzamos sí o sí el borde */
  background-color: #ffffff;
}

.custom-container {
  margin: 40px 30px 40px 30px;
  padding: 30px 40px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #ccc;
  margin-left: 280px;
  width: calc(100% - 310px);
  transition: all 0.3s ease;

  min-height: auto;
}

html,
body {
  height: auto !important;
  min-height: 100vh;
}

#wrapper {
  width: 100%;
  min-height: auto;
  display: flex;
}

.main-content {
  flex: 1;
}

.enhanced-header {
  margin-bottom: 30px;
}

.enhanced-header h2 {
  font-size: 22px;
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.upload-box {
  width: 100%;           /* 1. ocupa todo el ancho disponible */
  max-width: 800px;      /* 2. como mucho 800px en pantallas grandes */
  box-sizing: border-box;/* 3. incluye padding y border en el cálculo de width */
  padding: 20px;
  border: 2px dashed #86c232;
  border-radius: 12px;
  background-color: #f9fdf6;
  text-align: center;
  margin: 0 auto;
}

.upload-box h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #2d572c;
}

.symbol {
  font-weight: bold;
  color: #4caf50;
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.upload-form input[type="file"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  width: 80%;
}

.upload-form .btn-submit {
  background-color: #86c232;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.upload-form .btn-submit:hover {
  background-color: #6ba82b;
}

.file-label {
  font-weight: 500;
  color: #333;
}

.header-icon {
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

.centered-label {
  display: block;
  text-align: center;
  margin-bottom: 16px;
  font-weight: 500;
  color: #333;
}

.file-upload-container {
  width: 100%; /* 🔹 Ancho fijo */
  margin: 10px auto; /* 🔹 Centrar en la pantalla */
  display: flex;
  flex-direction: column;
  align-items: center; /* ✅ Centra horizontalmente todo el contenido */
  padding: 30px;
  background-color: #ffffff; /* 🔹 Fondo blanco */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 🔹 Sombra ligera */
  border: 1px solid #ccc; /* 🔹 Borde suave */
}

.file-upload-container label {
  font-size: 16px; /* 🔹 Tamaño más grande */
  font-weight: bold; /* 🔹 Texto más resaltado */
  color: #4b4b4b; /* 🔹 Gris oscuro */
  text-align: left;
  margin-bottom: 8px;
}

.file-upload-container input[type="file"] {
  width: 100%; /* 🔹 Ocupa el ancho del contenedor */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

body.herramientas-page .main-content {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

.aseguradoras-modelo {
  text-align: center;
}

.logos-aseguradoras {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.logos-aseguradoras img {
  height: 80px;
  max-width: 200px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.logos-aseguradoras a:hover img {
  transform: scale(1.08);
}

#guaranteesPreviewCond,
#guaranteesPreviewUploaded {
  background: #f8f9fa;
  border: 1px solid #ced4da;
  border-left: 5px solid #007bff;
  border-radius: 4px;
  padding: 12px 16px;
  margin-top: 20px;
  max-height: 220px;
  overflow-y: auto;
  font-size: 0.95rem;
}

#guaranteesPreviewCond strong,
#guaranteesPreviewUploaded strong {
  color: #007bff;
  display: block;
  margin-bottom: 8px;
}

#guaranteesListPreviewCond,
#guaranteesListPreviewUploaded {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
  columns: 2;
  column-gap: 24px;
}

#guaranteesListPreviewCond li::before,
#guaranteesListPreviewUploaded li::before {
  content: "✔️ ";
  color: #198754;
  font-size: 0.9em;
  margin-right: 4px;
}

#guaranteesListPreviewCond li,
#guaranteesListPreviewUploaded li {
  break-inside: avoid;
  margin-bottom: 6px;
}

.swal2-popup.wide-modal {
  width: 900px !important;
  max-width: 95%;
  text-align: left;
  font-size: 0.9rem;
}

pre.fragmento-error {
  background: #f0f0f0;
  padding: 5px;
  max-height: 300px;
  overflow: auto;
  white-space: pre-wrap;
}

.modal-xl-custom {
  max-width: 1000px;
}

.modal-xxl {
  max-width: 1000px !important;
}

#guaranteesPreviewFromDocs {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px 20px;
  background: #f8f9fa;
  font-size: 0.95rem;
}

#guaranteesListPreviewFromDocs {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

#guaranteesListPreviewFromDocs li {
  margin-bottom: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#guaranteesListPreviewFromDocs li:last-child {
  border-bottom: none;
}

#guaranteesListPreviewFromDocs li .remove-icon {
  color: #d9534f;
  font-weight: bold;
  cursor: pointer;
  font-size: 1.2em;
}

#premiumTable td {
  vertical-align: middle !important;
}

.highlight-min-cell {
  background-color: #d9fdd3 !important;
}

.premium-cell {
  padding: 2px 0;
  text-align: left;
}

.highlight-min-cell {
  background-color: #d9fdd3 !important;
  font-weight: bold;
}

.dot-green {
  color: green;
  font-size: 1.3rem;
  font-weight: bold;
  margin-right: 6px;
  vertical-align: middle;
}

.dot-grey {
  color: #999;
  font-size: 1.3rem;
  margin-right: 6px;
  vertical-align: middle;
}

.modal-dialog.modal-xl-custom {
  max-width: 650px !important;
  width: 95%; /* mejor que 100% para evitar scroll lateral */
  margin: auto;
}

.modal-content {
  width: 100% !important;
  max-width: 100% !important;
}

#step2Projects .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-coverize-blue {
  background-color: #004b9b !important; /* azul corporativo */
  color: #fff !important;
  border: none;
}

.btn-coverize-blue:hover {
  background-color: #0a94eb !important;
  color: #fff !important;
}

.btn-normalize {
  background-color: #28a745;
  color: white; /* ✅ Forzar color del emoji/icono */
  border: none;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: background-color 0.2s ease-in-out;
}

.btn-normalize:hover {
  background-color: #218838;
  color: white;
}

.modal-xl-projects {
  max-width: 1000px !important;
}

#conditionedTable4 td:last-child,
#conditionedTable4 th:last-child {
  width: 10% !important;
}

#conditionedTable4 tr.editing-mode {
  background-color: #cff4fc !important; /* amarillo claro */
}

.btn-primary:is(#addRowGeneralData, 
#addGuaranteeRow, 
#addRowRiskCharacteristics, 
#combineRowsProyectos, 
#addGuaranteeRowAuto, 
#addPrimasRowAuto) {
  background-color: #00cc33;
  border: none;
  color: #fff;
}
.btn-primary:is(#addRowGeneralData, 
#addGuaranteeRow, 
#addRowRiskCharacteristics, 
#combineRowsProyectos, 
#addGuaranteeRowAuto, 
#addPrimasRowAuto):hover {
  background-color: #0f8a38;
  color: #fff;
}

#deleteGuaranteeModal .modal-header.bg-danger {
  background-color: white !important;
  color: black !important;
}

#exportAllTablesContainer {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

#guaranteesPreviewCond {
  max-height: none !important;
  overflow: visible !important;
}

/* ==========================
   Listado de ficheros seleccionados
   ========================== */
.selected-files {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 0.5em 0;
}

.selected-files:empty {
  display: none;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  margin: 4px 6px;
  padding: 4px 10px;
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
  border-radius: 16px;
  font-size: 0.9rem;
}

.file-chip:hover {
  background: #c4e3ed;
}

/* botón “×” sin padding ni fondo extra */
.file-chip .remove-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 6px;           
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  width: auto;
  min-width: 0;
  height: auto;
  color: #ff0000;
}

.file-chip .remove-btn:hover {
  color: #0a3f4f;
}

/* — Contenedor flexible para centrar logos en todas las tablas con insurers */
#riskCharacteristicsTable th > div,
#generalDataTable th > div,
#capitalsTable th > div,
#primaTable th > div,
#objectiveAnalysisTable th > div,
#premiumTable th > div,
.insurer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px;
  box-sizing: border-box !important;
  height: 60px !important;
  overflow: hidden !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
/* — Logos que nunca superen 60px de alto ni el ancho de la celda */
#riskCharacteristicsTable th img.insurer-logo,
#generalDataTable th img.insurer-logo,
#capitalsTable th img.insurer-logo,
#primaTable th img.insurer-logo,
#objectiveAnalysisTable th img.insurer-logo,
#premiumTable th img.insurer-logo,
.insurer-header img.insurer-logo {
  max-height: 60px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* — Contenedor flexible para centrar logos y permitir wrap en cabeceras */
#conditionedTable2 th > div,
.insurer-header {
  display: flex !important;
  flex-direction: column !important;     /* imagen arriba, texto abajo */
  align-items: center !important;
  justify-content: center !important;
  padding: 5px;
  box-sizing: border-box !important;

  /* en lugar de height fijo, usa min-height */
  min-height: 60px !important;
  height: auto !important;

  /* permite que el texto baje de línea y no se recorte */
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow: visible !important;

  /* keep flex-shrink para que las celdas se ajusten */
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Logos nunca más altos que 60px */
#conditionedTable2 th img.insurer-logo,
.insurer-header img.insurer-logo {
  max-height: 60px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* Asegúrate de que el <div> de texto ocupa todo el ancho y centra el texto */
#conditionedTable2 th > div > div {
  width: 100%;
  text-align: center;
  font-size: 0.95rem;
}


.no-scroll {
  overflow: hidden;
  height: 100vh; /* Opcional, para asegurar que toda la pantalla esté cubierta */
}

#guaranteeFilterBar { margin-top: .25rem; }
#guaranteeFilterBar .w-col-first { min-width: 220px; max-width: 420px; }
#guaranteeFilterBar input { width: 100%; box-shadow: none; }

/* Bloqueo visual para versión de evaluación (links y botones) */
.disabled-eval {
  color: #6c757d !important;
  opacity: 0.7;
  cursor: not-allowed !important;
  text-decoration: none;
  display: none !important;
}
/* Mantener estilo en hover/focus */
a.nav-link.disabled-eval:hover,
a.nav-link.disabled-eval:focus {
  color: #6c757d !important;
  text-decoration: none !important;
}
.disabled-eval .bi,
.disabled-eval i {
  opacity: 0.7;
}

/* Botón bloqueado “bonito” */
.btn-eval-disabled {
  background-color: #f1f3f5 !important;
  border: 1px solid #ced4da !important;
  color: #6c757d !important;
  box-shadow: none !important;
}
.btn-eval-disabled .bi,
.btn-eval-disabled i {
  opacity: 0.7;
}

/* Estado visual de landing bloqueada */
#landingContainer.eval-locked { opacity: 0.6; }

/* Controles bloqueados en la landing */
#landingContainer .disabled-eval {
  color: #6c757d !important;
  cursor: not-allowed !important;
}

/* Botones bloqueados en la landing */
#landingContainer .btn-eval-disabled {
  background-color: #f1f3f5 !important;
  border: 1px solid #ced4da !important;
  color: #6c757d !important;
  box-shadow: none !important;
}

/* Banner “versión de evaluación” */
#evalBanner { letter-spacing: .3px; }

/* Anti-flash: oculta solo la sidebar mientras carga */
body.loading .sidebar { visibility: hidden; }

/* Alinear los mensajes del usuario a la izquierda */
#chat .message.user {
  text-align: left !important;
}

/* (opcional) mejora la lectura en mensajes largos */
#chat .message.user,
#chat .message.bot {
  white-space: pre-wrap;   /* respeta los saltos de línea */
  word-break: break-word;
  line-height: 1.5;
}
#user-input {
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.5;
}

/* === Prompts (modal grande + textarea alto) === */

/* Modal más ancho */
#modalSegmentationPrompt .modal-dialog,
#modalFindRelevantPrompt .modal-dialog,
#modalAnalysisPrompt .modal-dialog,
#modalAutoComparePrompt .modal-dialog {
  max-width: 95vw;                 /* más ancho que el xl por defecto */
}

/* Contenido alto con scroll interno */
#modalSegmentationPrompt .modal-content,
#modalFindRelevantPrompt .modal-content,
#modalAnalysisPrompt .modal-content,
#modalAutoComparePrompt .modal-content {
  max-height: 90vh;
}

#modalSegmentationPrompt .modal-body,
#modalFindRelevantPrompt .modal-body,
#modalAnalysisPrompt .modal-body,
#modalAutoComparePrompt .modal-body {
  max-height: 80vh;                /* deja espacio al header/footer */
  overflow: auto;
}

/* Lo importante: evitar que .form-control tenga altura fija */
#modalSegmentationPrompt textarea.form-control,
#modalFindRelevantPrompt  textarea.form-control,
#modalAnalysisPrompt  textarea.form-control,
#modalAutoComparePrompt  textarea.form-control {
  height: auto !important;         /* anula reglas previas agresivas */
  min-height: 60vh !important;     /* textarea grande */
  resize: both;                    /* permitir redimensionar */
  white-space: pre-wrap;
  line-height: 1.4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
}

/* Topbar */
.logout-container{
  display:flex; align-items:center; gap:var(--topbar-gap);
}

#debug-toggle{
  min-height:var(--debug-switch-h);
  display:flex; align-items:center; gap:10px;
}

#debug-toggle .form-check-label{
  display:flex; align-items:center; height:var(--debug-switch-h);
  margin:0; line-height:1;
}

/* Reset Bootstrap offsets del switch */
.logout-container .form-check{ margin:0; padding-left:0; }
.logout-container .form-switch{ padding-left:0; }
.logout-container .form-switch .form-check-input{
  margin:0; width:var(--debug-switch-w); height:var(--debug-switch-h);
}

#debug-toggle .form-check-input:checked{
  background-color:var(--debug-accent);
  border-color:var(--debug-accent);
}

#logged-username{ line-height:1; }

/* Base: oculto */
.only-debug { display: none !important; }

/* Debug ON, pero respeta .d-none */
body[data-debug="1"] .only-debug:not(.d-none) { 
  display: block !important;
}


/* Columna GARANTÍA siempre en negrita, incluso tras redraw/reorder */
    #conditionedTable4 tbody td:nth-child(2){
      font-weight: 700 !important;
    }
    /* Por si hay celdas que usan span contenteditable en esa columna */
    #conditionedTable4 tbody td:nth-child(2) *{
      font-weight: inherit !important;
    }
    /* contenedor colapsado */
    .collapsed-container { display: none; }

    /* cabeceras toggle como acordeón */
    h3.toggle-table{
      display:flex; align-items:center; justify-content:space-between;
      padding:10px 12px; background:#f8f9fa; border-radius:6px; margin:10px 0;
      user-select:none; cursor:pointer;
    }
    h3.toggle-table i{ transition: transform .2s ease; }

    h3.toggle-table.is-open i.fas.fa-chevron-down { transform: rotate(180deg); }

    /* Alineación superior homogénea en toda la tabla */
    #conditionedTable4 td{
      vertical-align: top !important;
      padding-top: .20rem !important;
    }
    #conditionedTable4 td:first-child {
      text-align: left !important;
    }

    #conditionedTable4 .row-checkbox {
      -webkit-appearance: checkbox;
      appearance: checkbox;
      width: 14px;
      height: 14px;
      transform: scale(0.95);        
      margin: 0;
      vertical-align: middle;
      cursor: pointer;
    }
    #conditionedTable4 .row-checkbox:focus {
      outline: none;
      box-shadow: none;
    }
    #conditionedTable4 th.checkbox-col,
    #conditionedTable4 td.checkbox-col {
      width: 28px !important;
      min-width: 28px !important;
      max-width: 28px !important;
      padding: 0 6px !important;
      text-align: center !important;
    }
    #conditionedTable4 td:nth-child(2) {
      text-align: left !important;
    }
    #outputGarantias .table-block {
      margin-bottom: 24px;
    }
    #outputGarantias .dataTables_wrapper {
      margin-bottom: 20px;
    }
    #comparativeToolbar {
      margin-bottom: 12px;
    }

    /* Cada garantía (bloque) */
    .comparative-table td .editable-html{
      margin: 0 !important;
      padding: 0 !important;
    }
    /* Separación mínima entre garantías consecutivas */
    .comparative-table td .editable-html + .editable-html{
      margin-top: .18rem !important;
    }

    /* Contenido formateado */
    .comparative-table td .cell{
      white-space: normal; 
      line-height: 1.28;
      font-size: .95rem;
      margin: 0 !important;
      padding: 0 !important;
    }
    .comparative-table td .cell .cell-title{
      display: block;
      font-weight: 600;
      margin:0 0 .70rem 0 !important;  
    }
    .comparative-table td .cell ul{
      margin:.12rem 0 0 1.05rem !important;  
      padding: 0 !important;
    }
    .comparative-table td .cell li{
      margin: .06rem 0 !important;    
    }

    /* Chips de importes */
    .badge-amount{
      display:inline-block;
      padding:0 .35rem;
      border-radius:.35rem;
      background:#eef2ff;
      color:#3730a3;
      font-weight:700;
      line-height:1.2;
      font-variant-numeric: tabular-nums;
      font-feature-settings:"tnum";
    }

    /* Tablas internas*/
    .inner-table{ font-size:.9em; margin-top:6px; background:#fcfcfc; width:100%; border-collapse:collapse; table-layout:fixed; }
    .inner-table td{ padding:4px 6px; vertical-align:top; border:1px solid #dee2e6; text-align:left; word-break:break-word; }
    .inner-table tr:nth-child(odd){ background-color:#f8f9fa; }
    .inner-table td:first-child{ font-weight:500; }

    /* Igualar tamaño de los checkboxes en todas las tablas */
/* Tamaño consistente del checkbox */
.comparative-table input.row-checkbox {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Normalizar altura de filas en TODAS las tablas */
.comparative-table tbody tr {
    height: 38px !important;
}

/* Normalizar celdas de checkbox */
.comparative-table .checkbox-col {
    width: 28px !important;
    padding: 4px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Evitar que filas de Capitales queden más altas */
#capitalesTableAuto tbody td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Si DataTables mete un min-height extraño, lo anulamos */
#capitalesTableAuto tbody tr td {
    line-height: 18px !important;
}