/* ============================================================
   CONSTRUTOR DE AQUÁRIO — CSS principal
   Mesma paleta de cor do fórum (--azul etc.), para a secção não destoar do
   resto do site; o tanque em si usa um gradiente azul/verde-água próprio,
   o que faz sentido tematicamente mesmo não sendo a paleta geral do site.
   ============================================================ */
:root {
	--azul: #0077b6;
	--azul-escuro: #005f8e;
	--azul-claro: #caf0f8;
	--verde: #2ec4b6;
	--fundo: #f0f8ff;
	--branco: #ffffff;
	--cinza: #6b7280;
	--cinza-claro: #f3f4f6;
	--borda: #e2e8f0;
	--texto: #1e293b;
	--laranja: #f77f00;
	--vermelho: #dc2626;
	--amarelo: #eab308;
	--sombra: 0 2px 8px rgba(0, 119, 182, 0.1);
	--raio: 10px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: 'Segoe UI', Arial, sans-serif;
	background: var(--fundo);
	color: var(--texto);
	font-size: 15px;
	line-height: 1.6;
}

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

.aq-wrapper { max-width: 1100px; margin: 0 auto; padding: 0 16px 60px; }

/* ---- CABEÇALHO ---- */
.aq-header {
	background: linear-gradient(135deg, #000 0%, #07319b 100%);
	color: #fff;
	margin-bottom: 24px;
}
.aq-header-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
.aq-header-logo { display: flex; align-items: center; gap: 10px; }
.aq-header-logo img { height: 36px; }
.aq-header-logo span { font-weight: 700; font-size: 1.1rem; }
.aq-header-nav { display: flex; align-items: center; gap: 16px; font-size: 0.9rem; }
.aq-header-nav a { color: #fff; opacity: 0.9; }
.aq-header-nav a:hover { opacity: 1; text-decoration: none; }
.aq-header-nav .aq-user { opacity: 0.75; }

/* ---- CARTÕES / BOTÕES GENÉRICOS ---- */
.aq-card {
	background: var(--branco);
	border: 1px solid var(--borda);
	border-radius: var(--raio);
	box-shadow: var(--sombra);
	padding: 20px;
}
.aq-btn {
	display: inline-block;
	border: none;
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 0.95rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
}
.aq-btn-primario { background: var(--azul); color: #fff; }
.aq-btn-primario:hover { background: var(--azul-escuro); color: #fff; text-decoration: none; }
.aq-btn-secundario { background: var(--cinza-claro); color: var(--texto); }
.aq-btn-secundario:hover { background: var(--borda); color: var(--texto); text-decoration: none; }
.aq-btn-perigo { background: var(--vermelho); color: #fff; }
.aq-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.aq-form-grupo { margin-bottom: 16px; }
.aq-form-grupo label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.aq-form-grupo input[type="text"],
.aq-form-grupo input[type="email"],
.aq-form-grupo input[type="password"],
.aq-form-grupo input[type="number"],
.aq-form-grupo textarea,
.aq-form-grupo select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--borda);
	border-radius: 8px;
	font-size: 0.95rem;
	font-family: inherit;
}
.aq-form-grupo .aq-radio-linha { display: flex; gap: 20px; }
.aq-erro { color: var(--vermelho); font-size: 0.85rem; margin-top: 8px; min-height: 1.2em; }
.aq-aviso-conta {
	background: var(--azul-claro);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 0.85rem;
	margin-bottom: 18px;
}

.aq-toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--texto);
	color: #fff;
	padding: 10px 18px;
	border-radius: 8px;
	font-size: 0.9rem;
	z-index: 1000;
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
}
.aq-toast.aq-visivel { opacity: 1; }
.aq-toast.aq-erro-toast { background: var(--vermelho); }

/* ---- PITCH (index.php, sem sessão) ---- */
.aq-pitch { text-align: center; padding: 60px 20px; }
.aq-pitch h1 { font-size: 1.8rem; margin-bottom: 12px; }
.aq-pitch p { color: var(--cinza); max-width: 520px; margin: 0 auto 28px; }
.aq-pitch-botoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- MEUS AQUÁRIOS ---- */
.aq-lista-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.aq-grelha-aquarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.aq-cartao-aquario { padding: 0; overflow: hidden; }
.aq-cartao-imagem { position: relative; aspect-ratio: 16 / 9; }
.aq-cartao-imagem.aq-agua-doce { background: linear-gradient(to bottom, #2a9bd6 0%, #1c6fa8 55%, #d8c08a 75%, #c2a46e 100%); }
.aq-cartao-imagem.aq-agua-salgada { background: linear-gradient(to bottom, #0a6ebd 0%, #073d73 55%, #4a5568 75%, #2d3748 100%); }
.aq-cartao-imagem .aq-tanque-luz { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 35%); }
.aq-cartao-corpo { padding: 16px; }
.aq-cartao-corpo h3 { margin: 0 0 4px; font-size: 1.05rem; }
.aq-cartao-corpo .aq-meta { color: var(--cinza); font-size: 0.85rem; margin-bottom: 10px; }
.aq-cartao-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.aq-cartao-acoes .aq-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 10px 8px; font-size: 0.82rem; text-align: center; }
.aq-cartao-acoes .aq-btn { padding: 6px 10px; font-size: 0.82rem; }
.aq-vazio { text-align: center; padding: 50px 20px; color: var(--cinza); }

/* ---- ASSISTENTE DE POVOAMENTO ---- */
.aq-assistente-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.aq-breadcrumb { font-size: 0.85rem; color: var(--cinza); }
.aq-breadcrumb a { color: var(--azul); }

.aq-grelha-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.aq-cartao-categoria {
	background: var(--branco);
	border: 1px solid var(--borda);
	border-radius: var(--raio);
	padding: 20px 10px;
	text-align: center;
	cursor: pointer;
}
.aq-cartao-categoria:hover { border-color: var(--azul); }
.aq-cartao-categoria .aq-icone { font-size: 2rem; margin-bottom: 8px; }
.aq-cartao-categoria .aq-contagem { color: var(--cinza); font-size: 0.8rem; }

.aq-lista-subcategorias { display: flex; flex-direction: column; gap: 8px; }
.aq-linha-subcategoria {
	background: var(--branco);
	border: 1px solid var(--borda);
	border-radius: 8px;
	padding: 12px 16px;
	display: flex;
	justify-content: space-between;
	cursor: pointer;
}
.aq-linha-subcategoria:hover { border-color: var(--azul); }

.aq-lista-especies { display: flex; flex-direction: column; gap: 8px; padding-bottom: 80px; }
.aq-cartao-especie {
	background: var(--branco);
	border: 1px solid var(--borda);
	border-radius: 8px;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}
.aq-cartao-especie.aq-marcada { border-color: var(--azul); background: var(--azul-claro); }
.aq-cartao-especie.aq-ja-no-aquario { opacity: 0.7; }
.aq-cartao-especie img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--cinza-claro); }
.aq-cartao-especie .aq-info { flex: 1; min-width: 0; }
.aq-cartao-especie .aq-nome { font-weight: 600; }
.aq-cartao-especie .aq-cientifico { color: var(--cinza); font-size: 0.8rem; font-style: italic; }
.aq-cartao-especie .aq-badge-atencao { background: var(--amarelo); color: #000; font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; }
.aq-cartao-especie .aq-checkbox { width: 22px; height: 22px; border: 2px solid var(--cinza); border-radius: 5px; flex-shrink: 0; }
.aq-cartao-especie.aq-marcada .aq-checkbox { background: var(--azul); border-color: var(--azul); }

.aq-rodape-fixo {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--branco);
	border-top: 1px solid var(--borda);
	padding: 12px 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
	z-index: 50;
}

/* ---- TANQUE (vista/editor do aquário) ---- */
.aq-layout-tanque { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
@media (max-width: 760px) { .aq-layout-tanque { grid-template-columns: 1fr; } }

.aq-tanque-caixa {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--raio);
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25), inset 0 0 0 6px rgba(255,255,255,0.08);
	touch-action: none;
}
.aq-tanque-caixa.aq-agua-doce { background: linear-gradient(to bottom, #2a9bd6 0%, #1c6fa8 55%, #d8c08a 75%, #c2a46e 100%); }
.aq-tanque-caixa.aq-agua-salgada { background: linear-gradient(to bottom, #0a6ebd 0%, #073d73 55%, #4a5568 75%, #2d3748 100%); }
.aq-tanque-luz {
	position: absolute; inset: 0;
	background: linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 35%);
	pointer-events: none;
}
.aq-tanque-peca {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	cursor: grab;
	touch-action: none;
}
.aq-tanque-peca:active { cursor: grabbing; }
.aq-tanque-peca img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid rgba(255,255,255,0.85);
	box-shadow: 0 2px 8px rgba(0,0,0,0.35);
	pointer-events: none;
}
.aq-tanque-peca .aq-qtd {
	position: absolute;
	bottom: -4px;
	right: -4px;
	background: var(--azul);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	border-radius: 999px;
	min-width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	border: 2px solid #fff;
}
.aq-tanque-peca:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.aq-tanque-controlos { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.aq-tanque-estado { font-size: 0.8rem; color: var(--cinza); }

.aq-lista-itens { display: flex; flex-direction: column; gap: 8px; }
.aq-item-lateral {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--branco);
	border: 1px solid var(--borda);
	border-radius: 8px;
	padding: 8px 10px;
}
.aq-item-lateral img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--cinza-claro); }
.aq-item-lateral .aq-info { flex: 1; min-width: 0; font-size: 0.85rem; }
.aq-item-lateral .aq-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aq-item-qtd { display: flex; align-items: center; gap: 4px; }
.aq-item-qtd button { width: 22px; height: 22px; border: 1px solid var(--borda); background: var(--branco); border-radius: 4px; cursor: pointer; }
.aq-item-remover { color: var(--vermelho); cursor: pointer; font-size: 0.85rem; background: none; border: none; }

.aq-painel-compat { margin-top: 16px; }
.aq-par-compat { padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 0.85rem; }
.aq-par-compat:last-child { border-bottom: none; }
.aq-selo { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-right: 6px; }
.aq-selo-compativel { background: #dcfce7; color: #166534; }
.aq-selo-atencao { background: #fef9c3; color: #854d0e; }
.aq-selo-incompativel { background: #fee2e2; color: #991b1b; }

.aq-rodape {
	text-align: center;
	color: var(--cinza);
	font-size: 0.82rem;
	padding: 30px 16px;
}