.lp-pr-customer-files {
	background: #fff;
	border: 1px solid #e4ece8;
	border-radius: 18px;
	padding: 22px;
}

.lp-pr-customer-files h3 {
	margin: 0 0 6px;
}

.lp-pr-customer-files p {
	color: #6f7f79;
	margin: 0 0 18px;
}

.lp-pr-customer-file-list {
	display: grid;
	gap: 12px;
}

.lp-pr-customer-file {
	align-items: center;
	background: #f7faf8;
	border: 1px solid #e5ede8;
	border-radius: 16px;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 14px;
}

.lp-pr-customer-file strong,
.lp-pr-customer-file small {
	display: block;
}

.lp-pr-customer-file small {
	color: #6f7f79;
	margin-top: 3px;
}

.lp-pr-customer-file-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.lp-pr-flash {
	border-radius: 12px;
	font-weight: 600;
	margin: 0 0 16px;
	padding: 12px 16px;
}

.lp-pr-flash-success {
	background: #e8f6ec;
	border: 1px solid #b6e2c2;
	color: #1b6b39;
}

.lp-pr-flash-error {
	background: #fdecec;
	border: 1px solid #f3c2c2;
	color: #9b2222;
}

.lp-pr-customer-upload-hint {
	color: #6f7f79;
	font-weight: 400;
}

.lp-pr-customer-notice {
	background: #f1f7ff;
	border: 1px solid #d4e4fb;
	border-radius: 14px;
	color: #2b3a4a;
	margin: 0 0 20px;
	padding: 16px 18px;
}

.lp-pr-customer-notice-head {
	align-items: center;
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.lp-pr-customer-notice-icon {
	align-items: center;
	background: #2f6fed;
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-size: 13px;
	font-style: normal;
	height: 20px;
	justify-content: center;
	width: 20px;
}

.lp-pr-customer-notice ul {
	list-style: disc;
	margin: 0;
	padding-left: 20px;
}

.lp-pr-customer-notice li {
	margin: 4px 0;
}

.lp-pr-customer-upload {
	background: #f7faf8;
	border: 1px dashed #c5dccf;
	border-radius: 14px;
	margin: 0 0 22px;
	padding: 16px 18px;
}

.lp-pr-customer-upload-form {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.lp-pr-customer-upload-label {
	display: flex;
	flex: 1 1 240px;
	flex-direction: column;
	font-weight: 600;
	gap: 6px;
}

.lp-pr-customer-upload-label input[type="file"] {
	font-weight: 400;
}

.lp-pr-customer-section {
	margin-top: 22px;
}

.lp-pr-customer-section h4 {
	margin: 0 0 4px;
}

.lp-pr-customer-section p {
	color: #6f7f79;
	margin: 0 0 12px;
}

.lp-pr-customer-file-own {
	background: #fbf9f4;
	border-color: #ece3d3;
}

.lp-pr-consent {
	align-items: flex-start;
	color: #2b3a4a;
	display: flex;
	flex-basis: 100%;
	gap: 8px;
	margin: 4px 0;
}

/* Mesmo defeito do `lp-pr-checkbox-field` do admin: sem tamanho declarado, o input
 * cresce como item de flex e o check deixa de ser redondo. */
.lp-pr-consent input[type="checkbox"] {
	flex: 0 0 auto;
	height: 18px;
	margin-top: 3px;
	min-width: 18px;
	width: 18px;
}

.lp-pr-customer-notes {
	display: grid;
	gap: 10px;
}

.lp-pr-customer-note {
	background: #f7faf8;
	border: 1px solid #e5ede8;
	border-radius: 14px;
	padding: 12px 14px;
}

.lp-pr-customer-note summary {
	cursor: pointer;
	list-style: none;
}

.lp-pr-customer-note summary strong {
	display: block;
}

.lp-pr-customer-note summary small {
	color: #6f7f79;
}

.lp-pr-customer-note-body {
	margin-top: 10px;
}

.lp-pr-customer-file .lp-pr-delete-form {
	display: inline;
	margin: 0;
}

@media (max-width: 640px) {
	.lp-pr-customer-file {
		align-items: stretch;
		flex-direction: column;
	}

	.lp-pr-customer-file-actions {
		justify-content: flex-start;
	}

	.lp-pr-customer-upload-form {
		align-items: stretch;
	}
}

/* ---------------------------------------------------------------------------
 * Contraste dos botões no painel do cliente.
 *
 * Duas causas somadas deixavam "Visualizar" e "Baixar" ilegíveis:
 *
 * 1. O tema do site repinta a cor de link (`a { color: … }`) com seletor mais
 *    específico que o `.latepoint-btn { color: #fff }` do core — o rótulo saía
 *    azul-escuro sobre o azul do botão. Daí o `!important` aqui, que o
 *    CLAUDE.md admite pontualmente justamente para este caso.
 * 2. `latepoint-btn-outline` sozinho não desenha contorno nenhum: a regra do
 *    core é `.latepoint-btn.latepoint-btn-primary.latepoint-btn-outline`. Sem o
 *    `-primary`, o botão caía no estilo cheio e ficava idêntico ao "Baixar".
 *
 * A cor sai de `--latepoint-brand-primary` (não hardcodar: a instalação pode
 * trocar a cor da marca). A segunda declaração de `color` escurece um pouco a
 * mesma cor para chegar ao contraste AA em texto de 15px; navegador sem
 * `color-mix` ignora a linha e fica com a cor de marca pura.
 * ------------------------------------------------------------------------- */

.lp-pr-customer-files .latepoint-btn,
.lp-pr-customer-files .latepoint-btn span,
.lp-pr-customer-files .latepoint-btn i {
	color: #fff !important;
}

.lp-pr-customer-files .latepoint-btn.latepoint-btn-outline {
	background-color: #fff;
	border: 1px solid var(--latepoint-brand-primary, #1d7bff);
}

.lp-pr-customer-files .latepoint-btn.latepoint-btn-outline,
.lp-pr-customer-files .latepoint-btn.latepoint-btn-outline span,
.lp-pr-customer-files .latepoint-btn.latepoint-btn-outline i {
	color: var(--latepoint-brand-primary, #1d7bff) !important;
	color: color-mix(in srgb, var(--latepoint-brand-primary, #1d7bff) 85%, #000) !important;
}

.lp-pr-customer-files .latepoint-btn.latepoint-btn-outline:hover,
.lp-pr-customer-files .latepoint-btn.latepoint-btn-outline:focus {
	background-color: #f2f7ff;
}

/* "Excluir" declara `-danger -outline`, mas o core não tem essa combinação:
 * o botão saía cheio em #fb7f7f com texto branco, que dá 2,7:1. Contorno
 * vermelho sobre branco resolve o contraste e ainda tira o peso visual de uma
 * ação destrutiva. #d83838 é a cor de perigo do próprio core, não paleta nova. */
.lp-pr-customer-files .latepoint-btn.latepoint-btn-danger.latepoint-btn-outline {
	background-color: #fff;
	border: 1px solid #d83838;
}

.lp-pr-customer-files .latepoint-btn.latepoint-btn-danger.latepoint-btn-outline,
.lp-pr-customer-files .latepoint-btn.latepoint-btn-danger.latepoint-btn-outline span,
.lp-pr-customer-files .latepoint-btn.latepoint-btn-danger.latepoint-btn-outline i {
	color: #d83838 !important;
}

.lp-pr-customer-files .latepoint-btn.latepoint-btn-danger.latepoint-btn-outline:hover,
.lp-pr-customer-files .latepoint-btn.latepoint-btn-danger.latepoint-btn-outline:focus {
	background-color: #fdf2f2;
}