/**
 * SISTEMA TIPOGRÁFICO UNIFICADO - AUTOFRENOS
 * Fuente: Segoe UI (sistema)
 * Aplicación: TODAS las vistas de la página
 */

/* Segoe UI es fuente del sistema en Windows y no requiere carga externa */

/* ============================================
   TIPOGRAFÍA GLOBAL BASE
   ============================================ */

* {
  font-family: 'Segoe UI', 'Segoe UI Symbol' !important;
}

body {
  font-family: 'Segoe UI', 'Segoe UI Symbol' !important;
  font-size: 16px;
  line-height: 1.6;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   JERARQUÍA DE TÍTULOS
   ============================================ */

h1, .h1 {
  font-family: 'Segoe UI', 'Segoe UI Symbol' !important;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0f172a;
}

h2, .h2 {
  font-family: 'Segoe UI', 'Segoe UI Symbol' !important;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1e293b;
}

h3, .h3 {
  font-family: 'Segoe UI', 'Segoe UI Symbol' !important;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: #334155;
}

h4, .h4 {
  font-family: 'Segoe UI', 'Segoe UI Symbol' !important;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  color: #475569;
}

h5, .h5 {
  font-family: 'Segoe UI', 'Segoe UI Symbol' !important;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: #64748b;
}

h6, .h6 {
  font-family: 'Segoe UI', 'Segoe UI Symbol' !important;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: #64748b;
}

/* ============================================
   TEXTOS DEL CUERPO
   ============================================ */

p, .text-body {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #475569;
}

/* Textos pequeños */
small, .text-small {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #64748b;
}

/* Textos destacados */
strong, b, .text-bold {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-weight: 700 !important;
}

/* Textos en cursiva */
em, i, .text-italic {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-style: italic;
}

/* ============================================
   ELEMENTOS DE FORMULARIO
   ============================================ */

button, .btn, a.btn, input[type="button"], input[type="submit"] {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.025em;
}

input, textarea, select {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-size: 1rem;
  font-weight: 400;
}

/* Quick filters y controles de topbar */
.quick-filters,
.quick-filters *,
#ap-top-controls,
#ap-top-controls *,
.ap-select,
.filter-button,
.filter-button * {
  font-family: 'Segoe UI', 'Segoe UI Symbol' !important;
}

  /* Favoritos: tamaño y peso mayor para visibilidad */
  #favorites-filter-btn,
  #favorites-filter-btn * {
    font-family: 'Segoe UI', 'Segoe UI Symbol' !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    padding: 12px 12px !important; /* menos ancho horizontal */
    height: 52px !important;
    line-height: 1 !important;
  }

  /* Corazón más pegado al texto y botón menos ancho */
  #favorites-filter-btn { gap: 6px !important; }
  #favorites-filter-btn .icon { margin-right: 0px !important; }
   NAVEGACIÓN
   ============================================ */

nav, .nav, .navigation {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
}

nav a, .nav-link, .nav-pill {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ============================================
   PRECIOS Y NÚMEROS
   ============================================ */

.price, .precio, [class*="price"], [class*="precio"] {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   TABLAS
   ============================================ */

table {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
}

th {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-weight: 600;
  color: #334155;
}

td {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-weight: 400;
  color: #475569;
}

/* ============================================
   LISTAS
   ============================================ */

ul, ol, li {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
}

/* Sidebar específico: asegurar Segoe UI en el panel de Categorías */
#ap-categories, #ap-categories * {
  font-family: 'Segoe UI', 'Segoe UI Symbol' !important;
}

/* ============================================
   ENLACES
   ============================================ */

a {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-weight: 500;
  text-decoration: none;
}

/* ============================================
   FOOTERS
   Aplicar Segoe UI consistentemente en todos los footers
   ============================================ */

footer, .site-footer, footer *, .site-footer * {
  font-family: 'Segoe UI', 'Segoe UI Symbol' !important;
}

/* ============================================
   BADGES Y ETIQUETAS
   ============================================ */

.badge, .tag, .label {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-weight: 600;
  font-size: 0.875rem;
}

/* ============================================
   CARDS Y CONTENEDORES
   ============================================ */

.card, .card-body, .card-header, .card-footer {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
}

.card-title {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-weight: 700;
}

/* Secciones específicas: asegurar Segoe UI en héroes y layouts como 'sobre-nosotros' */
/* Títulos y subtítulos del hero */
.hero, .hero *,
.hero h1, .hero h1 *,
.hero-subtitle, .hero-subtitle *,
/* Bento / cards */
.bento-grid, .bento-grid *,
.bento-item, .bento-item *,
.bento-item .value-name, .bento-item .value-name *,
.bento-item .value-description, .bento-item .value-description *,
/* Secciones y estadísticas */
.section-title, .section-title *,
.stat-number, .stat-number * {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
}

/* Reglas más específicas para mantener peso y jerarquía tipográfica */
.hero h1, .section-title {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-weight: 900 !important;
}

.hero-subtitle, .bento-item .value-description {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-weight: 300 !important;
}

.stat-number, .bento-item .value-name {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-weight: 800 !important;
}

/* Línea del tiempo: asegurar Segoe UI en todos los items y textos del timeline */
.timeline, .timeline *,
.timeline-item, .timeline-item *,
.timeline .timeline-item .timeline-content, .timeline .timeline-item .timeline-content *,
.timeline .timeline-item .timeline-year, .timeline .timeline-item .timeline-year * {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
}

/* Jerarquía dentro del timeline */
.timeline .timeline-item .timeline-year {
  font-weight: 800 !important;
}
.timeline .timeline-item .timeline-content {
  font-weight: 400 !important;
}
.timeline .timeline-item .timeline-title {
  font-weight: 700 !important;
}

/* Valores y Datos Mercantiles: forzar Segoe UI en cards y textos corporativos */
.stat-item, .stat-item *,
.stat-label, .stat-label *,
.value-icon, .value-icon *,
.value-name, .value-name *,
.value-description, .value-description *,
.section-subtitle, .section-subtitle *,
.bento-item strong, .bento-item strong *,
.bento-item span, .bento-item span * {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
}

/* Jerarquía tipográfica en valores/datos */
.stat-label { font-weight: 700 !important; }
.value-icon { font-weight: 900 !important; }
.value-name { font-weight: 800 !important; }
.section-subtitle { font-weight: 600 !important; }

/* Forzar Segoe UI en todas las tarjetas de producto */
.offer-card, .offer-card *,
.modern-product-card, .modern-product-card *,
.offer-card .group, .offer-card .group *,
.offer-card .offer-title, .offer-card .offer-title *,
.offer-card .offer-body, .offer-card .offer-body *,
.offer-card .price-current, .offer-card .price-original {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
}

/* ============================================
   ALERTAS Y NOTIFICACIONES
   ============================================ */

.alert, .notification, .message {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
}

/* ============================================
   MODALES Y POPUPS
   ============================================ */

.modal, .popup, .dialog {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
}

.modal-title, .popup-title {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-weight: 700;
} 

/* ============================================
   BREADCRUMBS Y RUTAS
   ============================================ */

.breadcrumb {
  font-family: 'Segoe UI', 'Segoe UI Symbol', sans-serif !important;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ============================================
   CÓDIGOS Y MONOSPACE (EXCEPCIONES)
   ============================================ */

code, pre, .code, .monospace, .coupon-code {
  font-family: 'Segoe UI', 'Segoe UI Symbol' !important;
  font-size: 0.9em;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

/* Tablets */
@media (max-width: 768px) {
  h1, .h1 { font-size: 2.25rem; }
  h2, .h2 { font-size: 1.875rem; }
  h3, .h3 { font-size: 1.5rem; }
  h4, .h4 { font-size: 1.25rem; }
  body { font-size: 15px; }
}

/* Móviles */
@media (max-width: 480px) {
  h1, .h1 { font-size: 1.875rem; }
  h2, .h2 { font-size: 1.5rem; }
  h3, .h3 { font-size: 1.25rem; }
  h4, .h4 { font-size: 1.125rem; }
  body { font-size: 14px; }
}

/* ============================================
   UTILIDADES TIPOGRÁFICAS
   ============================================ */

.text-xs { font-size: 0.75rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-base { font-size: 1rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-xl { font-size: 1.25rem !important; }
.text-2xl { font-size: 1.5rem !important; }
.text-3xl { font-size: 1.875rem !important; }
.text-4xl { font-size: 2.25rem !important; }
.text-5xl { font-size: 3rem !important; }

.font-light { font-weight: 300 !important; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }
.font-black { font-weight: 900 !important; }

.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }

.italic { font-style: italic !important; }
.not-italic { font-style: normal !important; }

.tracking-tight { letter-spacing: -0.025em !important; }
.tracking-normal { letter-spacing: 0 !important; }
.tracking-wide { letter-spacing: 0.025em !important; }
.tracking-wider { letter-spacing: 0.05em !important; }

.leading-none { line-height: 1 !important; }
.leading-tight { line-height: 1.25 !important; }
.leading-snug { line-height: 1.375 !important; }
.leading-normal { line-height: 1.5 !important; }
.leading-relaxed { line-height: 1.625 !important; }
.leading-loose { line-height: 2 !important; }