/* ==========================================================================
   VIDROTECK — painel de gestão
   Mesmos tokens do site público. Sem bibliotecas.
   ========================================================================== */

@font-face {
	font-family: 'Poppins';
	src: url('/assets/fontes/poppins-400.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('/assets/fontes/poppins-600.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('/assets/fontes/poppins-700.woff2') format('woff2');
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Source Serif 4';
	src: url('/assets/fontes/source-serif-600.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;
}

:root {
	--amarelo:        #F0A32A;
	--amarelo-claro:  #FFB84D;
	--amarelo-escuro: #8F5D0C;

	--preto:   #101114;
	--preto-2: #17181C;
	--preto-3: #22252B;

	--tinta:   #14161A;
	--tinta-2: #454D58;
	--tinta-3: #5E6773;

	--linha:   #E1E6EB;
	--cinza:   #F4F6F8;
	--branco:  #FFFFFF;

	--verde:   #17612D;
	--verde-f: #E3F1E7;
	--vermelho:#9B2226;
	--vermelho-f:#FBE9E9;

	--fonte: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--serif: 'Source Serif 4', Georgia, serif;
	--t: 160ms ease;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--fonte);
	font-size: 15px;
	line-height: 1.6;
	color: var(--tinta-2);
	background: var(--cinza);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.2; color: var(--tinta); letter-spacing: -.02em; }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1rem; }
a { color: var(--amarelo-escuro); }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--amarelo); color: var(--preto); }
:root { caret-color: var(--amarelo); }
:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }

/* --------------------------------------------------------------- entrada */
.entrada {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 2rem 1.25rem;
	background: var(--preto);
}
.entrada__caixa { width: min(100%, 400px); }
.entrada__marca { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: 1.75rem; }
.entrada__marca svg { width: 34px; height: 34px; }
.entrada__marca b { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--branco); }
.entrada__cartao { padding: 2rem 1.75rem; background: var(--branco); }
.entrada__cartao h1 { font-size: 1.3rem; margin-bottom: 1.5rem; }
.entrada__rodape { margin: 1.25rem 0 0; text-align: center; font-size: .82rem; color: rgba(255,255,255,.45); }
.entrada__rodape a { color: rgba(255,255,255,.7); }

/* ---------------------------------------------------------------- painel */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }

.lateral { background: var(--preto); color: rgba(255,255,255,.75); display: flex; flex-direction: column; }
.lateral__marca { display: flex; align-items: center; gap: .6rem; padding: 1.4rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.lateral__marca svg { width: 30px; height: 30px; flex: none; }
.lateral__marca b { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--branco); }
.lateral nav { padding: 1rem .75rem; flex: 1; }
.lateral nav a {
	display: flex; align-items: center; gap: .7rem;
	padding: .65rem .75rem;
	font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.72);
	text-decoration: none;
	transition: background var(--t), color var(--t);
}
.lateral nav a svg { width: 17px; height: 17px; flex: none; opacity: .75; }
.lateral nav a:hover { background: rgba(255,255,255,.06); color: var(--branco); }
.lateral nav a.activo { background: var(--amarelo); color: var(--preto); font-weight: 600; }
.lateral nav a.activo svg { opacity: 1; }
.lateral nav .grupo { margin: 1.25rem 0 .4rem; padding: 0 .75rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.lateral__conta { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; }
.lateral__conta b { display: block; color: var(--branco); font-weight: 600; }
.lateral__conta span { color: rgba(255,255,255,.5); }
.lateral__sair { margin-top: .75rem; }
.lateral__sair button {
	width: 100%; padding: .5rem; font: inherit; font-size: .82rem; font-weight: 600;
	color: rgba(255,255,255,.8); background: none; border: 1px solid rgba(255,255,255,.2);
	cursor: pointer; transition: all var(--t);
}
.lateral__sair button:hover { border-color: var(--amarelo); color: var(--amarelo); }

.principal { padding: 2rem clamp(1.25rem, 1rem + 1.5vw, 2.5rem); min-width: 0; }
.principal__cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.principal__cabeca p { margin: .15rem 0 0; font-size: .92rem; }

/* ---------------------------------------------------------------- avisos */
/* Moldura fina a toda a volta, como os cartões, em vez do filete grosso de um
   lado só — que é o sinal mais reconhecível de interface gerada por máquina e
   já tinha saído do site público pela mesma razão. */
.aviso { padding: .85rem 1.1rem; margin-bottom: 1.25rem; font-size: .9rem; font-weight: 500; border: 1px solid; }
.aviso--ok   { background: var(--verde-f);    border-color: var(--verde);    color: var(--verde); }
.aviso--erro { background: var(--vermelho-f); border-color: var(--vermelho); color: var(--vermelho); }

/* --------------------------------------------------------------- cartões */
.cartao { background: var(--branco); border: 1px solid var(--linha); padding: 1.5rem; }
.cartao + .cartao { margin-top: 1.25rem; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.numero { background: var(--branco); border: 1px solid var(--linha); padding: 1.25rem; }
.numero b { display: block; font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--tinta); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.numero span { display: block; margin-top: .35rem; font-size: .82rem; color: var(--tinta-3); }
.numero--destaque b { color: var(--amarelo-escuro); }

/* -------------------------------------------------------------- formulários */
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 600; color: var(--tinta); }
.campo__nota { margin: .3rem 0 0; font-size: .8rem; color: var(--tinta-3); }

input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], input[type="search"], select, textarea {
	width: 100%;
	padding: .65rem .8rem;
	font-family: inherit; font-size: .95rem; color: var(--tinta);
	background: var(--branco);
	border: 1px solid var(--linha);
	transition: border-color var(--t), box-shadow var(--t);
}
input:focus, select:focus, textarea:focus {
	border-color: var(--amarelo);
	box-shadow: 0 0 0 3px rgba(240,163,42,.15);
	outline: none;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .7rem 1.4rem;
	font-family: inherit; font-size: .88rem; font-weight: 600;
	letter-spacing: .02em; text-transform: uppercase;
	border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: background var(--t), color var(--t), border-color var(--t);
}
.btn--principal { background: var(--amarelo); color: var(--preto); }
.btn--principal:hover { background: var(--amarelo-claro); }
.btn--neutro { background: var(--branco); color: var(--tinta); border-color: var(--linha); }
.btn--neutro:hover { border-color: var(--amarelo); color: var(--amarelo-escuro); }
.btn--largo { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- tabelas */
.tabela-envolve { overflow-x: auto; }
table.dados { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.dados th, table.dados td { padding: .75rem .9rem; text-align: left; border-bottom: 1px solid var(--linha); }
table.dados th { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
table.dados tbody tr:hover { background: var(--cinza); }
table.dados td.numerico { font-variant-numeric: tabular-nums; }

.etiqueta { display: inline-block; padding: .18rem .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.etiqueta--novo { background: var(--verde-f); color: var(--verde); }
.etiqueta--aviso { background: #FBEDD5; color: #7A4E0C; }

.vazio { padding: 2.5rem 1.5rem; text-align: center; color: var(--tinta-3); }
.vazio p { margin: 0 0 1rem; }

/* ------------------------------------------------------------ responsivo */
@media (max-width: 860px) {
	.app { grid-template-columns: 1fr; }
	.lateral { flex-direction: row; flex-wrap: wrap; align-items: center; }
	.lateral__marca { border-bottom: 0; }
	.lateral nav { display: flex; flex-wrap: wrap; gap: .25rem; padding: .5rem .75rem 1rem; width: 100%; }
	.lateral nav .grupo { display: none; }
	.lateral__conta { width: 100%; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
	.lateral__sair { margin: 0; }
	.lateral__sair button { width: auto; padding: .45rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------- pedidos
   Acrescentado a 17/09/2026. A lista de pedidos é uma caixa de entrada: o que
   importa é o que ainda não teve resposta, e isso tem de se ver de relance. */
tr.por-ler { background: #FFFCF4; }
tr.por-ler td:first-child { box-shadow: inset 3px 0 0 var(--amarelo); }

.conta-menu {
	margin-left: auto;
	min-width: 20px; padding: .1rem .4rem;
	font-size: .72rem; font-weight: 700; text-align: center;
	font-variant-numeric: tabular-nums;
	background: var(--amarelo); color: var(--preto);
}

.mensagem-pedido {
	padding: 1rem 1.1rem;
	background: var(--cinza);
	border: 1px solid var(--linha);
	font-size: .94rem; line-height: 1.6;
	white-space: normal;
}

.paginacao-painel { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.25rem; }
.paginacao-painel a, .paginacao-painel span { min-width: 36px; padding: .4rem .5rem; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; border: 1px solid var(--linha); color: var(--tinta-2); }
.paginacao-painel a:hover { border-color: var(--amarelo); color: var(--amarelo-escuro); }
.paginacao-painel .actual { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }