/* ============================================================
 * Despachante Uploads — estilos das telas públicas
 * ============================================================ */

:root {
	--desp-cor-primaria: #1d2327;
	--desp-cor-primaria-hover: #2c3338;
	--desp-cor-acento: #2271b1;
	--desp-cor-acento-bg: #f0f6fc;
	--desp-cor-acento-borda: #c3d9ec;
	--desp-cor-erro: #b32d2e;
	--desp-cor-erro-bg: #fbeaea;
	--desp-cor-sucesso-bg: #dff6dd;
	--desp-cor-sucesso-texto: #256029;
	--desp-cor-borda: #e2e4e7;
	--desp-raio: 10px;
	--desp-raio-sm: 6px;
	--desp-sombra: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.desp-up-box,
.desp-up-box * {
	box-sizing: border-box;
}

.desp-up-box {
	max-width: 560px;
	width: 100%;
	margin: 40px auto;
	padding: 32px;
	border: 1px solid var(--desp-cor-borda);
	border-radius: var(--desp-raio);
	background: #fff;
	box-shadow: var(--desp-sombra);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: #1d2327;
	overflow-x: hidden;
}

.desp-up-box h2 {
	margin: 0 0 4px;
	font-size: 20px;
	line-height: 1.3;
}

.desp-up-subtitulo {
	margin: 0 0 20px;
	color: #646970;
	font-size: 14px;
}

/* ---------- Cabeçalho (título + botão Sair) ---------- */
.desp-up-cabecalho {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--desp-cor-borda);
}

.desp-up-cabecalho h2 {
	margin: 0;
	min-width: 0;
	overflow-wrap: break-word;
}

/* ---------- Formulários ---------- */
.desp-up-box form {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}

.desp-up-box label {
	font-weight: 600;
	font-size: 14px;
	margin-top: 8px;
}

.desp-up-box label:first-child {
	margin-top: 0;
}

.desp-up-box input[type="text"],
.desp-up-box input[type="password"] {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid #c9ccd1;
	border-radius: var(--desp-raio-sm);
	font-size: 15px;
	line-height: 1.4;
	background: #fff;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	box-shadow: none;
	transition: border-color 0.15s ease;
}

.desp-up-box input[type="text"]:focus,
.desp-up-box input[type="password"]:focus {
	border-color: var(--desp-cor-acento);
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.12);
}

/* ---------- Campo de senha com "olho" ---------- */
.desp-up-campo-senha {
	position: relative;
	display: flex;
}

.desp-up-campo-senha input {
	padding-right: 44px !important;
}

.desp-up-toggle-senha {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 17px;
	color: #646970;
	padding: 0;
}

.desp-up-toggle-senha:hover {
	color: var(--desp-cor-acento);
}

.desp-up-login {
	text-align: center;
}

.desp-up-login-icone {
	font-size: 30px;
	margin-bottom: 6px;
}

.desp-up-login form {
	text-align: left;
}

/* ---------- Botões ---------- */
.desp-up-btn {
	align-self: flex-start;
	padding: 11px 22px;
	background: var(--desp-cor-primaria);
	color: #fff;
	border: none;
	border-radius: var(--desp-raio-sm);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.desp-up-btn:hover {
	background: var(--desp-cor-primaria-hover);
}

.desp-up-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.desp-up-btn-full {
	align-self: stretch;
	text-align: center;
	margin-top: 6px;
}

.desp-up-btn-secundario {
	background: var(--desp-cor-acento-bg);
	color: var(--desp-cor-primaria);
	border: 1px solid var(--desp-cor-acento-borda);
}

.desp-up-btn-secundario:hover {
	background: #e3eef8;
}

/* ---------- Tela do despachante (Gerar links): 800px ---------- */
.desp-up-box.desp-up-box-painel {
	max-width: 800px;
}

.desp-up-ja-usado {
	text-align: center;
}

.desp-up-ja-usado > p:first-child {
	margin-top: 0;
	font-size: 16px;
}

/* ---------- Mensagem de sucesso ---------- */
.desp-up-ok {
	color: var(--desp-cor-sucesso-texto);
	background: var(--desp-cor-sucesso-bg);
	padding: 12px 14px;
	border-radius: var(--desp-raio-sm);
	border: 1px solid var(--desp-cor-sucesso-texto);
	font-size: 14px;
	margin: 0 0 16px;
}

/* ---------- Botão Deletar (por cliente) ---------- */
.desp-up-box form.desp-up-form-deletar {
	display: block;
	margin: 0;
}

.desp-up-btn-deletar {
	padding: 6px 12px;
	border: 1px solid #d9534f;
	border-radius: var(--desp-raio-sm);
	background: #fff;
	color: #d9534f;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.desp-up-btn-deletar:hover,
.desp-up-btn-deletar:focus {
	background: #d9534f;
	color: #fff;
}

/* ---------- Botão Sair ---------- */
.desp-up-btn-sair {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid #d9534f;
	border-radius: var(--desp-raio-sm);
	color: #d9534f;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.desp-up-btn-sair:hover {
	background: #d9534f;
	color: #fff;
}

.desp-up-icone-sair {
	font-size: 14px;
	line-height: 1;
}

/* ---------- Mensagens ---------- */
.desp-up-erro {
	color: var(--desp-cor-erro);
	background: var(--desp-cor-erro-bg);
	padding: 12px 14px;
	border-radius: var(--desp-raio-sm);
	border: 1px solid #f3c9c9;
	font-size: 14px;
	margin: 0 0 16px;
}

.desp-up-aviso {
	color: #646970;
	font-size: 13px;
	margin: 6px 0 0;
}

.desp-up-sucesso {
	text-align: center;
}

.desp-up-sucesso h2 {
	margin-bottom: 12px;
}

/* ---------- Caixa do link gerado ---------- */
.desp-up-link-gerado {
	background: var(--desp-cor-acento-bg);
	border: 1px solid var(--desp-cor-acento-borda);
	padding: 16px;
	border-radius: var(--desp-raio-sm);
	margin: 0 0 20px;
}

.desp-up-link-gerado > p:first-child {
	margin-top: 0;
}

.desp-up-link-linha {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.desp-up-link-campo {
	flex: 1;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--desp-cor-acento-borda);
	border-radius: var(--desp-raio-sm);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	background: #fff;
}

.desp-up-link-gerado .desp-up-btn-secundario {
	margin: 0;
	white-space: nowrap;
}

/* ---------- Campo de arquivo estilizado como botão ---------- */
.desp-up-campo-arquivo {
	margin: 4px 0 16px;
}

.desp-up-input-arquivo-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.desp-up-label-arquivo {
	display: inline-block;
	cursor: pointer;
	margin: 0;
}

.desp-up-input-arquivo-oculto:focus + .desp-up-aviso,
.desp-up-input-arquivo-oculto:focus ~ .desp-up-label-arquivo {
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.25);
}

/* ---------- Tabela de envios ---------- */
.desp-up-box h3 {
	margin: 24px 0 10px;
	font-size: 15px;
}

.desp-up-tabela-wrapper {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 8px;
}

.desp-up-tabela {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 13px;
}

.desp-up-tabela th,
.desp-up-tabela td {
	text-align: left;
	padding: 9px 6px;
	border-bottom: 1px solid #eee;
	vertical-align: top;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.desp-up-tabela th {
	color: #646970;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.desp-up-status {
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	display: inline-block;
}

.desp-up-status-pendente {
	background: #fff4ce;
	color: #8a6d00;
}

.desp-up-status-enviado {
	background: var(--desp-cor-sucesso-bg);
	color: var(--desp-cor-sucesso-texto);
}

.desp-up-status-expirado {
	background: #f3f3f3;
	color: #777;
}

.desp-up-download {
	font-size: 13px;
	color: var(--desp-cor-acento);
	text-decoration: none;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.desp-up-download:hover {
	text-decoration: underline;
}

/* ---------- Responsivo ---------- */
@media (max-width: 480px) {
	.desp-up-box {
		margin: 16px;
		padding: 22px;
	}

	.desp-up-cabecalho {
		flex-direction: column;
		align-items: stretch;
	}

	.desp-up-link-linha {
		flex-direction: column;
	}
}

/* Aviso: despachante abriu o link do cliente no mesmo navegador */
.desp-up-aviso-despachante {
	border: 2px solid #e0a800;
	background: #fff8e1;
}
.desp-up-aviso-despachante h2 {
	margin-top: 0;
}

/* ---------- Tabela de envios no celular: cada cliente vira um card ----------
 * Linha 1: Cliente + Status | Linha 2: Celular + Expira | Linha 3: Arquivos + Deletar
 * Os !important abaixo existem porque o tema do site força fundo/borda/tamanho em
 * tabelas e botões. */
@media (max-width: 600px) {
	.desp-up-box.desp-up-box-painel {
		margin: 12px;
		padding: 16px;
	}

	.desp-up-tabela-wrapper {
		overflow-x: visible;
	}

	.desp-up-tabela,
	.desp-up-tabela tbody {
		display: block;
		min-width: 0;
		width: 100%;
		border: 0;
		background: transparent !important;
	}

	.desp-up-tabela thead {
		display: none;
	}

	.desp-up-tabela tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"nome status"
			"cel  exp"
			"arq  acao";
		column-gap: 10px;
		row-gap: 6px;
		align-items: center;
		margin: 0 0 12px;
		padding: 12px;
		border: 1px solid #d5d8dc !important;
		border-radius: 12px;
		background: #f8f9fa !important;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	}

	.desp-up-tabela tr:last-child {
		margin-bottom: 0;
	}

	.desp-up-tabela td {
		display: block;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		min-width: 0;
	}

	.desp-up-col-nome   { grid-area: nome;   font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
	.desp-up-col-status { grid-area: status; justify-self: end; }
	.desp-up-col-cel    { grid-area: cel;    color: #50575e; font-size: 13px; }
	.desp-up-col-exp    { grid-area: exp;    justify-self: end; color: #50575e; font-size: 12px; text-align: right; white-space: nowrap; }
	.desp-up-col-arq    { grid-area: arq;    align-self: start; }
	.desp-up-col-acao   { grid-area: acao;   justify-self: end; align-self: start; }

	.desp-up-col-exp::before {
		content: attr(data-label) " ";
	}

	/* arquivos: um por linha, nome longo corta com "..." em vez de quebrar */
	.desp-up-col-arq br {
		display: none;
	}

	.desp-up-col-arq .desp-up-download {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		line-height: 1.7;
	}

	/* sem arquivos: some a linha e o Deletar fica sozinho à direita */
	.desp-up-col-vazia {
		display: none !important;
	}

	/* botão Deletar compacto (o tema inflava o tamanho) */
	.desp-up-box .desp-up-tabela .desp-up-btn-deletar {
		padding: 5px 12px !important;
		font-size: 12px !important;
		line-height: 1.2 !important;
		min-height: 0 !important;
		height: auto !important;
		width: auto !important;
		border-radius: 6px !important;
		background: #fff !important;
	}
}