/* ============================================================================
   home.css — Tela de ENTRADA (Responder / Admin) · padrão estilo 5S
   Depende de design-system.css. Split-layout full-bleed (R51).
   ============================================================================ */

.entry { display: flex; min-height: 100vh; }

/* ---- Painel de marca (esquerda) ---- */
.entry__brand {
  flex: 1 1 46%;
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-5);
  padding: var(--sp-8) var(--sp-7);
  background: linear-gradient(135deg, var(--stara-laranja), var(--stara-laranja-d));
  color: #fff;
}
.entry__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--r-3);
  background: rgba(255, 255, 255, .15);
  font: 600 var(--fs-h1) / 1 var(--ff-display); letter-spacing: var(--ls-h1);
}
.entry__brand-title {
  font: 600 var(--fs-display-l) / 1.05 var(--ff-display);
  letter-spacing: var(--ls-display-l);
}
.entry__brand-text { max-width: 28ch; font: 500 var(--fs-body) / 1.55 var(--ff-body); color: rgba(255, 255, 255, .92); }

/* ---- Painel de escolha (direita) ---- */
.entry__pane {
  flex: 1 1 54%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
  background: var(--stara-bg);
}
.entry__col { width: 100%; max-width: 480px; }
.entry__eyebrow {
  font: 500 var(--fs-micro) / 1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: var(--ls-uppercase);
  color: var(--stara-fg-3); margin-bottom: var(--sp-2);
}
.entry__title {
  font: 600 var(--fs-display-m) / 1.1 var(--ff-display);
  letter-spacing: var(--ls-display-m); color: var(--stara-fg);
  margin-bottom: var(--sp-6);
}
.entry__group { margin-bottom: var(--sp-6); }
.entry__group-label {
  font: 500 var(--fs-micro) / 1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: var(--ls-uppercase);
  color: var(--stara-fg-4); margin-bottom: var(--sp-3);
}

/* ---- Card de escolha ---- */
.choice {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
  background: var(--stara-bg);
  border-radius: var(--r-3);
  box-shadow: var(--sh-card);
  cursor: pointer; color: inherit;
  transition: box-shadow var(--mo-medium), transform var(--mo-medium);
}
.choice:hover { box-shadow: var(--sh-card-hover); transform: translateY(-2px); }
.choice:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.choice__icon {
  flex: none; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-2); background: var(--stara-bg-2); font-size: 22px;
}
.choice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice__title { font: 600 var(--fs-h1) / 1.2 var(--ff-display); letter-spacing: var(--ls-h1); color: var(--stara-fg); }
.choice__desc { font-size: var(--fs-body-sm); color: var(--stara-fg-3); }
.choice__arrow { margin-left: auto; font-size: 20px; color: var(--stara-laranja); }
.choice__soon {
  margin-left: auto;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: var(--status-off-bg); color: var(--status-off-fg);
  font: 500 var(--fs-micro) / 1.4 var(--ff-mono);
  text-transform: uppercase; letter-spacing: var(--ls-uppercase);
}

.choice--disabled { cursor: not-allowed; opacity: .6; }
.choice--disabled:hover { box-shadow: var(--sh-card); transform: none; }

.choice--admin .choice__icon { background: rgba(229, 100, 37, .10); }

@media (max-width: 1023px) {
  .entry { flex-direction: column; }
  .entry__brand { flex: none; gap: var(--sp-3); padding: var(--sp-6) var(--sp-5); }
  .entry__brand-title { font-size: var(--fs-display-m); }
  .entry__pane { flex: 1; padding: var(--sp-6) var(--sp-4); align-items: flex-start; }
  .entry__col { max-width: none; }
}