/**
 * selector.css — Vertical selector layout only.
 * Unified design tokens live in brand.css (loaded first).
 */

/* ============================================================
   Selector layout
   ============================================================ */

main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--space-4) var(--space-16);
}

/* ============================================================
   Vertical grid
   ============================================================ */

.vertical-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  width: 100%;
  max-width: 900px;
}

.vertical-card-wrapper {
  display: contents;
}

/* ============================================================
   Auth footer (authenticated selector only)
   ============================================================ */

.selector-auth-footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding: 0 var(--space-2);
}

.selector-user-greeting {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.logout-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast);
}
.logout-link:hover {
  color: var(--color-danger);
  text-decoration: underline;
}

/* ============================================================
   Per-vertical theming (for shell use — kept for compatibility)
   ============================================================ */

[data-vertical="inmobiliaria"] {
  --vertical-color:  #b07a2b;
  --vertical-accent: #b07a2b;
  --vertical-icon:   bi-house-fill;
}

[data-vertical="finanzas"] {
  --vertical-color:  #2c7a7b;
  --vertical-accent: #2c7a7b;
  --vertical-icon:   bi-graph-up-arrow;
}

[data-vertical="estudiojuridico"] {
  --vertical-color:  #6b46c1;
  --vertical-accent: #6b46c1;
  --vertical-icon:   bi-briefcase-fill;
}

[data-vertical="mineria"] {
  --vertical-color:  #b45309;
  --vertical-accent: #b45309;
  --vertical-icon:   bi-gem;
}

[data-vertical="publicidad"] {
  --vertical-color:  #db2777;
  --vertical-accent: #db2777;
  --vertical-icon:   bi-megaphone-fill;
}

[data-vertical="clinica"] {
  --vertical-color:  #dc2626;
  --vertical-accent: #dc2626;
  --vertical-icon:   bi-activity;
}

/* Sidebar active item per vertical */
[data-vertical] .sidebar-item.active {
  border-left: 3px solid var(--vertical-color);
  color: var(--vertical-color);
  background: color-mix(in srgb, var(--vertical-color) 8%, transparent);
}

/* ============================================================
   Responsive
   ============================================================ */

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

@media (max-width: 480px) {
  .vertical-grid {
    grid-template-columns: 1fr;
  }
}