/* Página de chatters. Tokens y componentes base en ds.css. */

.app { max-width: 560px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-6); display: grid; gap: var(--sp-4); }

.brand { display: flex; align-items: center; gap: 10px; font: 700 var(--fs-lg) var(--font-data); letter-spacing: -0.02em; }

.top { display: grid; gap: var(--sp-2); }
.top h1 { font: 600 var(--fs-xl) var(--font-data); letter-spacing: -0.03em; margin-top: var(--sp-3); }
.lead { color: var(--fg-muted); }

main { display: grid; gap: var(--sp-4); }
.form { display: grid; gap: var(--sp-4); padding: var(--sp-5); }
.opt { color: var(--fg-muted); font-weight: 400; }
.field-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.field-foot .field-error { flex: 1; }
.field-foot .hint { margin-left: auto; font-family: var(--font-data); white-space: nowrap; }
.hint.over { color: var(--danger-text); }

.btn.block { width: 100%; min-height: 48px; font-size: var(--fs-md); }
.btn[aria-busy="true"] { cursor: progress; }
.spinner { width: 1.1em; height: 1.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.status { min-height: 1.4em; color: var(--fg-2); font-size: var(--fs-sm); display: flex; gap: var(--sp-2); align-items: center; }
.status.error { color: var(--danger-text); }
.status:empty { display: none; }

.result { display: grid; gap: var(--sp-3); }
.result:focus { outline: none; }
.result audio { width: 100%; height: 44px; }
.result .btn { justify-self: start; }

@media (max-width: 480px) {
  .app { padding: var(--sp-4) var(--sp-3) var(--sp-5); }
  .form { padding: var(--sp-4); }
}

/* Acceso y pie */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-4); }
.login-card { width: 100%; max-width: 360px; display: grid; gap: var(--sp-4); padding: var(--sp-5); }
.login-card .brand { justify-content: center; font-size: 1.5rem; }
.login-title { font: 500 var(--fs-sm) var(--font-text); text-align: center; color: var(--fg-muted); margin-top: calc(var(--sp-2) * -1); }
.foot { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }