/**
 * Modal unificado de feedback pós-submit (Sprint 16).
 *
 * Consome os tokens de style.css (nunca redeclarar). Duas variantes no card:
 * --success (ícone check em --lisa-success) e --error (ícone alerta em
 * --lisa-danger). Azul-UFF segue sendo a cor de AÇÃO (botão OK).
 *
 * O <dialog> funciona em dois modos:
 * - showModal() (JS): top layer + ::backdrop nativos;
 * - atributo `open` (fallback sem JS): o CSS abaixo fixa e centraliza o
 *   diálogo e desenha um "backdrop" próprio via box-shadow espalhado.
 */

.lisa-feedback-modal {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: min(26rem, calc(100vw - 2 * var(--lisa-space-4)));
	width: 100%;
}

.lisa-feedback-modal::backdrop {
	background: rgba(13, 27, 51, 0.55); /* navy translúcido */
}

/* Fallback sem JS: <dialog open> não entra no top layer — fixa, centraliza
   e simula o backdrop com uma sombra espalhada gigante. */
.lisa-feedback-modal[open]:not(:modal) {
	position: fixed;
	inset: 0;
	margin: auto;
	height: fit-content;
	z-index: 9999;
	box-shadow: 0 0 0 100vmax rgba(13, 27, 51, 0.55);
}

.lisa-feedback-modal__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lisa-space-3);
	background: #fff;
	border-radius: var(--lisa-radius);
	box-shadow: var(--lisa-shadow-lg);
	padding: var(--lisa-space-8) var(--lisa-space-6) var(--lisa-space-6);
	text-align: center;
}

.lisa-feedback-modal__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--lisa-radius-full);
}

.lisa-feedback-modal__icon--success {
	color: var(--lisa-success);
	background: rgba(30, 125, 67, 0.12);
}

.lisa-feedback-modal__icon--error {
	color: var(--lisa-danger);
	background: rgba(179, 38, 30, 0.1);
}

/* A variante do card decide qual ícone aparece. */
.lisa-feedback-modal__card--success .lisa-feedback-modal__icon--error,
.lisa-feedback-modal__card--error .lisa-feedback-modal__icon--success {
	display: none;
}

.lisa-feedback-modal__title {
	margin: 0;
	font-family: var(--lisa-font-display);
	font-size: var(--lisa-text-xl);
	font-weight: 800;
	color: var(--lisa-gray-900);
}

.lisa-feedback-modal__title:focus {
	outline: none; /* foco programático (JS) — o modal inteiro já é o contexto */
}

.lisa-feedback-modal__body {
	color: var(--lisa-gray-600);
	font-size: var(--lisa-text-base, 1rem);
	line-height: 1.55;
}

.lisa-feedback-modal__message {
	margin: 0;
}

.lisa-feedback-modal__list {
	margin: 0;
	padding-left: var(--lisa-space-5);
	text-align: left;
	display: grid;
	gap: var(--lisa-space-1);
}

.lisa-feedback-modal__actions {
	margin: var(--lisa-space-2) 0 0;
	width: 100%;
}

.lisa-feedback-modal__button {
	width: 100%;
	border: 0;
	cursor: pointer;
	border-radius: var(--lisa-radius-btn);
	padding: var(--lisa-space-3) var(--lisa-space-5);
	font-family: var(--lisa-font-display);
	font-size: var(--lisa-text-base, 1rem);
	font-weight: 700;
	color: #fff;
	background: var(--lisa-primary);
	transition: background var(--lisa-dur-fast) var(--lisa-ease-out), transform var(--lisa-dur-fast) var(--lisa-ease-out);
}

.lisa-feedback-modal__button:hover {
	background: var(--lisa-primary-dark);
	transform: translateY(-1px);
}

.lisa-feedback-modal__button:focus-visible {
	outline: none;
	box-shadow: var(--lisa-focus);
	outline-offset: 2px;
}