/**
 * TEMA AZUL GLOBAL
 * Estilos coherentes en tonos azules para toda la aplicación
 */

/* ========================================
   COLORES TEMÁTICOS
   ======================================== */
:root {
  /* Paleta azul principal */
  --theme-primary: var(--primary-700);
  --theme-secondary: var(--primary-600);
  --theme-light: var(--primary-100);
  --theme-dark: var(--primary-800);
  --theme-contrast: white;
  --theme-hover: var(--primary-800);
  --theme-active: var(--primary-900);
  --theme-muted: var(--primary-200);
  --theme-border: var(--primary-300);
  --theme-shadow: rgba(29, 78, 216, 0.15);
}

/* ========================================
   ELEMENTOS GLOBALES
   ======================================== */

/* Enlaces */
a {
  color: var(--theme-secondary);
}

a:hover {
  color: var(--theme-dark);
}

/* Selección de texto */
::selection {
  background-color: var(--theme-light);
  color: var(--theme-dark);
}

/* Resaltado */
mark {
  background-color: var(--theme-light);
  color: var(--theme-dark);
}

/* Bordes de enfoque */
:focus-visible {
  outline: 3px solid var(--theme-muted);
  outline-offset: 2px;
}

/* ========================================
   BOTONES
   ======================================== */

/* Botones primarios */
.btn-primary,
.btn-primary-modern {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-contrast) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary-modern:hover,
.btn-primary-modern:focus {
  background-color: var(--theme-hover) !important;
  border-color: var(--theme-hover) !important;
}

.btn-primary:active,
.btn-primary-modern:active {
  background-color: var(--theme-active) !important;
  border-color: var(--theme-active) !important;
}

/* Botones secundarios */
.btn-outline-primary,
.btn-secondary-modern {
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-secondary-modern:hover,
.btn-secondary-modern:focus {
  background-color: var(--theme-primary) !important;
  color: var(--theme-contrast) !important;
}

/* Botones flotantes */
.btn-flotante {
  background-color: var(--theme-primary) !important;
}

.btn-flotante:hover {
  background-color: var(--theme-hover) !important;
}

/* Botones de contacto */
.btn-contacto {
  background-color: var(--theme-primary) !important;
}

.btn-contacto:hover {
  background-color: var(--theme-hover) !important;
}

/* ========================================
   COMPONENTES
   ======================================== */

/* Navegación */
.navbar {
  background-color: white;
  box-shadow: 0 4px 10px var(--theme-shadow);
}

.nav-link {
  color: var(--gray-700) !important;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--theme-secondary) !important;
}

.nav-link.active {
  color: var(--theme-primary) !important;
  font-weight: 600;
}

/* Dropdown */
.dropdown-menu {
  border-color: var(--theme-muted) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--theme-primary) !important;
  color: var(--theme-contrast) !important;
}

/* Cards */
.card {
  border-color: var(--theme-muted);
}

.card-header {
  background-color: var(--theme-light);
  border-bottom-color: var(--theme-muted);
}

.card-modern {
  box-shadow: 0 4px 10px var(--theme-shadow);
}

.card-modern:hover {
  box-shadow: 0 10px 25px var(--theme-shadow);
}

/* Badges */
.badge-primary {
  background-color: var(--theme-primary);
  color: var(--theme-contrast);
}

/* Alerts */
.alert-primary {
  background-color: var(--theme-light);
  border-color: var(--theme-muted);
  color: var(--theme-dark);
}

/* Progress bars */
.progress-bar {
  background-color: var(--theme-primary);
}

/* Forms */
.form-control:focus {
  border-color: var(--theme-secondary);
  box-shadow: 0 0 0 0.25rem var(--theme-shadow);
}

/* Checkboxes & radios */
.form-check-input:checked {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

/* Tables */
.table {
  border-color: var(--theme-muted);
}

.table-primary {
  background-color: var(--theme-light);
}

.table-hover tbody tr:hover {
  background-color: var(--theme-light);
}

/* Tabs & pills */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  background-color: var(--theme-primary);
  color: var(--theme-contrast);
  border-color: var(--theme-primary);
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
  border-color: var(--theme-muted);
  color: var(--theme-secondary);
}

/* Pagination */
.page-item.active .page-link {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.page-link {
  color: var(--theme-secondary);
}

.page-link:hover {
  color: var(--theme-dark);
  background-color: var(--theme-light);
}

/* ========================================
   COMPONENTES PERSONALIZADOS
   ======================================== */

/* Hero */
.hero-modern {
  background: linear-gradient(135deg, var(--theme-light) 0%, white 100%);
}

/* Secciones alternantes */
.section-alt {
  background-color: var(--theme-light);
}

/* Tablas de precios */
.tabla-precios thead th {
  background-color: var(--theme-primary);
  color: white;
}

.tabla-precios tbody tr:nth-child(odd) {
  background-color: var(--theme-light);
}

/* Testimoniales */
.testimonial-card {
  border-left: 4px solid var(--theme-primary);
}

/* FAQ */
.faq-question {
  color: var(--theme-primary);
}

.faq-item.active .faq-question {
  background-color: var(--theme-light);
}

/* Breadcrumb */
.breadcrumb-item a {
  color: var(--theme-secondary);
}

/* ========================================
   ELEMENTOS PERSONALIZADOS
   ======================================== */

/* Sombras temáticas */
.shadow-theme {
  box-shadow: 0 5px 15px var(--theme-shadow);
}

.shadow-theme-sm {
  box-shadow: 0 2px 8px var(--theme-shadow);
}

.shadow-theme-lg {
  box-shadow: 0 10px 30px var(--theme-shadow);
}

/* Bordes temáticos */
.border-theme {
  border-color: var(--theme-border) !important;
}

/* Fondos temáticos */
.bg-theme-primary {
  background-color: var(--theme-primary) !important;
  color: white !important;
}

.bg-theme-light {
  background-color: var(--theme-light) !important;
}

.bg-theme-gradient {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  color: white;
}

/* Textos temáticos */
.text-theme {
  color: var(--theme-primary) !important;
}

.text-theme-secondary {
  color: var(--theme-secondary) !important;
}

/* ========================================
   EFECTOS Y TRANSICIONES
   ======================================== */

/* Hover suave */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px var(--theme-shadow);
}

/* Efecto de pulso */
.pulse-theme {
  position: relative;
}

.pulse-theme::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--theme-primary);
  opacity: 0.5;
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.2;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

/* ========================================
   SOBRESCRITURAS DE BOOTSTRAP
   ======================================== */

/* Ajustes para colores de Bootstrap */
.bg-primary {
  background-color: var(--theme-primary) !important;
}

.text-primary {
  color: var(--theme-primary) !important;
}

.border-primary {
  border-color: var(--theme-primary) !important;
}

.btn-success, .btn-info, .btn-warning, .btn-danger {
  color: white !important;
}