/* ==========================================================================
   painel.css - SmartMoteis

   Mobile-first de verdade: tudo aqui embaixo e escrito na largura de um
   telefone. Existe UM breakpoint, e ele so acrescenta (min-width: 900px).
   Nenhuma regra de desktop e desfeita mais adiante por um max-width.

   Sem framework. O projeto inteiro e sem dependencia, e uma CDN a mais e uma
   dependencia a mais multiplicada por 100 moteis.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	--fundo:        #f2f4f7;
	--fundo-2:      #ffffff;
	--fundo-3:      #e8ebf0;
	--linha:        #d4d9e0;
	--texto:        #1a1f26;
	--texto-2:      #5b6472;
	--acento:       #1f6feb;
	--acento-texto: #ffffff;
	--ok:           #1a7f45;
	--ok-fundo:     #e3f5ea;
	--erro:         #b3261e;
	--erro-fundo:   #fdeceb;
	--alerta:       #8a5a00;
	--alerta-fundo: #fdf3e0;

	--raio:    12px;
	--raio-sm: 8px;
	--barra-h: 56px;
	--drawer-l: 264px;
	--drawer-mini: 64px;
	--sombra: 0 1px 2px rgba(16, 20, 24, .08), 0 4px 16px rgba(16, 20, 24, .06);

	--fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	         "Helvetica Neue", Arial, sans-serif;
	--mono:  ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

/* O painel da equipe tem cor de acento propria: ninguem deve precisar olhar a
   URL para saber em qual dos dois esta. */
body.painel-admin { --acento: #6b4bd6; }

@media (prefers-color-scheme: dark) {
	:root {
		--fundo:        #101418;
		--fundo-2:      #181d23;
		--fundo-3:      #212830;
		--linha:        #2c343e;
		--texto:        #e7ecf2;
		--texto-2:      #9aa5b4;
		--acento:       #4f8dfb;
		--ok:           #5ed491;
		--ok-fundo:     #14301f;
		--erro:         #ff8a80;
		--erro-fundo:   #3a1a18;
		--alerta:       #ffcc80;
		--alerta-fundo: #35280f;
		--sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .35);
	}

	body.painel-admin { --acento: #a98cff; }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--fonte);
	/* 16px e o minimo que impede o iOS de dar zoom ao focar um campo. */
	font-size: 16px;
	line-height: 1.5;
	color: var(--texto);
	background: var(--fundo);
	overflow-wrap: break-word;
}

/* Trava a rolagem do fundo enquanto o drawer esta aberto no telefone. */
body.drawer-aberto { overflow: hidden; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; }
p  { margin: 0 0 .75rem; }

a { color: var(--acento); }

.pular {
	position: absolute;
	left: -9999px;
}
.pular:focus {
	left: .5rem;
	top: .5rem;
	z-index: 60;
	padding: .6rem 1rem;
	background: var(--acento);
	color: var(--acento-texto);
	border-radius: var(--raio-sm);
}

/* --------------------------------------------------------------------------
   3. Barra superior
   -------------------------------------------------------------------------- */

.barra {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: .5rem;
	height: calc(var(--barra-h) + env(safe-area-inset-top));
	padding: env(safe-area-inset-top) .75rem 0;
	background: var(--fundo-2);
	border-bottom: 1px solid var(--linha);
}

.barra-titulo {
	flex: 1;
	font-weight: 600;
	font-size: 1.05rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.barra-motel {
	padding: .25rem .6rem;
	border-radius: 999px;
	background: var(--fundo-3);
	color: var(--texto-2);
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.botao-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 44px e o alvo minimo de toque; abaixo disso erra-se o botao. */
	width: 44px;
	height: 44px;
	margin-left: -.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--raio-sm);
	background: transparent;
	color: var(--texto);
	cursor: pointer;
}
.botao-menu:hover { background: var(--fundo-3); }

.hamburger,
.hamburger::before,
.hamburger::after {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .18s ease, opacity .18s ease;
}
.hamburger { position: relative; }
.hamburger::before,
.hamburger::after { content: ""; position: absolute; left: 0; }
.hamburger::before { top: -6px; }
.hamburger::after  { top:  6px; }

body.drawer-aberto .hamburger { background: transparent; }
body.drawer-aberto .hamburger::before { transform: translateY(6px) rotate(45deg); }
body.drawer-aberto .hamburger::after  { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   4. Drawer

   No telefone ele entra por cima, deslizando da esquerda. A partir de 900px
   vira coluna fixa, e o botao passa a recolher para so os icones.
   -------------------------------------------------------------------------- */

.fundo-drawer {
	position: fixed;
	inset: 0;
	z-index: 35;
	background: rgba(8, 11, 15, .5);
}

.drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	width: var(--drawer-l);
	max-width: 86vw;
	padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
	background: var(--fundo-2);
	border-right: 1px solid var(--linha);
	transform: translateX(-100%);
	transition: transform .22s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}

body.drawer-aberto .drawer { transform: translateX(0); }

.drawer-marca {
	display: flex;
	align-items: center;
	height: var(--barra-h);
	padding: 0 1rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--acento);
	white-space: nowrap;
}

.drawer-motel {
	padding: .25rem 1rem .75rem;
	border-bottom: 1px solid var(--linha);
}
.drawer-motel label {
	display: block;
	margin-bottom: .25rem;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--texto-2);
}

.drawer-lista {
	flex: 1;
	list-style: none;
	margin: .5rem 0;
	padding: 0;
}

.drawer-lista a {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: 48px;
	padding: 0 1rem;
	color: var(--texto);
	text-decoration: none;
	font-weight: 500;
}
.drawer-lista a:hover { background: var(--fundo-3); }

.drawer-lista a.ativo {
	color: var(--acento);
	background: var(--fundo-3);
	box-shadow: inset 3px 0 0 var(--acento);
}

.drawer-lista .ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--fundo-3);
	font-size: .8rem;
	font-weight: 700;
	color: var(--texto-2);
}
.drawer-lista a.ativo .ico { background: var(--acento); color: var(--acento-texto); }

.drawer-pe {
	padding: .75rem 1rem 1rem;
	border-top: 1px solid var(--linha);
}
.drawer-user { margin-bottom: .6rem; min-width: 0; }
.drawer-user strong { display: block; font-size: .9rem; }
.drawer-user small {
	display: block;
	color: var(--texto-2);
	font-size: .78rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   5. Conteudo
   -------------------------------------------------------------------------- */

.conteudo {
	padding: calc(var(--barra-h) + env(safe-area-inset-top) + 1rem) 1rem
	         calc(2rem + env(safe-area-inset-bottom));
	max-width: 1100px;
}

.cartao {
	margin: 0 0 1rem;
	padding: 1rem;
	background: var(--fundo-2);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	box-shadow: var(--sombra);
}

.cartao > :last-child { margin-bottom: 0; }

.cartao.vazio {
	text-align: center;
	color: var(--texto-2);
}

/* <details> usado como "abrir formulario": o summary precisa ser um alvo de
   toque, nao uma linha de texto de 20px. */
.cartao > summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: -1rem -1rem 0;
	padding: 0 1rem;
	cursor: pointer;
	color: var(--acento);
}
.cartao[open] > summary {
	margin-bottom: .75rem;
	border-bottom: 1px solid var(--linha);
}

.grade {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin-bottom: 1rem;
}

.metrica { text-align: center; }
.metrica .valor { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.metrica .rotulo {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--texto-2);
}

/* --------------------------------------------------------------------------
   6. Listas que em telefone viram cartoes

   Tabela que rola de lado no celular e tabela que ninguem le. Cada linha vira
   um cartao, com o nome do campo antes do valor.
   -------------------------------------------------------------------------- */

.lista { list-style: none; margin: 0; padding: 0; }

.lista > li {
	margin-bottom: .75rem;
	padding: .85rem 1rem;
	background: var(--fundo-2);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	box-shadow: var(--sombra);
}

.lista-topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .5rem;
}
.lista-topo strong { font-size: 1rem; }

.par-lista { margin: 0; }

.par {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .25rem 0;
	font-size: .9rem;
	border-top: 1px dashed var(--linha);
}
.par:first-of-type { border-top: 0; }
.par dt { color: var(--texto-2); }
.par dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.acoes {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .75rem;
}

/* Tabela de verdade (so a auditoria), com rolagem propria - o corpo da pagina
   nunca rola de lado. */
.rolagem {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--fundo-2);
}
.tabela { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tabela th, .tabela td {
	padding: .55rem .7rem;
	text-align: left;
	white-space: nowrap;
	border-bottom: 1px solid var(--linha);
}
.tabela th {
	position: sticky;
	top: 0;
	background: var(--fundo-3);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--texto-2);
}
.tabela tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   7. Selos de estado
   -------------------------------------------------------------------------- */

.selo {
	display: inline-block;
	padding: .15rem .55rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
}
.selo-ok     { background: var(--ok-fundo);     color: var(--ok); }
.selo-erro   { background: var(--erro-fundo);   color: var(--erro); }
.selo-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.selo-neutro { background: var(--fundo-3);      color: var(--texto-2); }

.codigo { font-family: var(--mono); font-size: .85em; }

/* --------------------------------------------------------------------------
   8. Formularios - sempre uma coluna
   -------------------------------------------------------------------------- */

.campo { margin-bottom: .9rem; }

.campo label,
.rotulo-campo {
	display: block;
	margin-bottom: .3rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--texto-2);
}

.campo .dica {
	display: block;
	margin-top: .3rem;
	font-size: .78rem;
	color: var(--texto-2);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: .55rem .7rem;
	font: inherit;
	font-size: 1rem;
	color: var(--texto);
	background: var(--fundo-2);
	border: 1px solid var(--linha);
	border-radius: var(--raio-sm);
	appearance: none;
}

textarea { min-height: 88px; resize: vertical; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.bt:focus-visible,
.botao-menu:focus-visible,
.drawer-lista a:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 2px;
}

.caixa-check {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 44px;
}
.caixa-check input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--acento);
}
.caixa-check label { margin: 0; font-size: .95rem; color: var(--texto); }

fieldset {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}
fieldset legend {
	padding: 0;
	margin-bottom: .5rem;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--texto-2);
}

/* --------------------------------------------------------------------------
   9. Botoes
   -------------------------------------------------------------------------- */

.bt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-height: 44px;
	padding: .5rem 1.1rem;
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	color: var(--acento-texto);
	background: var(--acento);
	border: 1px solid transparent;
	border-radius: var(--raio-sm);
	text-decoration: none;
	cursor: pointer;
}
.bt:hover { filter: brightness(1.08); }

.bt-largo { width: 100%; }

.bt-sec {
	color: var(--texto);
	background: var(--fundo-2);
	border-color: var(--linha);
}

.bt-perigo { color: #fff; background: var(--erro); }

.bt-sair {
	width: 100%;
	color: var(--texto);
	background: var(--fundo-3);
	border-color: var(--linha);
}

/* --------------------------------------------------------------------------
   10. Avisos
   -------------------------------------------------------------------------- */

.aviso {
	margin: 0 0 1rem;
	padding: .7rem .9rem;
	border-radius: var(--raio-sm);
	border: 1px solid transparent;
	font-size: .92rem;
}
.aviso-ok     { background: var(--ok-fundo);     color: var(--ok);     border-color: var(--ok); }
.aviso-erro   { background: var(--erro-fundo);   color: var(--erro);   border-color: var(--erro); }
.aviso-aviso  { background: var(--alerta-fundo); color: var(--alerta); border-color: var(--alerta); }

/* --------------------------------------------------------------------------
   11. Telas sem login
   -------------------------------------------------------------------------- */

body.avulso { background: var(--fundo); }

.caixa-avulsa {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	padding: calc(2.5rem + env(safe-area-inset-top)) 1.25rem
	         calc(2rem + env(safe-area-inset-bottom));
}

.marca-avulsa {
	margin-bottom: 1.5rem;
	color: var(--acento);
	font-size: 1.5rem;
	text-align: center;
}

.link-secundario {
	display: block;
	margin-top: 1rem;
	text-align: center;
	font-size: .9rem;
}

/* --------------------------------------------------------------------------
   12. Desktop - unico breakpoint, e ele so acrescenta
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.fundo-drawer { display: none; }

	.drawer {
		transform: none;
		transition: width .18s ease;
	}

	.barra { left: var(--drawer-l); }
	.conteudo {
		margin-left: var(--drawer-l);
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	/* Recolhido: so os icones. O estado fica no localStorage. */
	body.drawer-recolhido .drawer { width: var(--drawer-mini); }
	body.drawer-recolhido .drawer .txt,
	body.drawer-recolhido .drawer-marca,
	body.drawer-recolhido .drawer-motel,
	body.drawer-recolhido .drawer-user { display: none; }
	body.drawer-recolhido .drawer-lista a { justify-content: center; padding: 0; }
	body.drawer-recolhido .drawer-pe { padding: .75rem .5rem; }
	body.drawer-recolhido .bt-sair { padding: .5rem .25rem; font-size: .8rem; }
	body.drawer-recolhido .barra { left: var(--drawer-mini); }
	body.drawer-recolhido .conteudo { margin-left: var(--drawer-mini); }

	/* Em tela larga o hamburger nao vira X: ele recolhe, nao fecha. */
	body.drawer-aberto .hamburger { background: currentColor; }
	body.drawer-aberto .hamburger::before { transform: none; }
	body.drawer-aberto .hamburger::after  { transform: none; }
	body.drawer-aberto { overflow: auto; }

	.grade-2 { grid-template-columns: repeat(2, 1fr); }
	.grade-3 { grid-template-columns: repeat(3, 1fr); }
	.grade-4 { grid-template-columns: repeat(4, 1fr); }

	.form-2 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 1rem;
	}
	.form-2 .campo-largo { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}