/**
 * BOOTSTRAP COMPATIBILITY LAYER v2.0
 * ================================================
 * Archivo para asegurar compatibilidad entre Bootstrap 5.2.3 y Design System personalizado
 *
 * PROPÓSITO:
 * - Crear puente entre variables Bootstrap y sistema de tokens personalizado
 * - Preservar funcionalidad Bootstrap mientras permite personalización
 * - Evitar conflictos CSS y breaking changes en actualizaciones
 *
 * ORDEN DE CARGA: Bootstrap CDN → Compatibility Layer → Custom CSS
 *
 * MANTENIMIENTO:
 * - Actualizar variables cuando se actualice Bootstrap
 * - Revisar componentes sobrescritos en cada release
 * - Documentar cambios en CHANGELOG.md
 *
 * @version 2.0.0
 * @author Geoprocesamiento Online Team
 * @created 2025-07-18
 * @updated 2025-07-18
 */

/* ===== BOOTSTRAP VARIABLES BRIDGE (DESIGN TOKENS) ===== */
:root {
  /*
   * MAPEO DE VARIABLES BOOTSTRAP → DESIGN SYSTEM
   * Permite usar tokens personalizados manteniendo compatibilidad con Bootstrap
   * Fallbacks aseguran funcionamiento sin design-system.css
   */

  /* Variables semánticas principales */
  --bs-primary: var(--color-primary-500, #0d6efd);
  --bs-secondary: var(--color-secondary-500, #6c757d);
  --bs-success: var(--color-success-500, #198754);
  --bs-danger: var(--color-danger-500, #dc3545);
  --bs-warning: var(--color-warning-500, #ffc107);
  --bs-info: var(--color-info-500, #0dcaf0);
  --bs-light: var(--color-surface-variant, #f8f9fa);
  --bs-dark: var(--color-on-surface, #212529);

  /* Sistema de espaciado matemático (8px base) */
  --bs-gutter-x: var(--space-6, 1.5rem);
  --bs-gutter-y: var(--space-4, 1rem);

  /* Sistema de bordes redondeados */
  --bs-border-radius: var(--radius-md, 0.375rem);
  --bs-border-radius-sm: var(--radius-sm, 0.25rem);
  --bs-border-radius-lg: var(--radius-lg, 0.5rem);
  --bs-border-radius-xl: var(--radius-xl, 1rem);
  --bs-border-radius-pill: var(--radius-full, 50rem);

  /* Sistema tipográfico */
  --bs-font-family-base: var(--font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --bs-font-size-base: var(--font-size-base, 1rem);
  --bs-line-height-base: var(--line-height-normal, 1.5);
  --bs-font-weight-normal: var(--font-weight-normal, 400);
  --bs-font-weight-bold: var(--font-weight-bold, 700);

  /* Z-index system */
  --bs-zindex-dropdown: var(--z-dropdown, 1000);
  --bs-zindex-sticky: var(--z-sticky, 1020);
  --bs-zindex-fixed: var(--z-fixed, 1030);
  --bs-zindex-modal-backdrop: var(--z-modal-backdrop, 1040);
  --bs-zindex-modal: var(--z-modal, 1050);
  --bs-zindex-popover: var(--z-popover, 1070);
  --bs-zindex-tooltip: var(--z-tooltip, 1080);

  /* Sombras y efectos */
  --bs-box-shadow: var(--shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
  --bs-box-shadow-sm: var(--shadow-xs, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
  --bs-box-shadow-lg: var(--shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175));
}

/* ===== COMPONENTES BOOTSTRAP MEJORADOS ===== */
/*
 * ESTRATEGIA: Preservar funcionalidad Bootstrap core mientras agregamos mejoras
 * - !important usado solo cuando es necesario para override específico
 * - Fallbacks para asegurar funcionamiento sin design system
 * - Compatibilidad con Bootstrap 5.x futuras versiones
 */

/*
 * NAVBAR RULES ELIMINADAS - Dejar que Bootstrap funcione naturalmente
 * Las reglas de navbar ahora están solo en components/navbar.css
 * para evitar conflictos y mantener Bootstrap puro
 */

/* Botones - Arquitectura profesional preservando Bootstrap */
.btn {
  /* Mantener transiciones Bootstrap pero mejorar performance */
  transition: all 0.15s ease-in-out;
  border-radius: var(--bs-border-radius);
  /* Mejorar contraste para accesibilidad */
  font-weight: var(--bs-font-weight-normal);
}

.btn:hover,
.btn:focus {
  /* Evitar efectos excesivos respetando Bootstrap */
  transform: none;
}

/* Focus visible mejorado para accesibilidad */
.btn:focus-visible {
  outline: 2px solid var(--color-primary-500, #0d6efd);
  outline-offset: 2px;
}

/* Cards - Compatibilidad total + mejoras visuales */
.card {
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--color-outline-variant, rgba(0,0,0,.125));
  /* Mejorar sombra sutil */
  box-shadow: var(--bs-box-shadow);
}

.card-body {
  padding: var(--space-6, 1.5rem);
}

/* Formularios - Compatibilidad total con validación mejorada */
.form-control {
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--color-outline-variant, #ced4da);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  border-color: var(--color-primary-500, #86b7fe);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Mejorar estados de validación */
.form-control:invalid {
  border-color: var(--color-danger-500, #dc3545);
}

.form-control:valid {
  border-color: var(--color-success-500, #198754);
}

/* Input Groups mejorados */
.input-group-text {
  background-color: var(--color-surface-variant, #e9ecef);
  border: 1px solid var(--color-outline-variant, #ced4da);
  color: var(--color-on-surface-variant, #6c757d);
}

/* Dropdowns - Funcionalidad Bootstrap preservada + mejoras UX */
.dropdown-menu {
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--color-outline-variant, rgba(0,0,0,.15));
  box-shadow: var(--bs-box-shadow-lg);
  /* Mejorar animación de entrada */
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Mejorar hover en dropdown items */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-surface-variant, #e9ecef);
}

/* ===== RESPONSIVE FIXES ===== */
/* Reglas de navbar móvil eliminadas para mantener Bootstrap puro */
@media (max-width: 991.98px) {
  /* Solo ajustes que no interfieren con Bootstrap navbar */
}

/* ===== UTILITY CLASSES BOOTSTRAP ===== */
/* Asegurar que utilities Bootstrap funcionen correctamente */

/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

/* Flex utilities */
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }

/* Spacing utilities - Preservar Bootstrap */
.m-0 { margin: 0 !important; }
.p-0 { padding: 0 !important; }
.mb-3 { margin-bottom: var(--space-6, 1rem) !important; }
.me-2 { margin-right: var(--space-2, 0.5rem) !important; }
.ms-2 { margin-left: var(--space-2, 0.5rem) !important; }

/* Text utilities */
.text-center { text-align: center !important; }
.text-end { text-align: end !important; }
.text-start { text-align: start !important; }

/* Color utilities */
.text-primary { color: var(--color-primary-500) !important; }
.text-secondary { color: var(--color-secondary-500) !important; }
.text-success { color: var(--color-success-500) !important; }
.text-danger { color: var(--color-danger-500) !important; }
.text-warning { color: var(--color-warning-500) !important; }
.text-info { color: var(--color-info-500) !important; }
.text-muted { color: var(--color-on-surface-variant) !important; }

.bg-primary { background-color: var(--color-primary-500) !important; }
.bg-secondary { background-color: var(--color-secondary-500) !important; }
.bg-light { background-color: var(--color-surface-variant) !important; }

/* ===== THEME DARK MODE COMPATIBILITY ===== */
[data-bs-theme="dark"] {
  --color-surface: #212529;
  --color-surface-variant: #343a40;
  --color-on-surface: #fff;
  --color-on-surface-variant: #6c757d;
  --color-outline-variant: #495057;
}

[data-bs-theme="dark"] .navbar {
  background-color: var(--color-surface) !important;
  border-color: var(--color-outline-variant) !important;
}

[data-bs-theme="dark"] .card {
  background-color: var(--color-surface-variant);
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface);
}

[data-bs-theme="dark"] .form-control {
  background-color: var(--color-surface-variant);
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface);
}

[data-bs-theme="dark"] .input-group-text {
  background-color: var(--color-surface);
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface);
}

/* ===== COMPONENTES BOOTSTRAP ADICIONALES ===== */
/* Componentes encontrados en las páginas que necesitan compatibilidad */

/* Badges - Badges personalizados y Bootstrap estándar */
.badge {
  font-size: 0.75em;
  font-weight: var(--bs-font-weight-bold);
  border-radius: var(--bs-border-radius-sm);
}

.badge-status {
  padding: 0.375rem 0.75rem;
}

.badge-credits,
.tool-credit-value,
.tool-pro-credit-value {
  color: var(--color-on-surface) !important;
  background-color: var(--color-surface-variant) !important;
}

.pro-badge,
.premium-badge {
  background-color: var(--color-warning-500) !important;
  color: var(--color-on-surface) !important;
}

/* List Groups - Listas con estilos Bootstrap */
.list-group {
  border-radius: var(--bs-border-radius);
}

.list-group-item {
  border: 1px solid var(--color-outline-variant, rgba(0,0,0,.125));
  background-color: var(--color-surface, #fff);
}

.list-group-flush .list-group-item {
  border-left: 0;
  border-right: 0;
}

.list-group-flush .list-group-item:first-child {
  border-top: 0;
}

.list-group-flush .list-group-item:last-child {
  border-bottom: 0;
}

/* Alerts - Alertas Bootstrap con estilos personalizados */
.alert {
  border-radius: var(--bs-border-radius);
  border: 1px solid transparent;
  padding: 1rem;
}

.alert-info {
  color: var(--color-info-700, #055160);
  background-color: var(--color-info-50, #cff4fc);
  border-color: var(--color-info-200, #9eeaf9);
}

/* Progress bars - Barras de progreso */
.progress {
  height: 1rem;
  background-color: var(--color-surface-variant, #e9ecef);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}

.progress-bar {
  background-color: var(--color-primary-500, #0d6efd);
  transition: width 0.6s ease;
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  0% { background-position-x: 1rem; }
}

/* Accordions - Acordeones Bootstrap */
.accordion {
  border-radius: var(--bs-border-radius);
}

.accordion-item {
  border: 1px solid var(--color-outline-variant, rgba(0,0,0,.125));
}

.accordion-item:first-of-type {
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
}

.accordion-item:last-of-type {
  border-bottom-left-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}

.accordion-button {
  background-color: var(--color-surface, #fff);
  border: none;
  border-radius: 0;
  color: var(--color-on-surface, #212529);
  font-weight: var(--bs-font-weight-normal);
}

.accordion-button:hover {
  background-color: var(--color-surface-variant, #e9ecef);
}

.accordion-button:not(.collapsed) {
  background-color: var(--color-primary-50, #e7f1ff);
  color: var(--color-primary-600, #0a58ca);
}

.accordion-body {
  padding: 1rem 1.25rem;
}

/* Modals - Modales Bootstrap mejorados */
.modal-content {
  border-radius: var(--bs-border-radius-lg);
  border: 1px solid var(--color-outline-variant, rgba(0,0,0,.2));
  box-shadow: var(--bs-box-shadow-lg);
}

.modal-header {
  border-bottom: 1px solid var(--color-outline-variant, #dee2e6);
  border-top-left-radius: var(--bs-border-radius-lg);
  border-top-right-radius: var(--bs-border-radius-lg);
}

.modal-footer {
  border-top: 1px solid var(--color-outline-variant, #dee2e6);
  border-bottom-left-radius: var(--bs-border-radius-lg);
  border-bottom-right-radius: var(--bs-border-radius-lg);
}

.modal-backdrop {
  background-color: rgba(0,0,0,0.5);
}

/* Tabs/Pills - Navegación por pestañas */
.nav-tabs {
  border-bottom: 1px solid var(--color-outline-variant, #dee2e6);
}

.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
}

.nav-tabs .nav-link:hover {
  border-color: var(--color-outline-light, #e9ecef);
}

.nav-tabs .nav-link.active {
  color: var(--color-primary-600, #495057);
  background-color: var(--color-surface, #fff);
  border-color: var(--color-outline-variant, #dee2e6);
  border-bottom-color: var(--color-surface, #fff);
}

/* Tooltips - Tooltips Bootstrap */
.tooltip {
  font-size: 0.875rem;
  z-index: var(--bs-zindex-tooltip);
}

.tooltip .tooltip-inner {
  background-color: var(--color-on-surface, #000);
  color: var(--color-surface, #fff);
  border-radius: var(--bs-border-radius);
  padding: 0.25rem 0.5rem;
}

/* Spinners - Indicadores de carga */
.spinner-border {
  width: 2rem;
  height: 2rem;
  border: 0.25em solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

/* ===== CUSTOM BUTTON CLASSES ===== */
/* Clases de botones personalizadas compatibles con Bootstrap */

.btn-tool-primary {
  color: #fff;
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

.btn-tool-primary:hover {
  color: #fff;
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.btn-tool-primary:focus,
.btn-tool-primary.focus {
  color: #fff;
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}

.btn-tool-secondary {
  color: #fff;
  background-color: var(--color-secondary-500);
  border-color: var(--color-secondary-500);
}

.btn-tool-secondary:hover {
  color: #fff;
  background-color: var(--color-secondary-600);
  border-color: var(--color-secondary-600);
}

.btn-tool-outline {
  color: var(--color-primary-500);
  border-color: var(--color-primary-500);
  background-color: transparent;
}

.btn-tool-outline:hover {
  color: #fff;
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

/* Tool filter buttons */
.tool-filter-btn {
  background-color: var(--color-surface-variant);
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface-variant);
}

.tool-filter-btn.active,
.tool-filter-btn:hover {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: #fff;
}

/* ===== CUSTOM CLASSES ESPECÍFICAS DE LA APP ===== */
/* Clases encontradas en templates que necesitan compatibilidad Bootstrap */

/* Tool cards - DUPLICADO ELIMINADO */
/* NOTA: .tool-card ahora está definida en design-system.css como fuente única */

/* Tool alerts - MOVIDAS A DESIGN-SYSTEM.CSS */
/* NOTA: .tool-alert-info y .tool-pro-alert-info ahora están en design-system.css */

/* Format badges específicos */
.tool-format-badge {
  background-color: var(--color-secondary-500) !important;
  color: #fff !important;

.tool-pro-alert-info {
  color: var(--color-warning-700, #664d03);
  background-color: var(--color-warning-50, #fff3cd);
  border-color: var(--color-warning-200, #ffe69c);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
}

/* Format badges específicos */
.tool-format-badge {
  background-color: var(--color-secondary-500) !important;
  color: #fff !important;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--bs-border-radius-sm);
}

/* Step components para herramientas */
.step-circle {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-primary-500);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--bs-font-weight-bold);
}

/* Modal específicos de la app */
.modal-pro-header {
  background-color: var(--color-warning-500);
  color: var(--color-on-surface);
  border-bottom: 1px solid var(--color-warning-600);
}

.btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Breadcrumbs mejorados */
.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin-bottom: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: var(--color-on-surface-variant, #6c757d);
}

/* ===== RESPONSIVE FIXES ADICIONALES ===== */
@media print {
  .navbar,
  .footer,
  .btn,
  .dropdown {
    display: none !important;
  }
}