/* portal/css/components.css
 * ConnectaTicket Design System v2.0 — Aliases de migração
 *
 * Responsabilidade: fazer as classes legadas do portal consumirem os
 * tokens M3 sem exigir reescrita de templates.
 *
 * Carrega ANTES de core/css/design-tokens.css na cascata, portanto
 * usa os aliases de bridge (--primary, --surface, etc.) que são
 * sobrepostos pelos tokens reais depois.
 *
 * Regra: nunca usar hexadecimais diretos aqui. Use --pc-* ou bridges.
 * Meta futura (Fase 6): remover quando todos os templates usarem .pc-*.
 */

/* ─── Transições — motion tokens ──────────────────────────── */

.brand   { transition: color var(--pc-motion-duration-medium) var(--pc-motion-easing-standard), opacity var(--pc-motion-duration-medium) var(--pc-motion-easing-standard); }
.nav a   { transition: background var(--pc-motion-duration-medium) var(--pc-motion-easing-standard), color var(--pc-motion-duration-medium) var(--pc-motion-easing-standard); }
.badge   { transition: background var(--pc-motion-duration-medium) var(--pc-motion-easing-standard), color var(--pc-motion-duration-medium) var(--pc-motion-easing-standard); }
.message { transition: opacity var(--pc-motion-duration-medium) var(--pc-motion-easing-standard); }

.card,
.panel {
  transition:
    box-shadow var(--pc-motion-duration-medium) var(--pc-motion-easing-standard),
    border-color var(--pc-motion-duration-medium) var(--pc-motion-easing-standard);
}

.event-card {
  transition:
    transform var(--pc-motion-duration-medium) var(--pc-motion-easing-standard),
    box-shadow var(--pc-motion-duration-medium) var(--pc-motion-easing-standard),
    border-color var(--pc-motion-duration-medium) var(--pc-motion-easing-standard);
}

.btn,
.button {
  transition:
    background-color var(--pc-motion-duration-medium) var(--pc-motion-easing-standard),
    color            var(--pc-motion-duration-medium) var(--pc-motion-easing-standard),
    box-shadow       var(--pc-motion-duration-medium) var(--pc-motion-easing-standard),
    border-color     var(--pc-motion-duration-medium) var(--pc-motion-easing-standard),
    opacity          var(--pc-motion-duration-medium) var(--pc-motion-easing-standard);
}

.qty-btn,
.qty-input {
  transition:
    border-color var(--pc-motion-duration-medium) var(--pc-motion-easing-standard),
    box-shadow   var(--pc-motion-duration-medium) var(--pc-motion-easing-standard);
}

/* ─── Card / Panel ──────────────────────────────────── */

.card,
.panel {
  background:    var(--pc-comp-card-bg);
  color:         var(--pc-comp-card-fg);
  border:        1px solid var(--pc-comp-card-border);
  border-radius: var(--pc-comp-card-radius);
  box-shadow:    var(--pc-elevation-0);
}

.card:hover,
.panel:hover {
  box-shadow:   var(--pc-elevation-1);
  border-color: var(--pc-sys-color-outline);
}

/* ─── Botões legados ─────────────────────────────────── */

.btn,
.button {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--pc-space-2);
  min-height:      var(--pc-comp-button-height);
  padding:         0 var(--pc-space-5);
  border-radius:   var(--pc-comp-button-radius);
  border:          1px solid transparent;
  font:            700 var(--pc-type-label-lg-size) / var(--pc-type-label-lg-line) var(--pc-font-family-base);
  cursor:          pointer;
  touch-action:    manipulation;
  text-decoration: none;
  background:      var(--pc-comp-button-filled-bg);
  color:           var(--pc-comp-button-filled-fg);
  box-shadow:      none;
}

.btn:hover,
.button:hover {
  opacity: .92;
}

.btn:focus-visible,
.button:focus-visible {
  outline:        2px solid var(--pc-state-focus-ring);
  outline-offset: 3px;
  box-shadow:     var(--pc-elevation-focus);
}

/* Botão primário solid */
.btn-primary {
  background: var(--pc-comp-button-filled-bg);
  color:      var(--pc-comp-button-filled-fg);
}

.btn-primary:hover {
  background: var(--pc-sys-color-on-primary-container);
  color:      var(--pc-sys-color-on-primary);
}

/* Ghost / outline / subtle */
.btn--ghost,
.btn--outline,
.btn--subtle,
.button--ghost,
.button--outline,
.button--subtle,
.button--secondary {
  background:   var(--pc-comp-card-bg);
  color:        var(--pc-sys-color-on-surface);
  border-color: var(--pc-sys-color-outline-variant);
}

.btn--ghost:hover,
.btn--outline:hover,
.button--ghost:hover,
.button--secondary:hover {
  border-color: var(--pc-sys-color-outline);
  color:        var(--pc-sys-color-primary);
}

/* CTA accent — Coral Terracota */
.btn--cta-primary,
.button--cta {
  background: var(--pc-comp-button-accent-bg);
  color:      var(--pc-comp-button-accent-fg);
}

/* Danger */
.btn--danger,
.button--danger {
  background:   var(--pc-comp-button-critical-bg);
  color:        var(--pc-comp-button-critical-fg);
  border-color: transparent;
}

/* Manage (ação de gerenciamento — tonal) */
.button--manage {
  background:   var(--pc-sys-color-primary-container);
  color:        var(--pc-sys-color-on-primary-container);
  border-color: transparent;
}

/* ─── Utilitários de cor ───────────────────────────────── */

.text-muted   { color:      var(--pc-sys-color-on-surface-variant); }
.surface      { background: var(--pc-sys-color-surface); }
.surface-soft { background: var(--pc-sys-color-surface-container); }

/* ─── Badge / Pill legados ─────────────────────────────── */

.badge,
.pill {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-height:      var(--pc-comp-badge-height);
  padding:         0 var(--pc-space-3);
  border-radius:   var(--pc-comp-badge-radius);
  border:          1px solid transparent;
  font:            700 var(--pc-type-label-md-size) / var(--pc-type-label-md-line) var(--pc-font-family-base);
  white-space:     nowrap;
  background:      var(--pc-comp-badge-info-bg);
  color:           var(--pc-comp-badge-info-fg);
}

.badge--success, .pill--success {
  background: var(--pc-comp-badge-success-bg);
  color:      var(--pc-comp-badge-success-fg);
}

.badge--warning, .pill--warning {
  background: var(--pc-comp-badge-attention-bg);
  color:      var(--pc-comp-badge-attention-fg);
}

.badge--danger, .pill--danger {
  background: var(--pc-comp-badge-critical-bg);
  color:      var(--pc-comp-badge-critical-fg);
}

.badge--muted, .pill--muted {
  background: var(--pc-comp-badge-neutral-bg);
  color:      var(--pc-comp-badge-neutral-fg);
}

.badge--featured {
  background: var(--pc-comp-badge-featured-bg);
  color:      var(--pc-comp-badge-featured-fg);
}

.badge--promo {
  background: var(--pc-comp-badge-promo-bg);
  color:      var(--pc-comp-badge-promo-fg);
}

/* ─── ticket-price-free ───────────────────────────────── */

.ticket-price-free {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-height:      var(--pc-comp-badge-height);
  padding:         0 var(--pc-space-3);
  border-radius:   var(--pc-comp-badge-radius);
  border:          1px solid transparent;
  background:      var(--pc-comp-badge-success-bg);
  color:           var(--pc-comp-badge-success-fg);
  font:            900 var(--pc-type-label-md-size) / var(--pc-type-label-md-line) var(--pc-font-family-base);
}

/* ─── field-error ───────────────────────────────────── */

.field-error {
  color:      var(--pc-sys-color-error);
  font:       400 var(--pc-type-body-md-size) / var(--pc-type-body-md-line) var(--pc-font-family-base);
  background: transparent;
}

/* ─── portal-hub-card / order-note-box ────────────────────── */

.portal-hub-card,
.order-note-box {
  background: var(--pc-sys-color-surface-container);
  box-shadow: none;
  border:     1px solid var(--pc-sys-color-outline-variant);
  border-radius: var(--pc-comp-card-radius);
}

/* ─── portal-summary-list ─────────────────────────────── */

.portal-summary-list           { display: grid; gap: var(--pc-space-3); }
.portal-summary-list .summary__row { gap: var(--pc-space-4); }

/* ─── portal-state-panel ──────────────────────────────── */

.portal-state-panel {
  border:        1px solid var(--pc-sys-color-outline-variant);
  border-radius: var(--pc-radius-lg);
  padding:       var(--pc-space-4);
  background:    var(--pc-sys-color-surface);
  color:         var(--pc-sys-color-on-surface);
}

.portal-state-panel--info {
  background:   var(--pc-status-info-container);
  color:        var(--pc-status-info-content);
  border-color: transparent;
}

.portal-state-panel--success {
  background:   var(--pc-status-success-container);
  color:        var(--pc-status-success-content);
  border-color: transparent;
}

.portal-state-panel--warning {
  background:   var(--pc-status-attention-container);
  color:        var(--pc-status-attention-content);
  border-color: transparent;
}

.portal-state-panel--danger {
  background:   var(--pc-status-critical-container);
  color:        var(--pc-status-critical-content);
  border-color: transparent;
}

.portal-state-panel__title {
  margin: 0 0 var(--pc-space-1);
  font:   700 var(--pc-type-body-lg-size) / var(--pc-type-body-lg-line) var(--pc-font-family-base);
}

.portal-state-panel__text {
  margin:      0;
  line-height: var(--pc-type-body-md-line);
  font-size:   var(--pc-type-body-md-size);
}

.portal-state-panel__meta {
  margin-top: var(--pc-space-2);
  font-size:  var(--pc-type-label-md-size);
  color:      inherit;
  opacity:    .82;
}

/* ─── portal-action-list ──────────────────────────────── */

.portal-action-list         { display: flex; flex-wrap: wrap; gap: var(--pc-space-3); }
.portal-action-list--stack  { display: grid; gap: var(--pc-space-3); }

/* ─── portal-section-card ─────────────────────────────── */

.portal-section-card {
  border:        1px solid var(--pc-comp-card-border);
  border-radius: var(--pc-comp-card-radius);
  background:    var(--pc-comp-card-bg);
  box-shadow:    var(--pc-elevation-1);
  overflow:      clip;
}

.portal-section-card__head {
  padding:       var(--pc-space-5) var(--pc-space-5);
  border-bottom: 1px solid var(--pc-sys-color-outline-variant);
}

.portal-section-card__body { padding: var(--pc-space-5); }

.portal-section-card__eyebrow {
  display:        block;
  margin-bottom:  var(--pc-space-2);
  font:           700 var(--pc-type-label-md-size) / var(--pc-type-label-md-line) var(--pc-font-family-base);
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--pc-sys-color-on-surface-variant);
}

.portal-section-card__title {
  margin:      0;
  font:        700 var(--pc-type-title-lg-size) / var(--pc-type-title-lg-line) var(--pc-font-family-base);
  color:       var(--pc-sys-color-on-surface);
}

.portal-section-card__description {
  margin: var(--pc-space-2) 0 0;
  color:  var(--pc-sys-color-on-surface-variant);
  font:   400 var(--pc-type-body-md-size) / var(--pc-type-body-md-line) var(--pc-font-family-base);
}

/* ─── portal-empty-card ───────────────────────────────── */

.portal-empty-card {
  padding:       var(--pc-space-5);
  border:        1px dashed var(--pc-sys-color-outline-variant);
  border-radius: var(--pc-radius-xl);
  background:    var(--pc-comp-card-bg);
}

.portal-empty-card--rich {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  gap:             var(--pc-space-2);
  padding:         var(--pc-space-9) var(--pc-space-6);
}

.portal-empty-card--rich .portal-empty-card__icon {
  font-size:     32px;
  opacity:       .4;
  line-height:   1;
  margin-bottom: var(--pc-space-1);
}

.portal-empty-card--rich .portal-empty-card__title {
  font:   700 var(--pc-type-title-md-size) / var(--pc-type-title-md-line) var(--pc-font-family-base);
  color:  var(--pc-sys-color-on-surface);
  margin: 0;
}

.portal-empty-card--rich .portal-empty-card__desc {
  font:       400 var(--pc-type-body-md-size) / var(--pc-type-body-md-line) var(--pc-font-family-base);
  color:      var(--pc-sys-color-on-surface-variant);
  max-width:  36ch;
  margin:     0;
}

.portal-empty-card--rich .portal-empty-card__action { margin-top: var(--pc-space-4); }

/* ─── Responsividade ───────────────────────────────────── */

@media (max-width: 760px) {
  .portal-action-list .btn { flex: 1; }

  .portal-section-card__head,
  .portal-section-card__body,
  .portal-state-panel {
    padding: var(--pc-space-4);
  }
}