/* tokens.css é importado via menu.css que carrega antes */

/* ============================================
   GLOBAL — body, html
   ============================================ */
body, html {
	padding: 0;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color: var(--color-gray-900);
	background-color: var(--color-brand-300);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	height: 100%;
}

body, #waterform {
	min-height: 100% !important;
}

form#waterform {
	margin-top: 5px;
}

/* ============================================
   TIPOGRAFIA
   ============================================ */
h1 {
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	text-align: center;
	margin: 0 0 var(--space-4);
	color: var(--color-gray-900);
}

h2 {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	color: var(--color-gray-900);
	margin: 0 0 var(--space-3);
}

h3 {
	font-size: var(--fs-xl);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--color-gray-800);
	margin: 0 0 var(--space-3);
}

h4, h5, h6 {
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--color-gray-800);
	margin: 0 0 var(--space-2);
}

/* ============================================
   ANIMATION (peixes — mantidos ocultos)
   ============================================ */
@-webkit-keyframes myfirst {
	0% {margin-left: -235px}
	90% {margin-left: 100%;}
	100% {margin-left: 100%;}
}
@keyframes myfirst {
	0% {transform: translateX(-235px);}
	70% {transform: translateX(100vw);}
	100% {transform: translateX(100vw);}
}

header {
	position: relative;
	background-color: #ffffff;
	box-sizing: border-box;
}

/* ============================================
   HEADER DAS TELAS LOGADAS — voltando ao padrão histórico
   Header BRANCO com a onda.png (azul, transparente) na base.
   A onda "sobe" cobrindo o branco com a água azul, e o #content
   abaixo tem fundo azul que encaixa perfeitamente com a onda.
   ============================================ */
body:has(#cssmenu) header {
	background-color: #ffffff !important;
	background-image: url(../images/onda.png) !important;
	background-repeat: repeat-x !important;
	background-position: bottom center !important;
	background-size: auto 42px !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 180px !important;
	/* padding-bottom = altura da onda (50px) — reserva espaço pra ela
	   não cortar o logo. padding-top equivalente pra centralizar visualmente. */
	padding: 50px var(--space-4) 50px !important;
	margin: 0;
	position: relative;
	z-index: 1;
}

/* Remover o ::after legacy (a onda agora é background-image direto no header) */
body:has(#cssmenu) header::after {
	display: none !important;
}

/* #content das telas logadas: fundo azul contínuo (encaixa com a onda do header) */
body:has(#cssmenu) #content {
	background-color: var(--color-brand-300) !important;
	background-image: none !important;
	padding-top: 0 !important;
	min-height: auto;
	position: relative;
	overflow: visible;
}

/* Logo da empresa centralizado no header (vertical e horizontal)
   flex: 1 ocupa todo o espaço útil entre os paddings simétricos. */
body:has(#cssmenu) #logoCompany {
	background: transparent;
	padding: 0;
	margin: 0 auto;
	max-width: 720px;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: auto;
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
}

body:has(#cssmenu) #logoCompany img {
	max-height: 80px !important;
	max-width: 200px !important;
	object-fit: contain;
}

/* (regras antigas — mantidas como fallback se algo não detectar :has) */
body:has(#cssmenu) header.legacy-bg::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40px;
	background-image: url(../images/onda.png);
	background-position: bottom center;
	background-repeat: repeat-x;
	pointer-events: none;
	z-index: 1;
}

#senha {
	-webkit-text-security: disc;
}

.fish {
	display: none;
}

#fish  { top: 45px; }
#fish2 { top: 400px; animation-delay: 12s; -webkit-animation-delay: 12s; }
#fish3 { top: 680px; animation-delay: 24s; -webkit-animation-delay: 24s; }
#fish4 { top: 960px; animation-delay: 36s; -webkit-animation-delay: 36s; }

/* ============================================
   CONTENT
   ============================================ */
#content {
	background-color: var(--color-brand-300);
	overflow: hidden;
	position: relative;
	padding-bottom: var(--space-6);
}

/* ============================================
   FORMS
   ============================================ */
form {
	margin: 0 auto;
	width: 90%;
	padding-top: 0;
	color: var(--color-white);
	position: relative;
	max-width: 500px;
	box-sizing: border-box;
}

/* Selects específicos */
#tema,
.campanha {
	padding: var(--space-3);
	width: 200px;
	border-radius: var(--radius-md);
}

.layouts-selects,
#produto,
#posts,
#paper {
	border: var(--border-thick) solid var(--color-brand-400);
}

/* ============================================
   INPUTS — escopado em #content para não vazar no editor
   Padrão SaaS moderno: h-md (40px), font 14px, border 1px
   ============================================ */
#content input,
#content textarea,
#content select {
	width: 100% !important;
	height: var(--h-md);
	outline: none;
	padding: 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: 1;
	color: var(--color-gray-900);
	background-color: var(--color-white);
	border: var(--border-thin) solid var(--color-gray-200);
	border-radius: var(--radius-md) !important;
	transition: border-color var(--dur) var(--ease-out),
				box-shadow var(--dur) var(--ease-out);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#content input:hover,
#content textarea:hover,
#content select:hover {
	border-color: var(--color-gray-300);
}

#content input:focus,
#content textarea:focus,
#content select:focus {
	outline: none;
	border-color: var(--color-brand-500);
	box-shadow: var(--shadow-focus);
}

#content textarea {
	height: auto;
	min-height: 100px;
	padding: var(--space-3);
	line-height: var(--lh-normal);
	resize: vertical;
	overflow: auto;
}

/* Inputs de texto disabled/readonly — fundo cinza
   IMPORTANTE: excluir submit/button via :not() para não interferir
   com o estilo de botão (que tem fundo teal). */
#content input[type="text"]:read-only,
#content input[type="email"]:read-only,
#content input[type="password"]:read-only,
#content input[type="number"]:read-only,
#content input[type="tel"]:read-only,
#content input[type="url"]:read-only,
#content input[type="search"]:read-only,
#content input[type="date"]:read-only,
#content input[type="datetime-local"]:read-only,
#content textarea:read-only,
#content select[readonly],
#content input[type="text"]:disabled,
#content input[type="email"]:disabled,
#content input[type="password"]:disabled,
#content input[type="number"]:disabled,
#content input[type="tel"]:disabled,
#content input[type="url"]:disabled,
#content input[type="search"]:disabled,
#content input[type="date"]:disabled,
#content input[type="datetime-local"]:disabled,
#content textarea:disabled,
#content select:disabled {
	background: var(--color-gray-100);
	color: var(--color-gray-500);
	cursor: not-allowed;
	border-color: var(--color-gray-200);
}

/* Submit/button disabled — apenas cursor + opacity, mantém cor */
#content input[type="submit"]:disabled,
#content input[type="button"]:disabled,
#content button:disabled {
	cursor: wait;
	opacity: 0.85;
}

#content ::placeholder {
	color: var(--color-gray-400);
}

/* Select com chevron SVG customizado */
#content select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b778c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right var(--space-3) center;
	padding-right: var(--space-10);
}

/* ============================================
   BUTTONS — escopado em #content
   Padrão SaaS moderno: h-md (40px), font 14px semibold
   ============================================ */
#content input[type="submit"],
#content input[type="button"],
#content .button {
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	line-height: 1;
	letter-spacing: var(--ls-normal);
	color: var(--color-white);
	background: var(--color-teal-600);
	border: none;
	border-radius: var(--radius-md) !important;
	height: var(--h-md);
	padding: 0 var(--space-4);
	cursor: pointer;
	margin-top: var(--space-3);
	box-shadow: var(--shadow-xs);
	transition: all var(--dur) var(--ease-out);
	text-decoration: none;
	display: inline-block;
	width: 100%;
	text-align: center;
}

#content input[type="submit"]:hover,
#content input[type="button"]:hover,
#content .button:hover {
	background: var(--color-teal-500);
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

#content input[type="submit"]:active,
#content input[type="button"]:active,
#content .button:active {
	transform: translateY(0);
	box-shadow: var(--shadow-xs);
}

#content .button-disabled,
#content .button-disabled:hover {
	background: var(--color-gray-200) !important;
	color: var(--color-gray-500) !important;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* .button como <a> dentro de #content */
#content a.button {
	display: inline-block;
	line-height: var(--h-md);
	padding: 0 var(--space-4);
	margin-bottom: var(--space-3);
}

/* ============================================
   MESSAGES / ALERTS
   ============================================ */
#msg-error {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	text-align: center;
	margin-top: var(--space-4);
	padding: var(--space-4);
	background-color: var(--color-danger-50);
	border: none;
	border-left: 4px solid var(--color-danger-500);
	border-radius: var(--radius-md);
	color: var(--color-danger-700);
	font-weight: var(--fw-medium);
}

#msg-error::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' x2='12' y1='8' y2='12'/><line x1='12' x2='12.01' y1='16' y2='16'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' x2='12' y1='8' y2='12'/><line x1='12' x2='12.01' y1='16' y2='16'/></svg>");
}

#msg-sucess {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	text-align: center;
	margin-top: var(--space-4);
	padding: var(--space-4);
	background-color: var(--color-success-50);
	border: none;
	border-left: 4px solid var(--color-success-500);
	border-radius: var(--radius-md);
	color: var(--color-success-700);
	font-weight: var(--fw-medium);
}

#msg-sucess::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>");
}

.message {
	color: var(--color-gray-700);
	border: var(--border-thick) dashed var(--color-brand-400);
	border-radius: var(--radius-md);
	padding: var(--space-3);
}

.msg-box-header {
	color: var(--color-teal-700);
	background-color: var(--color-brand-100);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	margin: var(--space-3) 0 var(--space-3) var(--space-3);
	width: 270px;
	text-align: center;
	font-weight: var(--fw-medium);
}

/* ============================================
   LABELS — escopado
   Padrão SaaS moderno: 14px medium, sem uppercase
   ============================================ */
#content label {
	display: block;
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	margin-top: var(--space-4);
	margin-bottom: var(--space-2);
	padding: 0;
	color: var(--color-white);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

label.error {
	color: var(--color-danger-700);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	text-shadow: none;
}

/* ============================================
   LINKS
   ============================================ */
a {
	color: var(--color-teal-600);
	cursor: pointer;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
	color: var(--color-teal-500);
	text-decoration: underline;
}

link:hover {
	background-color: var(--color-teal-500);
}

#link-support {
	margin-top: var(--space-8);
	margin-bottom: var(--space-4);
	text-align: center;
	opacity: 0.7;
	transition: opacity var(--dur) var(--ease-out);
}

#link-support:hover {
	opacity: 1;
}

#link-support a {
	color: var(--color-gray-600);
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
	text-decoration: none;
	letter-spacing: var(--ls-normal);
}

#link-support a:hover {
	text-decoration: underline;
	color: var(--color-teal-600);
}

/* ============================================
   LOGO
   ============================================ */
#logoCompany {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-6) var(--space-4);
	margin: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Telas logadas: logo cresce no header flex e exclui a área da onda */
body:has(#cssmenu) #logoCompany {
	flex: 1 1 auto;
	padding: 0 var(--space-4) 40px;
	position: relative;
	z-index: 2;
}

#logoCompany img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-height: 72px;
	max-width: 200px !important;
	object-fit: contain;
}

#logoCompany h1 {
	width: 260px;
	margin: 0 auto;
}

#logoPeimage {
	text-align: right;
	margin: var(--space-5);
}

/* ============================================
   MISC
   ============================================ */
.select-selected:after {
	position: absolute;
	content: "";
	top: 14px;
	right: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;
}

#img_theme img {
	margin: 0 auto;
	display: flex;
	margin-top: var(--space-2);
	margin-bottom: var(--space-2);
}

/* ============================================
   LAYOUT PICKER — tela de seleção de layouts
   Padrão SaaS moderno (Canva/Figma-inspired)
   ============================================ */

/* O CARD ÚNICO é o próprio #waterform: engloba tabs, picker E o botão CTA.
   Antes tinha 2 níveis (.layout-picker-container card + action-buttons fora),
   agora tudo num card só.
   Sombra dupla (1px sutil + 24px difusa) alinhada com identidade dos forms. */
#content #waterform:has(> .layout-picker-container) {
	background: var(--color-white) !important;
	border: 1px solid var(--color-gray-100) !important;
	border-radius: var(--radius-xl, 16px) !important;
	box-shadow:
		0 1px 2px rgba(15, 36, 34, 0.04),
		0 8px 24px rgba(15, 36, 34, 0.06) !important;
	padding: var(--space-6) var(--space-6) var(--space-5) !important;
	max-width: 720px !important;
	width: calc(100% - var(--space-8));
	margin: var(--space-6) auto var(--space-8) !important;
	box-sizing: border-box;
	min-width: 0 !important;
	min-height: auto !important;
	height: auto !important;
}

/* O .layout-picker-container vira wrapper transparente (sem card próprio) */
#content .layout-picker-container {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	max-width: none;
	border: none;
}

/* --- Tabs (padrão pill com ícone, alinhado com .ap-tabs do admin-pattern) --- */
#content .tabs {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--color-gray-100);
	border-radius: 12px;
	margin-bottom: var(--space-5);
	flex-wrap: wrap;
}

#content .tab-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--color-gray-500, #5a6b6a);
	background: transparent;
	border: none;
	border-radius: 8px;
	padding: 0 16px;
	height: 36px;
	cursor: pointer;
	transition: background .15s, color .15s;
	box-shadow: none;
	margin-top: 0;
	width: auto;
	text-transform: none;
	text-shadow: none;
	white-space: nowrap;
}

#content .tab-btn svg { width: 14px; height: 14px; }

#content .tab-btn:hover {
	color: #0f2422;
	background: transparent;
	transform: none;
	box-shadow: none;
}

#content .tab-btn.is-active {
	background: #fff;
	color: #00766b;
	box-shadow: 0 1px 2px rgba(15, 36, 34, 0.06);
}

#content .tab-btn.is-active:hover {
	background: #fff;
	color: #00766b;
}

/* --- Panels --- */
#content .tab-panel {
	display: none;
}

#content .tab-panel.is-active {
	display: block;
}

/* --- Labels do picker --- */
#content .layout-picker-container label,
#content .layout-picker-container .layout-picker-label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-gray-700);
	margin-top: var(--space-5);
	margin-bottom: var(--space-2);
	padding: 0;
	text-shadow: none;
}

#content .layout-picker-container label:first-child,
#content .layout-picker-container .layout-picker-label:first-child {
	margin-top: 0;
}

/* --- Select de campanha (dentro do picker) --- */
#content .layout-picker-container select#campaign {
	height: var(--h-md);
	padding: 0 var(--space-10) 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	color: var(--color-gray-900);
	background-color: var(--color-white);
	border: var(--border-thin) solid var(--color-gray-200);
	border-radius: var(--radius-md) !important;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b778c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right var(--space-3) center;
	width: 100%;
	cursor: pointer;
	transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

#content .layout-picker-container select#campaign:hover {
	border-color: var(--color-gray-300);
}

#content .layout-picker-container select#campaign:focus {
	outline: none;
	border-color: var(--color-teal-700);
	box-shadow: 0 0 0 4px rgba(0, 118, 107, 0.14);
}

/* --- Grid de cards --- */
#content .layout-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--space-3);
}

/* --- Card individual --- */
#content .layout-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-4) var(--space-3);
	background: var(--color-white);
	border: var(--border-thick) solid var(--color-gray-200);
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all var(--dur) var(--ease-out);
	font-family: var(--font-sans);
	text-align: center;
	margin-top: 0;
	width: auto;
	height: auto;
	box-shadow: none;
	color: var(--color-gray-900);
	text-shadow: none;
}

#content .layout-card:hover {
	border-color: var(--color-brand-500);
	background: var(--color-brand-50);
	transform: translateY(-3px) scale(1.015);
	box-shadow: var(--shadow-lg);
}

#content .layout-card:active {
	transform: translateY(-1px) scale(1.005);
	box-shadow: var(--shadow-sm);
}

#content .layout-card.is-selected {
	border-color: var(--color-teal-600);
	background: var(--color-teal-50);
	box-shadow: var(--shadow-md), 0 0 0 3px rgba(0, 96, 100, 0.12);
}

#content .layout-card.is-selected::after {
	content: '';
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	width: 20px;
	height: 20px;
	background: var(--color-teal-600);
	border-radius: var(--radius-full);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	background-position: center;
	background-repeat: no-repeat;
}

/* --- Preview visual do card --- */
#content .layout-card-preview {
	width: 100%;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-3);
	background: var(--color-gray-50);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	position: relative;
	overflow: hidden;
	transition: background var(--dur) var(--ease-out);
}

#content .layout-card-preview::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--color-gray-150) 1px, transparent 1px),
		linear-gradient(90deg, var(--color-gray-150) 1px, transparent 1px);
	background-size: 12px 12px;
	opacity: 0.3;
	pointer-events: none;
}

#content .layout-ratio {
	position: relative;
	background: var(--color-white);
	border: 1.5px solid var(--color-gray-300);
	border-radius: 3px;
	box-shadow: var(--shadow-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--dur) var(--ease-out);
}

#content .layout-ratio::after {
	content: '';
	position: absolute;
	top: 25%;
	left: 15%;
	right: 15%;
	height: 3px;
	background: var(--color-gray-300);
	border-radius: 2px;
	box-shadow:
		0 8px 0 var(--color-gray-200),
		0 14px 0 var(--color-gray-200);
}

/* Thumbnail do tema (protótipo) — fica dentro do retângulo de aspect ratio.
   Quando carrega com sucesso, o pai ganha .has-thumb que esconde o placeholder. */
#content .layout-ratio-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}
#content .layout-ratio.has-thumb { padding: 0; border-color: rgba(15, 36, 34, 0.15); }
#content .layout-ratio.has-thumb::after { display: none; }

#content .layout-card:hover .layout-ratio {
	border-color: var(--color-brand-500);
	transform: scale(1.05);
}

#content .layout-card.is-selected .layout-ratio {
	border-color: var(--color-teal-600);
	box-shadow: var(--shadow-md);
}

#content .layout-card.is-selected .layout-ratio::after {
	background: var(--color-teal-500);
	box-shadow:
		0 8px 0 var(--color-teal-400),
		0 14px 0 var(--color-teal-400);
}

/* Proporções dos layouts (baseado em dimensões reais) */
#content .layout-ratio-cartaz    { width: 52px; height: 72px; }   /* 595×841 → A4 vertical */
#content .layout-ratio-post      { width: 56px; height: 70px; }   /* 1080×1350 → 4:5 vertical (feed atual) */
#content .layout-ratio-storie    { width: 40px; height: 72px; }   /* 1080×1920 → vertical 9:16 */
#content .layout-ratio-foto-real { width: 54px; height: 72px; }   /* 1080×1350 → 4:5 */
#content .layout-ratio-foto      { width: 60px; height: 60px; }
#content .layout-ratio-landscape { width: 72px; height: 50px; }
#content .layout-ratio-convite   { width: 52px; height: 72px; }
#content .layout-ratio-default   { width: 60px; height: 60px; }

/* --- Body do card (nome + tipo) --- */
#content .layout-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	width: 100%;
}

#content .layout-card-name {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px;
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	color: var(--color-gray-900);
	text-transform: capitalize;
	line-height: var(--lh-snug);
}
#content .layout-card-name .badge-new {
	flex-shrink: 0;
}

#content .layout-card-type {
	/* Escondido — informação redundante (já está no nome do layout).
	   Mantido no DOM para compatibilidade com JS existente. */
	display: none;
}

#content .badge-new {
	display: inline-block;
	padding: 2px var(--space-2);
	background: var(--color-success-500);
	color: var(--color-white);
	font-size: 10px;
	font-weight: var(--fw-bold);
	border-radius: var(--radius-full);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	vertical-align: middle;
}

/* --- Empty state (grid de cards sem layouts) --- */
#content .empty-state {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-10) var(--space-6);
	text-align: center;
	color: var(--color-gray-600);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	background: var(--color-gray-50);
	border: 1.5px dashed var(--color-gray-200);
	border-radius: var(--radius-lg);
	min-height: 180px;
}

#content .empty-state::before {
	content: '';
	display: block;
	width: 48px;
	height: 48px;
	background-color: var(--color-gray-300);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	/* Lucide: file-search-2 */
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><circle cx='11.5' cy='14.5' r='2.5'/><line x1='13.27' x2='15' y1='16.27' y2='18'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><circle cx='11.5' cy='14.5' r='2.5'/><line x1='13.27' x2='15' y1='16.27' y2='18'/></svg>");
}

/* --- Botões de ação --- */
/* Container dos botões de ação principais (final do form de seleção) */
#content .action-buttons {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-5);
	justify-content: flex-end; /* botão alinhado à direita, padrão SaaS */
}

/* Botão CTA principal: "Criar Material" / "Configurar layout"
   Tamanho compacto — altura 36px, min-width menor.
   Width auto pra não ocupar toda a largura. */
#content .action-buttons input[type="submit"] {
	flex: 0 1 auto;
	margin-top: 0;
	height: 36px;
	min-width: 140px;
	padding: 0 16px;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: auto !important;
}

/* Ícone via background-image (input não suporta ::before) */
#content .action-buttons input[type="submit"] {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>");
	background-repeat: no-repeat;
	background-position: calc(100% - 12px) center;
	background-size: 14px 14px;
	padding-right: 32px;
}
#content .action-buttons input[type="submit"]:hover {
	background-position: calc(100% - 9px) center;
}

#content .action-buttons input[type="button"].button-secondary {
	flex: 1;
	margin-top: 0;
	background: var(--color-white);
	color: var(--color-gray-700);
	border: var(--border-thin) solid var(--color-gray-200);
}

#content .action-buttons input[type="button"].button-secondary:hover {
	background: var(--color-gray-50);
	border-color: var(--color-gray-300);
	color: var(--color-gray-900);
	transform: translateY(-1px);
}

/* --- null-campaign (fallback quando não existe NENHUM layout) --- */
#content #null-campaign {
	background: var(--color-white);
	padding: var(--space-10) var(--space-8);
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	margin: var(--space-10) auto;
	max-width: 480px;
	display: none;
	text-align: center;
}

#content #null-campaign::before {
	content: '';
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--space-4);
	background-color: var(--color-brand-400);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	/* Lucide: inbox */
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 12 16 12 14 15 10 15 8 12 2 12'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 12 16 12 14 15 10 15 8 12 2 12'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>");
}

#content #msg-null {
	color: var(--color-gray-700);
	text-shadow: none;
	text-align: center;
	font-weight: var(--fw-medium);
	font-size: var(--fs-md);
	line-height: var(--lh-snug);
}

#content #msg-null::after {
	content: 'Entre em contato com o suporte para liberar layouts.';
	display: block;
	margin-top: var(--space-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	color: var(--color-gray-500);
}

/* Escopado só na tela nova de seleção de layout (tem .layout-picker-container).
   Antes era #content #waterform { display:none } e vazava em TODAS as telas legadas
   que usam <form id="waterform"> (cartaz retrato, etc). */
#content #waterform:has(> .layout-picker-container),
#content #null-campaign {
	display: none;
}

/* --- Responsivo --- */
@media (max-width: 600px) {
	#content .layout-picker-container {
		padding: var(--space-4);
		margin: var(--space-4);
	}

	#content .layout-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-2);
	}

	#content .layout-card {
		padding: var(--space-3) var(--space-2);
	}

	#content .action-buttons {
		flex-direction: column;
	}
}

/* ============================================
   FASE 2 — COMPONENTES GLOBAIS (continuação)
   Variantes de botão, cards, tabelas, estados
   ============================================ */

/* --- Variantes de botão --- */
#content .button-secondary,
#content input[type="button"].button-secondary {
	background: var(--color-white);
	color: var(--color-gray-700);
	border: 1px solid var(--color-gray-200);
	box-shadow: var(--shadow-xs);
}
#content .button-secondary:hover {
	background: var(--color-gray-50);
	border-color: var(--color-gray-300);
	color: var(--color-gray-900);
}

#content .button-ghost,
#content input[type="button"].button-ghost {
	background: transparent;
	color: var(--color-teal-700);
	border: none;
	box-shadow: none;
}
#content .button-ghost:hover {
	background: var(--color-teal-50);
	color: var(--color-teal-800);
	box-shadow: none;
	transform: none;
}

#content .button-danger,
#content input[type="button"].button-danger {
	background: var(--color-danger-600, #dc2626);
	color: var(--color-white);
}
#content .button-danger:hover {
	background: var(--color-danger-700, #b91c1c);
}

/* --- Tamanhos de botão --- */
#content .button-sm,
#content input[type="submit"].button-sm,
#content input[type="button"].button-sm {
	height: var(--h-sm);
	font-size: var(--fs-sm);
	padding: 0 var(--space-3);
}
#content a.button.button-sm {
	line-height: var(--h-sm);
}

#content .button-lg,
#content input[type="submit"].button-lg,
#content input[type="button"].button-lg {
	height: var(--h-lg);
	font-size: var(--fs-md);
	padding: 0 var(--space-5);
}
#content a.button.button-lg {
	line-height: var(--h-lg);
}

/* Botão "auto width" — reverte o width: 100% do default */
#content .button-auto,
#content input[type="submit"].button-auto,
#content input[type="button"].button-auto {
	width: auto;
}

/* --- Focus visible em todos os botões (a11y) --- */
#content input[type="submit"]:focus-visible,
#content input[type="button"]:focus-visible,
#content .button:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* --- Estados de erro para inputs --- */
#content input.is-error,
#content textarea.is-error,
#content select.is-error,
#content input[aria-invalid="true"],
#content textarea[aria-invalid="true"],
#content select[aria-invalid="true"] {
	border-color: var(--color-danger-500, #ef4444);
}
#content input.is-error:focus,
#content textarea.is-error:focus,
#content select.is-error:focus,
#content input[aria-invalid="true"]:focus,
#content textarea[aria-invalid="true"]:focus,
#content select[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* --- Helper text (hint/error) abaixo do input --- */
#content .field-hint {
	display: block;
	font-size: var(--fs-xs);
	color: var(--color-gray-500);
	margin-top: var(--space-1);
	text-shadow: none;
}
#content .field-error {
	display: block;
	font-size: var(--fs-xs);
	color: var(--color-danger-700, #b91c1c);
	margin-top: var(--space-1);
	font-weight: var(--fw-medium);
	text-shadow: none;
}

/* ============================================
   COMPONENTE CARD
   ============================================ */
#content .card {
	background: var(--color-white);
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
	transition: box-shadow var(--dur) var(--ease-out),
				transform var(--dur) var(--ease-out);
}
#content .card.is-interactive:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

#content .card-header {
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--color-gray-100);
	background: var(--color-gray-50);
}
#content .card-header h1,
#content .card-header h2,
#content .card-header h3,
#content .card-header h4 {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-gray-900);
}

#content .card-body {
	padding: var(--space-5);
	color: var(--color-gray-700);
}
#content .card-body > *:first-child { margin-top: 0; }
#content .card-body > *:last-child  { margin-bottom: 0; }

#content .card-footer {
	padding: var(--space-4) var(--space-5);
	border-top: 1px solid var(--color-gray-100);
	background: var(--color-gray-50);
	display: flex;
	gap: var(--space-2);
	justify-content: flex-end;
}

/* Variante compacta */
#content .card-sm .card-header,
#content .card-sm .card-footer { padding: var(--space-3) var(--space-4); }
#content .card-sm .card-body   { padding: var(--space-4); }

/* ============================================
   TABELAS
   ============================================ */
#content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--color-white);
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius-lg);
	overflow: hidden;
	font-size: var(--fs-sm);
	color: var(--color-gray-800);
	margin: var(--space-4) 0;
}

#content table thead th {
	background: var(--color-gray-50);
	color: var(--color-gray-600);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide, 0.03em);
	text-align: left;
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-gray-200);
	text-shadow: none;
}

#content table tbody td {
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-gray-100);
	vertical-align: middle;
}

#content table tbody tr:last-child td {
	border-bottom: none;
}

#content table tbody tr {
	transition: background-color var(--dur-fast) var(--ease-out);
}
#content table tbody tr:hover {
	background: var(--color-gray-50);
}

#content table tbody tr.is-selected {
	background: var(--color-brand-50);
}

/* Tabela compacta */
#content table.table-sm thead th,
#content table.table-sm tbody td {
	padding: var(--space-2) var(--space-3);
}

/* Tabela sem bordas arredondadas (fit in card) */
#content .card > table {
	border: none;
	border-radius: 0;
	margin: 0;
}

/* ============================================
   UTILITÁRIOS DE LAYOUT
   ============================================ */
#content .stack    { display: flex; flex-direction: column; gap: var(--space-3); }
#content .stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
#content .stack-lg { display: flex; flex-direction: column; gap: var(--space-5); }
#content .row      { display: flex; gap: var(--space-3); align-items: center; }
#content .row-end  { display: flex; gap: var(--space-3); justify-content: flex-end; align-items: center; }

/* Container com max-width padronizado (para cards/tabelas em telas amplas) */
#content .container {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--space-4);
}
#content .container-sm { max-width: 640px; margin-left: auto; margin-right: auto; padding: 0 var(--space-4); }
#content .container-lg { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 var(--space-4); }

/* ============================================
   BADGES / PILLS
   ============================================ */
#content .badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 2px var(--space-2);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	border-radius: 999px;
	background: var(--color-gray-100);
	color: var(--color-gray-700);
	text-shadow: none;
}
#content .badge-brand   { background: var(--color-brand-100); color: var(--color-brand-800); }
#content .badge-teal    { background: var(--color-teal-50);   color: var(--color-teal-700); }
#content .badge-success { background: var(--color-success-50, #ecfdf5); color: var(--color-success-700, #047857); }
#content .badge-danger  { background: var(--color-danger-50,  #fef2f2); color: var(--color-danger-700,  #b91c1c); }

/* ============================================
   DIVIDER
   ============================================ */
#content .divider {
	border: none;
	border-top: 1px solid var(--color-gray-100);
	margin: var(--space-5) 0;
}

/* ============================================
   FASE 4 — TELA DE LOGIN
   Detecção: body sem #cssmenu + header > #logoCompany > img com
   src da logo peimage. Como não podemos tocar HTML, usamos :has()
   para identificar páginas que NÃO têm menu (= login).
   ============================================ */

/* Body de login: sem #cssmenu — fundo teal escuro premium
   Body vira flex column: [header] [content] para centralizar o grupo inteiro.
   Header e content são colados — o gap entre logo e card é controlado
   pelo padding do #logoCompany + margin-top do card.

   Padrão "dark hero" usado por Vercel, Linear, Stripe. Logo Peimage branco
   sobre teal-700 cria identidade forte e separa visualmente do app. */
body:not(:has(#cssmenu)) {
	background: var(--color-teal-700);
	background-image: radial-gradient(ellipse at top, var(--color-teal-600) 0%, var(--color-teal-800, #015a5e) 100%);
	min-height: 100vh;
	width: 100%;
	max-width: 100vw;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

/* Reset universal de overflow no html do login */
html:has(body:not(:has(#cssmenu))) {
	overflow-x: hidden;
	max-width: 100vw;
}

body:not(:has(#cssmenu)) header {
	background-color: transparent;
	background-image: none;
	padding: 0;
	margin: 0;
	flex-shrink: 0;
	width: 100%;
}

body:not(:has(#cssmenu)) #logoCompany {
	height: auto;
	padding: 0 0 var(--space-4);
	display: flex;
	justify-content: center;
	align-items: center;
}

body:not(:has(#cssmenu)) #logoCompany img {
	max-height: 56px;
	max-width: 200px !important;
}

/* Content: container do card, colado no header (sem altura mínima forçada) */
body:not(:has(#cssmenu)) #content {
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 0 var(--space-4);
	width: 100%;
	flex-shrink: 0;
}

/* Mobile */
@media (max-width: 600px) {
	body:not(:has(#cssmenu)) {
		justify-content: flex-start;
		padding-top: var(--space-6);
	}
	body:not(:has(#cssmenu)) #logoCompany img {
		max-height: 44px;
	}
}

/* Form de login: card branco elevado
   Largura 400px (padrão moderno — Notion, Figma, Linear)
   Padding 40px (p-10) para breathing room generoso */
body:not(:has(#cssmenu)) #content #waterform {
	background: var(--color-white);
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius-xl, 16px);
	box-shadow: var(--shadow-lg);
	padding: var(--space-10, 40px) var(--space-8, 32px);
	width: 100%;
	max-width: 400px;
	min-width: 0;
	margin: 0 auto;
	box-sizing: border-box;
	color: var(--color-gray-900);
	transition: box-shadow var(--dur) var(--ease-out),
				transform var(--dur) var(--ease-out);
}

body:not(:has(#cssmenu)) #content #waterform:hover {
	box-shadow: var(--shadow-xl);
	transform: translateY(-1px);
}

/* Focus visible robusto nos inputs de login (WCAG 2.4.7) */
body:not(:has(#cssmenu)) #content #waterform input:focus,
body:not(:has(#cssmenu)) #content #waterform input:focus-visible {
	outline: none;
	border-color: var(--color-brand-500);
	box-shadow: 0 0 0 3px rgba(8, 145, 197, 0.18);
}

/* Transition nos inputs (suave ao focar) */
body:not(:has(#cssmenu)) #content #waterform input {
	transition: border-color var(--dur) var(--ease-out),
				box-shadow var(--dur) var(--ease-out),
				background-color var(--dur) var(--ease-out);
}

/* Fix autofill do Chrome — evita fundo azul nos inputs preenchidos */
body:not(:has(#cssmenu)) #content #waterform input:-webkit-autofill,
body:not(:has(#cssmenu)) #content #waterform input:-webkit-autofill:hover,
body:not(:has(#cssmenu)) #content #waterform input:-webkit-autofill:focus,
body:not(:has(#cssmenu)) #content #waterform input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px var(--color-white) inset !important;
	-webkit-text-fill-color: var(--color-gray-900) !important;
	caret-color: var(--color-gray-900);
	transition: background-color 5000s ease-in-out 0s;
	border-color: var(--color-gray-200) !important;
}

/* Labels escuras dentro do card */
body:not(:has(#cssmenu)) #content label {
	color: var(--color-gray-700);
	text-shadow: none;
	font-weight: var(--fw-medium);
}

/* Derrota o <style> inline do viewLogin para .box-suport-fb */
body:not(:has(#cssmenu)) #content #waterform .box-suport-fb {
	background: var(--color-brand-50) !important;
	border: 1px solid var(--color-brand-200) !important;
	border-left: 4px solid var(--color-brand-500) !important;
	border-radius: var(--radius-md) !important;
	color: var(--color-gray-800) !important;
	padding: var(--space-4) !important;
	margin: var(--space-4) 0 !important;
	text-shadow: none !important;
	font-size: var(--fs-sm) !important;
	font-weight: var(--fw-regular) !important;
	line-height: var(--lh-normal) !important;
}
body:not(:has(#cssmenu)) #content #waterform .box-suport-fb a {
	color: var(--color-teal-700) !important;
	font-size: var(--fs-md) !important;
	font-weight: var(--fw-semibold) !important;
	text-decoration: none !important;
}
body:not(:has(#cssmenu)) #content #waterform .box-suport-fb a:hover {
	text-decoration: underline !important;
}

/* #box-suport-fb wrapping msg-invalid-login -> vira alerta danger */
body:not(:has(#cssmenu)) #content #waterform #box-suport-fb {
	background: var(--color-danger-50, #fef2f2) !important;
	border: 1px solid var(--color-danger-200, #fecaca) !important;
	border-left: 4px solid var(--color-danger-500, #ef4444) !important;
	border-radius: var(--radius-md) !important;
	padding: var(--space-3) var(--space-4) !important;
	margin: var(--space-3) 0 !important;
	line-height: 1.4 !important;
	text-align: center !important;
}
body:not(:has(#cssmenu)) #content #waterform #msg-invalid-login {
	color: var(--color-danger-700, #b91c1c) !important;
	text-shadow: none !important;
	font-weight: var(--fw-medium);
	font-size: var(--fs-sm);
	margin: 0;
	padding: 0;
}

/* Group links (esqueci senha / suporte) */
body:not(:has(#cssmenu)) #content #waterform #group-link {
	text-align: center;
	margin-top: var(--space-5);
	font-size: var(--fs-sm);
	color: var(--color-gray-500);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}
body:not(:has(#cssmenu)) #content #waterform #group-link .link,
body:not(:has(#cssmenu)) #content #waterform #group-link a {
	color: var(--color-teal-600);
	font-weight: var(--fw-medium);
	text-decoration: none;
	padding: 0 var(--space-1);
}
body:not(:has(#cssmenu)) #content #waterform #group-link .link:hover,
body:not(:has(#cssmenu)) #content #waterform #group-link a:hover {
	text-decoration: underline;
	color: var(--color-teal-700);
}
body:not(:has(#cssmenu)) #content #waterform #group-link .link-sep {
	color: var(--color-gray-300);
	font-size: 14px;
	line-height: 1;
	user-select: none;
}

/* ============================================
   LOGIN — wrapper de senha + toggle mostrar/ocultar
   ============================================ */
body:not(:has(#cssmenu)) #content #waterform .input-password-wrapper {
	position: relative;
	display: block;
}

body:not(:has(#cssmenu)) #content #waterform .input-password-wrapper > input {
	padding-right: 44px; /* espaço para o botão toggle */
}

body:not(:has(#cssmenu)) #content #waterform .toggle-senha {
	position: absolute;
	top: 50%;
	right: var(--space-2);
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-gray-500);
	transition: color var(--dur-fast) var(--ease-out),
				background-color var(--dur-fast) var(--ease-out);
	/* Derrota estilos globais de button em #content */
	box-shadow: none !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	max-width: 32px !important;
}
body:not(:has(#cssmenu)) #content #waterform .toggle-senha::before {
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	/* ícone eye (Lucide) */
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>");
}
body:not(:has(#cssmenu)) #content #waterform .toggle-senha.is-showing::before {
	/* ícone eye-off */
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/><path d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/><path d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/><line x1='2' x2='22' y1='2' y2='22'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/><path d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/><path d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/><line x1='2' x2='22' y1='2' y2='22'/></svg>");
}
body:not(:has(#cssmenu)) #content #waterform .toggle-senha:hover,
body:not(:has(#cssmenu)) #content #waterform .toggle-senha:active,
body:not(:has(#cssmenu)) #content #waterform .toggle-senha:focus {
	background-color: var(--color-gray-100);
	color: var(--color-gray-700);
	/* Preservar a centralização vertical em TODOS os estados.
	   O :active global do botão tenta sobrescrever com translateY(0). */
	transform: translateY(-50%) !important;
	box-shadow: none !important;
	/* Garantir que largura/altura nunca mudam */
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
}
body:not(:has(#cssmenu)) #content #waterform .toggle-senha:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(8, 145, 197, 0.25) !important;
}

/* ============================================
   LOGIN — loading state do botão Entrar
   ============================================ */
body:not(:has(#cssmenu)) #content #waterform input[type="submit"]:disabled,
body:not(:has(#cssmenu)) #content #waterform input[type="submit"].is-loading {
	background: var(--color-teal-500);
	opacity: 0.85;
	cursor: wait;
	transform: none;
}
body:not(:has(#cssmenu)) #content #waterform input[type="submit"].is-loading {
	/* Spinner via background-image (dots animando) */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-6.219-8.56'><animateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1s' repeatCount='indefinite'/></path></svg>");
	background-repeat: no-repeat;
	background-position: calc(50% - 48px) center;
	padding-left: 28px;
}

/* Input de login com altura maior (melhor touch) */
body:not(:has(#cssmenu)) #content #waterform input[type="email"],
body:not(:has(#cssmenu)) #content #waterform input[type="password"] {
	height: var(--h-lg);
	font-size: var(--fs-md);
}

/* Botão submit largo (full width) */
body:not(:has(#cssmenu)) #content #waterform input[type="submit"] {
	height: var(--h-lg);
	font-size: var(--fs-md);
	margin-top: var(--space-5);
}

/* Mobile */
@media (max-width: 480px) {
	body:not(:has(#cssmenu)) #content {
		padding: var(--space-4);
	}
	body:not(:has(#cssmenu)) #content #waterform {
		padding: var(--space-6) var(--space-5);
		max-width: 100%;
	}
	body:not(:has(#cssmenu)) #logoCompany {
		padding-top: var(--space-6);
	}
	body:not(:has(#cssmenu)) #logoCompany img {
		max-height: 56px;
	}
}

/* ============================================
   FASE 5 — TELAS SECUNDÁRIAS
   Melhoras genéricas para telas com #cssmenu (CRUD, Perfil,
   Campanhas, Galeria). Escopo limitado a elementos herdados;
   <style> inline das views mantém precedência onde existir.
   ============================================ */

/* Fieldset moderno (aparece em perfil, createEmpresa, etc) */
#content fieldset {
	background: var(--color-white);
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-6);
	margin: var(--space-4) 0;
	box-shadow: var(--shadow-xs);
}
#content fieldset > legend {
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--color-gray-500);
	padding: 0 var(--space-2);
	text-shadow: none;
}

/* Labels dentro de fieldsets: sobre fundo branco, escuras */
#content fieldset label {
	color: var(--color-gray-700);
	text-shadow: none;
}

/* hr moderno */
#content hr {
	border: none;
	border-top: 1px solid var(--color-gray-100);
	margin: var(--space-5) 0;
}

/* Container de lista de items (crud/galerias simples) */
#content .list-container {
	background: var(--color-white);
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
	padding: var(--space-2);
	margin: var(--space-4) auto;
	max-width: 960px;
}

#content .list-item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	transition: background-color var(--dur-fast) var(--ease-out);
	color: var(--color-gray-800);
}
#content .list-item:hover {
	background: var(--color-gray-50);
}
#content .list-item + .list-item {
	border-top: 1px solid var(--color-gray-100);
}
#content .list-item:hover + .list-item,
#content .list-item:has(+ .list-item:hover) {
	/* evita borda dupla no hover */
	border-top-color: transparent;
}

/* ============================================
   GALERIA — grid responsivo genérico
   Só se aplica se a view usar a classe .gallery-grid
   ============================================ */
#content .gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space-4);
	margin: var(--space-5) auto;
	max-width: 1200px;
	padding: 0 var(--space-4);
}

#content .gallery-item {
	position: relative;
	background: var(--color-white);
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-xs);
	aspect-ratio: 1;
	transition: transform var(--dur) var(--ease-out),
				box-shadow var(--dur) var(--ease-out);
	cursor: pointer;
}
#content .gallery-item:hover {
	transform: translateY(-2px) scale(1.01);
	box-shadow: var(--shadow-md);
}
#content .gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================================
   GRÁFICOS — polish opt-in via classe existente
   Não sobrescreve o <style> inline do viewGraficos,
   mas melhora elementos sem styling inline.
   ============================================ */
#content .filters-card,
#content .chart-card {
	border-radius: var(--radius-lg);
}

/* Container de info genérico (cards informativos) */
#content .info-box {
	background: var(--color-brand-50);
	border: 1px solid var(--color-brand-200);
	border-left: 4px solid var(--color-brand-500);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
	margin: var(--space-4) 0;
	color: var(--color-gray-800);
	font-size: var(--fs-sm);
}

/* ============================================
   MODAL GENÉRICO (quando <dialog> ou .modal é usado)
   ============================================ */
#content dialog,
#content .modal {
	background: var(--color-white);
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xl, 0 24px 48px rgba(0, 0, 0, 0.18));
	padding: var(--space-6);
	max-width: min(90vw, 560px);
	width: 100%;
	color: var(--color-gray-800);
}
#content dialog::backdrop {
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(2px);
}
#content .modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-gray-100);
}
#content .modal-header h2,
#content .modal-header h3 {
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
}
#content .modal-footer {
	display: flex;
	gap: var(--space-2);
	justify-content: flex-end;
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-gray-100);
}

/* ============================================
   FASE 5 — POLISH TELAS SECUNDÁRIAS
   Componentes específicos das views: perfil, CRUD campanha,
   galeria, gráficos. Tudo CSS-only sem tocar HTML.
   ============================================ */

/* --- Color picker (perfil empresa, configurar campanha) --- */
#content input[type="color"] {
	width: 56px !important;
	height: 40px !important;
	padding: 4px !important;
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	background: var(--color-white);
	cursor: pointer;
	vertical-align: middle;
	box-shadow: var(--shadow-xs);
	transition: border-color var(--dur) var(--ease-out),
				box-shadow var(--dur) var(--ease-out);
}
#content input[type="color"]:hover {
	border-color: var(--color-gray-300);
	box-shadow: var(--shadow-sm);
}
#content input[type="color"]:focus,
#content input[type="color"]:focus-visible {
	outline: none;
	border-color: var(--color-brand-500);
	box-shadow: var(--shadow-focus);
}
#content input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
	border-radius: 4px;
	overflow: hidden;
}
#content input[type="color"]::-webkit-color-swatch {
	border: none;
	border-radius: 4px;
}
#content input[type="color"]::-moz-color-swatch {
	border: none;
	border-radius: 4px;
}

/* --- Dropzone moderno (CRUD campanha) --- */
#content .dropzone {
	background: var(--color-gray-50) !important;
	border: 2px dashed var(--color-gray-300) !important;
	border-radius: var(--radius-lg) !important;
	min-height: 200px !important;
	padding: var(--space-6) !important;
	transition: border-color var(--dur) var(--ease-out),
				background-color var(--dur) var(--ease-out);
}
#content .dropzone:hover,
#content .dropzone.dz-drag-hover {
	border-color: var(--color-brand-500) !important;
	background: var(--color-brand-50) !important;
}
#content .dropzone .dz-message {
	color: var(--color-gray-600) !important;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	margin: var(--space-6) 0 !important;
}
#content .dropzone .dz-preview .dz-image {
	border-radius: var(--radius-md) !important;
	overflow: hidden;
	box-shadow: var(--shadow-xs);
}
#content .dropzone .dz-preview .dz-error-message {
	background: var(--color-danger-700, #b91c1c) !important;
	border-radius: var(--radius-sm) !important;
	font-size: var(--fs-xs);
	font-family: var(--font-sans);
	padding: var(--space-2) var(--space-3);
	top: 100% !important;
	left: 0 !important;
	margin-top: var(--space-1);
}

/* --- Progress bar moderna (CRUD campanha, uploads) --- */
#content #progress-bar,
#content .progress-bar {
	background: var(--color-gray-100);
	border: none;
	border-radius: 999px;
	height: 8px !important;
	overflow: hidden;
	margin: var(--space-3) 0;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
#content #color-progress-bar,
#content .progress-bar > .progress-fill,
#content #progress-bar > div {
	background: linear-gradient(90deg, var(--color-teal-500), var(--color-teal-600)) !important;
	height: 100% !important;
	border-radius: 999px;
	transition: width var(--dur) var(--ease-out);
	background-size: 200% 100%;
	animation: progress-shimmer 2s linear infinite;
}
@keyframes progress-shimmer {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
	#content #color-progress-bar,
	#content .progress-bar > .progress-fill,
	#content #progress-bar > div {
		animation: none;
	}
}

/* --- .btn-div é o BOTÃO em si (clicável), não um container.
   Estrutura legacy: <div class="btn-div"><div>Texto</div></div>
   Usado em: CRUD campanha (Temas/Atualizar/Excluir),
            Galeria (#enviarLimpar / #subEnviarLimpar wraps),
            Outras telas admin com botões grandes.

   PADRÃO: botões teal-700 sólido (mesma cor do menu), texto branco,
   diferenciados por ÍCONE. Hover teal-600 (mais claro).
   Apenas o estado destrutivo (#remove) intensifica em vermelho. */
#content .btn-div {
	background: var(--color-teal-700);
	color: var(--color-white);
	border: 1px solid var(--color-teal-700);
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	height: var(--h-md);
	flex: 1 1 0;
	min-width: 0;
	padding: 0 var(--space-3);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	box-shadow: var(--shadow-xs);
	transition: background var(--dur-fast) var(--ease-out),
				color var(--dur-fast) var(--ease-out),
				border-color var(--dur-fast) var(--ease-out),
				transform var(--dur-fast) var(--ease-out),
				box-shadow var(--dur-fast) var(--ease-out);
	text-shadow: none;
	box-sizing: border-box;
	margin: 0;
	width: auto !important;
	max-width: none;
	white-space: nowrap;
}

/* Respeitar display:none inline aplicado pelo JS (#loadingSubmit começa hidden) */
#content .btn-div[style*="display: none"],
#content .btn-div[style*="display:none"] {
	display: none !important;
}

#content .btn-div:hover {
	background: var(--color-teal-600);
	border-color: var(--color-teal-600);
	color: var(--color-white);
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

#content .btn-div:active {
	transform: translateY(0);
	box-shadow: var(--shadow-xs);
}

/* Texto interno dentro do .btn-div */
#content .btn-div > div {
	color: inherit;
	font-weight: inherit;
	line-height: 1;
}

/* Ícone via pseudo-element ::before — herda currentColor */
#content .btn-div::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

/* Ícone Atualizar/Update (refresh-cw Lucide) */
#content .btn-div#update::before,
#content .btn-div#atualizar::before,
#content .btn-div.btn-update::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/><path d='M21 3v5h-5'/><path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/><path d='M3 21v-5h5'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/><path d='M21 3v5h-5'/><path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/><path d='M3 21v-5h5'/></svg>");
}

/* Ícone Excluir/Remove (trash-2 Lucide) */
#content .btn-div#remove::before,
#content .btn-div#excluir::before,
#content .btn-div.btn-danger::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><line x1='10' x2='10' y1='11' y2='17'/><line x1='14' x2='14' y1='11' y2='17'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><line x1='10' x2='10' y1='11' y2='17'/><line x1='14' x2='14' y1='11' y2='17'/></svg>");
}

/* Ícone Temas/Galeria (image Lucide) */
#content .btn-div#btn-view-file-gallery::before,
#content .btn-div.btn-gallery::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='3' rx='2' ry='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='3' rx='2' ry='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/></svg>");
}

/* Ícone Salvar/Save (save Lucide) */
#content .btn-div#save::before,
#content .btn-div#salvar::before,
#content .btn-div.btn-save::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/><polyline points='17 21 17 13 7 13 7 21'/><polyline points='7 3 7 8 15 8'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/><polyline points='17 21 17 13 7 13 7 21'/><polyline points='7 3 7 8 15 8'/></svg>");
}

/* Ícone Adicionar/Enviar (send/upload Lucide) */
#content .btn-div#enviar::before,
#content .btn-div#upload::before,
#content .btn-div.btn-send::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' x2='12' y1='3' y2='15'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' x2='12' y1='3' y2='15'/></svg>");
}

/* Hover destrutivo: APENAS o #remove ganha tinta vermelha no hover (signal de perigo) */
#content .btn-div#remove:hover,
#content .btn-div#excluir:hover,
#content .btn-div.btn-danger:hover {
	background: #dc2626;
	border-color: #dc2626;
	color: var(--color-white);
}

/* Botão loading (.btn-div#loadingSubmit) — teal mais claro com spinner */
#content .btn-div#loadingSubmit {
	background: var(--color-teal-500);
	color: var(--color-white);
	border-color: var(--color-teal-500);
	cursor: wait;
	opacity: 0.85;
}
#content .btn-div#loadingSubmit::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-6.219-8.56'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-6.219-8.56'/></svg>");
	animation: btn-spin 1s linear infinite;
}
@keyframes btn-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	#content .btn-div#loadingSubmit::before {
		animation: none;
	}
}

/* Container dos .btn-div no CrudCampanha — wrapper já existe no markup:
   <div style="display: flex; width: 100%;">...btn-divs...</div>
   Garante gap consistente entre os botões */
#content > #waterform > div:has(> .btn-div),
body:has(#cssmenu) #content > #waterform > div:has(> .btn-div) {
	display: flex !important;
	gap: var(--space-2);
	width: 100%;
	margin-top: var(--space-5);
	flex-wrap: wrap;
}

/* Toolbar containers (#enviarLimpar / #subEnviarLimpar) — wrap dos .btn-div na galeria */
#content #enviarLimpar,
#content #subEnviarLimpar {
	background: var(--color-white) !important;
	border-top: 1px solid var(--color-gray-100);
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
	padding: var(--space-3) var(--space-4) !important;
	z-index: 50;
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	justify-content: center;
}

/* --- Galeria: checkbox custom (sobreposto às imagens) --- */
#content .checkbox-peimage {
	width: 28px !important;
	height: 28px !important;
	background: var(--color-white) !important;
	border: 2px solid var(--color-white) !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: var(--shadow-md);
	cursor: pointer;
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 5;
	transition: all var(--dur) var(--ease-out);
}
#content .checkbox-peimage.checked,
#content .checkbox-peimage[data-checked="true"] {
	background: var(--color-teal-600) !important;
	border-color: var(--color-teal-600) !important;
}
#content .checkbox-peimage.checked::after,
#content .checkbox-peimage[data-checked="true"]::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-white);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: 60% 60%;
	        mask-size: 60% 60%;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* --- Galeria: items (.content-img — nome legado) --- */
#content .content-img,
#content #gallery-peimage .content-img {
	display: inline-block;
	position: relative;
	margin: var(--space-2) !important;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-xs);
	transition: transform var(--dur) var(--ease-out),
				box-shadow var(--dur) var(--ease-out);
	cursor: pointer;
	background: var(--color-white);
}
#content .content-img:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
#content .content-img img,
#content .gallery-img > img {
	display: block;
	border: none !important;
	border-radius: var(--radius-lg);
}

/* --- Galeria: modal de visualização --- */
#content #bg-modal {
	background: rgba(15, 23, 42, 0.75) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
#content #peimage-modal {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}
#content #close-modal {
	background: var(--color-white) !important;
	border: none !important;
	border-radius: 999px !important;
	width: 40px !important;
	height: 40px !important;
	box-shadow: var(--shadow-lg);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	color: transparent;
	transition: transform var(--dur) var(--ease-out),
				background-color var(--dur) var(--ease-out);
}
#content #close-modal::before {
	content: '';
	width: 20px;
	height: 20px;
	background-color: var(--color-gray-700);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' x2='6' y1='6' y2='18'/><line x1='6' x2='18' y1='6' y2='18'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' x2='6' y1='6' y2='18'/><line x1='6' x2='18' y1='6' y2='18'/></svg>");
}
#content #close-modal:hover {
	transform: scale(1.05);
	background: var(--color-gray-50) !important;
}

/* --- Gráficos: filter-group (já existe .filters-card no inline) --- */
#content .filter-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
#content .filter-group label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--color-gray-500);
	margin: 0;
	text-shadow: none;
}
#content .filter-group input,
#content .filter-group select {
	margin-top: 0;
}

/* --- Gráficos: btn-search (override do inline para usar tokens) --- */
#content .btn-search {
	background: var(--color-teal-600) !important;
	color: var(--color-white) !important;
	border: none !important;
	border-radius: var(--radius-md) !important;
	height: var(--h-md);
	padding: 0 var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	box-shadow: var(--shadow-xs);
	transition: all var(--dur) var(--ease-out);
}
#content .btn-search:hover {
	background: var(--color-teal-500) !important;
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

/* --- Gráficos: chart-card --- */
#content .chart-card {
	background: var(--color-white) !important;
	border: 1px solid var(--color-gray-100) !important;
	border-radius: var(--radius-lg) !important;
	box-shadow: var(--shadow-xs);
	padding: var(--space-5);
	margin: var(--space-4) 0;
}
#content .chart-loading,
#content .chart-empty {
	text-align: center;
	padding: var(--space-10) var(--space-6);
	color: var(--color-gray-500);
	font-size: var(--fs-sm);
}

/* --- Skeleton loading (use opt-in via classe) --- */
#content .skeleton {
	background: linear-gradient(
		90deg,
		var(--color-gray-100) 0%,
		var(--color-gray-50) 50%,
		var(--color-gray-100) 100%
	);
	background-size: 200% 100%;
	border-radius: var(--radius-md);
	animation: skeleton-pulse 1.4s ease-in-out infinite;
	color: transparent !important;
	pointer-events: none;
	user-select: none;
}
@keyframes skeleton-pulse {
	0%   { background-position: 200% 50%; }
	100% { background-position: -200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
	#content .skeleton {
		animation: none;
	}
}

/* ============================================
   FASE 5+ — POLISH AUTOMÁTICO DE TELAS ADMIN
   ============================================
   Estratégia: detectar telas admin (têm #cssmenu mas NÃO têm
   .layout-picker-container, .filters-card, ou outras estruturas
   já modernizadas) e wrappear o #waterform em card branco
   automaticamente, sem tocar HTML.

   Telas afetadas: viewCrudCampanha, viewCreateCampanha, viewCreateEmpresa,
   viewAgenciaPerfil, viewCrudUsuario, viewConfigCampanha,
   viewSetCreateCampanha, viewCreateUsuario, viewAlterUsuario,
   viewAlterCampanha, viewImportUsuarios, viewSetEmpresaImportUsuarios,
   viewCreateBasic, viewAlterBasic, viewAlterPro, viewAgencia, etc.
   ============================================ */

/* O #waterform genérico vira um card branco centralizado SE estiver
   em uma tela com #cssmenu (logada) e NÃO for a tela de seleção de layout
   (que já tem .layout-picker-container — usa :not(:has()) pra excluir). */
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)),
body:has(#cssmenu) #content > form#waterform:not(:has(.layout-picker-container)),
body:has(#cssmenu) #content > form:not(#waterform):not([id]),
body:has(#cssmenu) #content > form#form-agencia {
	background: var(--color-white);
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius-xl, 16px);
	box-shadow: var(--shadow-md);
	padding: var(--space-8) var(--space-8) var(--space-6);
	max-width: 720px !important;
	min-width: 0 !important;
	width: calc(100% - var(--space-8)) !important;
	margin: var(--space-8) auto var(--space-10) !important;
	box-sizing: border-box;
	color: var(--color-gray-800);
	position: relative;
	z-index: 1;
}

/* Labels dentro do form admin (excluindo telas com layout-picker): */
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) label,
body:has(#cssmenu) #content > form#waterform:not(:has(.layout-picker-container)) label,
body:has(#cssmenu) #content > form#form-agencia label {
	color: var(--color-gray-700) !important;
	text-shadow: none !important;
	font-size: var(--fs-sm) !important;
	font-weight: var(--fw-medium) !important;
	display: block !important;
	margin: 0 0 var(--space-1) !important;
	padding: var(--space-3) 0 0 !important;
	letter-spacing: 0;
	text-transform: none;
	line-height: var(--lh-snug);
}

/* Primeiro label do form admin sem padding-top */
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) > label:first-of-type,
body:has(#cssmenu) #content > form#waterform:not(:has(.layout-picker-container)) > label:first-of-type {
	padding-top: 0 !important;
}

/* Inputs/selects/textareas dentro do form admin: padronização total */
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) input[type="text"],
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) input[type="email"],
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) input[type="password"],
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) input[type="number"],
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) input[type="tel"],
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) input[type="url"],
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) input[type="search"],
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) input[type="date"],
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) input[type="datetime-local"],
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) input:not([type]),
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) textarea,
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) select {
	width: 100% !important;
	margin: 0 0 var(--space-2) 0 !important;
}

/* Espaço extra entre grupos de campos no form admin */
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) input + label,
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) select + label,
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) textarea + label,
body:has(#cssmenu) #content > #waterform:not(:has(.layout-picker-container)) .dropzone + label {
	padding-top: var(--space-4) !important;
}

/* Bloco de fish escondido no form admin (legado decorativo que polui) */
body:has(#cssmenu) #content > .fish {
	display: none !important;
}

/* Submit do form admin: respeitar a aparência do botão padrão */
body:has(#cssmenu) #content > #waterform input[type="submit"],
body:has(#cssmenu) #content > #waterform input[type="button"],
body:has(#cssmenu) #content > form#waterform input[type="submit"],
body:has(#cssmenu) #content > form#waterform input[type="button"] {
	margin-top: var(--space-4) !important;
}

/* Dropzone dentro do form admin: largura 100% e padding consistente */
body:has(#cssmenu) #content > #waterform .dropzone,
body:has(#cssmenu) #content > form#waterform .dropzone {
	width: 100% !important;
	margin: var(--space-2) 0 0 0 !important;
	box-sizing: border-box;
}

/* Progress bar do CRUD campanha: posicionar acima do form */
body:has(#cssmenu) #content > #progress-bar-wrapper,
body:has(#cssmenu) #content > #waterform > #progress-bar {
	max-width: 720px;
	margin: var(--space-4) auto !important;
}

/* Grupos de "espaço utilizado" / contadores no topo */
body:has(#cssmenu) #content > #waterform > div:first-child:has(#progress-bar) {
	margin-bottom: var(--space-4);
}

/* Botões fixos no rodapé (.btn-div, #enviarLimpar, #subEnviarLimpar):
   Já têm estilos da Fase 5, mas garantir centralização */
body:has(#cssmenu) #content .btn-div {
	max-width: 720px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Heading h1/h2 dentro do form admin (alguns têm "Configurar campanha") */
body:has(#cssmenu) #content > #waterform h1,
body:has(#cssmenu) #content > #waterform h2,
body:has(#cssmenu) #content > #waterform h3,
body:has(#cssmenu) #content > form#waterform h1,
body:has(#cssmenu) #content > form#waterform h2 {
	color: var(--color-gray-900) !important;
	margin-top: 0 !important;
	margin-bottom: var(--space-4) !important;
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-gray-100);
	font-size: var(--fs-lg) !important;
	font-weight: var(--fw-semibold) !important;
	text-shadow: none !important;
}

/* Mensagens de erro/sucesso dentro do form admin */
body:has(#cssmenu) #content > #waterform #msg-error,
body:has(#cssmenu) #content > #waterform #msg-sucess {
	margin: 0 0 var(--space-4) 0 !important;
	max-width: 100% !important;
}

/* "Espaço utilizado" — text+progress no CRUD campanha */
body:has(#cssmenu) #content > #waterform > #space-used,
body:has(#cssmenu) #content > #waterform .space-info {
	background: var(--color-brand-50);
	border: 1px solid var(--color-brand-200);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	margin: 0 0 var(--space-4) 0;
	color: var(--color-gray-700);
	font-size: var(--fs-sm);
}

/* Mobile: card admin ocupa quase tela toda */
@media (max-width: 768px) {
	body:has(#cssmenu) #content > #waterform,
	body:has(#cssmenu) #content > form#waterform {
		padding: var(--space-5) var(--space-5) var(--space-4) !important;
		margin: var(--space-4) auto !important;
		width: calc(100% - var(--space-4)) !important;
	}
}