/* === Outfit (autoalojada, woff2, GDPR-safe, portable) — tipografía de marca Zokko === */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/outfit/outfit-300.woff2') format('woff2');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/outfit/outfit-400.woff2') format('woff2');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/outfit/outfit-500.woff2') format('woff2');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/outfit/outfit-600.woff2') format('woff2');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/outfit/outfit-700.woff2') format('woff2');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/outfit/outfit-800.woff2') format('woff2');}

/* ========================================
   ZOKKO DIGITAL - SISTEMA DE DISEÑO PRINCIPAL
   Basado en diseño Figma 2025
   ======================================== */

/* Variables del sistema de diseño */
:root {
  --zokko-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Colores principales */
  --primary: #00a693;
  --primary-hover: #008a7a;
  --primary-light: #e6f7f5;
  
  /* Escala de grises */
  --background: #ffffff;
  --foreground: #1a1a1a;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* Colores secundarios */
  --secondary: #f3f3f5;
  --accent: #ff6b35;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  
  /* Tipografía */
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  
  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  
  /* Bordes y sombras */
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Transiciones */
  --transition-fast: 150ms ease;
  --transition: 200ms ease;
  --transition-slow: 300ms ease;
}

/* Reset y base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--foreground);
  background-color: var(--background);
  overflow-x: hidden;
  max-width: 100vw;
}

/* Tipografía */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--gray-900);
}

h1 { font-size: var(--font-size-4xl); margin-bottom: var(--space-4); }
h2 { font-size: var(--font-size-3xl); margin-bottom: var(--space-3); }
h3 { font-size: var(--font-size-2xl); margin-bottom: var(--space-3); }
h4 { font-size: var(--font-size-xl); margin-bottom: var(--space-2); }
h5 { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
h6 { font-size: var(--font-size-base); margin-bottom: var(--space-2); }

p {
  margin-bottom: var(--space-4);
  color: var(--gray-700);
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-hover);
}

/* Container */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Container más amplio para blog y foro */
.container-wide {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--background);
  border-bottom: 1px solid var(--gray-200);
  z-index: 1000;
  height: 72px;
}

/* Hide empty header placeholder until JS renders it (prevents auth-state flash) */
.header:empty {
  visibility: hidden;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 var(--space-6);
  max-width: 1440px;
  margin: 0 auto;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header-logo img {
  height: 100px;
  width: auto;
  object-fit: contain;
}

/* Lockup de marca Zokko: lo inyecta js/header.js (.zk-lockup/.zk-sym/.zk-word/.zk-o,
   manual handoff_zokko_marca §6). El logo viejo (bolsa+candado) se retiró aquí. */

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-links {
  display: flex;
  gap: var(--space-6);
}

.nav-link {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-700);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1.5;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: var(--gray-100);
  color: var(--gray-700);
}

.btn-secondary:hover {
  background-color: var(--gray-200);
}

.btn-outline {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: white;
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-full);
}

/* Cards */
.card {
  background: var(--background);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: all var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background-color: var(--gray-100);
}

.card-body {
  padding: var(--space-4);
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--space-2);
}

.card-description {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin-bottom: var(--space-3);
}

.card-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--gray-200);
  background-color: var(--gray-50);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

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

.badge-hot {
  background-color: #ff6b35;
  color: white;
}

.badge-destacado {
  background-color: #fbbf24;
  color: #92400e;
}

/* Hero Section */
.hero {
  padding: var(--space-16) 0;
  text-align: center;
  background: linear-gradient(135deg, #e6f7f5 0%, #ffffff 100%);
}

.hero-title {
  font-size: var(--font-size-5xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--gray-900);
}

.hero-title .highlight {
  color: var(--primary);
}

.hero-subtitle {
  font-size: var(--font-size-xl);
  color: var(--gray-600);
  margin-bottom: var(--space-8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}

/* Grid Layouts */
.grid {
  display: grid;
  gap: var(--space-6);
}

/* Layout 2 columnas por defecto para contenido + sidebar */
.grid:not(.grid-cols-1):not(.grid-cols-2):not(.grid-cols-3):not(.grid-cols-4) {
  grid-template-columns: 1fr 320px;
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  /* Layout 2 columnas colapsa a 1 columna en tablets */
  .grid:not(.grid-cols-1):not(.grid-cols-2):not(.grid-cols-3):not(.grid-cols-4) {
    grid-template-columns: 1fr;
  }
  
  /* Sidebar va arriba en móvil */
  .sidebar,
  .forum-sidebar {
    order: -1;
  }

  /* EXCEPCIÓN: en artículos de La Plaza el contenido (título + cuerpo) va
     primero y la barra lateral (stats/relacionados/newsletter) debajo. */
  .blog-layout .sidebar {
    order: 1;
  }
  .blog-layout > div:first-child {
    order: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
  padding: var(--space-8) 0;
}

.stat {
  text-align: center;
}

.stat-icon {
  margin-bottom: var(--space-2);
}

.stat-value {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-1);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

/* Product Card (Marketplace) */
.product-card {
  position: relative;
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  transition: all var(--transition);
}

.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.product-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 10;
}

.product-favorite {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 10;
  background: white;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.product-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  background: var(--gray-100);
}

.product-body {
  padding: var(--space-4);
}

.product-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.price-current {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
}

.price-original {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  text-decoration: line-through;
}

.product-location {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin-bottom: var(--space-2);
}

.product-rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.rating-stars {
  color: #fbbf24;
}

/* Forms */
.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: var(--space-2);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background-color: white;
  transition: all var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 166, 147, 0.1);
}

/* Search Bar */
.search-bar {
  position: relative;
  width: 100%;
  max-width: 600px;
}

.search-input {
  width: 100%;
  padding: var(--space-3) var(--space-12) var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-full);
  background-color: var(--gray-50);
}

.search-icon {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-500);
}

.mobile-nav-search {
  display: none;
}

.search-input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* Category Pills */
.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  overflow-x: visible;
  padding-bottom: var(--space-2);
  max-width: 100%;
  scrollbar-width: none;
}

.category-pills::-webkit-scrollbar {
  height: 4px;
}

.category-pills::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 2px;
}

.category-pills::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 2px;
}

.category-pills::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.category-pill {
  padding: var(--space-2) var(--space-4);
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-full);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.category-pill.active,
.category-pill:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }

.hidden { display: none !important; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Responsive */
@media (max-width: 900px) {
  .header-logo img {
    height: 64px;
    max-width: 92px;
    object-fit: contain;
  }

  .header-container {
    gap: var(--space-2);
  }

  .header-actions {
    gap: var(--space-2);
  }

  .header-actions .btn {
    padding: var(--space-2) var(--space-3);
    font-size: 0.82rem;
  }

  .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
    z-index: 999;
    flex-direction: column;
    padding: var(--space-4);
  }
  
  .header-nav.mobile-open {
    display: flex;
  }

  .header-nav .mobile-nav-search {
    display: flex;
    max-width: none;
    margin: 0 0 var(--space-4);
  }

  /* Dogfood 2026-05-26: the opened menu has its own search field. Hide the
     compact tablet header search while the menu is expanded so users do not see
     two competing global searches in the same header. */
  .header-container:has(.header-nav.mobile-open) .tablet-header-search {
    display: none !important;
  }
  
  .header-nav .nav-links {
    flex-direction: column;
    gap: 0;
  }
  
  .header-nav .nav-link {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--gray-100);
    font-size: var(--font-size-base);
    width: 100%;
  }
  
  .header-nav .nav-link:last-child {
    border-bottom: none;
  }
  
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    background: none;
    border: none;
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background var(--transition);
    margin-left: auto;
    margin-right: var(--space-2);
  }
  
  .mobile-menu-toggle:hover {
    background: var(--gray-100);
  }

  .mobile-menu-toggle i {
    font-size: 18px;
  }

  .mobile-menu-label {
    line-height: 1;
  }
  
  .mobile-only {
    display: block;
  }
  
  .desktop-only {
    display: none;
  }
  
  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }
  h3 { font-size: var(--font-size-xl); }
}

/* Móvil (≤640px): el buscador compacto del header se aplastaba (logo + menú +
   "Iniciar sesión" ya llenan la fila). Se oculta solo en móvil — la búsqueda
   sigue disponible en el menú hamburguesa y en el buscador propio de cada
   página. Regla mobile-only: el escritorio (≥641px) no se ve afectado. */
@media (max-width: 640px) {
  .header-actions .tablet-header-search,
  .tablet-header-search {
    display: none !important;
  }
}

@media (min-width: 901px) {
  .mobile-only {
    display: none;
  }
  
  .desktop-only {
    display: block;
  }
}

@media (max-width: 520px) {
  .mobile-menu-label {
    display: none;
  }

  .mobile-menu-toggle {
    width: 40px;
    padding: 0;
  }

  /* Emergency visual QA 2026-05-27: keep the compact mobile header inside
     the viewport. The primary register CTA remains available in the hero and
     the opened mobile menu, so hiding the duplicate header CTA is safer than
     clipping it off-screen. */
  .header-actions .btn-primary {
    display: none;
  }
}

/* ========== SISTEMA DE MODALES ========== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 1;
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-container {
    background: white;
    border-radius: 12px;
    width: calc(100% - 40px);
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.3s ease-out;
    position: relative;
    margin: 16px;
    overscroll-behavior: contain;
}

#loginModal .modal-container {
    max-height: calc(100vh - 32px);
}

/* Modal de registro más compacto */
#registerModal .modal-container {
    max-width: 460px;
    max-height: calc(100vh - 32px);
}

@keyframes modalSlideIn {
    from { 
        transform: translateY(-50px) scale(0.95);
        opacity: 0;
    }
    to { 
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    color: var(--gray-600);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10001;
}

.modal-close:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.modal-content {
    padding: 32px;
}

/* Contenido del modal de registro más compacto */
#registerModal .modal-content {
    padding: 24px;
}

.modal-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 8px 0;
    text-align: center;
}

.modal-subtitle {
    font-size: 16px;
    color: var(--gray-600);
    margin: 0 0 32px 0;
    text-align: center;
}

/* Subtítulo más compacto en registro */
#registerModal .modal-subtitle {
    margin: 0 0 20px 0;
}

#loginModal .modal-subtitle {
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

#loginModal .form-group {
    margin-bottom: 16px;
}

/* Espaciado más compacto en registro */
#registerModal .form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--gray-900);
    font-size: 14px;
}

.input-wrapper {
    position: relative;
    width: 100%;
}

.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-500);
    font-size: 16px;
    z-index: 1;
}

.modal-input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.2s ease;
    background: white;
    box-sizing: border-box;
}

.modal-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 168, 147, 0.1);
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    z-index: 2;
}

.password-toggle:hover {
    color: var(--gray-700);
}

.options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 14px;
    flex-wrap: wrap;
}

.remember-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.remember-checkbox {
    margin: 0;
}

.remember-label {
    margin: 0;
    color: var(--gray-700);
    cursor: pointer;
}

.forgot-link {
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
}

.forgot-link:hover {
    text-decoration: underline;
}

.forgot-link-disabled {
    color: var(--gray-500);
    cursor: default;
    text-align: right;
}

.forgot-link-disabled:hover {
    text-decoration: none;
}

.btn-modal-submit {
    width: 100%;
    padding: 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

.btn-modal-submit:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

.divider-text {
    margin: 0 16px;
    color: var(--gray-500);
    font-size: 14px;
}

.social-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
}

.social-btn {
    width: 48px;
    height: 48px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.2s ease;
}

.social-btn:hover {
    background: var(--gray-50);
    transform: translateY(-1px);
}

.signup-link {
    text-align: center;
    font-size: 14px;
    color: var(--gray-600);
}

.signup-link a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.signup-link a:hover {
    text-decoration: underline;
}

.login-link {
    text-align: center;
    font-size: 14px;
    color: var(--gray-600);
}

.login-link a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.login-link a:hover {
    text-decoration: underline;
}

.link-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.link-button:hover,
.link-button:focus {
    text-decoration: underline;
}

/* Estilos específicos para el formulario de registro */
.account-type-section {
    margin-bottom: 20px;
}

.account-type-label {
    display: block;
    margin-bottom: 12px;
    font-weight: 500;
    color: var(--gray-900);
    font-size: 14px;
}

.account-type-options {
    display: flex;
    gap: 12px;
}

.account-type-option {
    flex: 1;
    padding: 12px 8px;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.account-type-option:hover {
    border-color: var(--primary);
    background: var(--gray-50);
}

.account-type-option.selected {
    border-color: var(--primary);
    background: rgba(0, 168, 147, 0.05);
}

.account-type-option input[type="radio"] {
    display: none;
}

.account-type-option i {
    display: block;
    font-size: 20px;
    margin-bottom: 6px;
    color: var(--gray-600);
}

.account-type-option.selected i {
    color: var(--primary);
}

.account-type-option label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    margin: 0;
}

.account-type-option.selected label {
    color: var(--primary);
}

.terms-wrapper {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.terms-checkbox {
    margin: 4px 0 0 0;
    flex-shrink: 0;
}

.terms-label {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.4;
    margin: 0;
}

.terms-label a {
    color: var(--primary);
    text-decoration: none;
}

.terms-label a:hover {
    text-decoration: underline;
}

/* ── Registro compacto: que el modal entre SIN scroll en una sola ventana
   (petición de Joseba). Solo afecta a #registerModal; el de login no se toca.
   Reduce espacios muertos verticales sin tocar tamaños de toque importantes. ── */
#registerModal .modal-content { padding: 18px 24px 20px; }
#registerModal .modal-title { font-size: 22px; margin-bottom: 4px; }
#registerModal .modal-subtitle { font-size: 14px; margin: 0 0 12px 0; }
#registerModal .account-type-section { margin-bottom: 12px; }
#registerModal .account-type-label { margin-bottom: 6px; }
#registerModal .account-type-option { padding: 8px; }
#registerModal .account-type-option i { font-size: 18px; margin-bottom: 3px; }
#registerModal .form-group { margin-bottom: 11px; }
#registerModal .form-label { margin-bottom: 5px; }
#registerModal .modal-input { padding: 10px 16px 10px 40px; }
#registerModal .terms-wrapper { margin-bottom: 12px; }
#registerModal .terms-label { line-height: 1.35; }
#registerModal .btn-modal-submit { padding: 11px; margin-bottom: 8px; }
#registerModal .login-link { margin-top: 12px !important; }



.home-professional-showcase-grid {
  align-items: stretch;
  min-width: 0;
}

.home-professional-showcase-card {
  min-height: 138px;
  padding: var(--space-4);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--home-pro-accent, var(--primary)) 18%, transparent), transparent 58%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
}

.home-professional-showcase-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: linear-gradient(135deg, var(--home-pro-accent, var(--primary)), color-mix(in srgb, var(--home-pro-accent, var(--primary)) 78%, #111827));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--home-pro-accent, var(--primary)) 22%, transparent);
}

.home-professional-showcase-card strong {
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  line-height: 1.25;
}

.home-professional-showcase-card span {
  color: var(--gray-600);
  font-size: var(--font-size-xs);
  line-height: 1.35;
}

/* Mobile visual QA 2026-05-27: the homepage professionals launch showcase area
   used an inline 1fr/2fr layout and a 3-column grid, which kept the section
   attractive on desktop but created horizontal scroll at 390px. Collapse the
   same showcase cards instead of leaving empty spacing. */
@media (max-width: 768px) {
  .home-professionals-layout {
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
  }

  .home-professional-showcase-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
  }
}

/* Solución definitiva para alineación de tarjetas */
.professional-card,
.request-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.professional-card .professional-description,
.request-card .request-description {
  flex-grow: 1;
}

/* Botones siempre al final con espaciado */
.professional-card .professional-actions,
.professional-card > div:last-child,
.request-card .request-footer {
  margin-top: auto;
  padding-top: 16px;
}

/* Grid estira todas las tarjetas */
.grid {
  align-items: stretch;
}

/* Para licitaciones - selector más específico */
.request-card {
  min-height: 280px;
}

/* Bajar más los elementos meta en licitaciones */
.request-card .request-meta {
  margin-top: auto;
  padding-top: 20px;
}

/* ========== RESPONSIVE FIX PARA CONTENIDO DINÁMICO ========== */

/* Prevenir overflow horizontal en contenedores principales */
.topics-list, 
.articles-list {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Forzar contenedores principales a no desbordar */
.blog-layout,
.forum-layout {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.blog-layout > *,
.forum-layout > * {
  min-width: 0;
  max-width: 100%;
}

/* Contenedores de búsqueda responsivos */
.search-container-responsive {
  display: flex;
  gap: var(--space-3);
  width: 100%;
  max-width: 100%;
}

.search-container-responsive .search-bar {
  flex: 1;
  max-width: 400px;
  min-width: 0;
}

/* Forzar que todo el contenido respete los límites del layout */
.blog-layout *,
.forum-layout * {
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.blog-layout img,
.forum-layout img {
  max-width: 100%;
  height: auto;
}

/* Sidebar compacto para ancho estándar */
.sidebar-card {
  padding: 16px !important;
}

.sidebar-card h3 {
  font-size: 16px !important;
  margin-bottom: 12px !important;
}

.author-name, .writer-name, .contributor-name {
  font-size: 13px !important;
}

.author-info, .writer-info, .contributor-info {
  font-size: 11px !important;
}

.sidebar .newsletter-form {
  gap: 8px !important;
}

/* ========== CHOLLOS LAYOUT FIGMA ========== */

/* Container para chollos en grid 2 columnas */
.chollos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

/* Cards de chollos compactas */
.chollo-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 14px;
  border: 1px solid var(--gray-200);
  transition: all var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 260px;
}

.chollo-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Cards HOT con fondo rojo */
.chollo-card.hot {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border: 2px solid #ef4444;
}

.chollo-card.warm {
  background: linear-gradient(135deg, #fef3c7, #fed7aa);
  border: 2px solid #f59e0b;
}

/* Header con imagen pequeña y contenido */
.chollo-header {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.chollo-image-small {
  width: 60px;
  height: 60px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--gray-100);
  flex-shrink: 0;
}

.chollo-main-content {
  flex: 1;
  min-width: 0;
}

/* Badge de temperatura prominente - SIN sombra */
.temperature-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ff6b35;
  color: white;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 16px;
  box-shadow: none !important;
  filter: none !important;
}

.temperature-badge.hot {
  background: #ff6b35 !important;
  box-shadow: none !important;
  filter: none !important;
}

.temperature-badge.warm {
  background: #f59e0b !important;
  box-shadow: none !important;
  filter: none !important;
}

.temperature-badge.cold {
  background: #6b7280 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Título chollo compacto */
.chollo-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.2;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Descripción del chollo */
.chollo-description {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.3;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Badges pequeños */
.chollo-badges {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.chollo-badge-hot {
  background: #fee2e2;
  color: #dc2626;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.chollo-badge-verified {
  background: #dcfce7;
  color: #16a34a;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
}

.chollo-badge-category {
  background: var(--gray-100);
  color: var(--gray-600);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
}

/* Precio y descuento compacto */
.chollo-price-section {
  margin-bottom: 8px;
}

.chollo-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.chollo-price-current {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
}

.chollo-price-original {
  font-size: 16px;
  color: var(--gray-500);
  text-decoration: line-through;
}

.chollo-discount {
  background: var(--success);
  color: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 12px;
}

/* Meta info compacta */
.chollo-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--gray-600);
  margin-bottom: 6px;
}

.chollo-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Footer con votos y botón */
.chollo-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--gray-100);
}

.chollo-votes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chollo-vote-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: white;
  cursor: pointer;
  font-size: 11px;
  transition: all var(--transition);
}

.chollo-vote-btn:hover {
  background: var(--gray-50);
}

.chollo-vote-btn.upvoted {
  background: var(--success);
  color: white;
  border-color: var(--success);
}

.chollo-btn-ir {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
}

/* Responsive para chollos */
@media (max-width: 768px) {
  .chollos-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .temperature-badge {
    font-size: 16px;
    padding: 6px 10px;
  }
  
  .chollo-price-current {
    font-size: 20px;
  }
}

/* ========== MERCADILLO FIGMA REDESIGN ========== */

/* Grid del mercadillo con cards compactas */
.mercadillo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

/* Cards del mercadillo nuevas según Figma */
.mercadillo-card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mercadillo-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--primary-300);
}

/* Tarjetas destacadas con borde amarillo */
.mercadillo-card.destacado {
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.1);
}

.mercadillo-card.destacado:hover {
  border-color: #d97706;
  box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.3);
}

/* Imagen del producto */
.mercadillo-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--gray-100);
}

.mercadillo-image.is-placeholder {
  object-fit: contain;
  padding: 10px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
}

/* Badge de estado en esquina superior izquierda */
.mercadillo-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
}

.mercadillo-badge-destacado {
  background: #f59e0b;
  color: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Distintivo "Destacado" de pago (promoción): pill premium teal. */
.mercadillo-badge-featured {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #00a693 0%, #00897b 100%);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 2px 6px rgba(0, 166, 147, .35);
}

.mercadillo-badge-urgente {
  background: #ef4444;
  color: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Botón favorito en esquina superior derecha */
.mercadillo-favorite {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  z-index: 10;
}

.mercadillo-favorite:hover {
  background: white;
  box-shadow: var(--shadow-md);
}

.mercadillo-favorite i {
  color: var(--gray-500);
  font-size: 16px;
}

.mercadillo-favorite.active i {
  color: #ef4444;
}

/* Contenido de la card */
.mercadillo-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Título del producto */
.mercadillo-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.3;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.3em * 2);
}

/* Precios destacados */
.mercadillo-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.mercadillo-price-current {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
}

.mercadillo-price-original {
  font-size: 14px;
  color: var(--gray-500);
  text-decoration: line-through;
}

/* Información del producto en footer */
.mercadillo-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--gray-600);
}

.mercadillo-location {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mercadillo-location i {
  color: var(--gray-500);
  font-size: 11px;
}

.mercadillo-condition {
  font-weight: 500;
  color: var(--gray-700);
}

/* Rating y métricas */
.mercadillo-rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  gap: 8px;
  margin-bottom: 14px;
}

.mercadillo-detail-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 8px 10px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  color: var(--primary-hover);
  background: var(--primary-light);
  font-size: 13px;
  font-weight: 700;
}

.mercadillo-card:hover .mercadillo-detail-cta,
.mercadillo-card:focus .mercadillo-detail-cta,
.mercadillo-card:focus-visible .mercadillo-detail-cta {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.mercadillo-stars {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gray-700);
}

.mercadillo-metrics {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-500);
}

.mercadillo-metrics i {
  font-size: 11px;
}

/* Responsive para mercadillo */
.mercadillo-skeleton-card {
  pointer-events: none;
}

.mercadillo-skeleton-img,
.mercadillo-skeleton-line {
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 45%, #e2e8f0 80%);
  background-size: 220% 100%;
  animation: mercadilloSkeleton 1.15s ease-in-out infinite;
}

.mercadillo-skeleton-img {
  width: 100%;
  height: 200px;
}

.mercadillo-skeleton-line {
  height: 13px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.mercadillo-skeleton-line.wide { width: 92%; }
.mercadillo-skeleton-line.price { width: 44%; height: 22px; }
.mercadillo-skeleton-line.short { width: 58%; }
.mercadillo-skeleton-line.medium { width: 74%; }

@keyframes mercadilloSkeleton {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.mercadillo-empty {
  grid-column: 1 / -1;
  text-align: center;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--gray-200);
  border-radius: 22px;
  padding: 48px 24px;
  box-shadow: var(--shadow-sm);
  color: var(--gray-700);
}

.mercadillo-empty-icon {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-light);
  font-size: 34px;
  margin-bottom: 16px;
}

.mercadillo-empty h2 {
  color: var(--gray-900);
  font-size: 22px;
  margin-bottom: 8px;
}

.mercadillo-empty p {
  max-width: 640px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .mercadillo-skeleton-img,
  .mercadillo-skeleton-line {
    animation: none;
  }
}

/* Responsive para mercadillo */
@media (max-width: 1200px) {
  .mercadillo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .mercadillo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .mercadillo-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .mercadillo-image {
    height: 160px;
  }
  
  .mercadillo-price-current {
    font-size: 18px;
  }
}

/* ========== CONTROLES CHOLLOS FIGMA ========== */

/* Contador de chollos encontrados como en Figma */
.chollos-count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 12px 0;
  font-size: 14px;
  color: var(--gray-600);
}

.chollos-count i {
  color: var(--gray-500);
  font-size: 16px;
}

.chollos-count-number {
  font-weight: 600;
  color: var(--gray-900);
}

/* Contador de productos del mercadillo */
.mercadillo-count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 12px 0;
  font-size: 14px;
  color: var(--gray-600);
}

.mercadillo-count i {
  color: var(--gray-500);
  font-size: 16px;
}

.mercadillo-count-number {
  font-weight: 600;
  color: var(--gray-900);
}

/* Barra de controles del chollos */
.chollos-controls {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.chollos-search {
  position: relative;
  flex: 1;
  min-width: 300px;
}

.chollos-search input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  font-size: 15px;
  background: white;
}

.chollos-search i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

.chollos-dropdown {
  position: relative;
}

.chollos-dropdown select {
  padding: 12px 16px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  font-size: 14px;
  background: white;
  cursor: pointer;
  min-width: 180px;
}

.chollos-dropdown select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 166, 147, 0.1);
}

/* Cards responsivas - aplica a contenido estático y dinámico */
.topic-card, 
.article-card {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
}

/* Headers de topics/articles */
.topic-header,
.article-header {
  display: flex;
  gap: 16px;
  min-width: 0;
}

/* Contenido principal - debe ser flexible */
.topic-content,
.article-content {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

/* Títulos responsivos */
.topic-title,
.article-title {
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  overflow-wrap: break-word;
  line-height: 1.4;
  max-width: 100%;
  width: 100%;
}

/* Excerpts/descriptions */
.topic-excerpt,
.article-description {
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Badges y meta info */
.topic-badges,
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* Tags responsivos */
.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Footers flexibles */
.topic-footer,
.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Author sections */
.topic-author,
.article-author {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.author-info {
  min-width: 0;
  flex: 1;
}

.author-name {
  font-size: 14px;
  font-weight: 500;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

/* Stats sections */
.topic-stats,
.article-stats {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.topic-stat,
.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .topic-footer,
  .article-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .author-name {
    max-width: 140px;
  }
  
  .topic-stats,
  .article-stats {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .author-name {
    max-width: 120px;
  }
  
  .topic-badges,
  .article-meta {
    gap: 6px;
  }
}

/* ========== LAYOUTS ESPECÍFICOS ========== */

/* Layout del foro */
.forum-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  margin-top: 32px;
  margin-bottom: 64px;
}

/* Layout del blog */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  margin-top: 32px;
  margin-bottom: 64px;
}

/* Sidebar común */
.forum-sidebar,
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  width: 280px;
  max-width: 280px;
}

/* Responsive para forum-layout específico */
@media (max-width: 1024px) {
  .forum-layout,
  .blog-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Admin Settings Grid Layouts */
.notifications-grid,
.security-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
}

.notification-column,
.security-column {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 1.5rem;
}

.column-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 0.5rem;
}

.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.settings-item:last-child {
    border-bottom: none;
}

.settings-item-with-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.setting-label {
    font-size: 0.95rem;
    color: var(--gray-700);
    flex: 1;
}

.number-input-container {
    display: flex;
    align-items: center;
}

.number-input {
    width: 60px;
    height: 32px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--gray-700);
}

.number-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(37, 206, 209, 0.1);
}

/* Marketplace Categories Full Width */
.categories-section-full {
    margin-top: 1.5rem;
}

.categories-display {
    width: 100%;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 1rem;
    font-size: 0.95rem;
    color: var(--gray-700);
    line-height: 1.5;
}

/* IA Config Section */
.ia-providers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.ia-provider {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 1rem;
    gap: 1rem;
}

.provider-icon {
    width: 40px;
    height: 40px;
    background: var(--gray-100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.provider-info {
    flex: 1;
}

.provider-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.provider-status {
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 0.25rem;
}

.provider-status.connected {
    background: var(--success-100);
    color: var(--success-700);
}

.provider-status.disconnected {
    background: var(--gray-100);
    color: var(--gray-600);
}

.provider-details {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
}

.provider-models {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.provider-cost {
    text-align: right;
}

.cost-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--gray-900);
}

.cost-period {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.ia-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
}

.config-group {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 1.5rem;
}

.config-group h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--gray-900);
}

/* Automation Section */
.automation-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.automation-scripts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.automation-script {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 1rem;
    gap: 1rem;
}

.script-icon {
    width: 40px;
    height: 40px;
    background: var(--gray-100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.script-info {
    flex: 1;
}

.script-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.script-status {
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.script-status.ready {
    background: var(--success-100);
    color: var(--success-700);
}

.script-status.running {
    background: var(--primary-100);
    color: var(--primary-700);
}

.script-description {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}

.script-details {
    font-size: 0.8rem;
    color: var(--gray-500);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.script-actions {
    display: flex;
    gap: 0.5rem;
}

.script-config-btn,
.script-run-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.script-config-btn {
    background: var(--gray-100);
    color: var(--gray-600);
}

.script-config-btn:hover {
    background: var(--gray-200);
}

.script-run-btn {
    background: var(--primary-500);
    color: white;
}

.script-run-btn:hover {
    background: var(--primary-600);
}

/* Scrapers Section */
.scrapers-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.scrapers-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.scraper-item {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 1rem;
    gap: 1rem;
}

.scraper-icon {
    width: 40px;
    height: 40px;
    background: var(--gray-100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.scraper-info {
    flex: 1;
}

.scraper-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.scraper-status {
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.scraper-status.active {
    background: var(--success-100);
    color: var(--success-700);
}

.scraper-description {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}

.scraper-details {
    font-size: 0.8rem;
    color: var(--gray-500);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.scraper-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.scraper-toggle {
    display: flex;
    align-items: center;
}

.scraper-config-btn,
.scraper-stop-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.scraper-config-btn {
    background: var(--gray-100);
    color: var(--gray-600);
}

.scraper-config-btn:hover {
    background: var(--gray-200);
}

.scraper-stop-btn {
    background: var(--error-500);
    color: white;
}

.scraper-stop-btn:hover {
    background: var(--error-600);
}

/* Toggle Switch Components - Figma Style */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-300);
    transition: 0.3s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .slider {
    background-color: var(--primary-500);
}

.toggle-switch input:checked + .slider:before {
    transform: translateX(20px);
}

.toggle-switch input:focus + .slider {
    box-shadow: 0 0 1px var(--primary-500);
}

/* Clean notification/security columns without gray background */
.notification-column,
.security-column {
    background: transparent;
    border: none;
    padding: 0;
}

.column-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 1.5rem;
    border-bottom: none;
    padding-bottom: 0;
}

/* Color Bars for Appearance Section */
.color-bar {
    width: 100%;
    height: 12px;
    border-radius: 6px;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-bar:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.primary-color {
    background: linear-gradient(90deg, #00a693 0%, #25ced1 100%);
}

.secondary-color {
    background: linear-gradient(90deg, #06b6d4 0%, #0891b2 100%);
}

/* Responsive design for admin grids */
@media (max-width: 768px) {
    .notifications-grid,
    .security-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    

    /* ── Fix móvil: modal de registro/login no se sale por arriba y la X siempre
       se ve y se puede pulsar. Solo dentro de @media → escritorio intacto.
       Cubre el modal de formulario Y el paso SMS dentro del mismo modal
       (ambos comparten .modal-container y .modal-close). ───────────────── */
    .modal-overlay {
        align-items: flex-start;        /* deja de centrar: nada se recorta arriba */
        overflow-y: auto;               /* el overlay scrollea desde el top */
        -webkit-overflow-scrolling: touch;
        padding: 16px 0;                /* aire arriba/abajo, sin recorte */
    }
    .modal-container {
        margin: 0 auto;                 /* el padding del overlay aporta el hueco */
        max-height: 92vh;
        max-height: 92dvh;              /* dvh: respeta barras del navegador móvil */
        overflow-y: auto;               /* el cuerpo del modal scrollea */
        -webkit-overflow-scrolling: touch;
    }
    #loginModal .modal-container,
    #registerModal .modal-container {
        max-height: 92vh;
        max-height: 92dvh;
    }
    /* La X se queda pegada arriba del modal mientras se hace scroll, siempre
       visible y con área de toque ≥44px. Va antes que .modal-content, así
       que sticky;top:0 la fija al borde superior del área que scrollea. */
    .modal-close {
        position: sticky;
        top: 0;
        margin-left: auto;              /* empuja la X a la derecha */
        margin-bottom: -44px;           /* se solapa con el contenido: no añade hueco */
        width: 44px;
        height: 44px;
        font-size: 22px;
        background: #ffffff;             /* tapa el contenido que pasa por debajo */
        box-shadow: 0 0 0 6px #ffffff;  /* halo blanco para legibilidad al hacer scroll */
        color: var(--gray-700, #374151);
        z-index: 10002;
    }
    .notification-column,
    .security-column {
        padding: 1rem;
    }
}


/* === Tipografía de marca Zokko (Outfit) === */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
button,input,select,textarea,optgroup{ font-family:var(--zokko-font); }
h1,h2,h3,h4,h5,h6{ font-family:var(--zokko-font); letter-spacing:-0.02em; }
.logo{ font-family:var(--zokko-font); font-weight:800; letter-spacing:-0.03em; }
.logo .logo-eo{ color:#1a1a1a; }

/* =====================================================================
   TANDA 1 · Responsive móvil global (390px). Auditoría 2026-05-31.
   SOLO dentro de @media → el escritorio queda intacto por construcción.
   Mata el grueso del overflow horizontal y el apretado tipográfico en
   las ~39 páginas que cargan este CSS. Solo selectores de este fichero.
   ===================================================================== */
@media (max-width: 480px) {
  /* Hero: botones apilados a ancho completo (no se salen ni se pegan) */
  .hero-actions { flex-direction: column; gap: var(--space-3); }
  .hero-actions .btn-lg, .hero-actions .btn { width: 100%; }
  .btn-lg { padding: var(--space-2) var(--space-4); font-size: var(--font-size-base); }

  /* Stats: una sola columna (el minmax desbordaba a 390px) */
  .stats { grid-template-columns: 1fr; gap: var(--space-3); }

  /* Buscador del header a ancho completo en móvil */
  .search-bar { max-width: 100%; }
  .search-input { font-size: 15px; }

  /* Tipografía del hero más contenida (no se monta) */
  .hero-title { font-size: 1.8rem; line-height: 1.22; }
  .hero-subtitle { font-size: var(--font-size-sm); }
  .header-container { padding: 0 var(--space-3); }

  /* Formularios y modales cómodos en móvil */
  .form-input, .form-select, .form-textarea { font-size: 16px; }
  .modal-container { max-width: 94vw; }
  .modal-content { padding: 20px; }
  .modal-title { font-size: 20px; }
  .modal-subtitle { font-size: 14px; }
  .modal-input { font-size: 16px; }

  /* Imágenes de tarjeta sin recortes raros */
  .card-image, .product-image { height: 160px; }
  /* --- Legibilidad de textos de formulario/modal en móvil (390px). Modal primero. --- */
  #registerModal .form-label,
  #loginModal .form-label,
  .account-type-label { font-size: 16px; }
  .account-type-option label { font-size: 16px; }
  .terms-label,
  .remember-label,
  .forgot-link { font-size: 15px; }
  /* Nota del modal ("o regístrate con…") — anula el 14px inline de modals.js */
  .modal-content .auth-method-note { font-size: 15px !important; }
  .modal-subtitle { font-size: 15px; }
  /* Formularios de página (publicar/contacto): etiquetas cómodas de leer */
  .form-label { font-size: 16px; }

  .home-professional-showcase-grid { grid-template-columns: 1fr; width: 100%; }
}

/* Contenedor de la foto: ancla overlays (📷/🎥) a la imagen, no a la ficha */
.mercadillo-media { position: relative; line-height: 0; }

/* ════════════════════════════════════════════════════════════════════
   Carrusel de fotos en tarjeta (estilo Carwow/AutoTrader) + pill de
   vendedor. Scroll-snap puro; los puntos los activa un JS mínimo.
   ════════════════════════════════════════════════════════════════════ */
.zk-carousel { position: relative; width: 100%; line-height: 0; }
.zk-carousel-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.zk-carousel-track::-webkit-scrollbar { display: none; height: 0; width: 0; }
/* Flechas del carrusel de tarjeta (aparecen on hover; en tactil ya hay swipe). */
[data-zk-carousel] .zk-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:30px;height:30px;margin:0;padding:0;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.72);color:#16222e;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 1px 6px rgba(0,0,0,.22);cursor:pointer;line-height:0;opacity:0;pointer-events:none;transition:opacity .18s ease,background .15s,transform .18s;}
[data-zk-carousel] .zk-carousel-arrow--prev{left:8px;}
[data-zk-carousel] .zk-carousel-arrow--next{right:8px;}
[data-zk-carousel]:hover .zk-carousel-arrow,[data-zk-carousel] .zk-carousel-arrow:focus-visible{opacity:1;pointer-events:auto;}
[data-zk-carousel] .zk-carousel-arrow:hover{background:rgba(255,255,255,.96);transform:translateY(-50%) scale(1.07);}
@media (hover:none){[data-zk-carousel] .zk-carousel-arrow{display:none;}}
.zk-carousel-slide { flex: 0 0 100%; width: 100%; scroll-snap-align: start; }
/* Las imágenes del carrusel conservan la clase .mercadillo-image (200px / 160px móvil). */
.zk-carousel-slide .mercadillo-image { width: 100%; }
.zk-carousel-dots {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  z-index: 11;
  display: flex;
  justify-content: center;
  gap: 6px;
  line-height: 0;
  pointer-events: none;
}
.zk-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 0 2px rgba(0,0,0,0.45);
  transition: transform .15s ease, background .15s ease;
}
.zk-dot.is-active { background: #fff; transform: scale(1.35); }

/* Pill de tipo de vendedor (arriba-izquierda, estilo Carwow "Private seller") */
.mercadillo-media .zk-seller-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 11;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.96);
  color: #111827;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
/* Cuando ya hay un badge de estado/destacado (top-left), el de vendedor baja. */
.mercadillo-card:has(.mercadillo-badge) .mercadillo-media .zk-seller-badge { top: 46px; }

/* === Accesibilidad: foco visible global (navegación por teclado) ===
   Solo :focus-visible (no :focus) para no ensuciar la interacción con ratón.
   PENDIENTE documentado: skip-link "Saltar al contenido" — requiere añadir el
   anchor en ~59 plantillas HTML; se hará en un pase aparte. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}