/*
Theme Name: VIA
Theme URI: https://via.com
Author: VIA.com
Author URI: https://via.com
Description: Tema oficial de VIA.com, la plataforma de transporte inteligente. Diseño profesional, moderno y mobile-first para clientes, conductores y empresas. Pensado para funcionar junto al plugin "VIA - Plataforma de Transporte Inteligente".
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: via-theme
*/

/* =====================================================================
 * Sistema de diseño VIA — identidad "asfalto + línea de carretera"
 * Estas variables alimentan también los componentes del plugin.
 * ================================================================== */
:root {
	--via-ink: #14161d;       /* asfalto */
	--via-ink-soft: #20232e;
	--via-paper: #ffffff;
	--via-mist: #f4f6fa;
	--via-line: #e6e9f0;
	--via-blue: #1e5bd6;      /* acción primaria */
	--via-blue-deep: #1746a8;
	--via-amber: #ffb020;     /* línea de carretera (acento de marca) */
	--via-emerald: #12b76a;
	--via-red: #e5484d;
	--via-muted: #5b6275;

	--via-font-display: "Space Grotesk", system-ui, sans-serif;
	--via-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--via-wrap: 1080px;
	--via-radius: 16px;
}

/* =====================================================================
 * Reset suave
 * ================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

a { color: var(--via-blue); }

h1, h2, h3, h4 { font-family: var(--via-font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; color: var(--via-ink); }

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

/* =====================================================================
 * Contenedor
 * ================================================================== */
.via-container {
	width: 100%;
	max-width: var(--via-wrap);
	margin: 0 auto;
	padding: 0 1.1rem;
}

.via-site-main { padding: 1.4rem 0 5.5rem; min-height: 50vh; }

@media (min-width: 720px) {
	.via-site-main { padding: 2.2rem 0 3rem; }
}

/* =====================================================================
 * Barra superior
 * ================================================================== */
.via-topbar {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--via-ink);
	border-bottom: 3px solid transparent;
	border-image: repeating-linear-gradient(90deg, var(--via-amber) 0 24px, transparent 24px 46px) 1;
}

.via-topbar__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 62px;
}

.via-brand {
	display: inline-flex;
	align-items: baseline;
	gap: .12rem;
	font-family: var(--via-font-display);
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: -.02em;
	color: #fff;
	text-decoration: none;
}

.via-brand span { color: var(--via-amber); }
.via-brand img { max-height: 34px; width: auto; }

.via-nav {
	display: none;
	margin-left: auto;
	gap: .3rem;
	align-items: center;
}

.via-nav a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	font-size: .92rem;
	font-weight: 500;
	padding: .5rem .7rem;
	border-radius: 8px;
	transition: color .12s ease, background .12s ease;
}

.via-nav a:hover,
.via-nav .current-menu-item > a { color: #fff; background: rgba(255, 255, 255, .08); }

.via-topbar__cta { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.via-nav + .via-topbar__cta { margin-left: .4rem; }

.via-pill-btn {
	display: inline-flex;
	align-items: center;
	font-family: var(--via-font-display);
	font-weight: 600;
	font-size: .85rem;
	padding: .5rem .95rem;
	border-radius: 999px;
	text-decoration: none;
	background: var(--via-blue);
	color: #fff;
	white-space: nowrap;
}

.via-pill-btn:hover { background: var(--via-blue-deep); color: #fff; }
.via-pill-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.via-pill-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.via-pill-btn--amber { background: var(--via-amber); color: var(--via-ink); }
.via-pill-btn--amber:hover { background: #ffbe3d; color: var(--via-ink); box-shadow: 0 6px 16px rgba(255,176,32,.35); }

@media (min-width: 860px) {
	.via-nav { display: flex; }
}

/* =====================================================================
 * Navegación inferior (móvil)
 * ================================================================== */
.via-bottomnav {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 1000;
	display: flex;
	background: var(--via-paper);
	border-top: 1px solid var(--via-line);
	box-shadow: 0 -4px 20px rgba(20, 22, 29, .06);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.via-bottomnav a {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .15rem;
	padding: .55rem 0 .5rem;
	font-size: .68rem;
	font-weight: 600;
	color: var(--via-muted);
	text-decoration: none;
}

.via-bottomnav a .ico { font-size: 1.25rem; line-height: 1; }
.via-bottomnav a.active, .via-bottomnav a:hover { color: var(--via-blue); }

@media (min-width: 860px) {
	.via-bottomnav { display: none; }
}

/* =====================================================================
 * Pie de página
 * ================================================================== */
.via-footer {
	background: var(--via-ink);
	color: rgba(255, 255, 255, .72);
	padding: 2.4rem 0 2rem;
	margin-top: 2rem;
}

.via-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.4rem;
}

.via-footer__brand { font-family: var(--via-font-display); font-size: 1.3rem; font-weight: 700; color: #fff; }
.via-footer__brand span { color: var(--via-amber); }
.via-footer p { margin: .4rem 0 0; font-size: .9rem; max-width: 40ch; }

.via-footer nav { display: flex; flex-direction: column; gap: .5rem; }
.via-footer nav a { color: rgba(255, 255, 255, .72); text-decoration: none; font-size: .92rem; }
.via-footer nav a:hover { color: #fff; }

.via-footer__legal {
	margin-top: 1.6rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: .82rem;
	color: rgba(255, 255, 255, .5);
}

@media (min-width: 720px) {
	.via-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
}

/* =====================================================================
 * Páginas estándar
 * ================================================================== */
.via-page { background: var(--via-paper); border: 1px solid var(--via-line); border-radius: var(--via-radius); padding: 1.6rem 1.3rem; }
.via-page__title { margin: 0 0 1rem; font-size: 1.6rem; }
.via-page__content { line-height: 1.7; }
.via-page__content h2 { margin-top: 1.6rem; }
.via-page__content img { border-radius: 12px; }

/* En páginas con shortcodes de VIA, el bloque ya trae su propio diseño. */
.via-page--app { background: transparent; border: 0; padding: 0; }

/* =====================================================================
 * Perfiles públicos (empresa / turismo / tour)
 * ================================================================== */
.via-profile { display: grid; gap: 1.2rem; }

.via-profile__hero {
	background: var(--via-ink);
	color: #fff;
	border-radius: var(--via-radius);
	padding: 1.8rem 1.4rem;
	position: relative;
	overflow: hidden;
}

.via-profile__hero::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 5px;
	background: repeating-linear-gradient(90deg, var(--via-amber) 0 24px, transparent 24px 46px);
}

.via-profile__head { display: flex; align-items: center; gap: 1rem; }
.via-profile__logo { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; background: rgba(255,255,255,.1); flex: none; }
.via-profile__hero h1 { color: #fff; margin: 0 0 .2rem; font-size: 1.7rem; }
.via-profile__city { color: var(--via-amber); font-weight: 600; font-size: .9rem; }
.via-profile__tag { display: inline-block; margin-top: .5rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgba(255,255,255,.12); padding: .25rem .6rem; border-radius: 999px; }

.via-profile__body { display: grid; gap: 1.2rem; }
.via-profile__section { background: var(--via-paper); border: 1px solid var(--via-line); border-radius: var(--via-radius); padding: 1.3rem; }
.via-profile__section h2 { margin: 0 0 .9rem; font-size: 1.15rem; }
.via-profile__desc { white-space: pre-line; line-height: 1.7; }

.via-info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.via-info-list li { display: flex; flex-direction: column; }
.via-info-list li b { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--via-muted); font-weight: 700; }

@media (min-width: 860px) {
	.via-profile { grid-template-columns: 1.6fr 1fr; align-items: start; }
	.via-profile__hero { grid-column: 1 / -1; }
}

/* =====================================================================
 * Utilidades / accesibilidad
 * ================================================================== */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.via-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--via-blue);
	color: #fff;
	padding: .6rem 1rem;
	z-index: 100000;
	border-radius: 0 0 8px 0;
}
.via-skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--via-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =====================================================================
 * Componentes compartidos
 * Permiten que las plantillas del tema (404, archivos, perfiles) se vean
 * bien aunque el plugin no haya cargado su hoja de estilos. En las páginas
 * de la app, el plugin redeclara estas clases con los mismos valores.
 * ================================================================== */
.via-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	font-family: var(--via-font-display);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1;
	padding: .8rem 1.15rem;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
	white-space: nowrap;
}
.via-btn:active { transform: translateY(1px); }
.via-btn--primary { background: var(--via-blue); color: #fff; }
.via-btn--primary:hover { background: var(--via-blue-deep); color: #fff; }
.via-btn--ghost { background: transparent; color: var(--via-ink); border-color: var(--via-line); }
.via-btn--ghost:hover { border-color: var(--via-ink); }
.via-btn--whatsapp { background: #25d366; color: #06371b; }
.via-btn--whatsapp:hover { background: #1fc05c; color: #06371b; }
.via-btn--amber { background: var(--via-amber); color: var(--via-ink); }
.via-btn--small { padding: .5rem .8rem; font-size: .82rem; }
.via-btn--block { display: flex; width: 100%; }

.via-card {
	background: var(--via-paper);
	border: 1px solid var(--via-line);
	border-radius: var(--via-radius);
	padding: 1.2rem;
	box-shadow: 0 1px 2px rgba(20,22,29,.06), 0 8px 24px rgba(20,22,29,.06);
	margin: 0 0 1rem;
}
.via-card h3 { font-family: var(--via-font-display); font-size: 1.1rem; margin: 0 0 .8rem; }

.via-cards { display: grid; gap: .9rem; }
.via-cards--grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.via-muted { color: var(--via-muted); font-size: .9rem; }
.via-h2 { font-family: var(--via-font-display); font-size: 1.4rem; font-weight: 600; margin: 0 0 1rem; }

.via-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.via-table th { text-align: left; font-family: var(--via-font-display); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--via-muted); padding: .55rem .6rem; border-bottom: 2px solid var(--via-line); }
.via-table td { padding: .65rem .6rem; border-bottom: 1px solid var(--via-line); vertical-align: top; }
.via-table tbody tr:last-child td { border-bottom: 0; }

.via-empty {
	text-align: center;
	padding: 2rem 1rem;
	color: var(--via-muted);
	background: var(--via-paper);
	border: 1px dashed var(--via-line);
	border-radius: var(--via-radius);
}
.via-empty h3 { font-family: var(--via-font-display); color: var(--via-ink); margin: 0 0 .4rem; }
.via-empty p { margin: 0 0 .8rem; }

.via-route { display: flex; align-items: center; gap: .5rem; font-family: var(--via-font-display); font-weight: 600; }
.via-route__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--via-blue); flex: none; box-shadow: 0 0 0 3px rgba(30,91,214,.15); }
.via-route__dot--end { background: var(--via-amber); box-shadow: 0 0 0 3px rgba(255,176,32,.22); }
.via-route__line { flex: 1; height: 0; border-top: 2px dashed var(--via-line); min-width: 18px; }

.via-pagination { display: flex; gap: .4rem; flex-wrap: wrap; }
.via-pagination .page-numbers { display: inline-flex; padding: .5rem .8rem; border: 1px solid var(--via-line); border-radius: 8px; text-decoration: none; color: var(--via-ink); background: var(--via-paper); }
.via-pagination .page-numbers.current { background: var(--via-blue); color: #fff; border-color: var(--via-blue); }