/* ================================================================
   SEACE Oportunidades — Design System
   ================================================================ */

/* === Design Tokens === */
:root {
  /* Primary */
  --primary: #4263eb;
  --primary-light: #5c7cfa;
  --primary-dark: #3b5bdb;
  --primary-bg: #edf2ff;

  /* Accent */
  --accent: #22b8cf;
  --accent-dark: #15aabf;
  --accent-bg: #e3fafc;

  /* Sidebar */
  --sidebar-bg: #1a1d2e;
  --sidebar-hover: #252840;
  --sidebar-active: #2e3354;
  --sidebar-text: #a0a3bd;
  --sidebar-text-active: #ffffff;
  --sidebar-width: 260px;

  /* Content */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-hover: #f8f9fa;

  /* Text */
  --text: #1a1d2e;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;

  /* Borders */
  --border: #e5e7eb;
  --border-light: #f0f0f5;

  /* Radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);

  /* Source badges */
  --source-seace: #4263eb;
  --source-ocds: #12b886;
  --source-perucompras: #fd7e14;
  --source-proinversion: #7950f2;

  /* Status colors */
  --status-open: #12b886;
  --status-open-bg: #e6fcf5;
  --status-evaluation: #fab005;
  --status-evaluation-bg: #fff9db;
  --status-awarded: #4263eb;
  --status-awarded-bg: #edf2ff;
  --status-contracted: #7950f2;
  --status-contracted-bg: #f3f0ff;
  --status-in_execution: #15aabf;
  --status-in_execution-bg: #e3fafc;
  --status-closed: #868e96;
  --status-closed-bg: #f1f3f5;
  --status-unsuccessful: #fa5252;
  --status-unsuccessful-bg: #fff5f5;
  --status-cancelled: #e03131;
  --status-cancelled-bg: #fff0f0;
  --status-planned: #868e96;
  --status-planned-bg: #f1f3f5;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-index */
  --z-sidebar: 100;
  --z-header: 90;
  --z-overlay: 200;
  --z-toast: 300;
  --z-mobile-nav: 80;

  /* Header */
  --header-height: 60px;

  /* Mobile bottom nav */
  --mobile-nav-height: 64px;
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* === App Layout === */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.app-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--transition);
}

.app-content {
  flex: 1;
  padding: 24px 32px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* === Sidebar === */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  z-index: var(--z-sidebar);
  transition: transform var(--transition-slow);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sidebar-brand h1 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}

.sidebar-brand p {
  font-size: 12px;
  color: var(--sidebar-text);
  margin-top: 2px;
}

.sidebar-nav {
  padding: 12px 10px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  margin-bottom: 2px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.nav-item:hover {
  background: var(--sidebar-hover);
  color: #fff;
  text-decoration: none;
}

.nav-item.active {
  background: var(--sidebar-active);
  color: var(--sidebar-text-active);
}

.nav-item i { width: 20px; height: 20px; flex-shrink: 0; }

.nav-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.3);
  padding: 16px 14px 6px;
}

.sidebar-stats {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.sidebar-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
}

.sidebar-stat-label { color: var(--sidebar-text); }
.sidebar-stat-value { color: #fff; font-weight: 600; }

.sidebar-ai-teaser {
  margin: 12px 14px 16px;
  padding: 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #4263eb22, #7950f222);
  border: 1px solid rgba(66, 99, 235, 0.2);
}

.sidebar-ai-teaser p {
  font-size: 12px;
  color: var(--sidebar-text);
  line-height: 1.5;
}

.sidebar-ai-teaser .ai-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-light);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* === Header === */
.app-header {
  position: sticky;
  top: 0;
  height: var(--header-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 32px;
  z-index: var(--z-header);
  gap: 16px;
}

.header-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--text);
}

.header-hamburger:hover { background: var(--bg); }

.header-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.header-breadcrumbs span { color: var(--text-tertiary); }
.header-breadcrumbs a {
  color: var(--text-secondary);
  text-decoration: none;
}
.header-breadcrumbs a:hover { color: var(--primary); text-decoration: none; }
.breadcrumb-current { color: var(--text); font-weight: 500; }

.header-search {
  flex: 1;
  max-width: 400px;
  margin-left: auto;
  position: relative;
}

.header-search input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  transition: all var(--transition-fast);
}

.header-search input:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px var(--primary-bg);
  background: var(--surface);
}

.header-search input::placeholder { color: var(--text-tertiary); }

/* Selector de país global (multi-país) */
.header-country select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.header-country select:hover { border-color: var(--primary-light); }

.header-country select:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.header-search .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

/* === Page Titles === */
.page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

/* === KPI Cards === */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.kpi-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.kpi-icon.blue { background: var(--primary-bg); color: var(--primary); }
.kpi-icon.green { background: var(--status-open-bg); color: var(--status-open); }
.kpi-icon.amber { background: var(--status-evaluation-bg); color: #e67700; }
.kpi-icon.purple { background: var(--status-contracted-bg); color: var(--source-proinversion); }

/* === Cards === */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.card-padded { padding: 20px; }
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.card-body { padding: 20px; }

/* === Opportunity Cards === */
.opp-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.opp-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 16px 20px 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  overflow: hidden;
}

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

/* Acento lateral por estado (accionable -> cerrado) */
.opp-card--open   { border-left-color: #10b981; }
.opp-card--eval   { border-left-color: #f59e0b; }
.opp-card--done   { border-left-color: var(--primary); }
.opp-card--closed { border-left-color: var(--border); }

/* Banda de urgencia / estado, arriba de la tarjeta */
.opp-flag {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.opp-flag--urgent  { background: #fee2e2; color: #b91c1c; }
.opp-flag--warning { background: #ffedd5; color: #c2410c; }
.opp-flag--soon    { background: #fef9c3; color: #a16207; }
.opp-flag--normal  { background: var(--accent-bg); color: var(--accent-dark); }
.opp-flag--open    { background: #d1fae5; color: #047857; }
.opp-flag--status  { background: var(--bg); color: var(--text-secondary); }
.opp-flag--past    { background: #f3f4f6; color: var(--text-tertiary); }

.opp-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.opp-card-entity {
  font-size: 12.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.opp-card-entity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Monto grande: el ancla de decisión para el postor */
.opp-card-amount-lg {
  font-size: 19px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.opp-card-amount-lg--none {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
}

/* Pie con metadata (categoría · cierre · ref. código) en una línea */
.opp-card-footer {
  font-size: 11.5px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--border-light);
}

/* === Badges === */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1.3;
}

.badge-open { background: var(--status-open-bg); color: var(--status-open); }
.badge-evaluation { background: var(--status-evaluation-bg); color: #e67700; }
.badge-awarded { background: var(--status-awarded-bg); color: var(--status-awarded); }
.badge-contracted { background: var(--status-contracted-bg); color: var(--source-proinversion); }
.badge-in_execution { background: var(--status-in_execution-bg); color: var(--accent-dark); }
.badge-closed { background: var(--status-closed-bg); color: var(--status-closed); }
.badge-unsuccessful { background: var(--status-unsuccessful-bg); color: var(--status-unsuccessful); }
.badge-cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled); }
.badge-planned { background: var(--status-planned-bg); color: var(--status-planned); }

/* Source badges */
.badge-source {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-source-seace_scraper,
.badge-source-seace { background: #edf2ff; color: var(--source-seace); }
.badge-source-ocds_bulk,
.badge-source-ocds { background: #e6fcf5; color: var(--source-ocds); }
.badge-source-pnda_csv,
.badge-source-perucompras_pnda,
.badge-source-perucompras { background: #fff4e6; color: var(--source-perucompras); }
.badge-source-proinversion { background: #f3f0ff; color: var(--source-proinversion); }

a.badge-source-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
a.badge-source-link:hover {
  opacity: 0.85;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* === Chips / Filter Tags === */
.chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.chip:hover { border-color: var(--primary-light); color: var(--primary); }
.chip.active {
  background: var(--primary-bg);
  border-color: var(--primary-light);
  color: var(--primary);
}

.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  background: rgba(0,0,0,0.1);
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
}

.chip-remove:hover { background: rgba(0,0,0,0.2); }

.filter-chip {
  background: var(--primary-bg);
  border: 1px solid var(--primary-light);
  color: var(--primary);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* === Search Bar (Explorar) === */
.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.search-input-wrap {
  flex: 1;
  position: relative;
}

.search-input-wrap input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  transition: all var(--transition-fast);
}

.search-input-wrap input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-bg);
}

.search-input-wrap input::placeholder { color: var(--text-tertiary); }

.search-input-wrap .icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}

.btn-search {
  padding: 12px 28px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
}

.btn-search:hover { background: var(--primary-dark); }

/* === Filters Row === */
.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}

/* Botón "Filtros" — solo visible en móvil (ver media query); colapsa el panel. */
.filters-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  padding: 12px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #111827);
  cursor: pointer;
}
.filters-toggle.active { border-color: var(--primary, #4f46e5); color: var(--primary, #4f46e5); }
.filters-toggle-count {
  display: none;
  min-width: 20px; height: 20px; padding: 0 6px;
  align-items: center; justify-content: center;
  background: var(--primary, #4f46e5); color: #fff;
  border-radius: 10px; font-size: 12px; font-weight: 700;
}

.filter-select {
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 120px;
  transition: border-color var(--transition-fast);
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary-light);
}

.filter-input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  width: 120px;
  transition: border-color var(--transition-fast);
}

.filter-input:focus {
  outline: none;
  border-color: var(--primary-light);
}

.btn-clear-filters {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-clear-filters:hover {
  border-color: var(--status-cancelled);
  color: var(--status-cancelled);
}

/* Active filter chips row */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

/* === Results Toolbar === */
.results-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.results-count {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.results-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sort-select {
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}

.view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.view-toggle button {
  padding: 6px 10px;
  border: none;
  background: var(--surface);
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  transition: all var(--transition-fast);
}

.view-toggle button + button { border-left: 1px solid var(--border); }
.view-toggle button.active {
  background: var(--primary-bg);
  color: var(--primary);
}

/* === Table === */
.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
}

.data-table { width: 100%; border-collapse: collapse; }

.data-table thead { background: var(--bg); }

.data-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table tbody tr {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.data-table tbody tr:hover { background: var(--primary-bg); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* === Pagination === */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 0;
}

.pagination button {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pagination button:hover:not(:disabled) {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.pagination button:disabled { opacity: 0.4; cursor: default; }

.page-info {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 0 8px;
}

/* === Detail Page === */
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 20px;
  padding: 6px 0;
  border: none;
  background: none;
  font-family: inherit;
  transition: color var(--transition-fast);
}

.detail-back:hover { color: var(--primary); }

.detail-hero {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  margin-bottom: 24px;
}

.detail-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.detail-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 8px;
}

.detail-entity {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.detail-code {
  font-size: 12px;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

.detail-crono { margin: 18px 0; }
.crono-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}
.crono-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-tertiary);
  font-weight: 600;
  font-size: 12px;
  border-bottom: 2px solid var(--border-light);
}
.crono-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}
.crono-table td:first-child { color: var(--text); font-weight: 500; }

.detail-amount {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 12px;
}

.detail-amount-currency {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Timeline */
.timeline {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  margin-bottom: 24px;
}

.timeline h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}

.timeline-bar {
  position: relative;
}

.timeline-line {
  position: absolute;
  top: 8px;                 /* centro del dot (16px, border-box) → línea a la altura de los dots */
  height: 3px;
  background: var(--border);
  transform: translateY(-50%);
  z-index: 0;
  /* left/right se setean inline: inset% = centro del 1er y último dot */
}

.timeline-progress {
  position: absolute;
  top: 8px;
  height: 3px;
  background: var(--primary);
  transform: translateY(-50%);
  z-index: 1;
  transition: width 0.5s ease;
  /* left/width inline */
}

.timeline-steps {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 2;
}

.timeline-step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border);
  border: 3px solid var(--bg);
  position: relative;
}

.timeline-dot.completed {
  background: var(--primary);
  border-color: var(--primary-bg);
}

.timeline-dot.current {
  background: var(--accent);
  border-color: var(--accent-bg);
  box-shadow: 0 0 0 4px rgba(34, 184, 207, 0.2);
}

.timeline-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  max-width: 100px;
}

.timeline-date {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Tabs */
.detail-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-light);
  margin-bottom: 0;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--border-light);
  border-bottom: 2px solid var(--border-light);
  padding: 0 20px;
}

.detail-tab {
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-tab:hover { color: var(--primary); }

.detail-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.detail-tab-content {
  background: var(--surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  border-top: none;
  min-height: 200px;
}

.detail-tab-pane {
  display: none;
  padding: 24px;
}

.detail-tab-pane.active { display: block; }

/* Detail grid */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.detail-field-value {
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
}

/* Detail description (first in General tab) */
.detail-description {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  border-left: 4px solid var(--primary);
}
.detail-description .detail-field-label {
  margin-bottom: 10px;
}
.detail-description p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
  margin: 0;
}

/* Detail metadata section */
.detail-meta-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}
.detail-meta-header {
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.detail-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
}
.detail-meta-item {
  display: flex;
  gap: 6px;
  font-size: 12px;
}
.detail-meta-label {
  color: var(--text-tertiary);
}
.detail-meta-value {
  color: var(--text-secondary);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
a.detail-meta-link {
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}
a.detail-meta-link:hover {
  text-decoration: underline;
}

/* Documents list */
.doc-list { list-style: none; }

.doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}

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

.doc-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.doc-info { flex: 1; min-width: 0; }
.doc-info a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.doc-type {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Marca de documento escaneado. Deliberadamente discreta: informa que ese PDF es
   una imagen (no entra en la búsqueda interna) sin parecer un error ni competir
   con el nombre del documento. */
.doc-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-tertiary);
  vertical-align: middle;
  cursor: help;
}

.doc-scan-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 9px 12px;
  border-left: 3px solid var(--border, #e2e8f0);
  background: var(--bg-subtle, #f8fafc);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.doc-scan-note i { flex: none; color: var(--text-tertiary); }

/* === Charts === */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.chart-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
}

.chart-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
}

.chart-card-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.chart-card-header p {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.chart-card-body { padding: 20px; }

/* === Quick Access Grid === */
.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.quick-access-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s ease;
  cursor: pointer;
}
.quick-access-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.qa-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.qa-open .qa-icon { background: #e8f5e9; color: #2e7d32; }
.qa-eval .qa-icon { background: #fff3e0; color: #ef6c00; }
.qa-future .qa-icon { background: #e8eaf6; color: #3949ab; }
.qa-open:hover { border-color: #2e7d32; }
.qa-eval:hover { border-color: #ef6c00; }
.qa-future:hover { border-color: #3949ab; }
.qa-content { flex: 1; min-width: 0; }
.qa-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.qa-desc { font-size: 12px; color: var(--text-secondary); }

/* === AI Banner === */
.ai-banner {
  position: relative;
  background: linear-gradient(135deg, #1a1d2e 0%, #2e3354 50%, #1a1d2e 100%);
  border-radius: var(--radius-lg);
  padding: 32px;
  color: #fff;
  overflow: hidden;
  margin-top: 24px;
}

.ai-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(66, 99, 235, 0.3) 0%, transparent 70%);
  pointer-events: none;
}

.ai-banner::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: 10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(121, 80, 242, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.ai-banner-content {
  position: relative;
  z-index: 1;
}

.ai-banner-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-light);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-banner h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.ai-banner p {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  max-width: 600px;
  line-height: 1.6;
}

/* === Alertas Placeholder === */
.placeholder-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
}

.placeholder-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 24px;
}

.placeholder-page h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.placeholder-page p {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 400px;
  margin-bottom: 24px;
}

.email-capture {
  display: flex;
  gap: 8px;
  max-width: 400px;
  width: 100%;
}

.email-capture input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
}

.email-capture input:focus {
  outline: none;
  border-color: var(--primary-light);
}

.email-capture button {
  padding: 10px 20px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.email-capture button:hover { background: var(--primary-dark); }

.alert-preview {
  margin-top: 40px;
  width: 100%;
  max-width: 500px;
}

.alert-preview-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
  border-left: 3px solid var(--primary);
  text-align: left;
  margin-bottom: 12px;
  opacity: 0.6;
}

.alert-preview-card h4 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.alert-preview-card p {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 0;
}

/* === Toast Notifications === */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  pointer-events: auto;
  animation: toastIn 0.3s ease;
  border-left: 3px solid var(--primary);
  max-width: 360px;
}

.toast.toast-success { border-left-color: var(--status-open); }
.toast.toast-error { border-left-color: var(--status-cancelled); }
.toast.toast-warning { border-left-color: var(--status-evaluation); }

.toast-exit { animation: toastOut 0.3s ease forwards; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

/* === Skeleton Loading === */
.skeleton {
  background: linear-gradient(90deg, var(--border-light) 25%, #e8eaed 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text:last-child { width: 60%; }
.skeleton-title { height: 20px; width: 70%; margin-bottom: 12px; }
.skeleton-badge { height: 20px; width: 60px; border-radius: 20px; }
.skeleton-kpi { height: 80px; }
.skeleton-card {
  height: 180px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* === Empty State === */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.empty-state p {
  font-size: 14px;
  color: var(--text-secondary);
}

/* === Overlay (mobile sidebar) === */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: calc(var(--z-sidebar) - 1);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-slow);
}

.sidebar-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* === Mobile Bottom Nav === */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-nav-height);
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: var(--z-mobile-nav);
  padding: 0;
}

.mobile-nav-items {
  display: flex;
  height: 100%;
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  transition: color var(--transition-fast);
  text-decoration: none;
  padding: 0;
}

.mobile-nav-item:hover { color: var(--primary); text-decoration: none; }
.mobile-nav-item.active { color: var(--primary); }
.mobile-nav-item i { width: 22px; height: 22px; }

/* === Page Transitions === */
.page-enter {
  animation: fadeInUp 0.25s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Dashboard layout === */
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

/* === CTA Button === */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(66, 99, 235, 0.3);
  white-space: nowrap;
}

.btn-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(66, 99, 235, 0.4);
  text-decoration: none;
  color: #fff;
}

/* === Section Headers === */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 600;
}

.section-header a, .section-header button {
  font-size: 13px;
  color: var(--primary);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* === Responsive === */

/* Tablets and below */
@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }

  .app-main { margin-left: 0; }

  .app-header { padding: 0 12px; gap: 8px; }
  .header-hamburger { display: flex; padding: 6px; }
  /* Solo el logo "Certamia"; ocultamos "/ Página" (ya está en el título) */
  .header-breadcrumbs span, .breadcrumb-current { display: none; }
  .header-breadcrumbs { font-size: 15px; font-weight: 700; }
  /* Búsqueda: no crece de más, deja aire para el resto */
  .header-search { max-width: none; flex: 1 1 60px; min-width: 40px; }
  .header-country select { padding: 6px 20px 6px 8px; font-size: 13px; }
  /* Auth compacto sin wrap */
  .header-auth-actions { gap: 6px; }
  .header-login-link { font-size: 13px; white-space: nowrap; }
  .header-cta { padding: 8px 10px; font-size: 13px; white-space: nowrap; gap: 4px; }
  /* Chip de país redundante en Explorar (el header ya controla el país) */
  .filter-chip[data-key="country"] { display: none; }

  .app-content {
    padding: 16px;
    padding-bottom: calc(16px + var(--mobile-nav-height));
  }

  .mobile-nav { display: flex; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-card { padding: 14px; }
  .kpi-value { font-size: 24px; }

  .opp-cards-grid { grid-template-columns: 1fr; }
  .quick-access-grid { grid-template-columns: 1fr; gap: 10px; }
  .quick-access-card { padding: 14px 16px; }

  .search-bar { flex-direction: column; }
  .search-input-wrap input { font-size: 16px; } /* prevent iOS zoom */
  .btn-search { padding: 12px; }

  /* Filtros colapsables: por defecto ocultos, se abren con el botón "Filtros".
     Así los resultados se ven de una, sin scrollear 9 campos. */
  .filters-toggle { display: flex; }
  .filters-row { display: none; flex-direction: column; }
  .filters-row.open { display: flex; }
  .filter-select { width: 100%; }
  .filter-input { width: 100%; }
  .buyer-typeahead { width: 100%; min-width: 0 !important; }
  /* País: en móvil lo controla el selector del header (evita duplicado). */
  #exp-country { display: none; }

  .page-title { font-size: 20px; }

  .detail-hero { padding: 20px; }
  .detail-title { font-size: 18px; }
  .detail-amount { font-size: 22px; }

  .timeline-bar { flex-direction: column; gap: 0; }
  .timeline-line,
  .timeline-progress { display: none; }
  .timeline-steps { flex-direction: column; gap: 16px; align-items: flex-start; }
  .timeline-step { flex: none; flex-direction: row; gap: 12px; }

  .detail-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .detail-tab { white-space: nowrap; padding: 12px 14px; font-size: 13px; }
}

/* Small phones */
@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr; }
}

/* === Utility === */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.gap-4 { gap: 16px; }

/* ================================================================
   Certamia — Dashboard Hero, Category Cards, Deadline Badges
   ================================================================ */

/* === Hero Search Section === */
.hero-search {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  margin-bottom: 24px;
  color: #fff;
  text-align: center;
}

.hero-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.hero-subtitle {
  font-size: 15px;
  opacity: 0.85;
  margin-bottom: 24px;
  font-weight: 400;
}

.hero-search-wrap {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
}

.hero-search-wrap input {
  flex: 1;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 2px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: all var(--transition);
}

.hero-search-wrap input::placeholder {
  color: rgba(255,255,255,0.6);
}

.hero-search-wrap input:focus {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.6);
}

.hero-search-wrap button {
  padding: 14px 24px;
  border-radius: var(--radius);
  border: none;
  background: #fff;
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
  white-space: nowrap;
}

.hero-search-wrap button:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-1px);
}

/* === Category Cards Grid === */
.category-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.category-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
}

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

.category-card.active {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.category-card-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.category-card-count {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.category-card-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.category-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}

.cat-goods { border-top: 3px solid #12b886; }
.cat-services { border-top: 3px solid #4263eb; }
.cat-works { border-top: 3px solid #fd7e14; }
.cat-all { border-top: 3px solid #7950f2; }

/* === Deadline Badges === */
.badge-deadline-urgent {
  background: #fff5f5;
  color: #e03131;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  display: inline-block;
  white-space: nowrap;
}

.badge-deadline-warning {
  background: #fff9db;
  color: #e67700;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  display: inline-block;
  white-space: nowrap;
}

.badge-deadline-soon {
  background: #fff3bf;
  color: #c77c00;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  display: inline-block;
  white-space: nowrap;
}

.badge-deadline-normal {
  background: #e6fcf5;
  color: #087f5b;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  display: inline-block;
  white-space: nowrap;
}

.badge-deadline-past {
  background: #f1f3f5;
  color: #868e96;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  display: inline-block;
  white-space: nowrap;
}

/* === Deadline Countdown Banner (Detail page) === */
.deadline-banner {
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.deadline-banner-icon {
  font-size: 24px;
  line-height: 1;
}

.deadline-banner-text {
  font-size: 16px;
  font-weight: 600;
}

.deadline-banner-date {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 2px;
}

.deadline-urgent {
  background: linear-gradient(135deg, #fff5f5, #ffe3e3);
  border-left: 4px solid #e03131;
  color: #c92a2a;
}

.deadline-warning {
  background: linear-gradient(135deg, #fff9db, #ffec99);
  border-left: 4px solid #f08c00;
  color: #e67700;
}

.deadline-soon {
  background: linear-gradient(135deg, #fff3bf, #ffe066);
  border-left: 4px solid #f59f00;
  color: #c77c00;
}

.deadline-normal {
  background: linear-gradient(135deg, #e6fcf5, #c3fae8);
  border-left: 4px solid #12b886;
  color: #087f5b;
}

.deadline-past {
  background: #f1f3f5;
  border-left: 4px solid #868e96;
  color: #868e96;
}

/* === Vision Banner === */
.vision-banner {
  background: linear-gradient(135deg, #f8f9fa 0%, #edf2ff 100%);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-top: 28px;
  border: 1px solid var(--border);
}

.vision-banner-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.vision-banner h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.vision-banner p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 700px;
}

/* === Closing Soon Section === */
.closing-section {
  margin-bottom: 28px;
}

.closing-section .section-header {
  margin-bottom: 16px;
}

/* === Dashboard KPI compact bar === */
.kpi-compact-bar {
  display: flex;
  gap: 24px;
  padding: 16px 20px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.kpi-compact-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kpi-compact-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.kpi-compact-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* === Responsive overrides for new dashboard === */
@media (max-width: 768px) {
  .hero-search {
    padding: 28px 16px;
  }
  .hero-title {
    font-size: 22px;
  }
  .hero-subtitle {
    font-size: 13px;
  }
  .hero-search-wrap {
    flex-direction: column;
  }
  .hero-search-wrap button {
    width: 100%;
  }
  .category-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kpi-compact-bar {
    gap: 16px;
    padding: 12px 16px;
  }
  .kpi-compact-value {
    font-size: 16px;
  }
  .vision-banner {
    padding: 20px 16px;
  }
  .deadline-banner {
    padding: 12px 16px;
  }
  .deadline-banner-text {
    font-size: 14px;
  }
}

/* ================================================================
   Suppliers / Directorio + Transparencia
   ================================================================ */

/* Transparency banner */
.transparency-banner {
  margin-top: 20px;
  background: linear-gradient(135deg, #fff5f5 0%, #fff9db 100%);
  border: 1px solid #ffd8a8;
  border-radius: 12px;
  padding: 20px 24px;
}
.transparency-banner-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.transp-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  color: #c92a2a; letter-spacing: 0.04em;
}
.transp-see-all {
  font-size: 13px; font-weight: 600; color: var(--primary);
}
.transp-context {
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
  margin-bottom: 16px;
}
.transp-list {
  display: flex; flex-direction: column; gap: 8px;
}
.transp-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 12px 14px;
  background: #fff; border: 1px solid #fed7d7;
  border-left: 4px solid #e03131;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
}
.transp-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.transp-item-main { flex: 1; min-width: 0; }
.transp-item-name {
  font-size: 14px; font-weight: 600; color: var(--text-primary, #1a1d2e);
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.transp-item-meta {
  font-size: 12px; color: var(--text-secondary);
}
.transp-item-stats {
  text-align: right; flex-shrink: 0;
}
.transp-stat-num {
  font-size: 20px; font-weight: 700; color: #c92a2a; line-height: 1;
}
.transp-stat-label {
  font-size: 11px; color: var(--text-secondary); text-transform: uppercase;
  letter-spacing: 0.04em; margin-top: 2px;
}
.transp-stat-amount {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  margin-top: 4px;
}

/* Supplier list */
.suppliers-list {
  display: flex; flex-direction: column; gap: 10px;
}
.supplier-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}
.supplier-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-color: var(--primary-light);
}
.supplier-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
}
.supplier-card-name {
  font-size: 15px; font-weight: 600; color: var(--text-primary, #1a1d2e);
  flex: 1; min-width: 0;
}
.supplier-card-badges {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.supplier-card-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-secondary);
}
.supplier-meta-item {
  display: inline-flex; align-items: center; gap: 4px;
}
.badge-sancionado {
  background: #ffe3e3; color: #c92a2a;
  display: inline-flex; align-items: center; gap: 4px;
}
.badge-rnp {
  background: #e7f5ff; color: var(--primary-dark);
}

/* Supplier detail page */
.supplier-detail-hero {
  background: var(--surface);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.supplier-detail-title {
  font-size: 22px; font-weight: 700; margin: 8px 0 4px;
}
.supplier-detail-ruc {
  font-size: 13px; color: var(--text-secondary); margin-bottom: 12px;
}
.supplier-detail-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 16px;
}
.supplier-kpi {
  background: var(--surface-hover, #f8f9fa);
  border-radius: 8px;
  padding: 12px 14px;
}
.supplier-kpi-label {
  font-size: 11px; text-transform: uppercase; color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.supplier-kpi-value {
  font-size: 22px; font-weight: 700; margin-top: 4px;
}
.supplier-section {
  background: var(--surface);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.supplier-section h3 {
  font-size: 14px; text-transform: uppercase; color: var(--text-secondary);
  letter-spacing: 0.04em; margin-bottom: 14px;
}
.sanction-item {
  border-left: 4px solid #e03131;
  padding: 12px 16px;
  background: #fff5f5;
  border-radius: 0 8px 8px 0;
  margin-bottom: 10px;
}
.sanction-item.no-vigente {
  border-left-color: #adb5bd; background: var(--surface-hover, #f8f9fa);
}
.sanction-item-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 6px;
}
.sanction-tipo {
  font-size: 13px; font-weight: 700; color: #c92a2a;
}
.sanction-item.no-vigente .sanction-tipo { color: var(--text-secondary); }
.sanction-estado {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: #ffe3e3; color: #c92a2a;
}
.sanction-item.no-vigente .sanction-estado {
  background: #e9ecef; color: var(--text-secondary);
}
.sanction-meta {
  font-size: 12px; color: var(--text-secondary); margin-bottom: 6px;
}
.sanction-infraccion {
  font-size: 13px; color: var(--text-primary, #1a1d2e); line-height: 1.5;
}

@media (max-width: 768px) {
  .transp-item { flex-direction: column; align-items: stretch; }
  .transp-item-stats { text-align: left; }
  .supplier-detail-kpis { grid-template-columns: 1fr; }
}

/* ================================================================
   Transparencia v2 — atribuciones, contexto, KPI alert
   ================================================================ */
.transp-item-context {
  font-size: 11px; color: var(--text-tertiary, #9ca3af);
  margin-top: 4px; font-style: italic;
}
.transp-footnote {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #ffd8a8;
  font-size: 11px; line-height: 1.5; color: var(--text-secondary);
  display: flex; gap: 6px; align-items: flex-start;
}
.transp-footnote em { font-style: italic; color: var(--text-primary, #1a1d2e); font-weight: 500; }

.data-attribution {
  margin-top: 32px;
  padding: 18px 22px;
  background: var(--surface-hover, #f8f9fa);
  border-left: 3px solid var(--primary-light);
  border-radius: 8px;
  font-size: 12px; line-height: 1.55;
  color: var(--text-secondary);
}
.data-attribution h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-primary, #1a1d2e); margin-bottom: 8px;
}
.data-attribution ul { list-style: disc; padding-left: 18px; margin-bottom: 10px; }
.data-attribution li { margin-bottom: 4px; }
.data-attribution a { color: var(--primary); }
.data-attribution-note {
  border-top: 1px dashed #ced4da;
  padding-top: 10px;
  margin-top: 8px;
  font-size: 11px;
}

.supplier-kpi-alert {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe3e3 100%);
  border: 1px solid #ffd8a8;
}
.supplier-kpi-alert .supplier-kpi-value { color: #c92a2a; }
.supplier-kpi-alert .supplier-kpi-label { color: #c92a2a; font-weight: 600; }
.supplier-kpi-sub {
  font-size: 11px; color: var(--text-secondary); margin-top: 4px;
}

.sanction-verify-link {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600;
  color: var(--primary);
  padding: 2px 6px; border-radius: 4px;
  background: var(--surface);
  border: 1px solid #dee2e6;
  text-decoration: none;
}
.sanction-verify-link:hover { background: var(--primary-bg, #edf2ff); }

/* ================================================================
   Benchmark de precios (CUBSO)
   ================================================================ */
.benchmark-hint {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--primary-bg, #edf2ff);
  border-radius: 8px;
  font-size: 13px; color: var(--text-secondary);
  margin-bottom: 16px;
}

.cubso-results {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 24px;
}

.cubso-card {
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 18px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}
.cubso-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-color: var(--primary-light);
}
.cubso-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin-bottom: 10px;
}
.cubso-card-code {
  font-size: 11px; color: var(--text-tertiary, #9ca3af);
  font-family: ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.02em;
}
.cubso-card-name {
  font-size: 14px; font-weight: 600; color: var(--text-primary, #1a1d2e);
  margin-top: 2px;
}
.cubso-card-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.cubso-stat {
  display: flex; flex-direction: column;
}
.cubso-stat-num {
  font-size: 16px; font-weight: 700; color: var(--text-primary, #1a1d2e);
}
.cubso-stat-lbl {
  font-size: 10px; color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.04em; margin-top: 2px;
}
.cubso-card-skew {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  font-size: 11px;
  background: #fff3bf;
  color: #856404;
  border-radius: 4px;
}

/* Price bar (boxplot-like) */
.price-bar-wrap { padding: 8px 0; }
.price-bar-track {
  position: relative; height: 32px;
  background: linear-gradient(to right, #f1f3f5 0%, #f1f3f5 100%);
  border-radius: 4px;
  margin-bottom: 12px;
}
.price-bar-iqr {
  position: absolute; top: 4px; bottom: 4px;
  background: linear-gradient(to right, var(--primary-light), var(--primary));
  border-radius: 3px;
  opacity: 0.85;
}
.price-bar-marker {
  position: absolute; top: -4px; bottom: -4px;
  width: 4px; background: #1a1d2e;
  border-radius: 1px;
  transform: translateX(-2px);
}
.price-bar-labels {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  font-size: 11px;
}
.price-bar-labels > div { display: flex; flex-direction: column; align-items: center; }
.price-bar-labels .label {
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.price-bar-labels .val {
  font-weight: 600; color: var(--text-primary, #1a1d2e);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .cubso-card-stats { grid-template-columns: repeat(2, 1fr); }
  .price-bar-labels { grid-template-columns: repeat(3, 1fr); }
  .price-bar-labels > div:nth-child(2),
  .price-bar-labels > div:nth-child(4) { display: none; }
}

/* Party cards in /oportunidad/:id parties tab */
.party-card {
  background: var(--surface-hover, #f8f9fa);
  border-radius: 8px;
  padding: 10px 14px;
  border-left: 3px solid #e5e7eb;
  transition: border-color 0.15s, background 0.15s;
}
.party-card[data-ruc]:hover {
  background: var(--primary-bg, #edf2ff);
  border-left-color: var(--primary);
}

/* ================================================================
   Header user menu + Registro + Panel
   ================================================================ */
.header-user { margin-left: auto; display: flex; align-items: center; }
.header-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: var(--primary); color: #fff;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
}
.header-cta:hover { background: var(--primary-dark); color: #fff; }

.header-user-wrap { position: relative; }
.header-user-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--surface-hover, #f8f9fa);
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.header-user-btn:hover { background: var(--surface); }
.header-user-avatar {
  width: 28px; height: 28px;
  background: var(--primary); color: #fff;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.header-user-meta {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.2;
}
.header-user-name { font-size: 12px; font-weight: 600; }
.header-user-org {
  font-size: 10px; color: var(--text-tertiary); max-width: 140px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.header-user-menu {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 6px;
  z-index: 100;
}
.header-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-primary, #1a1d2e);
  background: none; border: none;
  text-align: left; text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.header-menu-item:hover { background: var(--surface-hover, #f8f9fa); }

@media (max-width: 768px) {
  .header-user-meta { display: none; }
  .header-user-btn { padding: 2px; }
}

/* ----- Registro page ----- */
.registro-page { max-width: 720px; margin: 0 auto; }
.registro-hero { margin-bottom: 28px; }
.registro-hero h1 {
  font-size: 28px; font-weight: 700; line-height: 1.25;
  margin-bottom: 12px; color: var(--text-primary, #1a1d2e);
}
.registro-hero p {
  font-size: 15px; color: var(--text-secondary); line-height: 1.55;
}
.registro-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.registro-step-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--primary); font-weight: 700;
  margin-bottom: 6px;
}
.registro-step h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.registro-step-help { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }

/* --- Country selector multi-país (Hito 3) ----------------- */
.registro-country-select {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 24px 0;
}
.registro-country-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--surface-hover, #f8f9fa);
  border: 2px solid transparent; border-radius: 10px;
  cursor: pointer; font-family: inherit; font-size: 14px;
  transition: border-color .15s ease, background .15s ease;
}
.registro-country-btn:hover { background: #eef0f3; }
.registro-country-btn.active {
  background: var(--surface);
  border-color: var(--primary);
  font-weight: 600;
}
.registro-country-btn .flag { font-size: 18px; line-height: 1; }
.registro-country-btn .lbl { color: var(--text-primary); }

.registro-confirm-verified { border-left-color: #2b9348 !important; }
.registro-confirm-pending  { border-left-color: #f59e0b !important; }
.registro-confirm-stats { font-feature-settings: 'tnum' 1; }

.registro-ruc-input { display: flex; gap: 10px; margin-bottom: 14px; }
.registro-ruc-input input {
  flex: 1; padding: 14px 18px;
  font-size: 18px; font-weight: 600;
  border: 1px solid #ced4da; border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.05em;
}
.registro-ruc-input input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.registro-ruc-input button {
  padding: 0 24px;
  background: var(--primary); color: #fff;
  border: none; border-radius: 10px;
  font-weight: 600; cursor: pointer; font-family: inherit;
}
.registro-ruc-input button:disabled { background: #adb5bd; cursor: not-allowed; }

.registro-mini-help {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-tertiary);
}

.registro-confirm {
  background: var(--surface-hover, #f8f9fa);
  border-radius: 10px;
  padding: 16px 20px;
  border-left: 3px solid var(--primary);
}
.registro-confirm-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.registro-confirm-meta {
  font-size: 13px; color: var(--text-secondary);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.registro-confirm-domicilio { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; }
.registro-confirm-region { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.registro-link-btn {
  background: none; border: none; cursor: pointer;
  margin-top: 8px; font-size: 12px; color: var(--primary);
  font-family: inherit; padding: 0;
}

.registro-form { display: flex; flex-direction: column; gap: 14px; }
.registro-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; font-weight: 600;
}
.registro-form label > span { color: var(--text-primary, #1a1d2e); }
.registro-form input {
  padding: 10px 14px;
  font-size: 14px; font-weight: normal;
  border: 1px solid #ced4da; border-radius: 8px;
  font-family: inherit;
}
.registro-form input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.registro-form small { font-size: 11px; color: var(--text-tertiary); font-weight: normal; }

.registro-consents { display: flex; flex-direction: column; gap: 10px; }
.registro-consent {
  display: flex; gap: 12px;
  padding: 12px 14px;
  background: var(--surface-hover, #f8f9fa);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.registro-consent input { margin-top: 2px; cursor: pointer; }
.registro-consent strong { display: block; color: var(--text-primary, #1a1d2e); font-weight: 600; }
.registro-consent small { display: block; color: var(--text-tertiary); margin-top: 3px; }
.registro-consent-required { background: var(--primary-bg, #edf2ff); }

.registro-submit {
  margin-top: 24px; width: 100%;
  padding: 14px;
  background: var(--primary); color: #fff;
  border: none; border-radius: 10px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
.registro-submit:disabled { background: #adb5bd; cursor: not-allowed; }

.registro-foot {
  margin-top: 20px;
  font-size: 11px; color: var(--text-tertiary); text-align: center; line-height: 1.55;
}

/* ----- Panel page ----- */
.panel-hero { margin-bottom: 12px; }
.panel-hero h1 { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.panel-org { font-size: 13px; color: var(--text-secondary); }

.panel-org-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px 0 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.panel-org-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  margin-bottom: 10px;
}
.panel-org-status.ok { color: #2b8a3e; }
.panel-org-status.warn { color: #c92a2a; }
.panel-org-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-secondary);
}

.panel-empty {
  display: flex; gap: 10px;
  padding: 14px 18px;
  background: var(--primary-bg, #edf2ff);
  border-radius: 8px;
  font-size: 13px; line-height: 1.55;
  color: var(--text-secondary);
}
.panel-empty i { flex-shrink: 0; margin-top: 2px; color: var(--primary); }

.panel-quick-actions {
  margin-top: 24px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.panel-action {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary, #1a1d2e);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.panel-action:hover { border-color: var(--primary-light); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.panel-action i { color: var(--primary); flex-shrink: 0; }
.panel-action strong { display: block; font-size: 14px; font-weight: 600; }
.panel-action span { font-size: 12px; color: var(--text-tertiary); }

@media (max-width: 768px) {
  .panel-quick-actions { grid-template-columns: 1fr; }
}

/* Header dual CTAs */
.header-auth-actions {
  display: flex; align-items: center; gap: 12px;
}
.header-login-link {
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
}
.header-login-link:hover { color: var(--primary); }

/* Login page tabs */
.login-tabs {
  display: flex; gap: 4px;
  background: var(--surface-hover, #f8f9fa);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
}
.login-tab {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px;
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  background: none; border: none; cursor: pointer;
  border-radius: 8px;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.login-tab:hover { color: var(--primary); }
.login-tab.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; font-weight: 600;
}
.login-form input {
  padding: 12px 14px;
  font-size: 14px; font-weight: normal;
  border: 1px solid #ced4da; border-radius: 8px;
  font-family: inherit;
}
.login-form input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.login-form small { font-size: 11px; color: var(--text-tertiary); font-weight: normal; }

/* ================================================================
   Alertas — CRUD list + form
   ================================================================ */
.alert-form {
  background: var(--surface);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-left: 3px solid var(--primary);
}
.alert-form h3 { font-size: 16px; font-weight: 700; }
.alert-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 12px;
}
.alert-field input, .alert-field select {
  padding: 10px 14px;
  font-size: 14px; font-weight: normal;
  border: 1px solid #ced4da; border-radius: 8px;
  font-family: inherit;
}
.alert-field input:focus, .alert-field select:focus {
  outline: 2px solid var(--primary); border-color: var(--primary);
}
.alert-field small { font-size: 11px; color: var(--text-tertiary); font-weight: normal; }
.alert-field-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}

.alert-card {
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.alert-card:hover { border-color: var(--primary-light); }
.alert-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
}
.alert-card-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.alert-card-meta { font-size: 12px; color: var(--text-secondary); }
.alert-card-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.alert-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.alert-chip {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--primary-bg, #edf2ff);
  color: var(--primary-dark);
  border-radius: 999px;
  font-weight: 500;
}
.alert-delete-btn {
  background: none; border: 1px solid #e5e7eb;
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
}
.alert-delete-btn:hover { color: #c92a2a; border-color: #ffd8a8; background: #fff5f5; }

/* Toggle switch */
.alert-toggle {
  position: relative; display: inline-block;
  width: 36px; height: 20px;
  cursor: pointer;
}
.alert-toggle input { opacity: 0; width: 0; height: 0; }
.alert-toggle span {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: #ced4da;
  border-radius: 999px;
  transition: background 0.15s;
}
.alert-toggle span::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s;
}
.alert-toggle input:checked + span { background: var(--primary); }
.alert-toggle input:checked + span::before { transform: translateX(16px); }

/* Perfil — usa estilos de registro-page; aquí solo lo específico */
.page-enter .registro-confirm { margin-bottom: 0; }

textarea {
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid #ced4da; border-radius: 8px;
  font-family: inherit;
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--primary); border-color: var(--primary); }

@media (max-width: 768px) {
  .alert-field-row { grid-template-columns: 1fr; }
}

/* ================================================================
   A1 — Compatibilidad empresa ↔ oportunidad
   ================================================================ */

/* Badge chip para listas (explorar) */
.compat-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.4;
  border: 1px solid transparent; white-space: nowrap;
}
.compat-alto      { background: #e7f7ee; color: #0f7a44; border-color: #b6e6cb; }
.compat-medio     { background: #fef5e6; color: #b7791f; border-color: #f5dfae; }
.compat-bajo      { background: #eef0f4; color: #5b6472; border-color: #dfe3ea; }
.compat-muy_bajo  { background: #f6eded; color: #a3564f; border-color: #ecd4d1; }

/* Panel de detalle */
.compat-panel {
  border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-lg, 14px);
  background: #fff; padding: 18px 20px; margin: 16px 0;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04));
  border-left: 4px solid #cbd2dc;
}
.compat-panel.compat-alto     { border-left-color: #16a34a; }
.compat-panel.compat-medio    { border-left-color: #d99a1c; }
.compat-panel.compat-bajo     { border-left-color: #9aa3b2; }
.compat-panel.compat-muy_bajo { border-left-color: #c26b62; }
.compat-panel.compat-loading  { color: var(--text-secondary); font-size: 14px; }

.compat-panel-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-secondary); margin-bottom: 14px;
}
.compat-panel-head i { width: 16px; height: 16px; }
.compat-conf { margin-left: auto; font-weight: 600; text-transform: none;
  letter-spacing: 0; font-size: 11px; color: var(--text-tertiary); }

.compat-panel-body { display: flex; gap: 20px; align-items: flex-start; }
@media (max-width: 640px) { .compat-panel-body { flex-direction: column; } }

.compat-score-big {
  flex: 0 0 auto; width: 116px; text-align: center;
  border-radius: var(--radius, 12px); padding: 14px 8px;
  background: linear-gradient(180deg, #f8fafc, #eef1f6);
}
.compat-ring-alto     { background: linear-gradient(180deg,#eafaf1,#d6f2e2); }
.compat-ring-medio    { background: linear-gradient(180deg,#fef7ea,#fbecd0); }
.compat-ring-muy_bajo { background: linear-gradient(180deg,#faf0ef,#f2dedb); }
.compat-score-num { font-size: 38px; font-weight: 800; color: var(--text, #1a1d2e); line-height: 1; }
.compat-pct { font-size: 16px; font-weight: 700; color: var(--text-secondary); }
.compat-score-lvl { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }

.compat-detail { flex: 1; min-width: 0; }
.compat-bars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.compat-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.compat-bar-label { flex: 0 0 60px; color: var(--text-secondary); }
.compat-bar-track { flex: 1; height: 7px; background: #eef0f4; border-radius: 999px; overflow: hidden; }
.compat-bar-fill { display: block; height: 100%; background: var(--primary, #4263eb); border-radius: 999px; }
.compat-bar-val { flex: 0 0 auto; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

.compat-reasons { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.compat-reason { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text, #1a1d2e); }
.compat-r-icon { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; text-align: center;
  line-height: 16px; font-size: 11px; font-weight: 700; }
.compat-r-pos .compat-r-icon { background: #e7f7ee; color: #0f7a44; }
.compat-r-neu .compat-r-icon { background: #eef0f4; color: #5b6472; }
.compat-r-neg .compat-r-icon { background: #f6eded; color: #a3564f; }

.compat-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef0f4; }
.compat-tune { font-size: 13px; font-weight: 600; color: var(--primary, #4263eb); text-decoration: none; }
.compat-tune:hover { text-decoration: underline; }
.compat-empty { font-size: 14px; color: var(--text-secondary); margin: 8px 0 0; }

/* Perfil de compatibilidad (página perfil) */
.compat-profile-block { margin-bottom: 16px; }
.compat-profile-label { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-secondary); margin-bottom: 8px; }
.compat-profile-value { font-size: 15px; font-weight: 600; color: var(--text, #1a1d2e); }
.compat-rubro-chips, .compat-override-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.compat-rubro-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f4f6fa; border: 1px solid #e3e8f0; border-radius: 999px;
  padding: 5px 10px; font-size: 12.5px; color: var(--text, #1a1d2e); max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.compat-rubro-count { background: var(--primary, #4263eb); color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 700; padding: 1px 6px; }
.compat-override-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #eef3ff; border: 1px solid #cdd9fb; border-radius: 999px;
  padding: 4px 6px 4px 11px; font-size: 12.5px; font-weight: 600;
  color: var(--primary-dark, #2f47b3); font-family: ui-monospace, monospace;
}
.compat-override-chip .chip-remove { background: none; border: none; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--primary, #4263eb); padding: 0 2px; }

/* ================================================================
   A4 — Análisis de competencia (señales de direccionamiento)
   ================================================================ */
.comp-panel {
  border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-lg, 14px);
  background: #fff; padding: 18px 20px; margin: 16px 0;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04));
  border-left: 4px solid #cbd2dc;
}
.comp-panel.comp-alto   { border-left-color: #c0392b; }
.comp-panel.comp-medio  { border-left-color: #d99a1c; }
.comp-panel.comp-bajo   { border-left-color: #9aa3b2; }
.comp-panel.comp-ok     { border-left-color: #16a34a; }
.comp-panel.comp-nodata { border-left-color: #cbd2dc; }
.comp-panel.comp-loading { color: var(--text-secondary); font-size: 14px; }

.comp-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-secondary); margin-bottom: 14px;
}
.comp-head > i { width: 16px; height: 16px; }

.comp-nivel-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; text-transform: none; letter-spacing: 0;
  padding: 2px 9px; border-radius: 999px; border: 1px solid transparent;
}
.comp-nivel-badge.comp-alto   { background: #fbeae7; color: #a3362a; border-color: #f1c9c2; }
.comp-nivel-badge.comp-medio  { background: #fef5e6; color: #b7791f; border-color: #f5dfae; }
.comp-nivel-badge.comp-bajo   { background: #eef0f4; color: #5b6472; border-color: #dfe3ea; }
.comp-nivel-badge.comp-ok     { background: #e7f7ee; color: #0f7a44; border-color: #b6e6cb; }
.comp-nivel-badge.comp-nodata { background: #eef0f4; color: #5b6472; border-color: #dfe3ea; }

.comp-postores { margin-left: auto; font-size: 11.5px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--text-tertiary); }

.comp-signals { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.comp-signal { display: flex; gap: 10px; align-items: flex-start; }
.comp-s-icon { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; }
.comp-s-warn .comp-s-icon { color: #c0392b; }
.comp-s-ok   .comp-s-icon { color: #16a34a; }
.comp-s-info .comp-s-icon { color: #5b6472; }
.comp-s-text { font-size: 13.5px; color: var(--text, #1a1d2e); line-height: 1.45; }
.comp-s-src  { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

.comp-disclaimer { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #eef0f4;
  font-size: 11.5px; line-height: 1.5; color: var(--text-tertiary); }
.comp-empty { font-size: 14px; color: var(--text-secondary); margin: 8px 0 0; }

/* ================================================================
   A3 — Resumen ejecutivo IA (AI tab)
   ================================================================ */
.ai-tab { display: flex; flex-direction: column; gap: 16px; }
.ai-resumen {
  border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-lg, 14px);
  background: linear-gradient(180deg,#faf8ff,#f4f0fe); padding: 18px 20px;
  border-left: 4px solid #7c5cff;
}
.ai-resumen-loading { color: var(--text-secondary); font-size: 14px; }
.ai-resumen-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #5b3fd1;
}
.ai-resumen-text { font-size: 15px; line-height: 1.6; color: var(--text, #1a1d2e); margin: 0; }
.ai-src { margin-left: auto; font-size: 10.5px; font-weight: 700; text-transform: none;
  letter-spacing: 0; padding: 1px 8px; border-radius: 999px; }
.ai-src-tpl { background: #eef0f4; color: #5b6472; }
.ai-src-llm { background: #ece5ff; color: #5b3fd1; }
.ai-soon { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--text-tertiary); padding: 10px 12px; background: #f7f8fa;
  border-radius: var(--radius, 12px); }

/* ================================================================
   A6 — Predicción de recompra
   ================================================================ */
.recompra-card {
  border: 1px solid #d7e8dd; border-radius: var(--radius, 12px);
  background: #f2faf5; padding: 14px 16px; border-left: 4px solid #16a34a;
}
.recompra-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #0f7a44;
}
.recompra-conf { margin-left: auto; font-size: 11px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--text-tertiary); }
.recompra-text { font-size: 14px; line-height: 1.55; color: var(--text, #1a1d2e); margin: 0; }

/* Feed de recompras en Mi Panel */
.recompra-feed { display: flex; flex-direction: column; gap: 10px; }
.recompra-feed-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius, 12px); background: #fff;
}
.recompra-feed-when { flex: 0 0 auto; text-align: center; min-width: 78px;
  background: #f2faf5; border-radius: 10px; padding: 8px 6px; }
.recompra-feed-when strong { display: block; font-size: 15px; color: #0f7a44; }
.recompra-feed-when span { font-size: 10.5px; color: var(--text-tertiary); }
.recompra-feed-main { flex: 1; min-width: 0; }
.recompra-feed-rubro { font-size: 14px; font-weight: 600; color: var(--text, #1a1d2e); }
.recompra-feed-buyer { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.recompra-feed-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

/* ================================================================
   Ola 2 Fase 1 — Búsqueda dentro de documentos
   ================================================================ */
.docsearch { margin-bottom: 18px; }
.docsearch-status { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.docsearch-box { display: flex; gap: 8px; }
.docsearch-box input {
  flex: 1; padding: 10px 12px; border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 10px); font-size: 14px;
}
.docsearch-loading, .docsearch-empty { font-size: 13px; color: var(--text-tertiary); padding: 12px 2px; }
.docsearch-count { font-size: 12px; color: var(--text-tertiary); margin: 14px 0 8px; }
/* Aviso de que se respondió en un modo inferior al pedido por tope de plan. */
.docsearch-degraded {
  font-size: 12.5px; line-height: 1.5; margin: 12px 0 4px; padding: 10px 12px;
  background: #fff9db; border-left: 3px solid #f59f00; border-radius: 6px; color: #7a5b00;
}
.docsearch-degraded a { color: #7a5b00; font-weight: 700; text-decoration: underline; }
.docsearch-hit {
  border: 1px solid var(--border, #e5e7eb); border-left: 3px solid #7c5cff;
  border-radius: var(--radius, 10px); padding: 12px 14px; margin-bottom: 10px; background: #fff;
}
.docsearch-snippet { font-size: 13.5px; line-height: 1.55; color: var(--text, #1a1d2e); }
.docsearch-snippet mark { background: #fff3b0; color: inherit; padding: 0 2px; border-radius: 3px; }
.docsearch-hit-src { font-size: 11.5px; color: var(--text-tertiary); margin-top: 8px; }
.docsearch-hit-src a { color: var(--primary, #4263eb); }

/* Selector de modo del buscador de documentos (Fase 2) */
.docsearch-mode {
  padding: 10px 8px; border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 10px); font-size: 13px; background: #fff;
  color: var(--text, #1a1d2e); cursor: pointer;
}

/* ================================================================
   Ola 2 Fase 4 — Preparación de oferta (bid-prep)
   ================================================================ */
.bidprep { margin-top: 4px; }
.bidprep-locked {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border: 1px dashed var(--border, #e5e7eb); border-radius: var(--radius, 12px);
  background: #faf9fe; color: var(--text-secondary);
}
.bidprep-locked strong { display: block; color: var(--text, #1a1d2e); font-size: 14px; }
.bidprep-locked span { font-size: 12.5px; }
.bidprep-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: #5b3fd1; color: #fff; border: none; border-radius: var(--radius, 10px);
  padding: 11px 18px; font-size: 14px; font-weight: 600;
}
.bidprep-btn:hover { background: #4c33b8; }
.bidprep-btn:disabled { opacity: .7; cursor: default; }
.bidprep-empty { font-size: 13px; color: var(--text-secondary); padding: 12px 2px; }
.bidprep-card {
  border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-lg, 14px);
  background: #fff; padding: 18px 20px; margin-top: 12px; border-left: 4px solid #5b3fd1;
}
.bidprep-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #5b3fd1;
}
.bidprep-brief { font-size: 14px; line-height: 1.55; color: var(--text, #1a1d2e); }
.bidprep-h1 { font-size: 16px; margin: 4px 0 6px; }
.bidprep-h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-secondary); margin: 16px 0 6px; }
.bidprep-li { font-size: 13.5px; margin: 3px 0; color: var(--text, #1a1d2e); }
.bidprep-check { font-size: 13.5px; margin: 4px 0; color: var(--text, #1a1d2e); }
.bidprep-brief p { margin: 4px 0; }
.bidprep-evidence-title { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-secondary); margin: 18px 0 8px;
  padding-top: 12px; border-top: 1px solid #eef0f4; }
.bidprep-req { border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 8px; }
.bidprep-req summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text, #1a1d2e); }
.bidprep-passage { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
  margin-top: 8px; padding: 8px 10px; background: #f7f8fa; border-radius: 8px; }

/* ================================================================
   Track B — Planes / billing
   ================================================================ */
.planes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
@media (max-width: 820px) { .planes-grid { grid-template-columns: 1fr; } }
.planes-card {
  position: relative; border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-lg, 14px);
  background: #fff; padding: 24px 20px; display: flex; flex-direction: column;
}
.planes-featured { border-color: #5b3fd1; box-shadow: 0 6px 24px rgba(91,63,209,.12); }
.planes-is-current { background: #fafafe; }
.planes-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: #5b3fd1; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 12px;
  border-radius: 999px; }
.planes-name { font-size: 15px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.planes-price { font-size: 34px; font-weight: 800; color: var(--text, #1a1d2e); margin: 6px 0 2px; }
.planes-per { font-size: 15px; font-weight: 600; color: var(--text-tertiary); }
.planes-tagline { font-size: 13.5px; color: var(--text-secondary); min-height: 38px; }
.planes-features { list-style: none; padding: 0; margin: 14px 0 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.planes-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--text, #1a1d2e); }
.planes-features li i { color: #16a34a; flex: 0 0 auto; margin-top: 2px; }
.planes-btn { width: 100%; padding: 11px; border: none; border-radius: var(--radius, 10px);
  background: #5b3fd1; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.planes-btn:hover { background: #4c33b8; }
.planes-btn-ghost { background: #fff; color: var(--text-secondary); border: 1px solid var(--border, #e5e7eb); }
.planes-current { text-align: center; font-size: 13px; font-weight: 700; color: #16a34a; padding: 11px; }
.planes-note { text-align: center; font-size: 12.5px; color: var(--text-tertiary); margin-top: 16px; }

.bidprep-upgrade {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border: 1px solid #e5ddff; border-radius: var(--radius, 12px);
  background: linear-gradient(180deg,#faf8ff,#f2ecfe); margin-top: 12px;
}
.bidprep-upgrade i { color: #b58a00; }
.bidprep-upgrade strong { display: block; font-size: 14px; color: var(--text, #1a1d2e); }
.bidprep-upgrade span { font-size: 12.5px; color: var(--text-secondary); }
.bidprep-upgrade-btn { margin-left: auto; white-space: nowrap; background: #5b3fd1; color: #fff;
  text-decoration: none; padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; }

/* ================================================================
   Gap 1 — Chat con las bases (RAG)
   ================================================================ */
.aichat-wrap { border: 1px solid var(--border,#e5e7eb); border-radius: var(--radius-lg,14px);
  background: #fff; padding: 16px 18px; border-left: 4px solid #7c5cff; }
.aichat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5b3fd1; }
.aichat-locked { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border: 1px dashed var(--border,#e5e7eb); border-radius: var(--radius,12px); background: #faf9fe; color: var(--text-secondary); }
.aichat-locked strong { display: block; color: var(--text,#1a1d2e); font-size: 14px; }
.aichat-locked span { font-size: 12.5px; }

.chat { display: flex; flex-direction: column; }
.chat-messages { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding: 4px 2px 10px; }
.chat-intro { font-size: 13px; color: var(--text-secondary); }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chat-chip { border: 1px solid #d9d2f7; background: #f4f0fe; color: #5b3fd1; border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; cursor: pointer; }
.chat-chip:hover { background: #ece5ff; }
.chat-msg { font-size: 13.5px; line-height: 1.5; max-width: 92%; }
.chat-user { align-self: flex-end; background: #5b3fd1; color: #fff; padding: 8px 12px; border-radius: 12px 12px 4px 12px; }
.chat-bot { align-self: flex-start; background: #f5f4f9; color: var(--text,#1a1d2e); padding: 10px 13px; border-radius: 12px 12px 12px 4px; }
.chat-thinking { color: var(--text-tertiary); font-style: italic; }
.chat-error { color: #a3362a; }
.chat-li { margin: 3px 0; }
.chat-badge { display:inline-block; margin-top:6px; font-size:10px; font-weight:700; color:#5b3fd1; background:#ece5ff; padding:1px 7px; border-radius:999px; }
.chat-sources { margin-top: 8px; }
.chat-sources summary { cursor: pointer; font-size: 11.5px; color: var(--text-tertiary); }
.chat-source { font-size: 11.5px; color: var(--text-secondary); margin-top: 6px; padding: 7px 9px; background: #fff; border: 1px solid #eef0f4; border-radius: 8px; }
.chat-input-row { display: flex; gap: 8px; margin-top: 10px; }
.chat-input-row input { flex: 1; padding: 10px 12px; border: 1px solid var(--border,#e5e7eb); border-radius: var(--radius,10px); font-size: 14px; }
.chat-send { background: #5b3fd1; color: #fff; border: none; border-radius: var(--radius,10px); padding: 0 16px; cursor: pointer; }
.chat-send:disabled { opacity: .6; }

/* ================================================================
   Gap 3 — Seguimiento (CRM/pipeline) + miembros
   ================================================================ */
.track-btn-wrap { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
.track-follow { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #5b3fd1; color: #fff; border: none; border-radius: var(--radius,10px); padding: 9px 16px; font-size: 14px; font-weight: 600; }
.track-follow:hover { background: #4c33b8; }
.track-badge { display: inline-flex; align-items: center; gap: 6px; background: #e7f7ee; color: #0f7a44;
  border: 1px solid #b6e6cb; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; text-transform: capitalize; }
.track-link { font-size: 13px; color: var(--primary,#4263eb); font-weight: 600; text-decoration: none; }
.track-untrack { background: none; border: none; color: var(--text-tertiary); font-size: 12.5px; cursor: pointer; text-decoration: underline; }

.track-board { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
@media (max-width: 1100px) { .track-board { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 240px; } }
.track-col { background: #f7f8fa; border-radius: var(--radius,12px); padding: 10px; min-height: 120px; }
.track-col-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); margin-bottom: 10px; display: flex; justify-content: space-between; }
.track-count { background: #e5e7eb; color: var(--text-secondary); border-radius: 999px; padding: 0 7px; font-size: 11px; }
.track-col-body { display: flex; flex-direction: column; gap: 8px; }
.track-card { background: #fff; border: 1px solid var(--border,#e5e7eb); border-radius: 10px; padding: 10px; }
.track-card-title { font-size: 13px; font-weight: 600; color: var(--text,#1a1d2e); cursor: pointer; line-height: 1.35; }
.track-card-title:hover { color: var(--primary,#4263eb); }
.track-card-buyer { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; }
.track-card-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 4px; }
.track-card-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.track-stage { flex: 1; font-size: 11.5px; padding: 4px 6px; border: 1px solid var(--border,#e5e7eb); border-radius: 8px; }
.track-remove { background: none; border: none; color: var(--text-tertiary); font-size: 16px; cursor: pointer; line-height: 1; }
.track-empty { text-align: center; color: var(--text-secondary); padding: 40px 20px; }
.track-empty i { color: var(--text-tertiary); }

/* Miembros (perfil) */
.members-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.member-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border,#e5e7eb); border-radius: 10px; }
.member-email { font-size: 13.5px; color: var(--text,#1a1d2e); flex: 1; }
.member-role { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); background: #eef0f4; padding: 2px 8px; border-radius: 999px; }
.member-invite-row { display: flex; gap: 8px; margin-top: 8px; }

/* Tira de posicionamiento "de encontrar a ganar" en /planes */
.planes-pitch { display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; margin: 6px 0 22px; padding: 14px; background: #faf9fe;
  border: 1px solid #eee7fb; border-radius: var(--radius-lg,14px); }
.planes-pitch > div { display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-secondary); font-size: 12px; text-align: center; }
.planes-pitch > div i { color: #5b3fd1; }
.planes-pitch > div strong { color: var(--text,#1a1d2e); font-size: 13.5px; }
.page-subtitle em { color: var(--text-secondary); font-style: italic; }
.page-subtitle strong { color: #5b3fd1; }

/* ---------------------------------------------------------------------------
   Barra de versión nueva
   Una PWA corre el código con el que arrancó: si la pestaña quedó abierta
   durante un despliegue, sigue con el viejo. Esta barra avisa y ofrece
   recargar. Abajo y no arriba para no tapar la navegación, y se puede cerrar:
   interrumpir a alguien a mitad de una consulta es peor que dejarlo terminar.
--------------------------------------------------------------------------- */
#barra-version {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 24px);
  padding: 11px 12px 11px 18px;
  background: #1a1d24;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  font-size: 14px;
  animation: barra-version-entra .22s ease-out;
}

@keyframes barra-version-entra {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

#barra-version-recargar {
  background: #4263eb;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 15px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

#barra-version-recargar:hover { background: #3b5bdb; }

#barra-version-cerrar {
  background: transparent;
  border: 0;
  color: #868e96;
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

#barra-version-cerrar:hover { color: #ced4da; }

@media (max-width: 480px) {
  #barra-version { left: 12px; right: 12px; transform: none; max-width: none; }
  @keyframes barra-version-entra {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Hora de cierre en la zona del visitante. Apoyo, no dato principal: el plazo
   lo fija el país del proceso. Por eso va en gris y más chico. */
.deadline-hora-local {
  display: inline-block;
  margin-left: 6px;
  opacity: .75;
  font-size: .92em;
  white-space: nowrap;
}

/* Etiqueta de plan en un consentimiento del registro. La casilla se puede
   marcar igual —queda constancia de la preferencia— pero el usuario tiene que
   ver que la función no está en el plan Gratis antes de esperarla. */
.consent-plan {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e7f5ff;
  color: #1971c2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: 1px;
}

/* ---------------------------------------------------------------------------
   Páginas legales (#/terminos, #/privacidad)
--------------------------------------------------------------------------- */
.legal-page { max-width: 760px; margin: 0 auto; padding: 8px 4px 60px; }

.legal-header h1 { font-size: 30px; letter-spacing: -.5px; margin-bottom: 6px; }
.legal-meta { color: var(--text-tertiary); font-size: 13px; }

.legal-aviso {
  margin: 20px 0 28px;
  padding: 14px 16px;
  background: #fff9db;
  border: 1px solid #ffe066;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #664d03;
}

.legal-body { font-size: 15px; line-height: 1.7; color: var(--text-secondary); }
.legal-body h2 {
  font-size: 19px;
  margin: 34px 0 10px;
  color: var(--text-primary);
  letter-spacing: -.2px;
}
.legal-body h3 {
  font-size: 15.5px;
  margin: 22px 0 8px;
  color: var(--text-primary);
}
.legal-body p { margin: 10px 0; }
.legal-body ul { margin: 10px 0 10px 20px; }
.legal-body li { margin: 7px 0; }
.legal-body strong { color: var(--text-primary); }
.legal-body a { color: var(--primary); }
.legal-body code {
  background: #f1f3f5;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .9em;
}

/* Las tablas de datos/proveedores son anchas: que scrollen ellas y no la página */
.legal-tabla {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 13.5px;
}
.legal-tabla th, .legal-tabla td {
  border: 1px solid #e9ecef;
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
}
.legal-tabla th { background: #f8f9fa; color: var(--text-primary); font-weight: 600; }

.legal-foot {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid #e9ecef;
  font-size: 13.5px;
  color: var(--text-tertiary);
}

/* ---------------------------------------------------------------------------
   Beneficios en el registro
   Reemplaza a la lista de casillas que había antes. Se le dice al usuario qué
   GANA, en vez de pedirle cuatro permisos antes de que sepa para qué sirve.
--------------------------------------------------------------------------- */
.registro-beneficios {
  margin-top: 26px;
  padding: 18px 20px;
  background: #f8f9fb;
  border: 1px solid #e9ecef;
  border-radius: 12px;
}

.registro-beneficios h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.registro-beneficios ul { list-style: none; margin: 0; padding: 0; }

.registro-beneficios li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 9px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.registro-beneficios li i,
.registro-beneficios li svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
  color: var(--primary);
}

/* ================================================================
   Dictado por voz — botón de micrófono
   ================================================================ */
.mic-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius, 10px);
  background: var(--surface, #fff); color: var(--text-secondary, #5b6472);
  cursor: pointer; transition: all var(--transition-fast, .15s);
}
.mic-btn:hover { border-color: var(--primary, #5b3fd1); color: var(--primary, #5b3fd1); }
.mic-btn:disabled { cursor: default; opacity: .7; }

/* Grabando: rojo y latiendo. Tiene que leerse a un metro de distancia — el
   usuario está hablando, no mirando la pantalla de cerca. */
.mic-btn.mic-grabando {
  background: #dc2626; border-color: #dc2626; color: #fff;
  animation: mic-latido 1.4s ease-in-out infinite;
}
@keyframes mic-latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); }
  50%      { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
}
.mic-btn.mic-ocupado i { animation: mic-girando 1s linear infinite; }
@keyframes mic-girando { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .mic-btn.mic-grabando { animation: none; }
  .mic-btn.mic-ocupado i { animation: none; }
}

/* En el buscador el campo tiene el ícono de lupa a la izquierda; el micrófono
   va flotando a la derecha, dentro del propio input. */
.search-input-wrap { display: flex; align-items: center; }
.search-input-wrap .mic-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; flex: 0 0 32px; border: none; background: transparent;
}
.search-input-wrap .mic-btn.mic-grabando { background: #dc2626; }
.search-input-wrap input { padding-right: 44px; }

/* ================================================================
   Pie de página — enlaces legales y de contacto
   ================================================================
   Existe porque las pasarelas de pago revisan que términos, privacidad,
   precios y un contacto sean alcanzables desde cualquier página del sitio
   antes de afiliar el comercio. Estaban solo en el formulario de registro. */
.app-footer {
  margin-top: 48px; padding: 28px 0 20px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
}
.app-footer-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; gap: 20px; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap;
}
.app-footer-brand { display: flex; flex-direction: column; gap: 3px; }
.app-footer-brand strong { font-size: 14px; color: var(--text, #111827); }
.app-footer-brand span { font-size: 13px; color: var(--text-tertiary, #6b7280); }
.app-footer-links {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
}
.app-footer-links a {
  font-size: 13px; color: var(--text-secondary, #5b6472); text-decoration: none;
}
.app-footer-links a:hover { color: var(--primary, #5b3fd1); text-decoration: underline; }

@media (max-width: 640px) {
  .app-footer { margin-bottom: 72px; }   /* deja ver la barra inferior móvil */
  .app-footer-inner { flex-direction: column; gap: 14px; }
  .app-footer-links { gap: 14px; }
}

/* ================================================================
   Checkout — pantalla de compra
   ================================================================
   Existe porque Culqi observó la afiliación por no encontrar un flujo de
   compra: desde /planes se llamaba directo a la API. Antes de cobrar hay que
   mostrar qué se contrata, cuánto sale con IGV, a quién se le paga y cómo se
   cancela. */
.checkout-volver {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px;
  font-size: 13px; color: var(--text-secondary, #5b6472); text-decoration: none;
}
.checkout-volver:hover { color: var(--primary, #5b3fd1); }
.checkout-wrap {
  display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start;
  margin-top: 16px;
}
@media (max-width: 900px) { .checkout-wrap { grid-template-columns: 1fr; } }

.checkout-card, .checkout-pago {
  background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 14px); padding: 22px;
}
.checkout-h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-secondary, #5b6472); margin-bottom: 16px; font-weight: 700;
}
.checkout-item {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border, #e5e7eb);
}
.checkout-item-nombre { font-size: 17px; font-weight: 700; }
.checkout-item-desc { font-size: 13px; color: var(--text-secondary, #5b6472); margin-top: 3px; }
.checkout-item-precio { font-size: 22px; font-weight: 800; white-space: nowrap; }

.checkout-incluye { list-style: none; margin: 14px 0; padding: 0; }
.checkout-incluye li {
  display: flex; gap: 8px; align-items: flex-start; font-size: 14px;
  padding: 5px 0; color: var(--text, #1a1d2e);
}
.checkout-incluye i { color: #16a34a; flex: 0 0 14px; margin-top: 3px; }

.checkout-totales {
  border-top: 1px solid var(--border, #e5e7eb); padding-top: 12px; margin-top: 6px;
  font-size: 14px;
}
.checkout-totales > div { display: flex; justify-content: space-between; padding: 4px 0; }
.checkout-totales > div span:first-child { color: var(--text-secondary, #5b6472); }
.checkout-total {
  font-size: 17px; font-weight: 800; border-top: 1px solid var(--border, #e5e7eb);
  margin-top: 8px; padding-top: 10px !important;
}
.checkout-total small { font-size: 12px; color: var(--text-tertiary, #6b7280); font-weight: 600; }
.checkout-recurrencia {
  margin-top: 14px; font-size: 13px; color: var(--text-secondary, #5b6472);
  background: #f6f7fb; border-radius: 10px; padding: 11px 13px;
}

.checkout-comercio {
  display: flex; flex-direction: column; gap: 2px; font-size: 13px;
  color: var(--text-secondary, #5b6472); background: #f6f7fb;
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.checkout-comercio-t {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-tertiary, #6b7280); margin-bottom: 3px;
}
.checkout-comercio strong { color: var(--text, #1a1d2e); font-size: 14px; }

.checkout-medios { margin-bottom: 16px; }
.checkout-medios > span {
  display: block; font-size: 12px; color: var(--text-tertiary, #6b7280); margin-bottom: 7px;
}
.checkout-tarjetas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.checkout-tarjeta {
  border: 1px solid var(--border, #e5e7eb); border-radius: 5px; padding: 3px 9px;
  font-size: 11px; font-weight: 700; color: var(--text-secondary, #5b6472);
  background: #fff; letter-spacing: .02em;
}
.checkout-medios small { font-size: 12px; color: var(--text-tertiary, #6b7280); line-height: 1.45; }

.checkout-acepto {
  display: flex; gap: 9px; align-items: flex-start; font-size: 13px;
  line-height: 1.5; margin-bottom: 14px; cursor: pointer;
}
.checkout-acepto input { margin-top: 3px; flex: 0 0 auto; }
.checkout-acepto a { color: var(--primary, #5b3fd1); }

.checkout-pagar {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; background: #5b3fd1; color: #fff; border: none;
  border-radius: var(--radius, 10px); padding: 14px 18px;
  font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.checkout-pagar:hover:not(:disabled) { background: #4c33b8; }
.checkout-pagar:disabled { opacity: .45; cursor: not-allowed; }
.checkout-aviso, .checkout-legal {
  font-size: 12px; color: var(--text-tertiary, #6b7280);
  margin-top: 11px; line-height: 1.5;
}
.checkout-aviso a, .checkout-legal a { color: var(--primary, #5b3fd1); }

/* Datos del comercio y medios de pago en el pie */
.app-footer-legal {
  font-size: 12px; color: var(--text-tertiary, #6b7280);
  line-height: 1.6; margin-top: 8px;
}
.app-footer-legal a { color: var(--text-secondary, #5b6472); text-decoration: none; }
.app-footer-legal a:hover { text-decoration: underline; }
.app-footer-pagos {
  max-width: 1280px; margin: 14px auto 0; padding: 12px 24px 0;
  border-top: 1px solid var(--border, #e5e7eb);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--text-tertiary, #6b7280);
}
.app-footer-ssl { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }

/* ================================================================
   Libro de Reclamaciones — obligatorio (Ley 29571)
   ================================================================ */
.app-footer-libro {
  max-width: 1280px; margin: 14px auto 0; padding: 0 24px;
}
.libro-boton {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  padding: 10px 14px; text-decoration: none; background: #fff;
  color: var(--text, #1a1d2e);
}
.libro-boton:hover { border-color: var(--primary, #5b3fd1); }
.libro-boton span { display: flex; flex-direction: column; line-height: 1.35; }
.libro-boton strong { font-size: 13px; }
.libro-boton span span, .libro-boton span { font-size: 11px; color: var(--text-tertiary, #6b7280); }
.libro-boton strong { color: var(--text, #1a1d2e); }

.libro-page { max-width: 860px; }
.libro-header { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.libro-icono {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px;
  background: #eef0fb; color: #5b3fd1;
  display: flex; align-items: center; justify-content: center;
}
.libro-header h1 { font-size: 24px; margin: 0; }
.libro-header p { font-size: 13px; color: var(--text-secondary, #5b6472); margin: 3px 0 0; }

.libro-proveedor {
  display: flex; flex-direction: column; gap: 2px;
  background: #f6f7fb; border-radius: 10px; padding: 13px 15px;
  font-size: 13px; color: var(--text-secondary, #5b6472); margin-bottom: 20px;
}
.libro-proveedor strong { color: var(--text, #1a1d2e); font-size: 14px; }

.libro-form fieldset {
  border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-lg, 14px);
  padding: 18px 20px; margin-bottom: 18px; background: #fff;
}
.libro-form legend {
  font-size: 13px; font-weight: 700; padding: 0 8px;
  color: var(--text-secondary, #5b6472); text-transform: uppercase; letter-spacing: .04em;
}
.libro-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.libro-col2 { grid-column: span 2; }
@media (max-width: 720px) {
  .libro-row { grid-template-columns: 1fr; }
  .libro-col2 { grid-column: span 1; }
}
.libro-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.libro-form label > span { color: var(--text-secondary, #5b6472); font-weight: 600; }
.libro-form input, .libro-form select, .libro-form textarea {
  padding: 9px 11px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 9px; font-size: 14px; font-family: inherit; width: 100%;
  color: var(--text, #1a1d2e); background: #fff;
}
.libro-form textarea { resize: vertical; }
.libro-form input:focus, .libro-form select:focus, .libro-form textarea:focus {
  outline: none; border-color: var(--primary, #5b3fd1);
}
.libro-check { flex-direction: row !important; align-items: center; gap: 8px !important; }
.libro-check input { width: auto; }

.libro-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 640px) { .libro-tipos { grid-template-columns: 1fr; } }
.libro-tipo {
  flex-direction: row !important; align-items: flex-start; gap: 10px !important;
  border: 1px solid var(--border, #e5e7eb); border-radius: 11px; padding: 12px 14px;
  cursor: pointer;
}
.libro-tipo:has(input:checked) { border-color: #5b3fd1; background: #f8f7ff; }
.libro-tipo input { width: auto; margin-top: 3px; }
.libro-tipo div { display: flex; flex-direction: column; gap: 2px; }
.libro-tipo strong { font-size: 14px; }
.libro-tipo span { font-size: 12px; color: var(--text-tertiary, #6b7280); }

.libro-plazo {
  font-size: 13px; color: var(--text-secondary, #5b6472);
  background: #f6f7fb; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
}
.libro-enviar {
  background: #5b3fd1; color: #fff; border: none; border-radius: var(--radius, 10px);
  padding: 13px 22px; font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
.libro-enviar:hover:not(:disabled) { background: #4c33b8; }
.libro-enviar:disabled { opacity: .6; cursor: default; }

.libro-ok {
  text-align: center; padding: 40px 24px; background: #fff;
  border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-lg, 14px);
}
.libro-ok i { color: #16a34a; }
.libro-ok h2 { margin: 12px 0 6px; font-size: 20px; }
.libro-ok p { color: var(--text-secondary, #5b6472); font-size: 14px; margin: 6px 0; }
.libro-correlativo {
  font-size: 26px !important; font-weight: 800; color: var(--text, #1a1d2e) !important;
  letter-spacing: .02em; margin: 10px 0 14px !important;
}

/* Ilustración de cada plan. Son SVG propios y no fotos de banco: sin licencias
   que revisar, sin CDN externo (el sitio ya self-hostea todo) y nítidas en
   cualquier pantalla. Culqi exige que cada producto tenga imagen, descripción
   y precio visibles. */
.planes-img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  margin-bottom: 14px; background: #f4f6fb;
}
.checkout-img {
  width: 108px; height: auto; border-radius: 8px; flex: 0 0 108px;
  background: #f4f6fb;
}
.checkout-item { align-items: center; }
@media (max-width: 560px) { .checkout-img { display: none; } }

/* En el checkout manda la marca: es lo que el cliente reconoce y lo que verá en
   el estado de cuenta de su tarjeta. La identificación fiscal no se puede
   omitir —el consumidor tiene derecho a saber con quién contrata— pero es un
   dato secundario y se muestra como tal. */
.checkout-marca { font-size: 19px !important; letter-spacing: -.01em; }
.checkout-fiscal {
  font-size: 11px; color: var(--text-tertiary, #6b7280);
  line-height: 1.5; margin-top: 6px;
}
/* El titular sigue publicado —la pasarela observó el sitio por falta de datos
   legales y el consumidor tiene derecho a saber con quién contrata— pero por
   debajo del contacto, que es lo que la gente busca en un pie de página. */
.app-footer-fiscal { display: block; margin-top: 4px; opacity: .75; font-size: 11px; }

/* Precio de fundador: el descuento y las dos formas de pago.
   Sin cuenta regresiva a propósito — esa estética de e-commerce le resta
   seriedad frente a una empresa formal, que es el cliente de Certamia. */
.planes-oferta {
  background: #f8f7ff; border: 1px solid #ddd6fe; border-radius: var(--radius-lg, 14px);
  padding: 14px 18px; margin-bottom: 18px; font-size: 13px; line-height: 1.6;
  color: var(--text-secondary, #5b6472);
}
.planes-oferta strong { color: var(--text, #1a1d2e); }
.planes-oferta > strong:first-child { display: block; font-size: 14px; margin-bottom: 3px; }

.planes-lista {
  font-size: 15px; color: var(--text-tertiary, #9ca3af);
  text-decoration: line-through; margin-right: 7px; font-weight: 600;
}
.planes-fundador {
  display: flex; flex-direction: column; gap: 5px; margin: 10px 0 4px;
  font-size: 12px; color: var(--text-secondary, #5b6472);
}
.planes-fundador > div { display: flex; align-items: baseline; gap: 6px; }
.planes-fundador strong { color: var(--text, #1a1d2e); font-size: 13px; }
.planes-fundador em {
  font-style: normal; background: #ede9fd; color: #5b3fd1;
  border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700;
}

.checkout-periodos { display: grid; gap: 10px; margin: 16px 0 6px; }
.checkout-periodo {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--border, #e5e7eb); border-radius: 11px; padding: 12px 14px;
}
.checkout-periodo.elegido { border-color: #5b3fd1; background: #f8f7ff; }
.checkout-periodo input { margin-top: 3px; }
.checkout-periodo div { display: flex; flex-direction: column; gap: 2px; }
.checkout-periodo strong { font-size: 14px; }
.checkout-periodo span { font-size: 12px; color: var(--text-secondary, #5b6472); }
.checkout-periodo em {
  font-style: normal; font-size: 12px; color: var(--text-tertiary, #6b7280);
}
.checkout-tachado { text-decoration: line-through; color: var(--text-tertiary, #9ca3af); }