/* =========================================
Facilitool - styles.css (revisado, completo)
========================================= */

/* ---- Tokens ---- */
:root{
/* Base */
--bg:rgba(252,252,255,1.00);
--card:rgba(243,242,248,1.00);
--card-soft:rgba(235,235,240,1.00);

/* Bordas */
--border:rgba(220,220,225,1.00);

/* Texto */
--text:rgba(30,30,35,1.00);
--muted:rgba(120,120,125,1.00);
	
/* Inputs */
--input:rgba(250,250,255,1.00);

/* Accent */
--accent:rgba(80,70,230,1.00);
--accent-600:rgba(50,40,200,1.00);

/* Estados */
--ok:#16a34a;
--warn:#d97706;
--alert:#dc2626;

/* UI */
--radius:16px;
--radius-sm:12px;
--shadow:0 5px 10px rgba(0,0,0,.08);

}


/* ---- Reset/Globals ---- */
*{
box-sizing:border-box;
}

html,body{
height:100%;
}

body{
margin:0;
font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;
color:var(--text);
background:var(--bg);
line-height:1.55;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
padding: calc(var(--header-height) + 12px) 0 40px 0;
}

img{
max-width:100%;
display:block;
}

main{
display:block;
margin:0 auto;
padding: 0;
}

a{
text-decoration: none;
color: var(--accent);
}

a:hover{
color: var(--accent);
}

h1,h2,h3,p,button,input,select,a{
word-wrap:break-word;
}

h1{
font-weight: 700;
font-size: 54px;
line-height: 54px;
margin-bottom: 0;
}

h2{
font-size: 32px;
line-height: 32px;
margin-bottom: 32;
}

h3{
font-weight: 300;
font-size: 24px;
line-height: 24px;
margin-bottom: 0;
}

/**********************************
MELHOR TOQUE EM DISPOSITIVOS MÓVEIS
**********************************/
.chip{
touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0.05);
}

/* esconder nav grande em telas menores (ajuste conforme seu includes/header.inc) */
@media (max-width:980px){
.site-header .nav { display:none; }
}

/* =========================================
HEADER / FOOTER / CONTAINER
========================================= */

.site-header{
	position:fixed;
	top:0;
	left:0;
	right:0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding: 8px 40px;
	background:var(--bg);
	z-index:9999;
	border-bottom: 1px solid var(--border);
}

.site-header .logo-header{
	width:160px;
	height:auto;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:6px;
	border-right:none;
	float:none;
	background:transparent;
}

.site-header .logo-header img{
	width:100%;
	height:auto;
	display:block;
}

.site-header .nav,
.site-header .actions{
	display:flex;
	gap:12px;
	align-items:center;
}

.site-footer{
	color:var(--muted);
	font-size:13px;
	text-align:center;
	border-top:1px solid var(--border);
	padding:80px 0px;
	margin-top: 80px;
}

.container{
	width:100%;
	max-width:1180px;
	margin:auto;
	box-sizing:border-box;
	margin-top:50px;
	padding: 16px;
}

.card{
	background:var(--card);
	border-radius:var(--radius);
	padding:32px;
	margin:16px 0;
}

.card--sm{
	padding:12px;
}

.breadcrumb{
	margin-top: 50px;
	font-size: 12px;
	color: var(--muted);
}

/* =========================================
TOOLBAR / SEARCH / FILTERS
========================================= */
.toolbar{
	border-radius:var(--radius);
	padding: 24px;
}

.toolbar__row{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	align-items:center;
	justify-content:space-between;
}

.search{
	flex:1;
	min-width:200px;
	max-width:100%;
}

.search input{
	width:100%;
	padding:12px 24px;
	border:0;
	border-radius:999px;
	background:var(--bg);	
	color:var(--text);
	outline:none;
	box-shadow:none;	
}

.filters{
	display:flex;
	flex-wrap:wrap;
	gap:4px;
	justify-content:flex-end;
	max-width:600px;
}

.chip{
	border:0;
	background:var(--bg);
	color:var(--muted);
	padding:12px 24px;
	border-radius:999px;
	cursor:pointer;
	transition:all .3s;
}

.chip:hover,
.chip.is-active{
	color:#fff;
	background:var(--accent);	
}

@media (max-width:720px){

.toolbar__row{
align-items:stretch;
flex-direction:column;
gap:10px; }

.filters{ justify-content:flex-start;
width:100%;
gap:8px;
}

.search{
width:100%;
min-width:0;
}
}

/* =========================================
ADS / UTILITÁRIOS
========================================= */

.ad-above,
.ad-slot,
.ad-infeed {
	display: none;
margin: 0;
padding: 10px;
background: transparent;
border-radius: 16px;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
border: 1px solid var(--border);
}

.ad-above .adsbygoogle,
.ad-slot .adsbygoogle,
.ad-infeed .adsbygoogle {
max-width: 100%;
margin: 0 auto;
display: block;
}

/* mobile tweaks para ads */
@media (max-width:720px) {
.ad-above, .ad-infeed, .ad-slot {
margin: 14px 0;
padding: 8px;
}
}

/* helper hidden */
.hidden{
display:none !important;
}

/**********************************
GRID PADRÃO 3 COLUNAS
**********************************/
.grid{
	display:grid;
	gap:16px;
	grid-template-columns: repeat(3, minmax(0,1fr));
}

@media (max-width:1100px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .grid{ grid-template-columns: 1fr; } }

/**********************************
TOOL CARD BASE
**********************************/

.tool-card{
	display:flex;
	flex-direction:column;
	overflow:hidden;
	border-radius: var(--radius);
	background: var(--bg);
	transition:transform .3s ease;
}

.tool-card:hover{
	transform:translateY(-4px);
	box-shadow: var(--shadow);
}

.tool-card__thumb{
	aspect-ratio:16/9;
	overflow:hidden;
	border-radius:12px 12px 0 0;
}

.tool-card__thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .3s ease;
}

.tool-card:hover .tool-card__thumb img{
	transform:scale(1.05);
}

.tool-card__body{
	padding: 32px 24px;
}

.tool-card__cat{
	font-size:12px;
	font-weight:600;
	padding:6px 12px;
	border-radius:999px;
	border:1px solid var(--accent);
	color:var(--accent);
}

.tool-card:hover .tool-card__cat{
	color:var(--bg);
	background: var(--accent);
}

.tool-card__title{
	font-weight:600;
	font-size:22px;
	color:var(--text);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	display: block;
	margin-top: 8px;
}

@media (max-width:640px){
.tool-card__body{ padding:14px 10px; }
.tool-card__title{ font-size:18px; white-space:normal; overflow:visible; }
.tool-card__cat{ font-size:11px; padding:6px 8px; }
}

/**********************************
FORM / RESULT / UI COMPONENTS
**********************************/
.img-page img{
width:100%;
height:200px;
object-fit:cover;
border-radius:var(--radius-sm);
}

.field label{
display:block;
font-size:13px;
color:var(--muted);
margin-bottom:6px;
}

.with-suffix{
display:flex;
gap:8px;
align-items:center;
}

.with-suffix input{
flex:1;
padding:12px 14px;
border-radius:var(--radius-sm);
border:1px solid var(--border);
background:var(--input);
color:var(--text);
font-size:16px;
outline:none;
transition:border .2s, box-shadow .2s;
}

.with-suffix input::placeholder{ color:#6b7280; }
.with-suffix input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(99,102,241,.12); }

.suffix{
padding:4px 12px;
display:inline-flex;
align-items:center;
border-radius:var(--radius);
/*border:1px solid var(--border);*/
background:var(--card-soft);
color:var(--muted);
font-size:13px;
}

select{
width:100%; padding:12px 14px; border-radius:var(--radius-sm);
border:1px solid var(--border); background:var(--input); color:var(--text);
font-size:16px; outline:none; transition:border .2s, box-shadow .2s;
}

select:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(99,102,241,.12); }

.actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.btn{
padding:10px 16px; border-radius:999px; border:1px solid var(--border);
background:#1a1a1e; color:var(--text); cursor:pointer; font-size:14px;
transition:transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:hover{ border-color:#3a3a40; }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover{ background:var(--accent-600); border-color:var(--accent-600); }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--border); }
.btn.ghost:hover{ background:#1b1b1f; border-color:var(--border); color: var(--bg) }

/**********************************
RESULT
**********************************/
.result-grid{ display:grid; gap:10px; grid-template-columns:2fr 2fr; }
@media (max-width:640px){ .result-grid{ grid-template-columns:1fr; } }

.result-box,.info-box{
	/*border:1px solid var(--border);*/
	border-radius:var(--radius-sm);
	padding:16px;
	background:var(--card-soft);	
	transition:all .3s ease;	
}

.result-box:hover,.info-box:hover{
	background:var(--bg);
	transform:translateY(-4px);
	box-shadow: var(--shadow);
}

.result-box .label{ color:var(--muted); font-size:13px; }

.value{ font-size:38px; font-weight:700; letter-spacing:-.02em; color:var(--text); }

.badge{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-top:8px;
	font-size:13px;
	border-radius:999px;
	padding:6px 10px;
	background:#1d1d21;
	color:var(--muted);
	border:1px solid var(--border);
}

.badge .dot{
	width:8px;
	height:8px;
	border-radius:999px;
	background:currentColor;
	opacity:.7;
}

/**********************************
TABLES
**********************************/
.table-scroll{
overflow-x:auto;
	background: red;
}

table{
width:100%;
border-collapse:collapse;
font-size:14px;
}

thead th{
text-align:left;
color:var(--muted);
padding:10px 8px;
font-weight:600;
background:#141416;
border-bottom:1px solid var(--border);
}

tbody td{
padding:12px 8px;
border-top:1px solid var(--border);
color:var(--text);
}

tbody tr:hover{
background:#151518;
}

/**********************************
FAQ
**********************************/
.faq details{
border:1px solid var(--border);
border-radius:var(--radius-sm);
padding:16px;
margin-bottom:10px;
transition:background .2s, border-color .2s;
}

.faq details[open],
.faq details:hover{	
	background:var(--card-soft);
}

.faq summary{ cursor:pointer; font-weight:600; color:var(--text); }
.faq details p{ margin:8px 20px 0; color:var(--muted); }


/**********************************
SEE MORE CARDS
**********************************/

.see-more__title{
margin: 0 0 12px;
color: var(--text);
font-weight: 700;
letter-spacing: -0.02em;
font-size: 18px;
}

.see-more__grid{
display:grid;
gap:16px;
grid-template-columns: repeat(3, minmax(0,1fr));
}

.see-more img{
	border-radius: 8px;
}

@media (max-width:1100px){ .see-more__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width:800px){ .see-more__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .see-more__grid{ grid-template-columns: 1fr; } }

.see-card{
display:flex;
flex-direction:column;
gap:16px;
background: var(--card);
/*border:1px solid var(--border);*/
border-radius: var(--radius);
padding:24px;
text-decoration:none;
color:var(--text);
transition:.15s box-shadow, .15s transform, background .15s, border-color .15s;
}

.see-card:hover{
transform: translateY(-2px);
box-shadow: var(--shadow);
background: var(--bg);	
}

.see-card__meta{
font-size:13px;
color:var(--accent);
}

.see-card__title{
font-weight:600;
line-height:1.25;
font-size:16px;
color:var(--text);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

/**********************************
ANÚNCIOS / BADGES / UTILITÁRIOS FINAIS
**********************************/

.badge.low{    background:#3b3410; color:#facc15; border-color:#4a3f12; }
.badge.normal{ background:#0f2e1a; color:#22c55e; border-color:#16422a; }
.badge.high{   background:#3a2410; color:#fb923c; border-color:#4d2e15; }
.badge.ob1{    background:#3b1414; color:#f87171; border-color:#4b1818; }
.badge.ob2{    background:#3b1120; color:#fb7185; border-color:#4b1526; }
.badge.ob3{    background:#3b0f1b; color:#f472b6; border-color:#4b1423; }


/**********************************
PRIVACIDADE
**********************************/
.page-privacidade section{
	border-bottom: 1px solid var(--border);
	padding: 24px 0;
}

.news-list{
	display: none;
}