/* Definición de variables CSS */
:root {
  --color-primario: #007bff;
  --color-hover: #0056b3;
  --color-texto-blanco: #ffffff;
  --border-radius-input: 8px;
  --box-shadow-nav: 0 4px 8px rgba(0, 123, 255, 0.2);
  --box-shadow-nav-active: 0 6px 12px rgba(0, 0, 255, 0.4);
  --azul-oscuro: #003366; /* Nuestro clásico azul oscuro */
}


/* Estilo global para botones personalizados (btn-custom) */
.btn-custom {
  background-color: var(--azul-oscuro);
  color: var(--color-texto-blanco);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  border-radius: 5px;
}

.btn-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* Estilos generales para la página */
body {
  background-color: #f4f7fc;
  font-family: 'Arial', sans-serif;
}

/* Tarjetas y contenedores */
.card {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

/* Estilos para formularios */
.form-select, .form-control {
  border-radius: var(--border-radius-input);
  border: 1px solid #ddd;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease;
}

.form-select:focus,
.form-control:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Botones */
.btn {
  border-radius: 5px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn:hover {
  transform: scale(1.05);
  background-color: var(--color-hover);
}

/* Botones secundarios y de éxito */
.btn-success,
.btn-secondary {
  border-radius: var(--border-radius-input);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

/* Distribución de filtros y ordenamiento */
.row.mb-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.col-md-6 {
  flex: 1 1 calc(50% - 20px);
  min-width: 300px;
}

/* Botón de envío de formularios */
button[type="submit"] {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
  background-color: var(--color-primario);
  color: var(--color-texto-blanco);
}

/* Estilos para tablas */
table.table {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.table th, .table td {
  padding: 15px;
  text-align: center;
  vertical-align: middle;
}

.table th {
  background-color: var(--color-primario);
  color: var(--color-texto-blanco);
}

.table-striped tbody tr:nth-child(odd) {
  background-color: #f8f9fa;
}

/* Input de búsqueda */
.input-group {
  width: 100%;
  max-width: 400px;
  margin-bottom: 20px;
}

/* Toastr */
.toastr-info {
  border-radius: 5px;
}

/* Barra de navegación y enlaces */
.navbar-nav .nav-link {
  margin-right: 10px;
  font-size: 18px;
  padding: 10px 20px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.navbar-nav .nav-link:hover {
  background-color: var(--color-hover);
  color: var(--color-texto-blanco);
  cursor: pointer;
  transform: scale(1.05);
  box-shadow: var(--box-shadow-nav);
}

.navbar-nav .nav-link.active {
  background-color: var(--color-hover);
  color: var(--color-texto-blanco);
  border-radius: 8px;
  box-shadow: var(--box-shadow-nav-active);
}

/* Animación de los íconos en los enlaces */
.navbar-nav .nav-link i {
  transition: transform 0.3s ease;
}

.navbar-nav .nav-link:hover i {
  transform: rotate(360deg);
  font-size: 1.2rem;
}

.navbar-nav .nav-link.active i {
  transform: scale(1.2);
}

/* Efecto al hacer scroll en la navbar */
.navbar.scrolled {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

/* Animación para los íconos dentro de list-group */
.list-group-item i {
  transition: transform 0.3s ease;
}

.list-group-item:hover i {
  transform: rotate(360deg);
}

/* Efecto hover para los elementos del menú lateral */
.list-group-item {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.list-group-item:hover {
  background-color: #007bff; /* Color azul */
  color: #ffffff; /* Texto en blanco */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra */
  transform: translateY(-3px) scale(1.05); /* Efecto 3D */
}

/* Animación para los íconos dentro de los elementos del menú (opcional) */
.list-group-item i {
  transition: transform 0.3s ease;
}

.list-group-item:hover i {
  transform: rotate(360deg);
}

/* Estilos para agrandar el menú de utilidades */
.utilidades-menu .list-group-item {
  font-size: 1.5rem;         /* Aumenta el tamaño de la fuente */
  padding: 1rem 1.5rem;       /* Mayor espacio interno */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.utilidades-menu .list-group-item:hover {
  background-color: #007bff;  /* Color azul de fondo al pasar el cursor */
  color: #ffffff;             /* Texto en blanco */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra para efecto 3D */
  transform: translateY(-3px) scale(1.05);   /* Efecto 3D */
}

.utilidades-menu .list-group-item i {
  font-size: 2rem;            /* Aumenta el tamaño de los íconos */
  margin-right: 0.5rem;        /* Espacio entre el ícono y el texto */
  transition: transform 0.3s ease;
}

.utilidades-menu .list-group-item:hover i {
  transform: rotate(360deg);  /* Animación de rotación para el ícono */
}
/* Estilos globales para todos los botones */
.btn {
  background-color: var(--azul-oscuro) !important;  /* Color azul oscuro definido en la variable */
  color: var(--color-texto-blanco) !important;         /* Texto en blanco */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;  /* Sombra sutil */
  border: none !important;                             /* Sin borde */
  border-radius: 5px !important;                       /* Bordes redondeados */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transición suave para efecto 3D */
}

.btn:hover,
.btn:focus {
  transform: translateY(-2px);                         /* Efecto 3D: se eleva */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4) !important;  /* Sombra más pronunciada al hacer hover */
  background-color: var(--azul-oscuro) !important;      /* Se mantiene el mismo color */
}
.table th {
  background-color: var(--azul-oscuro);
  color: white;
}

.table th:hover {
  background-color: #e0a800; /* Un tono ligeramente más oscuro al pasar el mouse */
  cursor: default;
}

.table th:hover {
  background-color: #adb5bd; /* Gris un poco más oscuro al hacer hover */
  cursor: default;
}

.table th:hover {
  background-color: #e0a800; /* Un tono ligeramente más oscuro al pasar el mouse */
  cursor: default;
}

.table th:hover {
  background-color: #002244; /* Un tono aún más oscuro al pasar el mouse */
  cursor: default;
}
/* Estilo personalizado para listas desplegables */
.select-custom {
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: var(--border-radius-input) !important;
  /* Aumentamos el padding derecho para dar espacio al ícono */
  padding: 0.5rem 2.5rem 0.5rem 1rem !important;
  /* Removemos la apariencia nativa */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  /* Ícono de flecha personalizado (SVG en línea) */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%204%205'%3E%3Cpath%20fill%3D'%23333'%20d%3D'M2%205L0%200h4z'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 1rem !important;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease !important;
  /* Evitamos que se vea el cursor de texto y se seleccione el contenido */
  user-select: none;
  caret-color: transparent;
  cursor: pointer;
}

.select-custom:focus {
  border-color: var(--color-primario) !important;
  box-shadow: 0 0 0.2px rgba(0, 123, 255, 0.5) !important;
  outline: none;
}
/* Personalización del dropdown de Select2 */
.select2-dropdown-custom {
  max-height: 200px; /* Altura máxima para que aparezca el scroll */
  overflow-y: auto;  /* Activa el scroll vertical */
}

/* Estilos para cada opción */
.select2-results__option {
  padding: 0.5rem 1rem;
  transition: background-color 0.1s ease;
}

/* Efecto hover para cada opción */
.select2-results__option--highlighted {
  background-color: var(--color-hover) !important; /* O usa el color que prefieras */
  color: var(--color-texto-blanco) !important;
}

/* Clase para fondo azul oscuro */
.bg-azul-oscuro {
  background-color: var(--azul-oscuro) !important;
}

/* Estilos específicos para la sección de pagos - sobrescriben los colores azules */
.pagos-section .btn,
.pagos-section .btn-success {
  background-color: #198754 !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(25, 135, 84, 0.3) !important;
}

.pagos-section .btn:hover,
.pagos-section .btn-success:hover {
  background-color: #157347 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(25, 135, 84, 0.4) !important;
}

.pagos-section .table th {
  background-color: #198754 !important;
  color: white !important;
}

.pagos-section .table th:hover {
  background-color: #157347 !important;
}

/* Estilo global para botones personalizados */
.btn-custom {
  background-color: var(--azul-oscuro) !important;
  color: var(--color-texto-blanco) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
  border: none !important;
  border-radius: 5px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-custom:hover,
.btn-custom:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4) !important;
}

.admin-menu .list-group-item {
  font-size: 1.25rem;
  padding: 1rem 1.5rem;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.admin-menu .list-group-item:hover {
  background-color: var(--color-hover);
  color: var(--color-texto-blanco);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Ajuste para que el menú lateral no esté tan arriba */
.admin-menu {
  margin-top: 40px; /* Ajusta según necesidad */
}

/* Alineación del título */
.content-header h1 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
}

/* Ajuste general del layout para alineación */
.content-body {
  padding-top: 10px;
}

/* Asegurar que el título esté alineado correctamente */
h1.text-azul-oscuro {
  font-size: 2rem;
  font-weight: bold;
}

/* Ajuste para los botones */
.btn-custom {
  background-color: var(--azul-oscuro);
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* Alinear correctamente la tabla */
.table th {
  background-color: var(--azul-oscuro);
  color: white;
}

.pagos-section .btn-danger {
  background-color: #dc3545 !important;
  color: #fff !important;
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3) !important;
  border: none !important;
}

.pagos-section .btn-danger:hover,
.pagos-section .btn-danger:focus {
  background-color: #bb2d3b !important;
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(220, 53, 69, 0.4) !important;
}

/* --- Fix: Asegurar que los botones de peligro sean rojos --- */
.btn-danger {
  background-color: #dc3545 !important;
  color: #fff !important;
  border: none !important;
}

.btn-danger:hover, .btn-danger:focus {
  background-color: #bb2d3b !important;
  color: #fff !important;
}

/* ===== Ticker de tasas ===== */
.rate-ticker {
  background-color: #ffffff;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.ticker-content {
  display: inline-block;
  white-space: nowrap;
  animation: ticker-scroll 25s linear infinite;
}
@keyframes ticker-scroll {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
.rate-ticker .rate-item {
  padding: 0.25em 1.2em;
  border-radius: 20px;
  background: rgba(0,0,0,0.03);
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
  font-weight: 600;
  margin: 0 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.rate-ticker .rate-item:hover {
  background: #f0f0f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  color: #222;
}
.rate-ticker .rate-item strong {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.rate-ticker .rate-item span {
  font-family: 'Menlo', 'Consolas', 'Liberation Mono', monospace;
  font-size: 1.08em;
  font-weight: 600;
}
.rate-ticker .divider {
  font-size: 1.5em;
  color: #e0e0e0;
  margin: 0 0.5em;
  vertical-align: middle;
  font-weight: bold;
  content: '\2022'; /* punto grande */
}

.custom-tooltip {
  position: relative;
  cursor: pointer;
  color: #1976d2;
  font-weight: bold;
  transition: color 0.2s;
}
.custom-tooltip:hover {
  color: #0d47a1;
}
.custom-tooltip .tooltip-text {
  visibility: hidden;
  width: 220px;
  background-color: #1976d2;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 10;
  bottom: 125%;
  left: 50%;
  margin-left: -110px;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  pointer-events: none;
}
.custom-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.saldo-final-row {
  background: #e3f2fd !important;
  font-size: 1.1em;
  font-weight: bold;
  border-top: 1.5px solid #90caf9;
}
.saldo-final-celda {
  color: #0d47a1 !important;
}
.saldo-final-dashboard {
  font-size: 1.2em;
}
.saldo-animado {
  animation: saldoFlash 1s linear 1;
}
@keyframes saldoFlash {
  0% { background-color: #fff; }
  20% { background-color: #ffe5e5; }
  40% { background-color: #fff; }
  60% { background-color: #ffe5e5; }
  100% { background-color: #fff; }
}

/* Estilos para filtros en tiempo real */
.highlight-match {
  background-color: #87ceeb !important;
  color: #000 !important;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.table-hover tbody tr:hover {
  background-color: rgba(0, 123, 255, 0.1) !important;
  transition: background-color 0.3s ease;
}

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

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

/* Animación para filas al mostrar/ocultar */
.fila-pedido, .fila-transferencia {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fila-pedido.hidden, .fila-transferencia.hidden {
  opacity: 0;
  transform: scale(0.95);
}

/* Estilos para el contador de resultados */
#contador-resultados {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Estilos para los filtros */
.form-control-sm {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

.form-label.small {
  font-size: 0.8rem;
  font-weight: 500;
  color: #6c757d;
}

/* Estilos específicos para la sección de pedidos - color celeste claro */
.pedidos-section .table th {
  background-color: #87CEEB !important;  /* Celeste claro (Sky Blue) */
  color: #1a1a1a !important;              /* Texto oscuro para contraste */
}

.pedidos-section .table th:hover {
  background-color: #6BB3D9 !important;   /* Celeste un poco más oscuro en hover */
}