/*
 * public/css/listadosolicitudcredito.css
 *
 * NOTA: Este archivo CSS asume que las variables CSS (`--first-color`, `--text-color`, etc.)
 *       y los estilos base para `body`, `html`, `table` y `h1` están definidos
 *       en un archivo CSS global como `public/css/index.css`, el cual se carga primero.
 *       Si eliminas este archivo, las definiciones de variables o clases básicas
 *       podrían necesitar ser movidas a un lugar más global.
 */

/* ============================================== */
/*          ENCABEZADO DE LA PÁGINA               */
/* ============================================== */
.TitleList {
  text-align: center;
  font-weight: bold; /* Asegura que el título sea prominente */
  /* Ajusta el color si no viene del modo oscuro o var --title-color */
  /* color: var(--title-color); o color: #TUCOLOR_AQUÍ; */
}


/* ============================================== */
/*           CONTENEDOR DE LA TABLA               */
/* ============================================== */
.tabla-listado-solicitud-credito {
  max-height: 400px; /* Limita la altura del contenedor para activar el scroll vertical */
  overflow-y: auto;  /* Habilita el scroll vertical */
  overflow-x: auto;  /* Habilita el scroll horizontal si el contenido de la tabla es muy ancho */
  border: none;      /* Elimina bordes redundantes del contenedor */
  
  /* Estilo de la barra de desplazamiento (scrollbar) */
  scrollbar-width: thin; /* Para Firefox: scrollbar delgado */
  scrollbar-color: var(--first-color) transparent; /* Color del "pulgar" y la "pista" del scrollbar */
  scrollbar-track-border-radius: 4px; /* Bordes redondeados para la pista */

  margin: 0 auto;    /* Centra el contenedor de la tabla en la página */
  margin-top: 39px;  /* Margen superior para separación del título */
  width: 100%;       /* Ocupa todo el ancho disponible del padre */
  max-width: 1200px; /* Ancho máximo para mantener la tabla contenida */
  border-radius: 8px; /* Pequeños bordes redondeados al contenedor */
  background-color: var(--container-color); /* Fondo del área de la tabla para distinguir */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para darle profundidad */
}

/* --- Estilos específicos para la tabla --- */
/* Ya deberías tener reglas generales `table {}` y `th, td {}` en `index.css`.
   Solo añade las que sean únicas o anulen para esta tabla. */
table {
  width: 100%;
  border-collapse: collapse; /* Elimina espacio entre celdas */
  /* `table-layout: auto;` o `fixed;` si necesitas controlar el ancho de columnas estrictamente */
}

/* Alineación de texto y padding para todas las celdas */
th, td {
  padding: 8px;
  text-align: center; /* Alineación del texto en las celdas */
  border-bottom: 1px solid var(--text-color-light); /* Borde inferior para separar filas */
  white-space: nowrap; /* Evita que el texto dentro de la celda se rompa a varias líneas si es muy largo, lo cual ayuda con el scroll horizontal */
}

/* Estilos de la cabecera de la tabla */
thead {
  background-color: #27293d; /* Color de fondo oscuro para la cabecera */
  color: #fff;              /* Color del texto de la cabecera */
}

thead th {
  vertical-align: middle; /* Alineación vertical del contenido del encabezado */
}

/* Encabezado de la tabla pegajoso (sticky) al hacer scroll dentro del contenedor `.tabla-listado-solicitud-credito` */
thead tr {
  position: sticky; /* Hace que la fila de encabezado se pegue */
  top: 0;           /* Se pegará a la parte superior de su contenedor con `overflow` */
  z-index: 2;       /* Asegura que esté por encima del contenido del cuerpo de la tabla al hacer scroll */
  background-color: #27293d; /* Re-aplica el color de fondo para asegurar opacidad cuando está pegajoso */
  color: #fff;      /* Re-aplica el color del texto */
}

/* Alineación vertical del contenido en las celdas del cuerpo */
tbody td {
  vertical-align: middle;
}

/* --- Fila especial para totales (si aún la usas al final de la tabla) --- */
.FilaTotal {
  background-color: #27293d; /* Fondo oscuro para la fila de totales */
  position: sticky;          /* Hace que esta fila se pegue */
  bottom: 0;                 /* Se pega a la parte inferior de su contenedor con `overflow` */
  z-index: 2;                /* Por encima del contenido */
  border-bottom: none;       /* Sin borde inferior */
  color: #fff;               /* Color de texto para la fila de totales */
}

/* Asegura que los textos de los totales no se rompan a varias líneas */
.TotalPie, .ValorPie {
  white-space: nowrap;
}

/* ============================================== */
/*      LINK ESPECIAL PARA CÉDULAS EN LA TABLA    */
/* ============================================== */
.LinkCedulaSolicitud {
  /* Gradiente animado para el color del texto */
  background: linear-gradient(90deg, var(--second-color), var(--first-color), var(--second-color));
  background-size: 600% 600%; /* Tamaño grande para animar */
  animation: gradientAnimation 3s ease infinite; /* Animación continua */
  -webkit-background-clip: text;      /* Recorta el gradiente al texto */
  background-clip: text;              /* Recorta el gradiente al texto */
  -webkit-text-fill-color: transparent; /* Hace el texto transparente para ver el gradiente */
  font-weight: bold;                  /* Texto en negrita */
  text-decoration: none;              /* Asegura que no tenga subrayado por defecto */
}

/* Keyframes para la animación del gradiente */
@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================== */
/*       BOTONES DE ACCIÓN DENTRO DE LA TABLA     */
/* ============================================== */
.ButtonGestionar, .ButtonGestionar2 {
  display: inline-flex;  /* Flexbox para alinear contenido (ej. ícono) */
  align-items: center;   /* Alineación vertical del contenido */
  justify-content: center; /* Alineación horizontal del contenido */
  padding: 0.5rem;       /* Espaciado interno */
  border: none;          /* Sin borde */
  border-radius: 0.25rem; /* Bordes ligeramente redondeados */
  background-color: transparent; /* Fondo transparente */
  color: var(--first-color); /* Color primario del texto/icono */
  cursor: pointer;       /* Cursor de puntero */
  transition: all 0.3s ease; /* Transiciones suaves para hover y cambios */
  font-size: var(--h2-font-size); /* Tamaño del icono/fuente */
}

/* Efectos al pasar el ratón sobre los botones */
.ButtonGestionar:hover, .ButtonGestionar2:hover {
  background-color: var(--first-color-light); /* Fondo más claro */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);    /* Sombra sutil */
  transform: scale(1.05); /* Escala ligeramente */
}

/* Margen del icono dentro del botón si lo hubiera */
.ButtonGestionar i {
  margin: 0; /* Asegura que el icono no tenga margen extra */
}

/* Alineación de texto y evitar salto de línea para columnas de fecha */
.fecha-soli, .fecha-dese,
.filas-graduados .fecha-soli, /* Asegura aplicar también a filas específicas si tienen la clase */
.filas-graduados .fecha-dese {
  white-space: nowrap; /* Impide que las fechas se rompan en varias líneas */
}

/* ============================================== */
/*          CONTENEDOR DE TOTALES Y BOTÓN EXPORTAR */
/* ============================================== */
.total-button-container {
  display: flex;         /* Usa flexbox */
  justify-content: space-between; /* Distribuye espacio equitativamente */
  align-items: center;   /* Centra verticalmente los elementos */
  width: 100%;           /* Ocupa todo el ancho */
  max-width: 1200px;     /* Ancho máximo, coherente con la tabla */
  margin: 1rem auto;     /* Centra y añade margen vertical */
  padding: 0 1rem;       /* Espaciado horizontal interno */
}

.export-button {
  padding: 1rem 2rem;    /* Espaciado interno del botón */
  border-radius: 4.9rem; /* Bordes muy redondeados (tipo pastilla) */
  font-weight: 500;      /* Peso de la fuente */
  cursor: pointer;       /* Cursor de puntero */
  border: none;          /* Sin borde */
  /* Gradiente con animación */
  background-image: linear-gradient(to right, var(--first-color), var(--second-color), var(--first-color));
  background-size: 200% 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-position 0.5s ease;
  color: white;          /* Color del texto */
}

.export-button:hover {
  transform: scale(1.05); /* Escala ligeramente */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra */
  background-position: 100% 0; /* Desplaza el gradiente */
}

/* Contenedor del texto de los totales (total de usuarios, desembolso, etc.) */
.total-usuarios {
  text-align: right; /* Alinea el texto a la derecha */
  color: var(--text-color); /* Color de texto general */
  line-height: 1.5; /* Espaciado entre líneas */
}


/* ============================================== */
/*            CLASES PARA FILAS DE LA TABLA      */
/*            (Basadas en el campo 'empresa' o 'aprovado') */
/* ============================================== */

/* Para filas con estado 'aprovado' (aprovado === 'SI') */
.aprovado, .firmado-aprobado {
  background-color: var(--aprobado-color); /* Un verde claro para filas aprobadas */
  color: var(--title-color); /* Color de texto legible sobre el fondo claro */
}
/* Estilo del texto si necesitas que sea más oscuro en aprobado. Por ejemplo: */
/* .aprovado td, .aprovado th { color: #000; } */


/* Para filas con 'empresa' === 'DESISTIÓ' */
.desistio2 { /* Ojo con el '2', asegurarte que coincida con tu PHP */
  background-color: var(--desistio-color); /* Color rojo/naranja para filas de desistidos */
  color: var(--title-color); /* Color de texto */
}

/* Para filas con 'empresa' === 'PENDIENTE DE FIRMA' */
.pendiente-firma {
  background-color: var(--pendiente-color); /* Un azul/morado suave para filas pendientes */
  color: var(--title-color);
}

/* Para filas con 'empresa' === 'FIRMADO APROBADO PENDIENTE' */
.firmado-aprobado-pendiente {
  background-color: var(--firmpend-color); /* Un verde para firmado pendiente */
  color: var(--title-color);
}

/* Estado si hay un valor "Anomalía" que deseas destacar en rojo */
/* Esto sería si result.datos.anomalia tiene un valor y aplicas este estilo via JS o PHP.
   Para tu ejemplo con "YA EXISTE" se está usando 'var(--second-color)' en JS.
   Si var(--second-color) es el verde, entonces YA EXISTE es verde. */
.TotalPagado .ValorTotal {
  color: var(--cancel-color); /* Color de advertencia para un valor total de cancelación */
}

/* ============================================== */
/*                  LOADING OVERLAY               */
/* ============================================== */
.loading-overlay {
  display: none; /* Por defecto oculto, JS lo mostrará */
  position: fixed; /* Posición fija en la ventana */
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente oscuro */
  z-index: 9999; /* Por encima de todo */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  opacity: 0; /* Oculto por opacidad al inicio */
  transition: opacity 0.3s ease; /* Transición suave de opacidad */
}

/* Cuando JS añade la clase 'show' al overlay */
.loading-overlay.show {
  display: flex; /* Muestra el overlay */
  opacity: 1;    /* Lo hace visible */
}

/* Contenedor del spinner y texto */
.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Círculo del spinner */
.loader-circle {
  width: 50px; height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.3); /* Borde claro, transparente */
  border-top-color: #fff; /* Borde superior blanco para el efecto de rotación */
  border-radius: 50%; /* Lo hace circular */
  animation: spin 1s linear infinite; /* Animación de rotación */
}

/* Keyframes para la animación de rotación del spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Texto del spinner */
.loader-text {
  color: #fff;       /* Color del texto */
  margin-top: 34px;  /* Margen superior para separación del spinner */
  animation: pulsate 1.5s ease-out infinite; /* Animación de pulsación */
}

/* Keyframes para la animación de pulsación del texto */
@keyframes pulsate {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================== */
/*                 MEDIA QUERIES                  */
/* ============================================== */
@media (max-width: 768px) {
  /* Si GroupInput también se usa aquí para otros formularios en móvil, 
     asegúrate de que tenga `flex-direction: column;` si necesitas apilarlos. */
  /* .GroupInput { flex-direction: column; } */

  /* Para que el contenedor principal de la tabla ocupe más espacio en pantallas pequeñas */
  .tabla-listado-solicitud-credito, .total-button-container {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}