/*
 * SolBus — estilos propios del sitio público.
 * ui.css es el Tailwind compilado de la plantilla (no se edita); acá van solo los componentes
 * que la plantilla no traía, usando sus mismas variables de diseño (--primary, --muted, etc.).
 * Este archivo NO se carga en el CMS.
 */

/* Base */
body {
	background: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
}

/* Enlace "Saltar al contenido" visible solo con teclado */
.skip-link:focus {
	position: fixed;
	top: .75rem;
	left: .75rem;
	z-index: 60;
	width: auto;
	height: auto;
	margin: 0;
	padding: .75rem 1rem;
	clip-path: none;
	white-space: normal;
	border-radius: .75rem;
	background: var(--foreground);
	color: var(--background);
	font-weight: 700;
}

:focus-visible {
	outline: 3px solid var(--ring);
	outline-offset: 2px;
}

/* Botón flotante de WhatsApp (heredado del sitio anterior) */
.whatsapp-flotante {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 40;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 9999px;
	background: var(--whatsapp);
	color: #fff;
	box-shadow: var(--shadow-lift);
	transition: transform .2s ease;
}
.whatsapp-flotante:hover { transform: scale(1.06); }

/* Preguntas frecuentes con <details> */
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq .faq-icono { transition: transform .2s ease; }
.faq[open] .faq-icono { transform: rotate(180deg); }

/* Contenido HTML de noticias (editor TinyMCE del CMS) */
.contenido-noticia > * + * { margin-top: 1.25rem; }
.contenido-noticia h2 { font-size: 1.75rem; font-weight: 800; line-height: 1.2; }
.contenido-noticia h3 { font-size: 1.375rem; font-weight: 800; }
.contenido-noticia a { color: var(--accent-foreground); font-weight: 700; text-decoration: underline; }
.contenido-noticia ul { list-style: disc; padding-left: 1.5rem; }
.contenido-noticia ol { list-style: decimal; padding-left: 1.5rem; }
.contenido-noticia img { max-width: 100%; height: auto; border-radius: 1.5rem; }
.contenido-noticia table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.contenido-noticia td, .contenido-noticia th { border: 1px solid var(--border); padding: .5rem .75rem; }
.contenido-noticia blockquote { border-left: 4px solid var(--primary); padding-left: 1rem; color: var(--muted-foreground); }

/* Formularios públicos */
[aria-invalid="true"] { border-color: var(--destructive) !important; }
.mensaje-formulario {
	border-radius: 1rem;
	padding: .875rem 1rem;
	font-weight: 700;
}
.mensaje-ok { background: color-mix(in oklab, var(--success) 15%, transparent); color: var(--success); }
.mensaje-error { background: color-mix(in oklab, var(--destructive) 12%, transparent); color: var(--destructive); }
fieldset { border: 0; margin: 0; padding: 0; }
input[type="file"]::file-selector-button {
	margin-right: .75rem;
	border: 2px solid var(--border);
	border-radius: .75rem;
	background: var(--background);
	padding: .5rem .875rem;
	font-weight: 700;
	cursor: pointer;
}

[hidden] { display: none !important; }

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

/* Utilidades que la plantilla compilada no incluía (mismos breakpoints: sm 40rem, lg 64rem) */
@media (min-width: 40rem) {
	.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sm\:p-8 { padding: 2rem; }
}
@media (min-width: 64rem) {
	.lg\:block { display: block; }
	.lg\:grid-cols-\[1fr_1\.5fr\] { grid-template-columns: 1fr 1.5fr; }
}

/* Bloques con foto de fondo del sitio original (tiempo real en la home) */
.bloque-foto { background-size: cover; background-position: center; }
.bloque-foto::before { content: ""; position: absolute; inset: 0; background: color-mix(in oklab, var(--brand-dark) 72%, transparent); }
.bloque-foto strong { color: var(--primary); font-weight: 800; }
.logo-app { max-height: 80px; width: auto; border-radius: 13px; }

/* Pie con la foto de fondo del sitio original, oscurecida para mantener la legibilidad */
.pie-sitio { position: relative; isolation: isolate; }
.pie-sitio::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--pie-fondo, none); background-size: cover; background-position: center; opacity: .18; }

/* Utilidades usadas por las secciones recuperadas del sitio original (no estaban en el CSS compilado) */
.order-1 { order: 1; }
.order-2 { order: 2; }
.px-6 { padding-inline: 1.5rem; }
.group:hover .group-hover\:gap-3 { gap: .75rem; }
@media (min-width: 40rem) {
	.sm\:py-20 { padding-block: 5rem; }
}
@media (min-width: 48rem) {
	.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.md\:order-1 { order: 1; }
	.md\:order-2 { order: 2; }
}

/* Logo de la cabecera (más grande, a pedido) */
.logo-cabecera { height: 3.5rem; max-width: 240px; width: auto; object-fit: contain; }
@media (min-width: 40rem) { .logo-cabecera { height: 4.75rem; max-width: 320px; } }

/* Selector de sede (primera visita y botón de la cabecera) */
.dialogo-sede { width: min(32rem, calc(100% - 2rem)); margin: auto; max-height: calc(100% - 2rem); overflow: auto; padding: 0; border: 0; background: transparent; color: var(--foreground); }
.dialogo-sede::backdrop { background: color-mix(in oklab, var(--brand-dark) 70%, transparent); backdrop-filter: blur(4px); }
.hover\:border-primary:hover { border-color: var(--primary); }