/* =================================================================================================== */
/*                                             vault                                                  */
/* =================================================================================================== */

/* ===== GENERAL ===== */
body.dark-mode {
  background-color: #060615;
  color: #f1f1f1;
}

/* ===== MEDIA LUNA OSCURA GRADUAL ===== */
body.dark-mode .media-luna {
  background: linear-gradient(to bottom, #1e3a8a, #020617 70%);
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
}

/* ===== TEXTOS ===== */
body.dark-mode h1,
body.dark-mode h3,
body.dark-mode label,
body.dark-mode .card-title,
body.dark-mode .card-text,
body.dark-mode .form-label {
  color: #f4f4f4 !important;
}

/* ===== INPUTS & BUSCADOR ===== */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #1f2937 !important;
  color: #f9f9f9 !important;
  border: 1px solid #4b5563;
}

body.dark-mode input::placeholder {
  color: #a1a1aa;
}

/* ===== BOTONES ===== */
body.dark-mode .btn {
  background-color: #3b82f6;
  color: white;
  border: none;
}

body.dark-mode .btn:hover {
  background-color: #2563eb;
}

/* ===== CATEGORÍAS ===== */
body.dark-mode .category-container {
  background-color: #111827;
  color: #f3f4f6;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

body.dark-mode .category-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.35);
}

/* ===== TARJETAS DE CREDENCIALES ===== */
body.dark-mode .credential-card {
  background-color: #0f172a;
  color: #f9fafb;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
}

body.dark-mode .credential-card:hover {
  transform: translateY(-5px);
}

/* ===== PROGRESS BAR ===== */
body.dark-mode .progress {
  background-color: #1e293b;
}

body.dark-mode .progress-bar {
  color: white;
}

/* ===== MODALES (PIN, EDITAR, etc.) ===== */
body.dark-mode .modal-content {
  background-color: #111827;
  color: white;
  border: 1px solid #334155;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: #1f2937;
}

/* ===== BARRA DE BÚSQUEDA ===== */
body.dark-mode .input-group-text {
  background-color: #1f2937;
  color: #9ca3af;
  border: 1px solid #374151;
}

/* ===== ALERTAS / BANNER DE LÍMITE ===== */
body.dark-mode .alert {
  background-color: #1e40af;
  color: #e0e7ff;
  border: none;
}

/* ===== ICONOS ===== */
body.dark-mode i {
  color: #cbd5e1;
}

/* ===== BORDES OPCIONALES ===== */
body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode input,
body.dark-mode .form-control {
  border-radius: 8px;
}

/* =================================================================================================== */
/*                                             header                                                  */
/* =================================================================================================== */

body.dark-mode .premium-dropdown p {
  color: #f1f5f9 !important;
}

body.dark-mode .premium-dropdown {
  transition: background-color 0.3s, color 0.3s;
}

body.dark-mode header {
  background: rgba(15, 15, 25, 0.85);
  border: 1px solid rgba(100, 149, 237, 0.6);
  box-shadow: 0 0 10px rgba(100, 149, 237, 0.3);
}

body.dark-mode .navbar-brand {
  color: #8ab4f8 !important;
}

body.dark-mode .menu-icon,
body.dark-mode .header-center a.nav-link,
body.dark-mode #logoutBtn,
body.dark-mode #premium-link {
  color: #e0e0e0;
}

body.dark-mode .dropdown-menu {
  background: #1e1e2f;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

body.dark-mode .dropdown-item {
  color: #e0e0e0;
}

body.dark-mode .dropdown-item:hover {
  background-color: #2c2c3a;
}

body.dark-mode #logoutBtn {
  border: 1px solid #ccc;
}

body.dark-mode #logoutBtn:hover {
  background-color: #e74c3c;
  color: #fff;
}

body.dark-mode #premium-link {
  color: #8ab4f8;
}

/* Submenú del plan (dropdown del upgrade) */
body.dark-mode .premium-dropdown,
body.dark-mode .dropdown-menu {
  background-color: #1a1a2e !important; /* fondo más visible */
  color: #f1f5f9 !important;            /* texto claro */
}

body.dark-mode .premium-dropdown p,
body.dark-mode .dropdown-menu p,
body.dark-mode .dropdown-menu span {
  color: #e0e7ff !important;
}

body.dark-mode .dropdown-item {
  color: #f1f1f1 !important;
}

body.dark-mode .dropdown-item:hover {
  background-color: #2c2c3a !important;
}
/* ========================== */
/* 🌙 Modo Oscuro: Modal Plan */
/* ========================== */

body.dark-mode #managePlanModal .modal-content {
  background-color: #111827;
  color: #e0e7ff;
  border: 1px solid #334155;
  box-shadow: 0 8px 20px rgba(0, 229, 255, 0.1);
}

body.dark-mode #managePlanModal .modal-title {
  color: #f1f5f9;
}

body.dark-mode #managePlanModal .text-center h6,
body.dark-mode #managePlanModal .text-primary {
  color: #cbd5e1;
}

body.dark-mode #managePlanModal .progress {
  background-color: #1f2937;
}

body.dark-mode #managePlanModal .progress-bar {
  background-color: #10b981;
  color: #ffffff;
}

/* Uso actual de credenciales */
body.dark-mode #usageCount {
  color: #93c5fd; /* azul claro visible */
  font-weight: 500;
  display: inline-block;
  margin-top: 4px;
}

/* Botón Cancelar Suscripción */
body.dark-mode #cancelSubscriptionBtn {
  background-color: #ffffff84;
  color: #d81d1d;
  border: none;
}

body.dark-mode #cancelSubscriptionBtn:hover {
  background-color: #d81d1d;
  color: #fff;
}

/* Botones de planes */
body.dark-mode #managePlanModal .btn-outline-secondary,
body.dark-mode #managePlanModal .btn-outline-warning,
body.dark-mode #managePlanModal .btn-outline-success {
  background-color: transparent;
  color: #f1f5f9;
  border: 1px solid #64748b;
  transition: all 0.2s ease;
}

/* Hover individual por plan */
body.dark-mode #managePlanModal .btn-outline-secondary:hover {
  background-color: #facc15; /* Amarillo para Básico */
  color: #000;
  border-color: #facc15;
}

body.dark-mode #managePlanModal .btn-outline-warning:hover {
  background-color: #f97316; /* Naranja para Pro */
  color: #fff;
  border-color: #f97316;
}

body.dark-mode #managePlanModal .btn-outline-success:hover {
  background-color: #22c55e; /* Verde para Extra */
  color: #fff;
  border-color: #22c55e;
}

/* Texto final de cambio de plan */
body.dark-mode #managePlanModal .modal-body small {
  color: #cbd5e1;
}

/* Link de beneficios */
body.dark-mode #managePlanModal .modal-body a {
  color: #38bdf8;
  text-decoration: underline;
}

body.dark-mode #managePlanModal .modal-body a:hover {
  color: #0ea5e9;
}

body.dark-mode #managePlanModal .modal-body p.text-muted {
  color: #93c5fd !important; /* azul claro visible en fondo oscuro */
  font-weight: 500;
}


/* =================================================================================================== */
/*                                             footer                                                  */
/* =================================================================================================== */

body.dark-mode .page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.dark-mode .page-wrapper main {
  flex: 1;
}

body.dark-mode footer {
  background: rgba(20, 20, 30, 0.9);
  box-shadow: 0 -4px 8px rgba(0, 229, 255, 0.2);
  border-top: 1px solid rgba(0, 229, 255, 0.3);
  padding: 10px 0;
  text-align: center;
  margin-top: auto;
  width: 100%;
}

body.dark-mode footer .copy-btn {
  color: #6dbfff;
}

body.dark-mode footer .copy-btn:hover {
  color: #00c8ff;
}

/* =================================================================================================== */
/*                                          Generador de Contraseñas                                   */
/* =================================================================================================== */

body.dark-mode .container-principal {
  background: rgba(33, 37, 41, 0.95);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

body.dark-mode .titulo-principal {
  color: #f8f9fa;
}

body.dark-mode .flotante {
  background: #2c3038;
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
}

body.dark-mode .input-password {
  background-color: #364153;
  color: #ffffff;
}

body.dark-mode .btn-copiar {
  background-color: #0d6efd;
  color: #fff;
}

body.dark-mode .btn-copiar:hover {
  background-color: #0b5ed7;
}

body.dark-mode summary {
  color: #6ea8fe;
}

body.dark-mode summary:hover {
  color: #9ec5fe;
}


/* =================================================================================================== */
/*                                       verificadorr de Contraseñas                                   */
/* =================================================================================================== */