/* Lo que la plataforma real añade al diseño de la demo: formularios, avisos y ajustes. */
#alerts:empty { display: none; }
#alerts { display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-lg) 0; max-width: var(--page-max); width: 100%; margin-inline: auto; }
.notice { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: 1px solid var(--warn-line); border-radius: var(--radius-control); background: var(--warn-bg); color: var(--warn-ink); font-size: var(--text-sm); }
.notice > span { flex: 1; min-width: 0; }
.notice .icon { flex-shrink: 0; }
.notice--bad { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad-ink); }

.onboarding .card-body { display: grid; gap: var(--space-md); }
.onboarding p { max-width: 68ch; }

.modal { width: min(720px, calc(100% - var(--space-lg))); max-height: calc(100dvh - var(--space-xl)); padding: 0; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-pop); }
.modal::backdrop { background: var(--color-scrim); }
.modal form { display: flex; flex-direction: column; max-height: calc(100dvh - var(--space-xl)); }
.modal-head, .modal-foot { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); flex-shrink: 0; }
.modal-head { justify-content: space-between; border-bottom: 1px solid var(--color-rule); }
.modal-head h2 { font-size: var(--text-lg); font-weight: 500; }
.modal-foot { justify-content: flex-end; border-top: 1px solid var(--color-rule); background: var(--color-canvas); }
.modal-body { display: grid; gap: var(--space-md); padding: var(--space-lg); overflow-y: auto; }
.modal-text { font-size: var(--text-sm); color: var(--color-ink-2); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.stack-form { display: grid; gap: var(--space-md); max-width: 420px; }
textarea.input { padding: var(--space-xs) var(--space-sm); resize: vertical; line-height: 1.45; font: inherit; }
select.input { padding-right: var(--space-xs); }
.input--file { padding-block: 6px; }
.hint { font-size: var(--text-2xs); color: var(--color-muted); }
.form-error { min-height: 0; font-size: var(--text-sm); color: var(--bad-ink); }
.form-error:empty { display: none; }

.fit-note { padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }
.notes-text { min-height: 84px; }
.notes-body { display: grid; gap: var(--space-sm); }
.inline-form { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); }
.inline-form select { flex: 1; min-width: 0; }
.note--warn { color: var(--warn-ink); }
.prewrap { white-space: pre-line; }
.progress-card[hidden] { display: none; }

@media (max-width: 40rem) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .notice { flex-wrap: wrap; }
  #alerts { padding-inline: var(--space-md); }
}