@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
	--bg: #050b0a;
	--panel: #0a1312;
	--panel2: #101c1a;
	--line: #1b2f2a;
	--line-fuerte: #23564a;
	--green: #00f08c;
	--green2: #00c070;
	--white: #f4f8f6;
	--muted: #93a59e;
	--red: #ff6574;
	--brillo: 0 0 22px rgba(0, 240, 140, .22);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: radial-gradient(900px 500px at 12% -5%, #06342677, transparent 70%), var(--bg);
	color: var(--white);
	font: 14px Inter, system-ui, sans-serif;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app { display: flex; min-height: 100vh; }
html { scrollbar-color: #1c7451 #081110; }

/* Barra lateral */
.sidebar {
	width: 272px;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	padding: 14px 16px 22px;
	z-index: 3;
	background: linear-gradient(180deg, #06110e, #050a09);
	border-right: 1px solid var(--line);
	overflow: hidden auto;
	scrollbar-width: none;	/* En pantallas bajas sigue bajando con la rueda */
}
.sidebar::before {
	content: "";
	position: absolute;
	top: -40px;
	left: 150px;
	width: 90px;
	height: 240px;
	background: linear-gradient(180deg, var(--green), transparent);
	opacity: .35;
	filter: blur(6px);
	transform: skewX(-24deg);
	pointer-events: none;
}
.logo { display: block; width: 100%; max-width: 240px; margin: 0 auto; }
nav { position: relative; margin-top: 16px; display: grid; gap: 5px; }
.nav-btn {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	border: 1px solid transparent;
	text-align: left;
	color: #d6e0dc;
	background: transparent;
	padding: 13px 16px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 15px;
}
.nav-btn svg { font-size: 21px; }
.nav-btn:hover { background: #122820; color: white; }
.nav-btn.active { background: linear-gradient(95deg, #00c976, #06f79c 70%, #00c976); color: #03241a; font-weight: 700; box-shadow: var(--brillo); }
.etq { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--green); border: 1px solid #0f7a53; background: #0a2a1f; padding: 2px 7px; border-radius: 99px; }
.nav-btn.active .etq { color: #03241a; border-color: #03241a55; background: transparent; }
.sidebar-bottom { margin-top: auto; padding-top: 18px; display: grid; gap: 14px; }
.online { display: flex; gap: 9px; align-items: center; color: #bdd3c9; font-size: 12px; }
.online i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.online span { margin-left: auto; color: var(--green); font-weight: 700; }
.play {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1.5px solid var(--green);
	color: var(--white);
	background: #0a2a1f;
	border-radius: 12px;
	padding: 14px;
	font: 800 20px 'Barlow Condensed', sans-serif;
	letter-spacing: .5px;
	box-shadow: inset 0 0 18px #00f08c26, var(--brillo);
}
.play svg { color: var(--green); font-size: 22px; }
.play:hover { background: #0d3a2a; }

/* Cabecera con la ciudad */
.main { position: relative; min-width: 0; flex: 1; }
.hero {
	position: relative;
	height: 168px;
	overflow: hidden;
	border-bottom: 1px solid #0d6a48;
	background:
		linear-gradient(90deg, var(--bg) 0%, #050b0ad0 30%, #050b0a30 66%, #050b0a10 100%),
		linear-gradient(0deg, #050b0a66, transparent 45%),
		url('../public/hero.jpg') center 62% / cover no-repeat,
		#07100f;
}
.hero::after {
	content: "";
	position: absolute;
	right: 170px;
	bottom: -30px;
	width: 34px;
	height: 150px;
	background: linear-gradient(0deg, var(--green), transparent);
	transform: skewX(-32deg);
	opacity: .8;
}
.hero-content { position: relative; z-index: 1; padding: 44px 34px; }
h1 { font: 800 clamp(30px, 3.2vw, 42px)/1.05 'Barlow Condensed', sans-serif; margin: 0 0 8px; }
h1 em { font-style: normal; color: var(--green); }
.hero p { color: #d6e0dc; margin: 0; font-size: 15px; }
.menu { display: none; position: absolute; top: 14px; left: 14px; z-index: 2; background: #0a1312cc; border: 1px solid var(--line); border-radius: 10px; color: white; font-size: 22px; padding: 6px 10px; }
.link-btn { background: transparent; border: 0; color: var(--muted); text-decoration: underline; font-size: 12px; }

/* Contenido */
main { padding: 20px 26px 40px; max-width: 1500px; margin: auto; }
.grid { display: grid; gap: 18px; }
.fila { margin-top: 18px; }
.dashboard-top { grid-template-columns: minmax(0, 1fr) 290px; }
.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: linear-gradient(150deg, #0e1a18, #081110); border: 1px solid var(--line); border-radius: 14px; padding: 20px; min-width: 0; }
.card.resaltada { border-color: var(--line-fuerte); box-shadow: 0 0 26px rgba(0, 200, 120, .08); }
.card h2, .card h3 { margin: 0 0 14px; font-size: 18px; }
.tit { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 19px; font-weight: 700; }
.tit svg { color: var(--green); font-size: 24px; }
.muted { color: var(--muted); }

/* Personaje */
.profile { display: grid; grid-template-columns: 190px minmax(190px, 1fr) minmax(300px, 1.3fr); gap: 24px; align-items: center; }
.pj-skin { position: relative; height: 222px; overflow: hidden; border-radius: 12px; border: 1.5px solid var(--green); box-shadow: var(--brillo); background: url('../public/fondo_skins.png') center / cover; }
.pj-skin img { display: block; width: 100%; height: 100%; padding: 8px 8px 0; object-fit: contain; object-position: center bottom; }
.pj-skin span { position: absolute; left: 8px; bottom: 8px; background: #050b0ad0; border-radius: 6px; padding: 3px 7px; font-size: 11px; color: #d6e0dc; }
.name { font: 800 30px/1.1 'Barlow Condensed', sans-serif; margin: 9px 0 2px; }
.tag { background: var(--green); color: #022416; padding: 4px 9px; border-radius: 6px; font-size: 11px; font-weight: 800; display: inline-block; }
.meta { display: grid; gap: 9px; margin-top: 14px; }
.meta span { display: flex; align-items: center; gap: 9px; color: #b9c8c2; }
.meta svg { font-size: 16px; color: var(--muted); }
.meta strong { color: #fff; }
.meta .ok { color: var(--green); }
.money-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { display: flex; align-items: center; gap: 12px; min-width: 0; }
.stat small { display: block; color: #b9c8c2; margin-bottom: 5px; }
.stat strong { display: block; font: 800 25px 'Barlow Condensed', sans-serif; color: var(--green); white-space: nowrap; }
.icono-caja { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 12px; background: #0f2a20; color: var(--green); font-size: 26px; box-shadow: inset 0 0 12px #00f08c22; }
.level { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; background: #0c1816; border: 1px solid var(--line); border-radius: 12px; }
.level > svg { font-size: 30px; color: #ffc93c; fill: #ffc93c; }
.level strong { display: block; font: 800 26px/1 'Barlow Condensed', sans-serif; }
.level small { color: var(--muted); }
.nivel-barra small { display: block; text-align: center; margin-bottom: 6px; color: #d6e0dc; }
.barra-fila { display: flex; align-items: center; gap: 10px; }
.barra-fila b { font-size: 12px; color: #d6e0dc; font-weight: 600; }
.progress { flex: 1; height: 10px; background: #243a33; border-radius: 99px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, #00c879, #00fba0); border-radius: 99px; box-shadow: 0 0 10px #00f08c88; }

/* Resumen y listas */
.summary-row, .activity-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.summary-row:last-child, .activity-row:last-child { border: 0; }
.summary-row span, .activity-row span { display: flex; align-items: center; gap: 12px; color: #d6e0dc; }
.summary-row span svg, .activity-row span svg { font-size: 19px; color: var(--muted); }
.summary-row strong { color: var(--green); font-size: 17px; }
.activity-row strong { color: var(--green); font-weight: 600; }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 11px 0; }
.lista-simple li:last-child { border: 0; }

/* Banners */
.banner { position: relative; min-height: 172px; padding: 24px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; border: 1px solid var(--line-fuerte); border-radius: 14px; background-color: #081110; background-repeat: no-repeat; background-position: right center; background-size: auto 100%; }
.banner.mercado { background-image: linear-gradient(90deg, #081110 24%, #081110cc 50%, #08111022 100%), url('../public/mercadito.jpg'); background-size: 100% 100%, cover; background-position: 0 0, center 60%; }
.banner.ropa { background-image: url('../public/skins.jpg'); background-size: cover; background-position: right center; }
.banner > * { position: relative; }
.banner h2 { display: flex; align-items: center; gap: 12px; font: 800 32px 'Barlow Condensed', sans-serif; margin: 0 0 6px; }
.banner h2 svg { color: var(--green); font-size: 30px; }
.banner p { color: #d6e0dc; max-width: 340px; margin: 0 0 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--green); color: #042319; border: 0; border-radius: 10px; padding: 11px 18px; font-weight: 700; width: max-content; box-shadow: var(--brillo); }
.btn:hover { background: #58ffb7; }
.btn.secondary { background: #0e2a20; color: var(--white); border: 1px solid #1c7451; box-shadow: none; }
.btn.secondary svg { color: var(--green); }
.btn.secondary:hover { background: #143a2c; }

/* Noticias */
.noticia { position: relative; min-height: 158px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; text-align: center; padding: 16px 44px; background: linear-gradient(0deg, #050b0af0, #050b0a99), url('../public/hero.jpg') center / cover; }
.noticia h3 { font: 800 21px 'Barlow Condensed', sans-serif; margin: 2px 0; text-transform: uppercase; }
.noticia p { margin: 0; color: var(--green); font-size: 13px; }
.flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; color: white; background: #ffffff22; }
.flecha:hover { background: #ffffff44; }
.flecha.izq { left: 8px; }
.flecha.der { right: 8px; }

.section-title { font: 800 25px 'Barlow Condensed', sans-serif; margin: 24px 0 14px; }
.info { padding: 15px; background: #0f2a20; border: 1px solid #1c7451; border-radius: 10px; color: #a7d7bd; margin-bottom: 18px; }
.empty { padding: 35px; text-align: center; color: var(--muted); }
footer { display: flex; justify-content: space-between; color: #657d71; border-top: 1px solid var(--line); padding: 18px 26px; font-size: 11px; }

/* Ingreso */
.login { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; overflow: auto; background: radial-gradient(760px 520px at 50% 45%, #052e22aa, transparent 75%), linear-gradient(0deg, #050b0af0, #050b0a66 42%, #050b0ad9), url('../public/login.jpg') center / cover no-repeat, var(--bg); }
.login[hidden] { display: none; }
.login-card { width: min(400px, 100%); display: grid; gap: 14px; background: linear-gradient(150deg, #0e1a18, #081110); border: 1px solid var(--line-fuerte); border-radius: 16px; padding: 26px; box-shadow: 0 0 40px rgba(0, 200, 120, .12); }
.login-card .logo { max-width: 240px; }
.login-card p { text-align: center; margin: 0; }
.login-card label { display: grid; gap: 7px; font-weight: 600; color: #d6e0dc; }
.field { width: 100%; background: #0c1816; border: 1px solid #2c5044; border-radius: 10px; color: white; padding: 12px; }
.login-card .btn { width: 100%; }
.login-error { color: var(--red); min-height: 18px; font-size: 13px; }

.nav-btn:focus-visible, .btn:focus-visible, .field:focus-visible, .link-btn:focus-visible, 
@media (max-width: 1320px) {
	.profile { grid-template-columns: 170px 1fr; }
	.profile .finances { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
	.dashboard-top { grid-template-columns: 1fr; }
	.thirds { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.sidebar { position: fixed; transform: translateX(-101%); transition: transform .2s; }
	.sidebar.open { transform: none; }
	.menu { display: block; }
	.hero-content { padding: 66px 18px 20px; }
	main { padding: 16px; }
	.split, .thirds { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
	.hero { height: 172px; }
	h1 { font-size: 30px; }
	.hero::after { display: none; }
	.profile { grid-template-columns: 96px 1fr; gap: 12px; }
	.pj-skin { height: 150px; }
	.name { font-size: 24px; }
	.meta { font-size: 12px; }
	.money-grid { grid-template-columns: 1fr; }
	.level { grid-template-columns: auto auto; }
	.nivel-barra { grid-column: 1 / -1; }
		.banner { min-height: 186px; }
	footer span { display: none; }
}

/* Vehículos con render o plantilla */
.vehiculos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.vehiculo { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #081110; }
.vehiculo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: url('../public/fondo_vehiculos.png') center / cover; }
.vehiculo div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 12px; color: #d6e0dc; }
.vehiculo strong { color: var(--green); }

/* Botón Staff y sub-botones */
.nav-staff { margin-top: 6px; }
.nav-staff svg:last-child { margin-left: auto; font-size: 16px; }
.sub-menu { display: grid; gap: 2px; margin: 2px 0 6px 28px; padding-left: 12px; border-left: 1px solid var(--line-fuerte); }
.sub-btn { display: block; padding: 8px 12px; border-radius: 8px; color: #b9c8c2; font-weight: 600; font-size: 13px; }
.sub-btn:hover { background: #122820; color: white; }
.sub-btn.active { color: var(--green); background: #0f2a20; }
.staff-barra { position: absolute; z-index: 8; top: 16px; left: 50%; width: min(420px, 38%); transform: translateX(-50%); }
.staff-barra input { width: 100%; padding: 11px 14px; color: white; background: #0a1312e6; border: 1px solid var(--line-fuerte); border-radius: 12px; }
.staff-barra .resultados { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 9; max-height: 340px; overflow: auto; padding: 8px; background: #0a1312; border: 1px solid var(--line-fuerte); border-radius: 12px; }
.staff-barra .resultados a { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; }
.staff-barra .resultados a:hover { background: #122820; }
.staff-barra .resultados h6 { margin: 8px 8px 4px; color: var(--green); font-size: 11px; text-transform: uppercase; }
.staff-barra .resultados .avatar { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: #0f2a20; color: var(--green); font-size: 10px; }
.staff-barra .suave { color: var(--muted); }
.staff-barra .vacio { padding: 10px; color: var(--muted); }
@media (max-width: 860px) {
	.staff-barra { top: 62px; left: 14px; right: 14px; width: auto; transform: none; }
	.staff-barra:not([hidden]) + .hero { height: 208px; }
	.staff-barra:not([hidden]) + .hero .hero-content { padding-top: 116px; }
}

/* Columna lateral: usuario y salida */
.lateral-user { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 6px; border-block: 1px solid var(--line); }
.lateral-user img { width: 50px; height: 50px; flex: none; border-radius: 50%; object-fit: cover; object-position: center 12%; border: 1.5px solid var(--green2); background: #0f2a20; }
.lateral-user b { display: block; font-size: 15px; word-break: break-word; }
.lateral-user span { display: inline-block; margin-top: 3px; padding: 2px 9px; border: 1px solid #0f7a53; border-radius: 99px; background: #0a2a1f; color: var(--green); font-size: 11px; font-weight: 700; }
.salir { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: transparent; color: #d6e0dc; font-weight: 600; }
.salir svg { font-size: 20px; }
.salir:hover { color: var(--green); }
nav { margin-top: 12px; }

/* Cabecera por sección */
.hero-content { display: flex; align-items: center; gap: 22px; padding: 32px 34px; }
.hero-icono { display: grid; place-items: center; width: 74px; height: 74px; flex: none; border: 2px solid var(--green); border-radius: 16px; background: #0a2a1fcc; color: var(--green); font-size: 42px; box-shadow: var(--brillo); }
.hero-icono[hidden] { display: none; }
.hero-marca { display: block; margin: -4px 0 6px; color: var(--green); font: italic 700 15px 'Barlow Condensed', sans-serif; letter-spacing: 6px; }
.hero-marca[hidden] { display: none; }
h1, h1 em { font-style: italic; }
.hero p { max-width: 560px; }

/* Mi Perfil */
.perfil-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; }
.pj-lista { display: flex; flex-direction: column; gap: 10px; }
.pj-fila { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #0c1816; color: white; text-align: left; }
.pj-fila img { width: 64px; height: 64px; flex: none; border-radius: 9px; object-fit: cover; object-position: center 8%; background: #0f2a20; }
.pj-fila span { min-width: 0; flex: 1; }
.pj-fila b { display: block; }
.pj-fila small { color: var(--muted); }
.pj-fila svg { color: var(--muted); }
.pj-fila:hover, .pj-fila.activo { border-color: var(--green); box-shadow: var(--brillo); }
.pj-fila.activo svg { color: var(--green); }
.perfil-cab { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: stretch; }
.pj-retrato { overflow: hidden; border-radius: 14px; min-height: 300px; background: url('../public/fondo_skins.png') center / cover; }
.pj-retrato img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.perfil-nombre { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.perfil-nombre h2 { margin: 0; font: italic 800 36px/1.1 'Barlow Condensed', sans-serif; }
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.dato { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: #0c1816; }
.dato svg { color: var(--green); font-size: 21px; }
.dato span { color: #d6e0dc; }
.dato strong { margin-left: auto; text-align: right; }
.info-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.info-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 0; border: 1px solid var(--line); border-radius: 10px; background: #0c1816; }
.info-fila div { padding: 0 16px; border-left: 1px solid var(--line); }
.info-fila div:first-child { border: 0; }
.info-fila small { display: block; margin-bottom: 5px; color: var(--muted); }
.licencias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.licencia { position: relative; display: grid; justify-items: center; gap: 5px; padding: 14px 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #0c1816; color: var(--muted); }
.licencia svg { font-size: 25px; }
.licencia.si { color: white; border-color: #0f7a53; }
.licencia.si > svg { color: var(--green); }
.licencia i { position: absolute; top: 6px; right: 6px; }
.licencia i svg { font-size: 15px; }
.licencia.si i svg { color: var(--green); }

/* Tablas y estados */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { padding: 10px 12px; background: #0c1816; color: var(--muted); font-weight: 600; text-align: left; }
.tabla td { padding: 11px 12px; border-top: 1px solid var(--line); }
.tabla .clic { cursor: pointer; }
.tabla .clic:hover td { background: #122820; }
.estado { display: inline-block; padding: 3px 10px; border: 1px solid; border-radius: 7px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.estado.verde { color: var(--green); background: #0a2a1f; }
.estado.ambar { color: #ffc93c; background: #2c2308; }
.estado.azul { color: #6db8ff; background: #0d2238; }
.estado.gris { color: #b9c8c2; background: #1a2422; }
.estado.rojo { color: var(--red); background: #33111a; }
.tit span { flex: 1; }
.tit select { width: auto; padding: 7px 10px; }

/* Mercadito */
.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cat { position: relative; display: grid; justify-items: center; gap: 3px; padding: 18px 10px; overflow: hidden; border: 1px solid var(--line-fuerte); border-radius: 14px; background: linear-gradient(150deg, #0e2a22, #081110); color: white; }
.cat svg { color: var(--green); font-size: 44px; filter: drop-shadow(0 0 10px #00f08c66); }
.cat b { font: italic 800 23px 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.cat small { color: #b9c8c2; }
.cat:hover, .cat.activo { border-color: var(--green); box-shadow: var(--brillo); }
.info { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.info svg { flex: none; color: var(--green); font-size: 20px; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.buscar { position: relative; flex: 1; min-width: 220px; }
.buscar svg { position: absolute; top: 13px; left: 14px; font-size: 18px; color: var(--muted); }
.buscar input { width: 100%; padding: 12px 12px 12px 42px; color: white; background: #0c1816; border: 1px solid #2c5044; border-radius: 10px; }
.toolbar select { width: auto; }
.catalogo { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.anuncio { position: relative; padding: 14px; border: 1px solid var(--line-fuerte); border-radius: 14px; background: linear-gradient(170deg, #0c2a20, #081110 70%); }
.anuncio:hover { border-color: var(--green); box-shadow: var(--brillo); }
.anuncio-tipo { position: absolute; z-index: 1; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid #0f7a53; border-radius: 99px; background: #071511e6; font-size: 12px; font-weight: 600; }
.anuncio-tipo svg { color: var(--green); }
.anuncio-img { display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: 10px; overflow: hidden; border-radius: 10px; background: url('../public/fondo_vehiculos.png') center / cover; }
.anuncio-img img { width: 100%; height: 100%; object-fit: cover; }
.anuncio-img > svg { color: var(--green); font-size: 66px; filter: drop-shadow(0 0 12px #00f08c88); }
.anuncio h3 { margin: 0 0 4px; font-size: 16px; }
.price { color: var(--green); font: 800 23px 'Barlow Condensed', sans-serif; }
.anuncio p { margin: 4px 0 0; font-size: 12px; }
.paginas { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; color: #d6e0dc; }
.paginas button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-fuerte); border-radius: 10px; background: #0c1816; color: white; }
.paginas button:disabled { opacity: .4; cursor: default; }

/* Soporte */
.acciones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.accion { display: grid; justify-items: center; gap: 4px; padding: 20px 12px; text-align: center; border: 1px solid var(--line-fuerte); border-radius: 14px; background: linear-gradient(150deg, #0e2a22, #081110); color: white; }
.accion svg { color: var(--green); font-size: 38px; }
.accion b { font-size: 17px; }
.accion small { color: #b9c8c2; }
.accion:hover { border-color: var(--green); box-shadow: var(--brillo); }
.ayuda { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #0c1816; }
.ayuda svg { color: var(--green); font-size: 28px; }
.ayuda small { color: var(--muted); }
.ayuda:hover { border-color: #0f7a53; }
.formulario { display: grid; gap: 14px; max-width: 760px; }
.formulario label { display: grid; gap: 6px; font-weight: 600; }
.formulario textarea { resize: vertical; font: inherit; }
.botones { display: flex; gap: 10px; flex-wrap: wrap; }
.ticket-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ticket-cab h2 { margin: 0; }
.mensajes { display: grid; gap: 10px; margin: 16px 0; }
.mensaje { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #0c1816; }
.mensaje.staff { border-color: #0f7a53; background: #0a2a1f; }
.mensaje small { margin-left: 10px; color: var(--muted); }
.mensaje p { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1320px) {
	.perfil-cab { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 1080px) {
	.perfil-grid, .info-grid { grid-template-columns: 1fr; }
	.acciones, .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.perfil-cab { grid-template-columns: 1fr; }
	.pj-retrato { min-height: 0; aspect-ratio: 3 / 4; max-width: 300px; margin: 0 auto; width: 100%; }
	.datos, .info-fila { grid-template-columns: 1fr; gap: 8px; }
	.info-fila div { border: 0; }
	.hero-icono { display: none; }
	.tabla { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Skins y certificaciones */
.skins-mias { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 170px)); gap: 12px; }
.skins-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.skin-carta { margin: 0; overflow: hidden; border: 1px solid var(--line-fuerte); border-radius: 12px; background: #081110; }
.skin-carta:hover, .skin-carta.activa { border-color: var(--green); box-shadow: var(--brillo); }
.skin-carta img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.skin-carta figcaption { padding: 8px 10px; font-size: 13px; font-weight: 600; text-align: center; }
.certificados { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.certificado { display: grid; justify-items: center; gap: 8px; padding: 14px 8px; text-align: center; color: var(--muted); }
.certificado h3 { margin: 0; color: white; font-size: 18px; }
.certificado p { margin: 0; }
.certificado > svg { font-size: 44px; }
.certificado.si > svg { color: var(--green); filter: drop-shadow(0 0 12px #00f08c88); }