/* ===== DaruPay x Bootstrap Overrides (PRO con Branding Dominante) ===== */

/* 1. Paleta y Variables de Diseño */
:root {
  /* VERDE DE MARCA PERSONALIZADO */
  --dp-green-500: #15D372; /* Verde principal solicitado */
  --dp-green-600: #12B964; /* Tonalidad más oscura para gradientes */

  --dp-transition: 0.25s ease;
}

/* 2. Estructura Principal del Header */
.dp-header {
  position: sticky; top: 0; z-index: 1030;
  transition: background-color var(--dp-transition);
  /* LÍNEA VERDE INFERIOR CON GRADIENTE */
  border-bottom: 2px solid transparent;
  background-clip: padding-box;
  border-image: linear-gradient(90deg, var(--dp-green-600), var(--dp-green-500)) 1;
}
.dp-navbar-blur {
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

/* 3. Theming (Dark & Light) sobre Bootstrap */
/* --- MODO OSCURO --- */
.dp-header[data-bs-theme="dark"] {
  background: #202A37;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
  --bs-tertiary-bg: rgba(255, 255, 255, 0.05);
  /* Aseguramos que el color del icono del toggler sea verde */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(21, 211, 114)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* --- MODO CLARO --- */
.dp-header[data-bs-theme="light"] {
  background: #E6E6E6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.08);
  --bs-tertiary-bg: rgba(0, 0, 0, 0.04);
  /* Aseguramos que el color del icono del toggler sea verde */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(21, 211, 114)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 4. Elementos Personalizados */
.dp-brand__logo { 
  height: 50px; 
  width: auto; 
  filter: none; 
}

/* NAVEGACIÓN PRINCIPAL: ¡TEXTO SIEMPRE VERDE! */
.navbar-nav .nav-link {
  font-weight: 600;
  position: relative;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  transition: color var(--dp-transition), background-color var(--dp-transition);
  color: var(--dp-green-500) !important; /* FORZAMOS EL COLOR VERDE */
}
/* Al pasar el cursor, aparece un fondo suave. El texto sigue verde. */
.navbar-nav .nav-link:hover {
  background-color: var(--bs-tertiary-bg);
  color: var(--dp-green-500) !important; /* Aseguramos que siga verde en hover */
}
/* El enlace activo tiene el fondo suave y el texto en negrita. */
.navbar-nav .nav-link.active {
  font-weight: 700;
  background-color: var(--bs-tertiary-bg);
  color: var(--dp-green-500) !important; /* Aseguramos que siga verde cuando está activo */
}

.navbar-toggler {
  border: 1px solid var(--bs-border-color-translucent);
  padding: 0.5rem 0.75rem;
}
.navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(21, 211, 114, 0.5); }

.vr {
  height: 25px;
  width: 1px;
  background-color: var(--bs-border-color-translucent);
}

/* 5. Botones Personalizados (CTA con Branding) */
.btn-dp, .btn-dp-ghost {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 999px;
  --bs-btn-padding-y: .6rem;
  --bs-btn-padding-x: 1.2rem;
  transition: all var(--dp-transition);
}

/* Botón Principal */
.btn-dp {
  color: #fff;
  background: linear-gradient(180deg, var(--dp-green-500), var(--dp-green-600));
  border: 1px solid transparent;
  box-shadow: 0 4px 14px rgba(21, 211, 114, .25);
}
.btn-dp:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(21, 211, 114, .35);
}

/* Botón Secundario (Fantasma) */
.btn-dp-ghost {
  color: var(--dp-green-500) !important; /* FORZAMOS EL COLOR VERDE */
  background-color: transparent;
  border: 1px solid var(--bs-border-color-translucent);
}
.btn-dp-ghost:hover {
  color: #fff !important; /* Se vuelve blanco en hover */
  background: linear-gradient(180deg, var(--dp-green-500), var(--dp-green-600));
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(21, 211, 114, .35);
}

/* 6. Botón de Icono (Theme Toggle) */
.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  padding: 0;
  border-radius: 50%;
  color: var(--dp-green-500); /* ICONOS SIEMPRE EN VERDE */
  border: 1px solid var(--bs-border-color-translucent); /* Añadimos borde para que se vea */
  background-color: var(--bs-tertiary-bg);
  transition: color var(--dp-transition), background-color var(--dp-transition), transform .2s ease, border-color var(--dp-transition);
}
.btn-icon:hover {
  color: var(--dp-green-500); /* Se mantiene verde */
  transform: scale(1.1); /* Efecto sutil de crecimiento */
  border-color: var(--dp-green-500); /* Borde también verde en hover */
}
.dp-header[data-bs-theme="dark"] .dp-icon-sun,
.dp-header[data-bs-theme="light"] .dp-icon-moon { display: none; }

/* 7. Menú Colapsado */
@media (max-width: 991.98px) {
  .navbar-collapse {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--bs-border-color-translucent);
    background-color: var(--bs-body-bg);
  }
  /* Enlaces en el menú móvil también verdes */
  .navbar-collapse .nav-link {
    color: var(--dp-green-500) !important;
  }
  .navbar-collapse .nav-link:hover {
    background-color: var(--bs-tertiary-bg);
  }
  .navbar-collapse .nav-link.active {
    font-weight: 700;
    background-color: var(--bs-tertiary-bg);
  }
}