/* =========================================================================
   1. DECLARACIÓN DE LA TIPOGRAFÍA GLOBAL (Open Sans) - SECCIÓN AÑADIDA
   ========================================================================= */

/* --- Normal (no cursiva) --- */

/* Light (Peso 300) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/open-sans-v43-latin_latin-ext-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular (Peso 400) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/opensans-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium (Peso 500) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/open-sans-v43-latin_latin-ext-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold (Peso 600) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/open-sans-v43-latin_latin-ext-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold (Peso 700) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/open-sans-v43-latin_latin-ext-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ExtraBold (Peso 800) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/open-sans-v43-latin_latin-ext-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* --- Cursiva (Italic) --- */

/* Regular Italic (Peso 400 Cursiva) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/open-sans-v43-latin_latin-ext-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Light Italic (Peso 300 Cursiva) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/open-sans-v43-latin_latin-ext-300italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Medium Italic (Peso 500 Cursiva) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/open-sans-v43-latin_latin-ext-500italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* SemiBold Italic (Peso 600 Cursiva) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/open-sans-v43-latin_latin-ext-600italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Bold Italic (Peso 700 Cursiva) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/open-sans-v43-latin_latin-ext-700italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ExtraBold Italic (Peso 800 Cursiva) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/open-sans-v43-latin_latin-ext-800italic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}


/* =========================================================================
   RESET BÁSICO / TIPOGRAFÍA GLOBAL
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif; /* <-- ¡MODIFICADO PARA USAR OPEN SANS! */
  background: #ffffff; /* fondo blanco */
  color: #333; /* texto oscuro */
  line-height: 1.5;
}

/* Container genérico */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

h1, h2, h3, h4, h5 {
  font-weight: 500;
}

/* =========================================================================
   NAVBAR
   ========================================================================= */
.navbar {
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  color: #007bff !important;
}
.nav-link {
  color: #555 !important;
  transition: color 0.2s;
}
.nav-link:hover {
  color: #007bff !important;
}
.dropdown-menu {
  background: rgba(255, 255, 255, 0.3); /* Ajusta la transparencia: 0.3 => 30% opaco */
  backdrop-filter: blur(10px); /* Efecto desenfoque: 10px para ser notorio */
  border: none; /* Quita borde sólido gris */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);/* Sombra sutil */
  border-radius: 8px; /* esquinas redondeadas */
  z-index: 1050;
  /* Animación de despliegue “suave” */
  transform: translateY(10px) scale(0.95);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.3s cubic-bezier(0.19,1,0.22,1),
    opacity 0.3s cubic-bezier(0.19,1,0.22,1),
    visibility 0.3s cubic-bezier(0.19,1,0.22,1);
}
/* Al estar visible el dropdown, se restablecen escala y opacidad */
.dropdown-menu.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}
/* Ítems del submenú con fondo transparente en hover */
.dropdown-item {
  color: #333;
  background: transparent;
  transition: background-color 0.2s ease;
}
.dropdown-item:hover {
  background-color: rgba(0,0,0,0.1);
}

/* =========================================================================
   BOTONES (Overrides de Bootstrap para estilo outline/futurista)
   ========================================================================= */
.btn-primary {
  background-color: #fff !important;
  color: #007bff !important;
  border: 1px solid #007bff !important;
}
.btn-primary:hover {
  background-color: #007bff !important;
  color: #fff !important;
}

.btn-success {
  background-color: #fff !important;
  color: #28a745 !important;
  border: 1px solid #28a745 !important;
}
.btn-success:hover {
  background-color: #28a745 !important;
  color: #fff !important;
}

.btn-danger {
  background-color: #fff !important;
  color: #dc3545 !important;
  border: 1px solid #dc3545 !important;
}
.btn-danger:hover {
  background-color: #dc3545 !important;
  color: #fff !important;
}

.btn-info {
  background-color: #fff !important;
  color: #17a2b8 !important;
  border: 1px solid #17a2b8 !important;
}
.btn-info:hover {
  background-color: #17a2b8 !important;
  color: #fff !important;
}

/* Estilo específico para el botón de variantes */
.btn-variants {
  background-color: #17a2b8 !important;
  color: #fff !important;
  border: 1px solid #17a2b8 !important;
}
.btn-variants:hover {
  background-color: #138496 !important;
  color: #fff !important;
  border: 1px solid #138496 !important;
}

.btn-secondary {
  background-color: #fff !important;
  color: #6c757d !important;
  border: 1px solid #6c757d !important;
}
.btn-secondary:hover {
  background-color: #6c757d !important;
  color: #fff !important;
}

.btn-warning {
  background-color: #fff !important;
  color: #ffc107 !important;
  border: 1px solid #ffc107 !important;
}
.btn-warning:hover {
  background-color: #ffc107 !important;
  color: #fff !important;
}

/* =========================================================================
   FORM CONTROLS
   ========================================================================= */
.form-control {
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
footer.bg-dark {
  background-color: #1b1b1b !important;
}
footer.bg-dark .text-white {
  color: #f1f1f1 !important;
}

/* =========================================================================
   SECCIÓN TABLE vs. CARDS EN FUNCIÓN DEL ANCHO
   ========================================================================= */
/* 1) Desktop: mostramos la tabla y ocultamos las cards */
.desktop-table {
  display: block;
}
.mobile-cards {
  display: none;
}

@media (max-width: 767px) {
  /* 2) Mobile: mostramos las cards, ocultamos la tabla */
  .desktop-table {
    display: none;
  }
  .mobile-cards {
    display: block;
  }
}

/* =========================================================================
   EFECTO GLASS / CRISTAL PARA TABLE & CARDS
   ========================================================================= */

/* ======== TABLAS ======== */
.table {
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255,255,255,0.4); /* 0.4 => 40% opaco, más transparente */
  backdrop-filter: blur(10px);  /* sube a 10px para mayor desenfoque */
  border-radius: 10px;
  border: none;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.table thead th {
  background: rgba(255,255,255,0.6);
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.table th, .table td {
  vertical-align: middle;
  border-top: none !important;
  color: #333;
  padding: 0.75rem;
}

.table tbody tr:last-child td {
  border-bottom: none;
}


.table-hover tbody tr:hover {
  background-color: rgba(255,255,255,0.3) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.table-striped tbody tr:nth-of-type(even) {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.table-bordered th, .table-bordered td {
  border: 1px solid rgba(0,0,0,0.1) !important;
}

/* ======== CARDS ======== */
.card {
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
}



.card-img-top {
  object-fit: cover;
  height: 200px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.card-body {
  color: #333;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card-text {
  flex-grow: 1;
}

.badge-info {
  background-color: #17a2b8;
}

.variants-mobile-block {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 0.5rem;
  display: none; /* oculto por defecto */
}

.collapse {
  transition: height 0.3s ease !important; /* anim de bootstrap */
}

/* =========================================================================
   Estilos para resaltar el estado
   ========================================================================= */
.estado-procesando {
  color: #ff9800; /* Naranja */
  font-weight: 600;
}

.estado-completado {
  color: #4caf50; /* Verde */
  font-weight: 600;
}

.estado-cancelado {
  color: #f44336; /* Rojo */
  font-weight: 600;
}

/* ========================================
   TRANSICIONES PARA ELEMENTOS COLAPSABLES
   ======================================== */

/* Transición suave para el icono chevron en secciones colapsables */
.fa-chevron-down {
  transition: transform 0.3s ease;
}

/* ========================================
   BOTONES PRIMARIOS (Global)
   ======================================== */

/* Botón primario usado en todo el sitio */
.btn-primario {
  border: 1px solid #000;
  background-color: transparent;
  color: #000;
  padding: 10px 24px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
}

.btn-primario:hover {
  background-color: #000;
  color: #fff;
}

/* Botón primario invertido (fondo negro por defecto) */
.btn-primario-inverse {
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  padding: 10px 24px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
}

.btn-primario-inverse:hover {
  background-color: transparent;
  color: #000;
}

/* Botón outline secundario (gris) - Estilo Bootstrap pero forma btn-primario */
.btn-custom-outline-secondary {
  border: 1px solid #6c757d;
  background-color: transparent;
  color: #6c757d;
  padding: 10px 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 0;
}

.btn-custom-outline-secondary:hover {
  background-color: #6c757d;
  color: #fff;
}

/* Botón outline danger (rojo) - Estilo Bootstrap pero forma btn-primario */
.btn-custom-outline-danger {
  border: 1px solid #dc3545;
  background-color: transparent;
  color: #dc3545;
  padding: 10px 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 0;
}

.btn-custom-outline-danger:hover {
  background-color: #dc3545;
  color: #fff;
}

/* Botón pequeño outline danger (para iconos de eliminar) */
.btn-custom-outline-danger-sm {
  border: 1px solid #dc3545;
  background-color: transparent;
  color: #dc3545;
  padding: 6px 12px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 0;
  font-size: 0.875rem;
}

.btn-custom-outline-danger-sm:hover {
  background-color: #dc3545;
  color: #fff;
}

/* Botón primary (azul sólido) - Estilo Bootstrap pero forma btn-primario */
.btn-custom-primary {
  border: 1px solid #0d6efd;
  background-color: #0d6efd;
  color: #fff;
  padding: 10px 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  border-radius: 0;
}

.btn-custom-primary:hover {
  background-color: transparent;
  color: #0d6efd;
}

/* Variante large para botones custom */
.btn-custom-lg {
  padding: 12px 30px;
  font-size: 1.1rem;
}

/* Botón de cotización (morado) - Mantiene color específico pero formato btn-primario */
.btn-custom-cotizacion {
  border: 1px solid #8B5CF6;
  background-color: #8B5CF6;
  color: #fff;
  padding: 10px 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  border-radius: 0;
}

.btn-custom-cotizacion:hover {
  background-color: transparent;
  color: #8B5CF6;
}

/* Variante large para botón de cotización */
.btn-custom-cotizacion.btn-custom-lg {
  padding: 12px 30px;
  font-size: 1.1rem;
}

/* Botones de calcular envío - Mantienen colores pero formato cuadrado */
/* Botón calcular moto (azul) */
.btn-custom-calcular-primary {
  border: 1px solid #0d6efd;
  background-color: transparent;
  color: #0d6efd;
  padding: 10px 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 0;
}

.btn-custom-calcular-primary:hover {
  background-color: #0d6efd;
  color: #fff;
}

/* Botón calcular correo (amarillo/naranja) */
.btn-custom-calcular-warning {
  border: 1px solid #ffc107;
  background-color: transparent;
  color: #ffc107;
  padding: 10px 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 0;
}

.btn-custom-calcular-warning:hover {
  background-color: #ffc107;
  color: #000;
}