/* =========================================================================
   Minuta SUD — Overrides sobre Vuexy/Bootstrap5
   Lo que Vuexy no provee, lo aportamos aquí:
   - Componentes específicos de minuta-sud (marbete, badges SUD, etc.)
   - Pequeños ajustes de densidad/tipografía
   ========================================================================= */

:root {
  --msud-font-display: 'Varela Round', system-ui, sans-serif;
  --msud-brass:        #FF8A65;     /* acento tipo Vuexy "secondary" */
  --msud-brass-soft:   #FFEAE0;
  --msud-pending-soft: #FFF4D4;
  --msud-pending-fg:   #B58E00;
  --msud-confirmed-soft: #DDF6E5;
  --msud-confirmed-fg:   #28C76F;
  --msud-declined-soft:  #FBE7E7;
  --msud-declined-fg:    #E02D2D;
}

/* === Marbete: sello de sección (firma visual heredada) === */
.marbete {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font: 400 0.6875rem/1 var(--msud-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--msud-brass);
  border: 1px solid color-mix(in srgb, var(--msud-brass) 45%, transparent);
  border-radius: 0.375rem;
  padding: 0.25rem 0.6875rem 0.1875rem;
  background: color-mix(in srgb, var(--msud-brass) 6%, transparent);
}
.marbete::before { content: attr(data-glyph, "§"); font-size: 1.05em; opacity: 0.85; }

/* === Badges específicos de minuta-sud === */
.badge-pending   { background: var(--msud-pending-soft);   color: var(--msud-pending-fg); }
.badge-confirmed { background: var(--msud-confirmed-soft); color: var(--msud-confirmed-fg); }
.badge-declined  { background: var(--msud-declined-soft);  color: var(--msud-declined-fg); }

/* === Auth shell === */
.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--bs-body-bg);
  padding: 1rem;
}
.auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--bs-card-bg);
  border: 0;
  border-radius: 0.625rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(33, 41, 64, 0.175);
}
.auth-shell--admin { background: var(--bs-menu-bg, #233446); }
.auth-shell--admin .auth-card { box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.4); }

/* === Tarjetas compactas para dashboard === */
.dashboard-card {
  display: grid;
  gap: 0.375rem;
  padding: 1.25rem;
  background: var(--bs-card-bg);
  border-radius: 0.625rem;
  text-decoration: none;
  color: var(--bs-body-color);
  box-shadow: 0 0.125rem 0.25rem rgba(33, 41, 64, 0.06);
  border-left: 3px solid transparent;
  transition: border-left-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.dashboard-card:hover {
  border-left-color: var(--msud-brass);
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1.5rem rgba(33, 41, 64, 0.12);
}
.dashboard-card .card-eyebrow { color: var(--msud-brass); font-weight: 500; }
.dashboard-card .card-title { font-size: 1.0625rem; font-weight: 500; margin: 0.25rem 0 0; }
.dashboard-card .card-hint  { color: var(--bs-secondary-color); font-size: 0.8125rem; }

/* === Login wizard: step indicator === */
.wizard-steps {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.wizard-steps li {
  flex: 1;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--bs-secondary-color);
  padding: 0.5rem 0;
  border-bottom: 2px solid var(--bs-border-color);
}
.wizard-steps li.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); font-weight: 500; }

/* === Account list (tenant login paso 2) === */
.account-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; margin: 0; }
.account-card {
  width: 100%;
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-left: 3px solid var(--msud-brass);
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--bs-body-color);
  transition: border-color 150ms ease, background 150ms ease;
}
.account-card:hover { background: var(--bs-tertiary-bg); border-color: var(--bs-primary); }
.account-card .account-type { color: var(--msud-brass); font-weight: 500; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; }
.account-card .account-name { font-weight: 500; font-size: 1.0625rem; }
.account-card .account-slug { color: var(--bs-secondary-color); font-size: 0.8125rem; }

/* === Top brand: ajustar "navbar-account" como breadcrumb === */
.navbar-account {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  letter-spacing: 0.02em;
}

/* === Public page (agenda, share, confirm): sin sidebar === */
.public-shell {
  min-height: 100dvh;
  display: grid;
  place-items: start center;
  background: var(--bs-body-bg);
  padding: 1.5rem 1rem;
}
.public-card {
  width: 100%;
  max-width: 36rem;
  background: var(--bs-card-bg);
  border: 0;
  border-radius: 0.625rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(33, 41, 64, 0.06);
}

/* === Indicator "Vista pública" === */
.public-indicator {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1080;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--bs-primary) 35%, transparent);
}

/* === Responsive tweaks === */
@media (max-width: 575.98px) {
  .auth-card { padding: 1.5rem 1.25rem; }
  .public-card { padding: 1.5rem 1.25rem; }
}