/**
 * Colores personalizados para Avipagos
 * Amarillo y Azul Oscuro - Colores de la empresa
 */

:root,
[data-bs-theme=light] {
  /* Colores principales de la empresa */
  --bs-primary: #073f8a; /* Azul oscuro */
  --bs-primary-rgb: 7, 63, 138;
  --bs-warning: #39ba20; /* Amarillo */
  --bs-warning-rgb: 57, 186, 32;
  
  /* Azul oscuro para dark */
  --bs-dark: #012967;
  --bs-dark-rgb: 1, 41, 103;
  
  /* Colores de texto y énfasis */
  --bs-primary-text-emphasis: #0d1a4d;
  --bs-warning-text-emphasis: #664400;
  --bs-dark-text-emphasis: #051a3d;
  
  /* Colores de fondo sutiles */
  --bs-primary-bg-subtle: #e3edf9;
  --bs-warning-bg-subtle: #fff8e1;
  --bs-dark-bg-subtle: #e3eaf3;
  
  /* Colores de borde sutiles */
  --bs-primary-border-subtle: #c5c7e1;
  --bs-warning-border-subtle: #ffe082;
  --bs-dark-border-subtle: #c5d4e6;
}

/* Fondo azul para el layout principal */
body {
  background-color: #073f8a !important;
  background: linear-gradient(135deg, #073f8a 0%, #012967 100%) !important;
}

/* Content wrapper con fondo azul */
.content-wrapper {
  background-color: #073f8a !important;
  background: linear-gradient(135deg, #073f8a 0%, #012967 100%) !important;
}

/* Layout page con fondo azul */
.layout-page {
  background-color: #073f8a !important;
  background: linear-gradient(135deg, #073f8a 0%, #012967 100%) !important;
}

/* Container principal con fondo azul */
.container-xxl,
.container-p-y {
  background-color: transparent !important;
}

/* Menú lateral - Fondo azul oscuro */
.layout-menu {
  background-color: #073f8a !important;
  background: linear-gradient(180deg, #073f8a 0%, #012967 100%) !important;
}

/* Sección del logo - Fondo blanco */
.app-brand.demo {
  background-color: #ffffff !important;
  background: #ffffff !important;
  padding: 12px 16px !important;
  margin: 12px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.app-brand-link {
  color: #073f8a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.app-brand-text {
  color: #073f8a !important;
  font-weight: 600 !important;
}

/* Logo imagen */
.app-brand-logo.demo img {
  filter: none !important;
}

/* Items del menú */
.menu-inner .menu-item .menu-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

.menu-inner .menu-item .menu-link:hover {
  background-color: rgba(57, 186, 32, 0.15) !important;
  color: #39ba20 !important;
}

.menu-inner .menu-item.active > .menu-link {
  background-color: #39ba20 !important;
  color: #073f8a !important;
  font-weight: 600 !important;
}

/* Submenú */
.menu-sub .menu-item .menu-link {
  color: rgba(255, 255, 255, 0.8) !important;
}

.menu-sub .menu-item .menu-link:hover {
  background-color: rgba(57, 186, 32, 0.1) !important;
  color: #39ba20 !important;
}

.menu-sub .menu-item.active > .menu-link {
  background-color: rgba(57, 186, 32, 0.2) !important;
  color: #39ba20 !important;
}

/* Iconos del menú */
.menu-icon {
  color: rgba(255, 255, 255, 0.8) !important;
}

.menu-item.active > .menu-link .menu-icon,
.menu-item .menu-link:hover .menu-icon {
  color: #39ba20 !important;
}

/* Navbar superior - Fondo blanco para destacar */
.bg-navbar-theme {
  background-color: #ffffff !important;
  border-bottom: 2px solid #39ba20 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.navbar-nav .nav-link {
  color: #073f8a !important;
}

.navbar-nav .nav-link:hover {
  color: #012967 !important;
}

/* Botones primarios */
.btn-primary {
  background-color: #073f8a !important;
  border-color: #073f8a !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background-color: #012967 !important;
  border-color: #012967 !important;
}

.btn-warning {
  background-color: #39ba20 !important;
  border-color: #39ba20 !important;
  color: #073f8a !important;
  font-weight: 600 !important;
}

.btn-warning:hover {
  background-color: #2fa619 !important;
  border-color: #2fa619 !important;
  color: #012967 !important;
}

/* Cards - Fondo blanco para destacar sobre el fondo azul */
.card {
  border-color: #e0e0e0 !important;
  background-color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
}

.card-header {
  background-color: #ffffff !important;
  border-bottom: 2px solid #39ba20 !important;
}

.card-body {
  background-color: #ffffff !important;
}

.card-title {
  color: #073f8a !important;
}

/* Badges */
.badge.bg-label-primary {
  background-color: #e3edf9 !important;
  color: #073f8a !important;
}

.badge.bg-label-warning {
  background-color: #fff8e1 !important;
  color: #664400 !important;
}

.badge.bg-danger {
  background-color: #dc3545 !important;
}

/* Links */
a {
  color: #073f8a !important;
}

a:hover {
  color: #012967 !important;
}

/* Dropdown del usuario */
.dropdown-menu {
  border-color: #39ba20 !important;
}

.dropdown-item:hover {
  background-color: #fff8e1 !important;
  color: #073f8a !important;
}

/* Avatar del usuario */
.avatar-online .avatar-initial {
  background-color: #39ba20 !important;
  color: #073f8a !important;
  font-weight: 600 !important;
}

/* Footer */
.bg-footer-theme {
  background-color: #f8f9fa !important;
  border-top: 2px solid #39ba20 !important;
}

.footer-link {
  color: #073f8a !important;
}

.footer-link:hover {
  color: #012967 !important;
}

/* Inputs y formularios */
.form-control:focus {
  border-color: #39ba20 !important;
  box-shadow: 0 0 0 0.2rem rgba(57, 186, 32, 0.25) !important;
}

/* Tabs y navegación */
.nav-pills .nav-link.active {
  background-color: #073f8a !important;
  color: #ffffff !important;
}

.nav-pills .nav-link:hover {
  color: #073f8a !important;
}

/* Dividers del menú */
.menu-divider {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Sombra del menú interno */
.menu-inner-shadow {
  background: linear-gradient(to bottom, rgba(7, 63, 138, 0.1), transparent) !important;
}

/* Toggle del menú */
.layout-menu-toggle {
  color: #39ba20 !important;
}

.layout-menu-toggle:hover {
  color: #2fa619 !important;
}

/* Notificaciones */
.badge-notifications {
  background-color: #39ba20 !important;
  color: #073f8a !important;
}

/* Tablas */
.table thead th {
  background-color: #f8f9fa !important;
  color: #073f8a !important;
  border-bottom: 2px solid #39ba20 !important;
}

/* Hover en filas de tabla */
.table tbody tr:hover {
  background-color: #fff8e1 !important;
}

/* Botones de acción */
.btn-outline-primary {
  color: #073f8a !important;
  border-color: #073f8a !important;
}

.btn-outline-primary:hover {
  background-color: #073f8a !important;
  border-color: #073f8a !important;
  color: #ffffff !important;
}

/* Profile section en el menú */
.card {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Ajustes para mejor contraste */
.text-primary {
  color: #073f8a !important;
}

.text-warning {
  color: #39ba20 !important;
}

.bg-primary {
  background-color: #073f8a !important;
}

.bg-warning {
  background-color: #39ba20 !important;
}

/* Scrollbar personalizado para el menú */
.menu-inner::-webkit-scrollbar-thumb {
  background-color: rgba(57, 186, 32, 0.3) !important;
}

.menu-inner::-webkit-scrollbar-thumb:hover {
  background-color: rgba(57, 186, 32, 0.5) !important;
}

/* ========================================
   ESTILOS PARA MODALES PERSONALIZADOS
   ======================================== */

/* Modal header con fondo azul oscuro */
.modal-header.bg-primary {
  background: linear-gradient(135deg, #073f8a 0%, #012967 100%) !important;
  border-bottom: 3px solid #39ba20 !important;
}

.modal-header .modal-title {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.modal-header .btn-close-white {
  filter: brightness(0) invert(1) !important;
}

/* Modal content */
.modal-content {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden !important;
}

.modal-body {
  padding: 24px !important;
}

.modal-footer {
  border-top: 1px solid #e0e0e0 !important;
  padding: 16px 24px !important;
}

/* Cards de opciones de pago */
.payment-option-card {
  transition: all 0.3s ease !important;
  border-width: 2px !important;
}

.payment-option-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 25px rgba(7, 63, 138, 0.2) !important;
  border-color: #073f8a !important;
}

.payment-option-card .avatar-initial {
  width: 60px !important;
  height: 60px !important;
  font-size: 24px !important;
}

.payment-option-card.disabled-card {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Formularios en modales */
.modal .form-label {
  color: #073f8a !important;
  font-weight: 600 !important;
}

.modal .form-control,
.modal .form-select {
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
}

.modal .form-control:focus,
.modal .form-select:focus {
  border-color: #39ba20 !important;
  box-shadow: 0 0 0 3px rgba(57, 186, 32, 0.2) !important;
}

.modal .input-group-text {
  border: 2px solid #e0e0e0 !important;
  border-right: none !important;
}

.modal .input-group .form-control {
  border-left: none !important;
}

/* Botones en modales */
.modal .btn-warning {
  background: linear-gradient(135deg, #39ba20 0%, #2fa619 100%) !important;
  border: none !important;
  color: #073f8a !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.modal .btn-warning:hover {
  background: linear-gradient(135deg, #2fa619 0%, #258c12 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(57, 186, 32, 0.4) !important;
}

.modal .btn-secondary {
  background-color: #6c757d !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
}

.modal .btn-secondary:hover {
  background-color: #5a6268 !important;
}

/* Backdrop del modal */
.modal-backdrop {
  background-color: rgba(7, 63, 138, 0.7) !important;
}

/* Avatar en modales */
.modal .avatar-lg {
  width: 70px !important;
  height: 70px !important;
}

.modal .avatar-initial.bg-warning {
  background: linear-gradient(135deg, #39ba20 0%, #2fa619 100%) !important;
}

/* Animación de entrada del modal */
.modal.fade .modal-dialog {
  transform: scale(0.9) translateY(-20px) !important;
  transition: transform 0.3s ease-out !important;
}

.modal.show .modal-dialog {
  transform: scale(1) translateY(0) !important;
}

/* Badge en modales */
.modal .badge.bg-warning {
  background: linear-gradient(135deg, #39ba20 0%, #2fa619 100%) !important;
  color: #073f8a !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
}

/* Spinner loading */
.modal .spinner-border {
  color: #073f8a !important;
}

/* ========================================
   RESPONSIVE - VERSIÓN MÓVIL
   ======================================== */

/* Ajustes para botones de acción en móvil */
@media (max-width: 768px) {
  /* Botones de acción apilados en móvil */
  .card-body .row.g-3 {
    margin: 0;
  }
  
  .card-body .row.g-3 > div {
    padding: 0.5rem;
  }
  
  /* Botones más pequeños en móvil */
  .btn {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  
  /* Modal más pequeño en móvil */
  .modal-dialog {
    margin: 10px !important;
  }
  
  .modal-content {
    border-radius: 8px !important;
  }
  
  /* Cards de servicios bancarios en móvil */
  .col-lg-3.col-md-6 {
    margin-bottom: 1rem;
  }
  
  /* Ajustar padding del contenido en móvil */
  .container-xxl {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Navbar más compacta en móvil */
  .navbar-nav-right {
    flex-wrap: wrap;
  }
  
  /* Menú lateral más compacto */
  .layout-menu {
    width: 100% !important;
  }
  
  /* Cards de opciones de pago en móvil */
  .payment-option-card {
    margin-bottom: 1rem;
  }
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 576px) {
  /* Botones aún más compactos */
  .btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  
  .btn i {
    font-size: 16px !important;
  }
  
  /* Modal full width en móviles pequeños */
  .modal-dialog {
    margin: 5px !important;
    max-width: calc(100% - 10px) !important;
  }
  
  /* Cards más compactas */
  .card-body {
    padding: 1rem !important;
  }
  
  /* Texto más pequeño en cards */
  .card-title {
    font-size: 1rem !important;
  }
  
  .card-text {
    font-size: 0.875rem !important;
  }
  
  /* Ajustar grid de servicios bancarios */
  .col-lg-3.col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  /* Modal de comisiones más compacto */
  #commissions-modal .card {
    margin-bottom: 0.75rem !important;
  }
  
  #commissions-modal .card-header {
    padding: 0.75rem !important;
  }
  
  #commissions-modal .card-body {
    padding: 0.75rem !important;
  }
  
  /* Ajustar iconos en móvil */
  .bx-md {
    font-size: 20px !important;
  }
}