/* =========================================================
   EXPRESSO URUPÊS - SISTEMA DE DESIGN INTEGRADO
   Prefeitura Municipal de Urupês
   ========================================================= */

:root {
	--exp-font: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--site-header-height: 0px;
	
	/* Cores Institucionais */
	--exp-primary: #0A57B3;
	--exp-primary-hover: #063266;
	--exp-primary-light: #eff6ff;
	--exp-text-main: #0f172a;
	--exp-text-body: #1e293b;
	--exp-text-muted: #64748b;
	--exp-text-light: #94a3b8;
	--exp-bg-page: #f8fafc;
	--exp-bg-card: #ffffff;
	--exp-border: #e2e8f0;
	--exp-border-light: #f1f5f9;
	
	/* Cores das Linhas */
	--linha-vermelha: #dc2626;
	--linha-vermelha-bg: #fee2e2;
	--linha-vermelha-text: #991b1b;
	--linha-vermelha-border: #fca5a5;
	
	--linha-azul: #2563eb;
	--linha-azul-bg: #dbeafe;
	--linha-azul-text: #1e40af;
	--linha-azul-border: #93c5fd;
	
	--linha-verde: #16a34a;
	--linha-verde-bg: #dcfce7;
	--linha-verde-text: #166534;
	--linha-verde-border: #86efac;
	
	/* Raios e Sombras */
	--exp-radius-sm: 8px;
	--exp-radius-md: 12px;
	--exp-radius-lg: 16px;
	--exp-radius-pill: 30px;
	--exp-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.04);
	--exp-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06);
	--exp-shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.10);
	--exp-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset Base */
.expresso-pagina {
	font-family: var(--exp-font);
	color: var(--exp-text-body);
	background-color: var(--exp-bg-page);
	line-height: 1.5;
	padding-bottom: 20px;
	-webkit-font-smoothing: antialiased;
}

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

/* Container Principal com progressão responsiva */
.expresso-container {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}

/* Títulos Globais */
.expresso-secao-titulo {
	display: block;
	font-size: 17.5px;
	font-weight: 800;
	color: var(--exp-text-main);
	margin-top: 0;
	margin-bottom: 3px;
	letter-spacing: -0.3px;
	line-height: 1.25;
	text-transform: none;
}

.expresso-secao-subtitulo {
	color: var(--exp-text-muted);
	font-size: 13px;
	margin: 0 0 12px 0;
	line-height: 1.4;
}

/* ========================================================
   SUB-CABEÇALHO STICKY (BARRA AZUL + MENU INTEGRADO)
   ======================================================== */

.expresso-sticky-subcabecalho {
	position: -webkit-sticky;
	position: sticky;
	top: var(--site-header-height, 0px);
	z-index: 7500;
	width: 100%;
	background: #ffffff;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
	transition: top 0.1s ease;
}

/* 1. Hero Compacto (Somente o texto "Expresso Urupês") */
.expresso-hero-compacto {
	background: linear-gradient(135deg, #0A57B3 0%, #063266 100%) !important;
	color: #ffffff !important;
	padding: 6px 0 !important;
	margin: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.expresso-hero-titulo {
	font-size: 16px;
	font-weight: 900;
	margin: 0;
	padding: 0;
	letter-spacing: -0.3px;
	line-height: 1.2;
	color: #ffffff !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* 2. Barra de Navegação Rápida */
.expresso-nav-compacto {
	background: #ffffff;
	border-bottom: 1px solid var(--exp-border);
	padding: 4px 0;
}

.expresso-nav-lista {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow-x: auto;
	padding: 2px 0;
	margin: 0;
	list-style: none;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.expresso-nav-lista::-webkit-scrollbar {
	display: none;
}

.expresso-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 11px;
	background: var(--exp-bg-page);
	border: 1px solid var(--exp-border);
	border-radius: var(--exp-radius-pill);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--exp-text-body);
	cursor: pointer;
	white-space: nowrap;
	transition: var(--exp-transition);
	min-height: 30px;
}

.expresso-nav-link:hover {
	background: var(--exp-primary-light);
	color: var(--exp-primary);
	border-color: #bfdbfe;
}

.dot-linha {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}

.dot-linha.vermelha { background-color: var(--linha-vermelha); }
.dot-linha.azul { background-color: var(--linha-azul); }
.dot-linha.verde { background-color: var(--linha-verde); }

/* 3. Barra de Busca Global (Mobile Spacing) */
.expresso-busca-global-wrap {
	padding: 16px 0 0 0;
	margin-bottom: 22px;
}

.expresso-busca-box {
	background: #ffffff;
	border-radius: var(--exp-radius-lg);
	border: 1px solid var(--exp-border);
	box-shadow: var(--exp-shadow-sm);
	padding: 16px 16px;
}

.expresso-busca-titulo {
	font-size: 17px;
	font-weight: 800;
	color: var(--exp-text-main);
	margin: 0 0 3px 0;
}

.expresso-busca-subtitulo {
	font-size: 12.5px;
	color: var(--exp-text-muted);
	margin: 0 0 12px 0;
}

.expresso-busca-input-wrap {
	position: relative;
	margin-bottom: 10px;
}

.expresso-busca-input-wrap i.icone-busca {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--exp-text-muted);
	font-size: 15px;
	pointer-events: none;
}

.expresso-busca-input {
	width: 100%;
	padding: 11px 40px 11px 40px;
	font-size: 16px;
	font-family: var(--exp-font);
	border: 2px solid var(--exp-border);
	border-radius: var(--exp-radius-pill);
	background: var(--exp-bg-page);
	color: var(--exp-text-main);
	outline: none;
	transition: var(--exp-transition);
	min-height: 46px;
}

.expresso-busca-input:focus {
	border-color: var(--exp-primary);
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(10, 87, 179, 0.12);
}

.btn-limpar-busca {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: var(--exp-text-light);
	font-size: 15px;
	cursor: pointer;
	padding: 6px;
	border-radius: 50%;
	display: none;
}

/* Sugestões e Favoritos */
.expresso-sugestoes-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow-x: auto;
	padding: 2px 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.expresso-sugestoes-wrap::-webkit-scrollbar {
	display: none;
}

.expresso-sugestoes-label {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--exp-text-muted);
	white-space: nowrap;
	margin-right: 2px;
}

.chip-sugestao {
	background: var(--exp-bg-page);
	border: 1px solid var(--exp-border);
	padding: 4px 11px;
	border-radius: var(--exp-radius-pill);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--exp-text-body);
	cursor: pointer;
	white-space: nowrap;
	transition: var(--exp-transition);
	min-height: 30px;
}

.chip-sugestao:hover {
	background: var(--exp-primary-light);
	color: var(--exp-primary);
	border-color: #bfdbfe;
}

.box-favoritos {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--exp-border);
}

.box-favoritos-titulo {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--exp-text-muted);
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.lista-favoritos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.chip-favorito {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #ffffff;
	border: 1px solid var(--exp-border);
	padding: 3px 9px;
	border-radius: var(--exp-radius-pill);
	font-size: 11.5px;
	cursor: pointer;
	transition: var(--exp-transition);
}

.chip-favorito:hover {
	border-color: var(--exp-primary);
	background: var(--exp-primary-light);
}

.chip-favorito-nome {
	font-weight: 700;
	color: var(--exp-text-main);
}

/* ========================================================
   ESPAÇAMENTO VERTICAL ENTRE SEÇÕES (HOME)
   ======================================================== */

.home-secao-linhas {
	margin-bottom: 24px;
}

.home-acoes-mapa-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 24px;
}

.expresso-aviso {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-left: 4px solid var(--exp-primary);
	border-radius: var(--exp-radius-sm);
	padding: 12px 14px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12.5px;
	color: #1e3a8a;
	line-height: 1.45;
	margin-bottom: 24px;
}

.expresso-aviso i {
	font-size: 15px;
	color: var(--exp-primary);
	margin-top: 2px;
	flex-shrink: 0;
}

.home-secao-atendimento {
	margin-bottom: 24px;
}

.expresso-cta-pdf {
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	border-radius: var(--exp-radius-md);
	padding: 18px 16px;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 28px;
}

.expresso-rodape-wrap {
	margin-top: 32px;
	width: 100%;
}

/* ========================================================
   CARDS DE LINHAS (MOBILE & BASE)
   ======================================================== */

.expresso-linhas-grid-compacto {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top: 8px;
}

.card-linha-compacto {
	background: #ffffff;
	border-radius: var(--exp-radius-md);
	border: 1px solid var(--exp-border);
	padding: 14px 16px;
	box-shadow: var(--exp-shadow-sm);
	transition: var(--exp-transition);
	cursor: pointer;
}

.card-linha-compacto:hover {
	border-color: var(--exp-primary);
	box-shadow: var(--exp-shadow-md);
}

.card-linha-compacto.linha-vermelha { border-left: 5px solid var(--linha-vermelha); }
.card-linha-compacto.linha-azul { border-left: 5px solid var(--linha-azul); }
.card-linha-compacto.linha-verde { border-left: 5px solid var(--linha-verde); }

.card-linha-compacto-topo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.card-linha-compacto-qtd {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--exp-text-muted);
}

.card-linha-compacto-resumo {
	font-size: 12.5px;
	color: var(--exp-text-body);
	margin: 0 0 10px 0;
	line-height: 1.4;
}

.card-linha-compacto-btn {
	display: flex;
	justify-content: flex-end;
}

.link-acao-linha {
	font-size: 12px;
	font-weight: 700;
	color: var(--exp-primary);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Botões de Ação de Mapa e Geolocalização */
.btn-card-acao-mapa {
	background: #ffffff;
	border: 1px solid var(--exp-border);
	border-radius: var(--exp-radius-md);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	cursor: pointer;
	transition: var(--exp-transition);
	box-shadow: var(--exp-shadow-sm);
}

.btn-card-acao-mapa:hover {
	border-color: var(--exp-primary);
	background: var(--exp-primary-light);
}

.btn-card-acao-mapa i {
	font-size: 20px;
	color: var(--exp-primary);
	flex-shrink: 0;
}

.btn-card-acao-mapa strong {
	display: block;
	font-size: 14px;
	color: var(--exp-text-main);
	margin-bottom: 2px;
}

.btn-card-acao-mapa span {
	display: block;
	font-size: 12px;
	color: var(--exp-text-muted);
}

/* Atendimento & PDF (Base) */
.card-info-util {
	background: #ffffff;
	border: 1px solid var(--exp-border);
	border-radius: var(--exp-radius-md);
	padding: 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow: var(--exp-shadow-sm);
}

.card-info-util-icone {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--exp-primary-light);
	color: var(--exp-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	margin-bottom: 2px;
}

.card-info-util h4 {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--exp-text-main);
	margin: 0;
}

.card-info-util p {
	font-size: 12.5px;
	color: var(--exp-text-muted);
	margin: 0;
	line-height: 1.45;
}

.card-info-util a {
	color: var(--exp-primary);
	font-weight: 700;
	text-decoration: none;
}

.expresso-cta-pdf-texto h3 {
	font-size: 15px;
	font-weight: 800;
	margin: 0 0 3px 0;
}

.expresso-cta-pdf-texto p {
	font-size: 12.5px;
	color: #cbd5e1;
	margin: 0;
}

/* ========================================================
   ESTILOS DE VIEWS (BUSCA, PONTO, LINHA)
   ======================================================== */

.exp-view {
	padding: 4px 0;
}

.view-header-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--exp-border);
}

.btn-voltar-app {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #ffffff;
	border: 1px solid var(--exp-border);
	padding: 5px 13px;
	border-radius: var(--exp-radius-pill);
	font-size: 12px;
	font-weight: 700;
	color: var(--exp-primary);
	cursor: pointer;
	transition: var(--exp-transition);
	min-height: 34px;
}

.btn-voltar-app:hover {
	background: var(--exp-primary-light);
}

.view-header-titulo {
	font-size: 13px;
	font-weight: 700;
	color: var(--exp-text-muted);
}

/* Resultados de Busca (View 2) */
.lista-resultados-busca {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.item-resultado-busca {
	background: #ffffff;
	border: 1px solid var(--exp-border);
	border-radius: var(--exp-radius-md);
	padding: 14px 16px;
	box-shadow: var(--exp-shadow-sm);
	transition: var(--exp-transition);
}

.item-resultado-busca-topo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

.item-resultado-busca-titulo {
	font-size: 15px;
	font-weight: 800;
	color: var(--exp-text-main);
	margin: 0 0 2px 0;
}

.item-resultado-busca-endereco {
	font-size: 12px;
	color: var(--exp-text-muted);
	margin: 0;
}

.item-resultado-busca-seta {
	color: var(--exp-text-light);
	font-size: 14px;
}

.item-resultado-busca-linhas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed var(--exp-border);
}

.resumo-linha-passante {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.proximo-mini-pill {
	font-size: 11px;
	font-weight: 700;
	color: #047857;
	background: #d1fae5;
	padding: 2px 6px;
	border-radius: 4px;
}

.sem-viagens-mini-pill {
	font-size: 10.5px;
	color: var(--exp-text-muted);
	background: #f1f5f9;
	padding: 2px 6px;
	border-radius: 4px;
}

/* Contexto de Ponto (View 3) */
.card-ponto-contextual-topo {
	background: #ffffff;
	border: 1px solid var(--exp-border);
	border-radius: var(--exp-radius-md);
	padding: 16px 18px;
	box-shadow: var(--exp-shadow-sm);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
}

.ponto-ctx-titulo {
	font-size: 18px;
	font-weight: 800;
	color: var(--exp-text-main);
	margin: 0 0 3px 0;
}

.ponto-ctx-endereco {
	font-size: 12.5px;
	color: var(--exp-text-muted);
	margin: 0;
}

.ponto-ctx-acoes-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.ponto-ctx-linhas-titulo {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--exp-text-muted);
	margin-bottom: 8px;
}

.card-ponto-linha-bloco {
	background: #ffffff;
	border: 1px solid var(--exp-border);
	border-radius: var(--exp-radius-md);
	padding: 14px 16px;
	margin-bottom: 12px;
	box-shadow: var(--exp-shadow-sm);
}

.card-ponto-linha-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.btn-link-linha {
	background: transparent;
	border: none;
	color: var(--exp-primary);
	font-size: 11.5px;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
}

.destaque-proximo-horario-box {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: var(--exp-radius-sm);
	padding: 8px 12px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 10px;
}

.destaque-prox-chamada {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.label-prox {
	font-size: 10.5px;
	font-weight: 800;
	color: #065f46;
}

.hora-prox {
	font-family: monospace;
	font-size: 20px;
	font-weight: 900;
	color: #047857;
}

.hora-depois {
	font-size: 11.5px;
	color: #065f46;
}

.destaque-sem-viagens-hoje {
	font-size: 12px;
	font-weight: 600;
	color: var(--exp-text-muted);
	background: #f1f5f9;
	padding: 6px 10px;
	border-radius: var(--exp-radius-sm);
	margin-bottom: 10px;
}

.label-horarios-programados {
	font-size: 11px;
	font-weight: 700;
	color: var(--exp-text-muted);
	margin-bottom: 6px;
}

.tags-horarios-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tag-horario {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 800;
	font-family: monospace;
	background: var(--exp-bg-page);
	border: 1px solid var(--exp-border);
	color: var(--exp-text-main);
}

.tag-horario.proximo {
	background: var(--exp-primary);
	color: #ffffff;
	border-color: var(--exp-primary);
}

.tag-proximo-badge {
	font-size: 9px;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.25);
	padding: 1px 3px;
	border-radius: 2px;
	font-family: var(--exp-font);
}

/* Contexto de Linha (View 4) */
.card-linha-contextual-topo {
	background: #ffffff;
	border: 1px solid var(--exp-border);
	border-radius: var(--exp-radius-md);
	padding: 16px 18px;
	box-shadow: var(--exp-shadow-sm);
}

.linha-ctx-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.linha-ctx-qtd-texto {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--exp-text-muted);
}

.linha-ctx-descricao {
	font-size: 13px;
	color: var(--exp-text-muted);
	margin: 0 0 12px 0;
	line-height: 1.4;
}

.tabs-contextuais-linha {
	display: flex;
	gap: 6px;
	border-top: 1px solid var(--exp-border-light);
	padding-top: 10px;
}

.tab-sub-linha {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 7px 10px;
	border-radius: var(--exp-radius-pill);
	border: 1px solid var(--exp-border);
	background: var(--exp-bg-page);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--exp-text-body);
	cursor: pointer;
	transition: var(--exp-transition);
}

.tab-sub-linha.active {
	background: var(--exp-primary);
	color: #ffffff;
	border-color: var(--exp-primary);
}

.linha-ctx-conteudo-wrap {
	margin-top: 12px;
}

.painel-viagens-linha,
.painel-pontos-linha {
	background: #ffffff;
	border: 1px solid var(--exp-border);
	border-radius: var(--exp-radius-md);
	padding: 14px 16px;
	box-shadow: var(--exp-shadow-sm);
}

.tabs-scroll-horizontal {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}

.tabs-scroll-horizontal::-webkit-scrollbar {
	display: none;
}

.tab-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 12px;
	background: var(--exp-bg-page);
	border: 1px solid var(--exp-border);
	border-radius: var(--exp-radius-pill);
	font-size: 12px;
	font-weight: 700;
	color: var(--exp-text-body);
	cursor: pointer;
	white-space: nowrap;
	transition: var(--exp-transition);
}

.tab-pill.active {
	background: var(--exp-primary);
	color: #ffffff;
	border-color: var(--exp-primary);
}

.lista-sequencial-viagem {
	display: flex;
	flex-direction: column;
}

.item-linha-sequencial {
	display: flex;
	align-items: center;
	padding: 9px 4px;
	border-bottom: 1px solid var(--exp-border-light);
	gap: 10px;
	cursor: pointer;
	transition: var(--exp-transition);
}

.item-linha-sequencial:hover {
	background: #f8fafc;
}

.item-linha-sequencial.sem-parada {
	opacity: 0.45;
	cursor: default;
}

.item-linha-seq-hora {
	font-family: monospace;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--exp-text-main);
	min-width: 44px;
}

.item-linha-seq-info {
	flex-grow: 1;
}

.item-linha-seq-nome {
	font-size: 13px;
	font-weight: 700;
	color: var(--exp-text-main);
	display: flex;
	align-items: center;
	gap: 5px;
}

.num-ponto-mini {
	font-size: 10.5px;
	font-weight: 800;
	color: var(--exp-text-muted);
}

.item-linha-seq-end {
	font-size: 11.5px;
	color: var(--exp-text-muted);
}

.item-linha-seq-seta {
	color: var(--exp-text-light);
	font-size: 12px;
}

/* Lista de Pontos da Linha (Aba Pontos) */
.lista-pontos-ordem {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.item-ponto-linha-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	background: var(--exp-bg-page);
	border: 1px solid var(--exp-border);
	border-radius: var(--exp-radius-sm);
	cursor: pointer;
	transition: var(--exp-transition);
}

.item-ponto-linha-card:hover {
	border-color: var(--exp-primary);
	background: #ffffff;
}

.item-ponto-linha-info {
	flex-grow: 1;
}

.item-ponto-linha-info h5 {
	font-size: 13px;
	font-weight: 700;
	color: var(--exp-text-main);
	margin: 0 0 2px 0;
}

.item-ponto-linha-info p {
	font-size: 11px;
	color: var(--exp-text-muted);
	margin: 0;
}

.prox-tag-mini {
	font-size: 10.5px;
	color: var(--exp-primary);
	display: inline-block;
	margin-top: 2px;
}

.ponto-numero-circulo {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10.5px;
	font-weight: 800;
	color: #ffffff;
	flex-shrink: 0;
}

.ponto-numero-circulo.vermelha { background-color: var(--linha-vermelha); }
.ponto-numero-circulo.azul { background-color: var(--linha-azul); }
.ponto-numero-circulo.verde { background-color: var(--linha-verde); }

/* Badges de Linha */
.badge-linha {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: var(--exp-radius-pill);
	font-size: 11.5px;
	font-weight: 700;
}

.badge-linha.vermelha {
	background: var(--linha-vermelha-bg);
	color: var(--linha-vermelha-text);
	border: 1px solid var(--linha-vermelha-border);
}

.badge-linha.azul {
	background: var(--linha-azul-bg);
	color: var(--linha-azul-text);
	border: 1px solid var(--linha-azul-border);
}

.badge-linha.verde {
	background: var(--linha-verde-bg);
	color: var(--linha-verde-text);
	border: 1px solid var(--linha-verde-border);
}

/* Botões */
.btn-expresso {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 6px 14px;
	border-radius: var(--exp-radius-pill);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: var(--exp-transition);
	min-height: 36px;
}

.btn-expresso-primary {
	background: var(--exp-primary);
	color: #ffffff;
	border-color: var(--exp-primary);
}

.btn-expresso-primary:hover {
	background: var(--exp-primary-hover);
	color: #ffffff;
}

.btn-expresso-outline {
	background: #ffffff;
	color: var(--exp-primary);
	border-color: var(--exp-primary);
}

.btn-expresso-outline:hover {
	background: var(--exp-primary-light);
}

.btn-expresso-sm {
	padding: 4px 10px;
	font-size: 11.5px;
	min-height: 30px;
}

.btn-icone-acao {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--exp-border);
	background: var(--exp-bg-page);
	color: var(--exp-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--exp-transition);
	font-size: 13px;
}

.btn-icone-acao:hover {
	color: var(--exp-primary);
	border-color: var(--exp-primary);
	background: var(--exp-primary-light);
}

.btn-fav-ponto.ativo {
	color: #eab308;
	border-color: #fde047;
	background: #fefce8;
}

/* Tabela Matriz Completa */
.expresso-tabela-wrap {
	overflow-x: auto;
	border-radius: var(--exp-radius-md);
	border: 1px solid var(--exp-border);
	margin-top: 10px;
}

.expresso-tabela {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
	text-align: left;
}

.expresso-tabela th {
	background: #f1f5f9;
	color: var(--exp-text-main);
	font-weight: 700;
	padding: 9px 12px;
	border-bottom: 2px solid var(--exp-border);
	white-space: nowrap;
}

.expresso-tabela td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--exp-border);
	color: var(--exp-text-body);
}

.expresso-tabela tr:nth-child(even) td { background-color: #fafbfc; }

.expresso-tabela .hora-celula {
	font-family: monospace;
	font-size: 12.5px;
	font-weight: 800;
	text-align: center;
	color: #0f172a;
}

.expresso-tabela .hora-vazia {
	color: var(--exp-text-light);
	text-align: center;
}

/* Modal de Mapa */
.expresso-mapa-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.7);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 12px;
}

.expresso-mapa-modal.visivel {
	display: flex;
}

.expresso-mapa-modal-inner {
	background: #ffffff;
	border-radius: var(--exp-radius-lg);
	width: 100%;
	max-width: 960px;
	height: 88vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: var(--exp-shadow-lg);
}

.expresso-mapa-modal-header {
	padding: 12px 16px;
	border-bottom: 1px solid var(--exp-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.expresso-mapa-modal-titulo {
	font-size: 15px;
	color: var(--exp-text-main);
}

.btn-fechar-mapa-modal {
	background: var(--exp-bg-page);
	border: 1px solid var(--exp-border);
	padding: 5px 12px;
	border-radius: var(--exp-radius-pill);
	font-size: 12px;
	font-weight: 700;
	color: var(--exp-text-body);
	cursor: pointer;
}

#mapa-modal-container {
	flex-grow: 1;
	width: 100%;
	background: #e2e8f0;
}

.expresso-mapa-modal-rodape {
	padding: 10px 16px;
	background: #f8fafc;
	border-top: 1px solid var(--exp-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: var(--exp-text-muted);
}

/* Marker Leaflet */
.custom-ponto-marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px !important;
	height: 24px !important;
	border-radius: 50%;
	color: #ffffff;
	font-weight: 800;
	font-size: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
	border: 2px solid #ffffff;
	cursor: pointer;
}

.custom-ponto-marker.vermelha { background-color: var(--linha-vermelha); }
.custom-ponto-marker.azul { background-color: var(--linha-azul); }
.custom-ponto-marker.verde { background-color: var(--linha-verde); }

/* Toast */
.expresso-toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(80px);
	background: #0f172a;
	color: #ffffff;
	padding: 8px 16px;
	border-radius: var(--exp-radius-pill);
	font-size: 12px;
	font-weight: 600;
	box-shadow: var(--exp-shadow-lg);
	z-index: 100000;
	opacity: 0;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	white-space: nowrap;
}

.expresso-toast.visivel {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.expresso-estado-vazio {
	text-align: center;
	padding: 24px 16px;
	color: var(--exp-text-muted);
}

.expresso-estado-vazio i {
	font-size: 28px;
	color: var(--exp-text-light);
	margin-bottom: 6px;
}

.expresso-estado-vazio h4 {
	font-size: 15px;
	font-weight: 700;
	color: var(--exp-text-main);
	margin: 0 0 3px 0;
}

.expresso-estado-vazio p {
	font-size: 12px;
	margin: 0;
}

/* ========================================================
   PROGRESSÃO RESPONSIVA (TABLET, LAPTOP, DESKTOP)
   ======================================================== */

/* 1. TABLET (min-width: 768px) */
@media (min-width: 768px) {
	.expresso-container {
		max-width: 740px;
		padding: 0 20px;
	}

	.expresso-hero-compacto {
		padding: 8px 0 !important;
	}

	.expresso-hero-titulo {
		font-size: 18px;
	}

	.expresso-busca-box {
		padding: 20px 22px;
	}

	.expresso-linhas-grid-compacto {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}

	.home-acoes-mapa-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.expresso-cta-pdf {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20px 22px;
	}

	.item-linha-sequencial {
		padding: 9px 6px;
	}
}

/* 2. LAPTOP / DESKTOP MÉDIO (min-width: 1024px) */
@media (min-width: 1024px) {
	.expresso-container {
		max-width: 980px;
		padding: 0 24px;
	}

	.expresso-hero-compacto {
		padding: 8px 0 !important;
	}

	.expresso-hero-titulo {
		font-size: 20px;
	}

	.expresso-nav-compacto {
		padding: 5px 0;
	}

	.expresso-secao-titulo {
		font-size: 19px;
	}

	.expresso-busca-box {
		padding: 24px 26px;
	}

	.expresso-busca-titulo {
		font-size: 19px;
	}

	.expresso-busca-subtitulo {
		font-size: 13.5px;
	}

	.expresso-busca-input {
		min-height: 48px;
		font-size: 16.5px;
		padding: 12px 44px;
	}

	.card-linha-compacto {
		padding: 16px 18px;
	}

	.card-linha-compacto-resumo {
		font-size: 13px;
	}

	.btn-card-acao-mapa {
		padding: 16px 20px;
	}

	.btn-card-acao-mapa strong {
		font-size: 15px;
	}

	.btn-card-acao-mapa span {
		font-size: 12.5px;
	}

	.card-info-util {
		padding: 20px 22px;
	}

	.card-info-util h4 {
		font-size: 15.5px;
	}

	.card-info-util p {
		font-size: 13px;
	}

	.expresso-cta-pdf {
		padding: 22px 26px;
	}

	.expresso-cta-pdf-texto h3 {
		font-size: 16.5px;
	}

	.expresso-cta-pdf-texto p {
		font-size: 13px;
	}
}

/* 3. DESKTOP AMPLO (min-width: 1280px a 1920px) */
@media (min-width: 1280px) {
	.expresso-container {
		max-width: 1260px;
		padding: 0 32px;
	}

	/* Hero */
	.expresso-hero-compacto {
		padding: 10px 0 !important;
	}

	.expresso-hero-titulo {
		font-size: 22px;
	}

	/* Navegação Horizontal */
	.expresso-nav-compacto {
		padding: 6px 0;
	}

	.expresso-nav-link {
		padding: 5px 15px;
		font-size: 12.5px;
		min-height: 34px;
	}

	/* Espaçamentos Globais Desktop */
	.expresso-busca-global-wrap {
		padding: 24px 0 0 0;
		margin-bottom: 32px;
	}

	.home-secao-linhas {
		margin-bottom: 34px;
	}

	.home-acoes-mapa-grid {
		gap: 16px;
		margin-bottom: 34px;
	}

	.expresso-aviso {
		padding: 15px 20px;
		font-size: 13.5px;
		margin-bottom: 34px;
	}

	.home-secao-atendimento {
		margin-bottom: 34px;
	}

	.expresso-cta-pdf {
		padding: 26px 32px;
		margin-bottom: 42px;
	}

	.expresso-rodape-wrap {
		margin-top: 44px;
	}

	/* Títulos Desktop */
	.expresso-secao-titulo {
		font-size: 21px;
		margin-bottom: 4px;
	}

	.expresso-secao-subtitulo {
		font-size: 14px;
		margin-bottom: 14px;
	}

	/* Busca Box Desktop */
	.expresso-busca-box {
		padding: 26px 30px;
	}

	.expresso-busca-titulo {
		font-size: 20px;
	}

	.expresso-busca-subtitulo {
		font-size: 14px;
		margin-bottom: 14px;
	}

	.expresso-busca-input {
		min-height: 52px;
		font-size: 17px;
		padding: 13px 48px;
	}

	.chip-sugestao {
		padding: 5px 14px;
		font-size: 12.5px;
		min-height: 32px;
	}

	.expresso-sugestoes-label {
		font-size: 12.5px;
	}

	/* Cards de Linhas Desktop */
	.expresso-linhas-grid-compacto {
		gap: 16px;
	}

	.card-linha-compacto {
		padding: 20px 22px;
	}

	.badge-linha {
		font-size: 12.5px;
		padding: 4px 10px;
	}

	.card-linha-compacto-qtd {
		font-size: 12.5px;
	}

	.card-linha-compacto-resumo {
		font-size: 13.5px;
		line-height: 1.45;
		margin: 10px 0 14px 0;
	}

	.link-acao-linha {
		font-size: 13px;
	}

	/* Atalhos de Mapa Desktop */
	.btn-card-acao-mapa {
		padding: 18px 22px;
		gap: 14px;
	}

	.btn-card-acao-mapa i {
		font-size: 24px;
	}

	.btn-card-acao-mapa strong {
		font-size: 15.5px;
	}

	.btn-card-acao-mapa span {
		font-size: 13px;
	}

	/* Atendimento Desktop */
	.card-info-util {
		padding: 22px 26px;
	}

	.card-info-util-icone {
		width: 38px;
		height: 38px;
		font-size: 17px;
	}

	.card-info-util h4 {
		font-size: 16.5px;
	}

	.card-info-util p {
		font-size: 13.5px;
		line-height: 1.5;
	}

	/* PDF CTA Desktop */
	.expresso-cta-pdf-texto h3 {
		font-size: 17.5px;
	}

	.expresso-cta-pdf-texto p {
		font-size: 13.5px;
	}

	.btn-expresso {
		padding: 8px 18px;
		font-size: 13px;
		min-height: 40px;
	}

	/* Contexto de Ponto e Linha Desktop */
	.card-ponto-contextual-topo {
		padding: 20px 24px;
	}

	.ponto-ctx-titulo {
		font-size: 21px;
	}

	.ponto-ctx-endereco {
		font-size: 14px;
	}

	.card-linha-contextual-topo {
		padding: 20px 24px;
	}

	.linha-ctx-descricao {
		font-size: 14px;
	}

	.item-linha-sequencial {
		padding: 11px 8px;
	}

	.item-linha-seq-hora {
		font-size: 14.5px;
		min-width: 50px;
	}

	.item-linha-seq-nome {
		font-size: 14px;
	}

	.item-linha-seq-end {
		font-size: 12.5px;
	}
}