/* Hat — plano de controlo da deVez.
 *
 * One file, custom properties, no build step. A backoffice is read far more
 * than it is admired: the type is small enough to fit a working day on one
 * screen and large enough to read at arm's length, and colour is used only
 * where it carries meaning — three bands and nothing decorative. */

:root {
	color-scheme: light;

	--tinta:            #062d4d;
	--indicador-largura: 4px;
	--indicador-inset: 9px;
	--indicador-recuo: 8px;
	--indicador-raio: 999px;
	--tinta-suave:      #324f65;
	--tinta-tenue:      #62788a;
	--fundo:            #ffffff;
	--painel:           #ffffff;
	--linha:            #c9d9df;
	--linha-forte:      #9fb8c2;
	--realce:           #079a99;
	--realce-fundo:     #e7f7f6;
	--devez-azul:       #062d4d;
	--devez-turquesa:   #079a99;
	--devez-coral:      #ff5b3d;

	--bem:              #12734a;
	--bem-fundo:        #e3f5ec;
	--atencao:          #8a5a00;
	--atencao-fundo:    #fdf2dc;
	--parado:           #8c2f2f;
	--parado-fundo:     #fbe9e9;

	--raio:             14px;
	--sombra:           0 2px 5px rgba(6, 45, 77, .08), 0 16px 34px -22px rgba(6, 45, 77, .28);
	--lateral:          230px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--fundo);
	color: var(--tinta);
	font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-text-size-adjust: 100%;
}

a { color: var(--realce); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 22px; font-weight: 750; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
h3 { font-size: 13px; font-weight: 700; margin: 0 0 8px; color: var(--tinta-suave); }

/* ---------------------------------------------------------------- estrutura */

.disposicao { display: flex; min-height: 100vh; }

.lateral {
	width: var(--lateral);
	flex: 0 0 var(--lateral);
	background: var(--painel);
	border-right: 1px solid var(--linha);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
}

.marca {
	padding: 18px 18px 14px;
	border-bottom: 1px solid var(--linha);
}
.marca img { display:block; width:148px; max-width:100%; height:auto; }
.marca strong { display: block; font-size: 17px; letter-spacing: -.02em; }
.marca span { display: block; font-size: 11px; color: var(--tinta-tenue); text-transform: uppercase; letter-spacing: .08em; margin-top: 7px; font-weight:700; }

.navegacao { flex: 1; overflow-y: auto; padding: 8px 0; }
.navegacao a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 18px;
	color: var(--tinta-suave);
	font-size: 13.5px;
	border-left: 2px solid transparent;
}
.navegacao a:hover { background: var(--fundo); text-decoration: none; color: var(--tinta); }
.navegacao a.actual {
	color: var(--realce);
	background: var(--realce-fundo);
	border-left-color: var(--realce);
	font-weight: 700;
}
.navegacao .simbolo { width: 15px; text-align: center; opacity: .75; font-size: 12px; }
.navegacao .conta {
	margin-left: auto;
	background: var(--parado);
	color: #fff;
	font-size: 11px;
	padding: 0 6px;
	border-radius: 9px;
	line-height: 17px;
}

.rodape-lateral {
	border-top: 1px solid var(--linha);
	padding: 12px 18px;
	font-size: 12px;
	color: var(--tinta-tenue);
}
.rodape-lateral form { display: inline; }
.rodape-lateral button {
	background: none; border: 0; padding: 0; margin: 0;
	color: var(--realce); font: inherit; cursor: pointer;
}

.principal { flex: 1; min-width: 0; padding: 22px 26px 60px; }
.cabecalho { margin-bottom: 18px; }
.cabecalho p { margin: 0; color: var(--tinta-suave); font-size: 13.5px; }
.cabecalho-com-accao { display:flex; justify-content:space-between; align-items:center; gap:16px; }

/* -------------------------------------------------------------------- avisos */

.aviso { padding: 10px 14px; border-radius: var(--raio); margin-bottom: 16px; font-size: 13.5px; border: 1px solid; }
.aviso-bom  { background: var(--bem-fundo);     border-color: var(--bem);     color: var(--bem); }
.aviso-mau  { background: var(--parado-fundo);  border-color: var(--parado);  color: var(--parado); }
.aviso-nota { background: var(--atencao-fundo); border-color: var(--atencao); color: var(--atencao); }

.atencao-lista { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 6px; }
.atencao-lista li a {
	position: relative;
	display: block;
	padding: 9px 13px 9px 20px;
	background: var(--painel);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	color: var(--tinta);
	font-size: 13.5px;
	--indicador-cor: var(--atencao);
}
.atencao-lista li a:hover { border-color: var(--linha-forte); text-decoration: none; }
.atencao-lista li.grave a { --indicador-cor: var(--parado); }

/* ------------------------------------------------------------------- painéis */

.painel {
	background: var(--painel);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	box-shadow: var(--sombra);
	margin-bottom: 18px;
}
.painel > h2 {
	padding: 12px 16px;
	margin: 0;
	border-bottom: 1px solid var(--linha);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tinta-suave);
}
.painel-corpo { padding: 16px; }

.clientes-grelha{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.atalhos-grelha{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
.atalho-vertical h2{margin:0}.atalho-principal{display:grid;gap:5px;padding:13px 14px;border:1px solid color-mix(in srgb,var(--devez-turquesa) 38%,var(--linha));border-radius:10px;background:color-mix(in srgb,var(--devez-turquesa) 8%,var(--painel));text-decoration:none}.atalho-principal span{font-weight:700}.atalho-principal strong,.atalhos-demos small{font-size:12px;color:var(--tinta-suave);overflow-wrap:anywhere}.atalho-vertical h3{margin:18px 0 8px;font-size:13px}.atalhos-demos{display:grid;gap:7px;margin:0;padding:0;list-style:none}.atalhos-demos a{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--linha);border-radius:9px;text-decoration:none}.atalhos-demos a:hover,.atalho-principal:hover{border-color:var(--devez-turquesa);background:color-mix(in srgb,var(--devez-turquesa) 12%,var(--painel))}.atalho-vazio{margin:16px 0 0;color:var(--tinta-suave);font-size:13px}
.cliente-cartao{background:var(--painel);border:1px solid var(--linha);border-radius:12px;box-shadow:var(--sombra);overflow:hidden}
.cliente-cartao>header{display:flex;justify-content:space-between;gap:16px;padding:17px 18px;border-bottom:1px solid var(--linha)}
.cliente-cartao h2{margin:0 0 2px;font-size:18px}.cliente-cartao header strong,.cliente-cartao header span{display:block}.cliente-cartao header>div>span{font-size:12px;color:var(--tinta-tenue);margin-top:2px}
.cliente-factos{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15px 18px}.cliente-factos div{min-width:0}.cliente-factos span,.cliente-factos strong{display:block}.cliente-factos span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-tenue)}.cliente-factos strong{font-size:13px;overflow-wrap:anywhere}.texto-perigo{color:var(--parado)}
.cliente-controlos{border-top:1px solid var(--linha);padding:15px 18px;display:grid;gap:14px;background:color-mix(in srgb,var(--fundo) 45%,var(--painel))}
.controlo-licenca{display:flex;align-items:center;gap:11px}.controlo-licenca div{display:grid}.controlo-licenca small,.vitalicia small{color:var(--tinta-tenue);font-size:11px}
.switch{width:42px;height:24px;border:0;border-radius:14px;padding:3px;background:var(--linha-forte);flex:0 0 auto}.switch span{display:block;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .15s}.switch.ligado{background:var(--bem)}.switch.ligado span{transform:translateX(18px)}
.controlo-plano{display:grid;grid-template-columns:minmax(150px,1fr) auto auto;gap:10px;align-items:end}.controlo-plano label{margin:0}.vitalicia{display:grid!important;grid-template-columns:auto 1fr;column-gap:6px;align-items:center;padding:6px 9px;border:1px solid var(--linha);border-radius:var(--raio);color:var(--tinta)!important}.vitalicia input{grid-row:1/3;width:auto}.vitalicia small{grid-column:2}
.cliente-cartao>footer{display:flex;justify-content:space-between;gap:10px;padding:10px 18px;border-top:1px solid var(--linha);font-size:11.5px;color:var(--tinta-tenue)}
.equipa-hat{border-top:1px solid var(--linha);padding:12px 18px}.equipa-hat summary{cursor:pointer;font-weight:600}.equipa-lista{display:grid;gap:7px;margin-top:10px}.colaborador-linha{display:grid;grid-template-columns:minmax(110px,1.2fr) minmax(100px,1fr) auto auto;gap:7px;align-items:center}.colaborador-linha.proprietario{grid-template-columns:1fr auto;padding:9px;background:var(--fundo);border-radius:6px}.colaborador-linha input{min-width:0}.colaborador-linha label{white-space:nowrap}.novo-colaborador{border-top:1px dashed var(--linha);padding-top:9px}

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.numero {
	background: var(--painel);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	padding: 13px 15px;
	box-shadow: var(--sombra);
	display: block;
	color: var(--tinta);
}
.numero:hover { border-color: var(--linha-forte); text-decoration: none; }
.numero .valor { display: block; font-size: 25px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.numero .rotulo { display: block; font-size: 12px; color: var(--tinta-suave); margin-top: 2px; }

.controlo-dummies{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px 14px 24px;margin:0 0 18px;background:var(--painel);border:1px solid var(--linha-forte);border-radius:10px;box-shadow:var(--sombra);--indicador-cor:var(--realce)}
.atencao-lista li a::before,.controlo-dummies::before{content:"";position:absolute;inset:var(--indicador-inset) auto var(--indicador-inset) var(--indicador-recuo);width:var(--indicador-largura);border-radius:var(--indicador-raio);background:var(--indicador-cor);pointer-events:none}
.controlo-dummies>div{display:grid;gap:2px}.controlo-dummies>div strong{font-size:14px}.controlo-dummies>div span{color:var(--tinta-suave);font-size:12px;font-weight:500}
.interruptor-dummies{display:flex;align-items:center;gap:8px;margin:0;color:var(--tinta);cursor:pointer}.interruptor-dummies input{position:absolute;opacity:0;pointer-events:none}.interruptor-dummies span{position:relative;width:44px;height:26px;background:var(--linha-forte);border:1px solid var(--linha-forte);border-radius:14px;box-shadow:inset 0 1px 2px #0002}.interruptor-dummies span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 4px #0005;transition:transform .15s}.interruptor-dummies input:checked+span{background:var(--bem);border-color:var(--bem)}.interruptor-dummies input:checked+span::after{transform:translateX(18px)}.interruptor-dummies input:focus-visible+span{outline:3px solid var(--realce-fundo);outline-offset:2px}.interruptor-dummies b{min-width:58px;font-size:12px}

/* -------------------------------------------------------------------- tabelas */

.tabela-fora { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
	text-align: left;
	font-weight: 600;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--tinta-tenue);
	padding: 9px 12px;
	border-bottom: 1px solid var(--linha);
	white-space: nowrap;
}
td { padding: 9px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--fundo); }
td.numerico, th.numerico { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td .secundario { display: block; color: var(--tinta-tenue); font-size: 12px; margin-top: 1px; }

.vazio { padding: 26px 16px; text-align: center; color: var(--tinta-tenue); font-size: 13.5px; }

/* -------------------------------------------------------------------- estados */

.estado {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 11.5px;
	font-weight: 500;
	white-space: nowrap;
	border: 1px solid transparent;
}
.estado.bem     { background: var(--bem-fundo);     color: var(--bem);     border-color: var(--bem); }
.estado.atencao { background: var(--atencao-fundo); color: var(--atencao); border-color: var(--atencao); }
.estado.parado  { background: var(--parado-fundo);  color: var(--parado);  border-color: var(--parado); }
.estado.neutro  { background: var(--fundo);         color: var(--tinta-suave); border-color: var(--linha); }

/* ----------------------------------------------------------------- formulários */

label { display: block; font-size: 12px; font-weight: 500; color: var(--tinta-suave); margin-bottom: 3px; }
label .dica { display: block; font-weight: 400; color: var(--tinta-tenue); font-size: 11.5px; margin-top: 1px; }

input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=number], input[type=date], input[type=search], select, textarea {
	width: 100%;
	padding: 7px 9px;
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio);
	background: var(--painel);
	color: var(--tinta);
	font: inherit;
	font-size: 13.5px;
}
input:focus, select:focus, textarea:focus {
	outline: 2px solid var(--realce);
	outline-offset: -1px;
	border-color: var(--realce);
}
textarea { min-height: 64px; resize: vertical; }

.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.campo { min-width: 0; }
.campo-largo { grid-column: 1 / -1; }

.opcao { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 6px; font-size: 13.5px; }
.opcao input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.opcao label { margin: 0; font-weight: 400; color: var(--tinta); font-size: 13.5px; }

.accoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }

button, .botao {
	padding: 7px 14px;
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio);
	background: var(--painel);
	color: var(--tinta);
	font: inherit;
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
}
button:hover, .botao:hover { border-color: var(--tinta-tenue); text-decoration: none; }
button.principal-accao, .botao.principal-accao {
	background: var(--realce);
	border-color: var(--realce);
	color: #fff;
}
button.principal-accao:hover { filter: brightness(1.08); }
button.perigo { color: var(--parado); border-color: var(--parado); }
button.perigo:hover { background: var(--parado-fundo); }
button.discreto, .botao.discreto { padding: 3px 9px; font-size: 12px; font-weight: 400; }

/* ---------------------------------------------------------------------- filtros */

.filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-bottom: 14px;
}
.filtros a {
	padding: 4px 11px;
	border: 1px solid var(--linha);
	border-radius: 13px;
	font-size: 12.5px;
	color: var(--tinta-suave);
	background: var(--painel);
}
.filtros a:hover { border-color: var(--linha-forte); text-decoration: none; }
.filtros a.actual { background: var(--realce); border-color: var(--realce); color: #fff; }
.filtros form { display: flex; gap: 6px; margin-left: auto; }
.filtros input[type=search] { width: 210px; }

/* ------------------------------------------------------------------- pormenor */

.grelha-dupla { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .grelha-dupla { grid-template-columns: 1fr; } }

dl.factos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; }
dl.factos dt { color: var(--tinta-tenue); font-size: 12px; padding-top: 1px; }
dl.factos dd { margin: 0; }

.requisitos { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.requisitos li { padding: 5px 0; border-bottom: 1px solid var(--linha); display: flex; gap: 8px; }
.requisitos li:last-child { border-bottom: 0; }
.icone-devez { width: 1.15em; height: 1.15em; display: inline-block; flex: 0 0 auto; vertical-align: -.18em; color: currentColor; }
.simbolo .icone-devez { width: 18px; height: 18px; }
.requisitos .marca-sim { color: var(--bem); font-weight: 600; }
.requisitos .marca-nao { color: var(--parado); font-weight: 600; }
.requisitos .marca-sim .icone-devez, .requisitos .marca-nao .icone-devez { width: 17px; height: 17px; }

.barra { height: 5px; background: var(--linha); border-radius: 3px; overflow: hidden; margin: 8px 0 4px; }
.barra span { display: block; height: 100%; background: var(--realce); }

.linhas-conta { width: 100%; font-size: 13.5px; }
.linhas-conta td { padding: 4px 0; border: 0; }
.linhas-conta td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.linhas-conta tr.total td { border-top: 1px solid var(--linha-forte); font-weight: 600; padding-top: 8px; font-size: 15px; }

code, .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; }
.codigo-otp { font-family: ui-monospace, Consolas, monospace; font-size: 15px; font-weight: 600; letter-spacing: .12em; color: var(--realce); }

details.dobra { border-top: 1px solid var(--linha); }
details.dobra > summary { cursor: pointer; padding: 9px 0; font-size: 13px; font-weight: 500; color: var(--tinta-suave); }
details.dobra > summary:hover { color: var(--tinta); }
details.dobra[open] > summary { color: var(--tinta); }
details.dobra > div { padding-bottom: 14px; }

/* ---------------------------------------------------------------- entrada e erro */

body.centrado {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 20px;
}
body.centrado main {
	width: 100%;
	max-width: 370px;
	background: var(--painel);
	border: 1px solid var(--linha);
	border-radius: 10px;
	box-shadow: var(--sombra);
	padding: 28px;
}
body.centrado .marca-central { text-align: center; margin-bottom: 22px; }
body.centrado .marca-central img { display:block; width:210px; max-width:78vw; height:auto; margin:0 auto 8px; }
body.centrado .marca-central strong { font-size: 25px; letter-spacing: -.03em; display: block; }
body.centrado .marca-central span { font-size: 11.5px; color: var(--tinta-tenue); text-transform: uppercase; letter-spacing: .1em; }
body.centrado .campo { margin-bottom: 13px; }
body.centrado button { width: 100%; justify-content: center; }

body.pagina-erro { display: flex; align-items: center; justify-content: center; min-height: 100vh; text-align: center; }
.codigo-erro { font-size: 46px; font-weight: 600; color: var(--tinta-tenue); margin: 0 0 6px; }

@media (max-width: 760px) {
	.disposicao { flex-direction: column; }
	.lateral { width: 100%; flex: none; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--linha); }
	.navegacao { display: flex; overflow-x: auto; padding: 6px; }
	.navegacao a { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; padding: 7px 11px; }
	.navegacao a.actual { border-left: 0; border-bottom-color: var(--realce); }
	.principal { padding: 16px 14px 50px; }
	.grelha-dupla { grid-template-columns: 1fr; }
	.cabecalho-com-accao{align-items:flex-start}.controlo-plano{grid-template-columns:1fr}.cliente-cartao>footer{display:grid}
	.colaborador-linha{grid-template-columns:1fr}
}

/* Assinatura visual comum do multisite: mais presença das três cores sem
   competir com as cores semânticas de estado do plano de controlo. */
body {
	background: var(--fundo);
}
::selection { color:#fff; background:var(--devez-turquesa); }
.marca { position:relative; }
.marca::after {
	content:""; position:absolute; inset:auto 0 -1px; height:3px;
	background:linear-gradient(90deg,var(--devez-azul) 0 38.2%,var(--devez-turquesa) 38.2% 76.4%,var(--devez-coral) 76.4%);
}
.marca img,.marca-central img { filter:saturate(1.16) contrast(1.06); }
.navegacao a.actual {
	background:linear-gradient(90deg,color-mix(in srgb,var(--devez-turquesa) 15%,var(--painel)),color-mix(in srgb,var(--devez-azul) 8%,var(--painel)));
	box-shadow:inset 4px 0 var(--devez-turquesa),inset 0 -2px var(--devez-coral);
}
button:not(.perigo),.botao:not(.perigo) {
	border-color:color-mix(in srgb,var(--devez-azul) 28%,var(--linha));
}
button.primario,.botao.primario {
	background:linear-gradient(110deg,var(--devez-turquesa),color-mix(in srgb,var(--devez-turquesa) 58%,var(--devez-azul)));
	border-color:var(--devez-azul); color:#fff;
	box-shadow:0 5px 0 -3px var(--devez-coral),0 14px 24px -18px var(--devez-azul);
}
:where(.cartao,.metrica,.painel,.bloco) { border-color:color-mix(in srgb,var(--devez-azul) 18%,var(--linha)); }
.barra span { background:linear-gradient(90deg,var(--devez-turquesa),var(--devez-azul)); }
input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid color-mix(in srgb,var(--devez-turquesa) 38%,transparent); border-color:var(--devez-coral); }
.membros-clinica{display:grid;gap:1rem;margin:1rem 0}.membro-clinica{display:grid;gap:.75rem;margin:0;padding:1rem;border:1px solid var(--borda,#d8dee6);border-radius:.75rem}.membro-clinica legend{padding:0 .4rem;font-weight:700}.membro-clinica [data-dono-membro]{padding-top:.75rem;border-top:1px dashed var(--borda,#d8dee6)}

/* Shared platform signature stays in document flow on every page. */
.rodape-plataforma{clear:both;padding:24px 16px 32px;text-align:center;color:#526474;font-size:12px;flex-shrink:0}
.rodape-plataforma a{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.rodape-plataforma img{width:62px;height:36px;object-fit:contain}

body.centrado,body.pagina-erro{flex-direction:column}
body.centrado .rodape-plataforma,body.pagina-erro .rodape-plataforma{width:100%;padding-bottom:0}