/* styles/nav.css — agrupación de navegación y home autenticado
   (etapa mejora integral §3–§8, §30). PROPIEDAD del flujo de roles/navegación.

   Contenido:
   1. Flujos por rol en el inicio autenticado (§30).
   2. Escenario de contratación de la PyME (§6).
   3. Tarjetas de tipo de cuenta del registro (§3–§7).

   Todos los colores usan variables del tema: se ven bien en claro y en oscuro. */

/* ── 1. Flujos por rol ─────────────────────────────────────────────────── */

.flow-panel { border-top: 3px solid var(--accent); }

.flow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.flow-item {
  flex: 1 1 190px;
  min-width: 0;
  display: flex;
}

.flow-step {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.flow-step:hover,
.flow-step:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.flow-num {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
}

.flow-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.flow-label { font-size: 0.85rem; line-height: 1.2; }

.flow-desc {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-muted);
}

/* ── 2. Escenario PyME (§6) ────────────────────────────────────────────── */

.scenario-panel { border-top: 3px solid var(--ok); }

.scenario-line {
  margin: 0 0 0.8rem;
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  background: var(--ok-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}

.scenario-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.8rem;
}

.scenario-form > .field {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
}

/* ── 3. Tarjetas de tipo de cuenta (registro) ──────────────────────────── */

.role-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

.role-card .role-cap {
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--text-muted);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

.role-card:has(input:checked) .role-cap {
  color: var(--accent-strong);
  border-color: var(--accent-ring);
}

/* ── Móvil ─────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .flow-item { flex-basis: 100%; }
  .scenario-form { flex-direction: column; align-items: stretch; }
  .scenario-form > .field { flex-basis: auto; }
}

/* §31 · Sin sesión: se ocultan los botones sin acción (logout, perfil). */
.btn[hidden],
.topbar-auth[hidden],
.pop-anchor[hidden] {
  display: none;
}

/* Atajos de acceso en la barra superior para visitantes. */
.topbar-auth {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

/* El topbar siempre es oscuro (paleta chrome): los botones ghost heredan el
   color del tema y quedarían ilegibles en claro. */
.topbar-auth .btn-ghost {
  color: var(--chrome-text);
  border-color: rgba(255, 255, 255, 0.28);
}

.topbar-auth .btn-ghost:hover,
.topbar-auth .btn-ghost:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
}