/**
 * MQUW Boat Rental — Guía para clientes (licencia)
 * Tokens alineados con assets/css/admin/admin-tokens.css
 */
:root {
	--mquw-bg: #F7F9FB;
	--mquw-surface: #FFFFFF;
	--mquw-surface-2: #F1F4F7;
	--mquw-ink: #0B1220;
	--mquw-ink-soft: #6B7280;
	--mquw-ink-faint: #9AA3AF;
	--mquw-accent: #12A594;
	--mquw-accent-deep: #0D8377;
	--mquw-accent-tint: #E3F5EF;
	--mquw-success: #22C55E;
	--mquw-success-tint: #E9F8EF;
	--mquw-warning: #F5A623;
	--mquw-warning-tint: #FEF3E2;
	--mquw-warn-ink: #B4590E;
	--mquw-danger: #EF4444;
	--mquw-danger-tint: #FCEBE9;
	--mquw-line: rgba(11, 18, 32, 0.08);
	--mquw-radius-xl: 24px;
	--mquw-radius-lg: 16px;
	--mquw-radius-card: 18px;
	--mquw-radius-md: 12px;
	--mquw-radius-sm: 9px;
	--mquw-shadow-soft: 0 1px 2px rgba(11, 18, 32, 0.04), 0 8px 24px rgba(11, 18, 32, 0.06);
	--mquw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--mquw-hero-grad: linear-gradient(155deg, #0B2436 0%, #0E3B4F 55%, #0B5C63 100%);
	--sidebar-w: 280px;
	--header-h: 64px;
}

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

html { scroll-behavior: smooth; }

.iva-mark {
	font-size: 10px;
	font-weight: 600;
	line-height: 0;
	position: relative;
	top: -0.15em;
	margin-left: 1px;
	vertical-align: super;
}

.iva-note {
	font-size: 12px;
	line-height: 1.45;
	color: var(--mquw-ink-soft);
	margin-top: 2rem;
}

body {
	margin: 0;
	font-family: var(--mquw-font);
	background: var(--mquw-bg);
	color: var(--mquw-ink);
	line-height: 1.55;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--mquw-accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* —— Shell —— */
.guia-shell {
	min-height: 100vh;
	display: grid;
	grid-template-columns: var(--sidebar-w) 1fr;
	grid-template-rows: var(--header-h) 1fr;
	grid-template-areas:
		"header header"
		"aside main";
}

.guia-header {
	grid-area: header;
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 20px;
	background: var(--mquw-surface);
	border-bottom: 1px solid var(--mquw-line);
	box-shadow: 0 1px 0 rgba(11, 18, 32, 0.03);
}

.guia-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}
.guia-brand:hover { text-decoration: none; }

.guia-brand-mark {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--mquw-hero-grad);
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	flex-shrink: 0;
}

.guia-brand-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.guia-brand-text strong {
	font-size: 15px;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.guia-brand-text span {
	font-size: 12px;
	color: var(--mquw-ink-soft);
}

.guia-search {
	flex: 1;
	max-width: 420px;
	margin-left: auto;
	position: relative;
}
.guia-search input {
	width: 100%;
	height: 40px;
	border: 1px solid var(--mquw-line);
	border-radius: var(--mquw-radius-full);
	padding: 0 16px 0 40px;
	background: var(--mquw-surface-2);
	font: inherit;
	color: var(--mquw-ink);
	outline: none;
}
.guia-search input:focus {
	border-color: var(--mquw-accent);
	background: #fff;
	box-shadow: 0 0 0 3px var(--mquw-accent-tint);
}
.guia-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	opacity: 0.45;
	pointer-events: none;
}

.guia-menu-btn {
	display: none;
	border: 1px solid var(--mquw-line);
	background: var(--mquw-surface);
	border-radius: var(--mquw-radius-sm);
	width: 40px;
	height: 40px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.guia-aside {
	grid-area: aside;
	position: sticky;
	top: var(--header-h);
	height: calc(100vh - var(--header-h));
	overflow: auto;
	background: var(--mquw-surface);
	border-right: 1px solid var(--mquw-line);
	padding: 20px 14px 40px;
}

.guia-nav-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mquw-ink-faint);
	padding: 12px 12px 6px;
}

.guia-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--mquw-radius-sm);
	color: var(--mquw-ink);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}
.guia-nav a:hover {
	background: var(--mquw-surface-2);
	text-decoration: none;
}
.guia-nav a.is-active {
	background: var(--mquw-accent-tint);
	color: var(--mquw-accent-deep);
}
.guia-nav .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	flex-shrink: 0;
}
.guia-nav a.is-active .dot { opacity: 1; background: var(--mquw-accent); }

.guia-main {
	grid-area: main;
	min-width: 0;
	padding: 28px 32px 80px;
}

.guia-content {
	max-width: 920px;
	margin: 0 auto;
}

/* —— Hero —— */
.page-hero {
	background: var(--mquw-hero-grad);
	color: #fff;
	border-radius: var(--mquw-radius-xl);
	padding: 36px 36px 32px;
	margin-bottom: 28px;
	box-shadow: var(--mquw-shadow-soft);
	position: relative;
	overflow: hidden;
}
.page-hero::after {
	content: '';
	position: absolute;
	right: -40px;
	top: -60px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(18, 165, 148, 0.25);
	pointer-events: none;
}
.page-hero h1 {
	margin: 0 0 10px;
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	letter-spacing: -0.02em;
	line-height: 1.2;
	position: relative;
}
.page-hero p {
	margin: 0;
	max-width: 58ch;
	opacity: 0.9;
	font-size: 1.02rem;
	position: relative;
}
.page-hero .meta {
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	position: relative;
}

/* —— Badges —— */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--mquw-radius-full);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}
.badge-core { background: var(--mquw-accent-tint); color: var(--mquw-accent-deep); }
.badge-pro { background: #E8EEF8; color: #2F4B7A; }
.badge-complete { background: #F3E8FF; color: #6B3FA0; }
.badge-all { background: rgba(255,255,255,0.18); color: #fff; }
.badge-muted { background: var(--mquw-surface-2); color: var(--mquw-ink-soft); }
.badge-warn { background: var(--mquw-warning-tint); color: var(--mquw-warn-ink); }
.badge-on-hero { background: rgba(255,255,255,0.16); color: #fff; }

/* —— Typography —— */
.guia-content > h2,
.section-title {
	margin: 36px 0 12px;
	font-size: 1.35rem;
	letter-spacing: -0.02em;
}
.guia-content > h3 {
	margin: 28px 0 10px;
	font-size: 1.1rem;
}
.lead {
	color: var(--mquw-ink-soft);
	font-size: 1.05rem;
	margin: 0 0 20px;
}
.note {
	background: var(--mquw-accent-tint);
	border: 1px solid rgba(18, 165, 148, 0.2);
	border-radius: var(--mquw-radius-md);
	padding: 14px 16px;
	color: var(--mquw-ink);
	margin: 16px 0 24px;
	font-size: 0.95rem;
}
.note strong { color: var(--mquw-accent-deep); }
.warn-box {
	background: var(--mquw-warning-tint);
	border: 1px solid rgba(245, 166, 35, 0.35);
	border-radius: var(--mquw-radius-md);
	padding: 14px 16px;
	margin: 16px 0 24px;
	color: var(--mquw-warn-ink);
	font-size: 0.95rem;
}

/* —— Cards grid —— */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
	margin: 18px 0 28px;
}
.nav-card {
	background: var(--mquw-surface);
	border: 1px solid var(--mquw-line);
	border-radius: var(--mquw-radius-card);
	padding: 18px 18px 16px;
	box-shadow: var(--mquw-shadow-soft);
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.nav-card:hover {
	transform: translateY(-2px);
	border-color: rgba(18, 165, 148, 0.35);
	text-decoration: none;
}
.nav-card h3 {
	margin: 0;
	font-size: 1.02rem;
	letter-spacing: -0.01em;
}
.nav-card p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--mquw-ink-soft);
	flex: 1;
}
.nav-card .more {
	font-size: 13px;
	font-weight: 600;
	color: var(--mquw-accent-deep);
	margin-top: 4px;
}

/* —— Feature blocks —— */
.feature {
	background: var(--mquw-surface);
	border: 1px solid var(--mquw-line);
	border-radius: var(--mquw-radius-card);
	padding: 20px 22px;
	margin: 0 0 14px;
	box-shadow: var(--mquw-shadow-soft);
}
.feature[hidden],
.feature.is-hidden { display: none !important; }
.feature-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
.feature-head h3 {
	margin: 0;
	font-size: 1.08rem;
	letter-spacing: -0.01em;
}
.feature-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.feature dl {
	margin: 0;
	display: grid;
	gap: 12px;
}
.feature dt {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mquw-ink-faint);
	margin-bottom: 2px;
}
.feature dd {
	margin: 0;
	color: var(--mquw-ink);
	font-size: 0.95rem;
}
.feature .where {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--mquw-line);
	font-size: 0.9rem;
	color: var(--mquw-ink-soft);
}
.feature .where strong { color: var(--mquw-ink); }

/* —— Steps —— */
.steps {
	counter-reset: step;
	list-style: none;
	padding: 0;
	margin: 12px 0 24px;
}
.steps li {
	position: relative;
	padding: 14px 16px 14px 56px;
	background: var(--mquw-surface);
	border: 1px solid var(--mquw-line);
	border-radius: var(--mquw-radius-md);
	margin-bottom: 10px;
	box-shadow: var(--mquw-shadow-soft);
}
.steps li::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: 14px;
	top: 14px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--mquw-accent-tint);
	color: var(--mquw-accent-deep);
	font-weight: 700;
	font-size: 13px;
	display: grid;
	place-items: center;
}
.steps li strong { display: block; margin-bottom: 4px; }

/* —— Tables —— */
.table-wrap {
	overflow-x: auto;
	margin: 12px 0 24px;
	border-radius: var(--mquw-radius-md);
	border: 1px solid var(--mquw-line);
	background: var(--mquw-surface);
	box-shadow: var(--mquw-shadow-soft);
}
table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}
th, td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--mquw-line);
	vertical-align: top;
}
th {
	background: var(--mquw-surface-2);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mquw-ink-soft);
}
tr:last-child td { border-bottom: 0; }

/* —— TOC —— */
.toc {
	background: var(--mquw-surface);
	border: 1px solid var(--mquw-line);
	border-radius: var(--mquw-radius-card);
	padding: 16px 18px;
	margin: 0 0 24px;
	box-shadow: var(--mquw-shadow-soft);
}
.toc strong {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mquw-ink-faint);
}
.toc ol {
	margin: 0;
	padding-left: 18px;
}
.toc li { margin: 4px 0; }
.toc a { font-size: 0.95rem; }

/* —— Footer —— */
.guia-footer {
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--mquw-line);
	color: var(--mquw-ink-soft);
	font-size: 0.88rem;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}

.search-empty {
	display: none;
	padding: 24px;
	text-align: center;
	color: var(--mquw-ink-soft);
	background: var(--mquw-surface);
	border-radius: var(--mquw-radius-md);
	border: 1px dashed var(--mquw-line);
}
.search-empty.is-visible { display: block; }

kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.85em;
	background: var(--mquw-surface-2);
	border: 1px solid var(--mquw-line);
	border-radius: 6px;
	padding: 1px 6px;
}

code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.88em;
	background: var(--mquw-surface-2);
	padding: 1px 6px;
	border-radius: 6px;
}

.screen-list {
	display: grid;
	gap: 10px;
	margin: 12px 0 24px;
}
.screen-item {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 12px;
	align-items: start;
	background: var(--mquw-surface);
	border: 1px solid var(--mquw-line);
	border-radius: var(--mquw-radius-md);
	padding: 14px 16px;
}
.screen-item .path {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 12px;
	font-weight: 600;
	color: var(--mquw-accent-deep);
	background: var(--mquw-accent-tint);
	padding: 4px 8px;
	border-radius: 6px;
	text-align: center;
	align-self: start;
}

@media (max-width: 960px) {
	.guia-shell {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"main";
	}
	.guia-aside {
		position: fixed;
		inset: var(--header-h) auto 0 0;
		width: min(86vw, 300px);
		transform: translateX(-105%);
		transition: transform 0.2s ease;
		z-index: 50;
		box-shadow: var(--mquw-shadow-soft);
	}
	body.nav-open .guia-aside { transform: translateX(0); }
	body.nav-open::before {
		content: '';
		position: fixed;
		inset: var(--header-h) 0 0 0;
		background: rgba(11, 18, 32, 0.35);
		z-index: 45;
	}
	.guia-menu-btn { display: inline-flex; }
	.guia-main { padding: 20px 16px 64px; }
	.page-hero { padding: 28px 22px; }
	.screen-item { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.guia-search { display: none; }
	.guia-search.is-mobile-visible {
		display: block;
		position: absolute;
		left: 12px;
		right: 12px;
		top: calc(var(--header-h) + 8px);
		max-width: none;
		z-index: 41;
	}
}