/* Hoja compartida por las 4 páginas "Horarios Ómnibus <empresa>"
   (horarios-codesa.html / horarios-maldonado.html / horarios-microltda.html /
   horarios-guscapar.html). Generadas por generar-horarios-empresas.mjs a
   partir de horarios.json — la tabla en sí (columna por parada, fila por
   viaje) es el MISMO criterio que index.html usa en "Ver todos los
   horarios" (tablaHorariosHtml), copiado a propósito para que se vea
   idéntico, no una versión aparte. 2026-09-14. */
:root {
  --bg: #f4ecd7; --surface: #ffffff; --surface-2: #eadfbf;
  --ink: #12324a; --ink-soft: #57728a; --border: #ddcda0;
  --accent: #dd8f1c; --accent-soft: rgba(221,143,28,.14);
  --coral: #d3492f; --coral-soft: rgba(211,73,47,.14);
  --coral-finde: #7d1a40; --coral-finde-soft: rgba(125,26,64,.18);
  --ok: #2c8a5b;
  --trail-color: #7c3aed;
  --co-a: #2b64c8; --co-a-soft: rgba(43,100,200,.14);
  --co-b: #7bc47f; --co-b-soft: rgba(123,196,127,.16); --co-b-trail: #1f5c33;
  --co-c: #6a5431; --co-c-soft: rgba(106,84,49,.14);
  --co-d: #29b6d8; --co-d-soft: rgba(41,182,216,.16);
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Libre Franklin",sans-serif; line-height:1.55; }
/* Pedido explícito 2026-09-15: al pasar de Codesa a otra empresa (o al
   revés) se sentía "como otra web" porque el header se iba deslizando
   junto con el resto — un poco más fino de paso, ya que se estaba
   tocando. El header queda FIJO en su lugar durante la transición
   (view-transition-name propio, sin animación — ver más abajo) porque es
   idéntico en las 4 páginas: lo único que tiene sentido que se mueva es
   el contenido de abajo, no la marca. */
.topbar { display:flex; align-items:center; gap:10px; padding:10px 18px; background:var(--surface); border-bottom:1px solid var(--border); view-transition-name: mibus-topbar; }
.brand-logo-link { display:flex; line-height:0; }
.brand-logo { height:22px; width:auto; }
.topbar a.volver { margin-left:auto; font-size:13px; font-weight:800; color:var(--co-a); text-decoration:none; }
::view-transition-group(mibus-topbar),
::view-transition-old(mibus-topbar),
::view-transition-new(mibus-topbar) {
  animation: none;
}
main { max-width:820px; margin:0 auto; padding:28px 18px 80px; }
h1 { font-family:"Bungee",sans-serif; font-size:22px; color:var(--ink); line-height:1.3; margin:0 0 6px; }
.subtitulo { color:var(--ink-soft); font-size:13.5px; margin:0 0 22px; }
.intro { font-size:15px; margin-bottom:22px; }
/* ---------------------------------------------------------------
   Transición de PÁGINA COMPLETA entre empresas — pedido explícito
   2026-09-15 ("que toda la página venga de ese lado, no sólo el
   cambio chico"). Usa Cross-Document View Transitions (API nueva de
   Chrome, ver el <script> en <head> de cada página, que lee el mismo
   "?desde=prev/next" que ya usa el carrusel) — en un navegador que no la
   soporte, esto no hace nada raro: sigue navegando normal, sin
   animación, exactamente como antes.
   --------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}
html:active-view-transition-type(pagina-desde-next)::view-transition-old(root) { animation: paginaSaleIzq .32s ease both; }
html:active-view-transition-type(pagina-desde-next)::view-transition-new(root) { animation: paginaEntraDer .32s ease both; }
html:active-view-transition-type(pagina-desde-prev)::view-transition-old(root) { animation: paginaSaleDer .32s ease both; }
html:active-view-transition-type(pagina-desde-prev)::view-transition-new(root) { animation: paginaEntraIzq .32s ease both; }
@keyframes paginaSaleIzq { to { transform: translateX(-100%); } }
@keyframes paginaEntraDer { from { transform: translateX(100%); } }
@keyframes paginaSaleDer { to { transform: translateX(100%); } }
@keyframes paginaEntraIzq { from { transform: translateX(-100%); } }

/* Selector de empresa — carrusel angosto y centrado (pedido explícito
   2026-09-15: "achicalo a la mitad", nunca de punta a punta como el
   buscador de abajo). La actual al medio, con SU ancho propio (crece o
   achica solo según el largo del nombre — nunca se corta) — a los costados,
   una "espiadita" de ancho FIJO (siempre las mismas 3-4 letras visibles,
   sea cual sea el nombre) con degradado hacia el borde de afuera en vez de
   puntos suspensivos: el texto se ancla contra el borde que mira al centro
   (para Guscapar a la izquierda de Codesa, se ve el FINAL de "Guscapar";
   para Maldonado Turismo a la derecha, se ve el PRINCIPIO) y el degradado
   en sí no se mueve nunca — es del contenedor de ancho fijo, no del texto
   — sólo cambia qué letras hay adentro al pasar de empresa. */
.empresas-pager { display:flex; align-items:center; justify-content:center; gap:3px; margin:0 auto 10px; width:fit-content; max-width:100%; }
.pager-actual {
  flex:none; font-family:"Bungee",sans-serif; font-size:15px; letter-spacing:.01em;
  padding:0 8px; text-align:center; white-space:nowrap;
}
.pager-actual.pager-entrando { animation: pagerEntra .28s ease; }
/* Entrada del nombre seleccionado — pedido explícito: "mientras se mueve
   la empresa a ser seleccionada" (ver pagerAnimarEntrada en
   horarios-empresa.js, que le agrega la dirección real vía data-attr) —
   entra deslizando desde el lado por el que se vino, nunca al revés. */
@keyframes pagerEntra {
  from { opacity:0; transform:translateX(var(--pager-entra-x, 0)); }
  to { opacity:1; transform:translateX(0); }
}
.pager-actual[data-entra="next"] { --pager-entra-x: 14px; }
.pager-actual[data-entra="prev"] { --pager-entra-x: -14px; }
.pager-arrow {
  flex:none; display:flex; align-items:center; gap:4px; text-decoration:none;
  color:var(--ink-soft); font-size:11.5px; font-weight:700;
}
.pager-arrow.pager-next { flex-direction:row-reverse; }
.pager-arrow-glyph {
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--surface);
  border:1px solid var(--border); color:var(--ink); font-size:15px; font-weight:800;
}
.pager-peek { flex:none; width:34px; height:15px; overflow:hidden; position:relative; }
.pager-peek span { position:absolute; top:0; white-space:nowrap; color:var(--ink-soft); }
.pager-prev .pager-peek {
  -webkit-mask-image:linear-gradient(to right, transparent, #000 75%);
  mask-image:linear-gradient(to right, transparent, #000 75%);
}
.pager-prev .pager-peek span { right:0; }
.pager-next .pager-peek {
  -webkit-mask-image:linear-gradient(to left, transparent, #000 75%);
  mask-image:linear-gradient(to left, transparent, #000 75%);
}
.pager-next .pager-peek span { left:0; }
.pager-arrow:hover .pager-peek span, .pager-arrow:active .pager-peek span { color:var(--ink); }
.pager-arrow:hover .pager-arrow-glyph, .pager-arrow:active .pager-arrow-glyph { border-color:var(--accent); }
@media (max-width:380px) {
  .pager-actual { font-size:13px; }
}

/* ---------------------------------------------------------------
   "Voy a" — MISMA tarjeta que index.html usa en la pestaña Horarios
   (.horario-voya-card/#horarioVoyaBtn), copiada tal cual a pedido
   explícito 2026-09-14 ("igual a la parte de horarios cuando te
   muestra el próximo que viene") en vez de un buscador aparte con look
   propio. Tocar la tarjeta abre el panel de búsqueda de abajo; con
   destino puesto, el lápiz pasa a ser una "×" que lo saca sin abrir
   nada. Las líneas que de verdad pasan cerca se resaltan, el resto
   queda atenuado (nunca oculto del todo — mismo criterio permisivo
   que ya usa el sitio en vivo).
   --------------------------------------------------------------- */
.offline-status { font-size:10.5px; color:var(--ink-soft); margin:-2px 0 10px; text-align:center; min-height:13px; }

.horario-voya-card {
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; font-family:inherit;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:11px 13px;
  margin-bottom:16px; box-shadow:0 2px 8px rgba(18,50,74,.08); cursor:pointer;
}
.horario-voya-icon {
  width:30px; height:30px; border-radius:8px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; flex:none; color:var(--ok);
}
.horario-voya-body { flex:1; min-width:0; }
.horario-voya-label { display:block; font-size:9.5px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }
.horario-voya-value { display:block; font-size:13.5px; font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.horario-voya-card.vacio .horario-voya-value { color:var(--ink-soft); font-weight:600; }
#destinoEditIcon { flex:none; color:var(--ink-soft); }
.horario-voya-card:not(.vacio) #destinoEditIcon {
  color:var(--coral); background:var(--coral-soft);
  border:1.5px solid var(--coral); border-radius:50%; padding:5px; box-sizing:content-box;
}
.horario-voya-hint { font-size:11px; color:var(--ink-soft); padding:0 3px 12px; margin:0; }

.destino-buscador-panel { position:relative; margin:0 0 8px; }
.destino-buscador-panel input {
  width:100%; font-size:15px; font-family:inherit; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--accent); border-radius:12px; padding:12px 14px;
}
.destino-buscador-panel input:focus { outline:none; }
.destino-sugerencias {
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 14px 34px rgba(18,50,74,.16); max-height:260px; overflow-y:auto;
}
.destino-sugerencias button {
  display:block; width:100%; text-align:left; border:none; background:none; font:inherit; color:var(--ink);
  padding:10px 14px; cursor:pointer;
}
.destino-sugerencias button:hover, .destino-sugerencias button:focus { background:var(--surface-2); }
/* Vacío por default (sin destino elegido no tiene sentido reservarle
   espacio) — sólo ocupa lugar cuando de verdad tiene chips adentro (ver
   elegirDestino en horarios-empresa.js). Bug real encontrado 2026-09-15:
   un <div> vacío con margin-bottom igual reserva ese espacio aunque no
   haya nada para mostrar — quedaba un hueco fijo arriba de cada línea. */
.destino-jump { display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.destino-jump:not(:empty) { margin:0 0 16px; }
.destino-jump a {
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:700; text-decoration:none;
  background:var(--accent-soft); color:var(--ink); border-radius:7px; padding:4px 9px;
}

/* Espacio de publicidad (AdSense) — 2026-09-16. Centrado, con aire propio
   arriba/abajo para no pegarse ni al buscador ni al cuadro de líneas. */
.ad-slot-contenido { margin: 20px 0; text-align: center; overflow: hidden; }

/* Bloque de una línea — mismo esqueleto que .horario-linea de index.html
   (ver horarioCardCompletoHtml), sin la parte que depende de "ahora
   mismo" (no hay hero de "próximo", no hay fila ".cerca": esto es un
   cuadro fijo, no una vista en vivo). */
.horario-linea { border-top:1px solid var(--border); padding-top:14px; margin-top:14px; }
.horario-linea:first-of-type { border-top:none; padding-top:0; margin-top:0; }
.horario-linea-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.horario-badge {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  min-width:32px; height:32px; padding:0 7px; border-radius:9px;
  font-family:"Bungee",sans-serif; color:#fff; font-size:13px;
}
.horario-linea-info { flex:1; min-width:0; }
.horario-linea-titulo-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.horario-linea-titulo { font-size:13.5px; font-weight:800; color:var(--ink); }
.ver-recorrido-btn {
  font-size:11px; font-weight:800; color:var(--trail-color); background:none; border:1px solid var(--trail-color);
  border-radius:999px; padding:3px 10px; cursor:pointer; white-space:nowrap;
}
.ver-recorrido-btn:hover { background:var(--trail-color); color:#fff; }
.horario-linea-leyenda { display:flex; align-items:center; gap:10px; margin-left:auto; flex:none; }
.horario-linea-leyenda-item { display:flex; align-items:center; gap:4px; font-size:9.5px; color:var(--ink-soft); white-space:nowrap; }
.horarios-color-dot { width:8px; height:8px; border-radius:3px; flex:none; }
.horarios-color-dot.ref-domingo { background:var(--coral); }
.horarios-color-dot.ref-finde { background:var(--coral-finde); }
.horario-linea-desc { font-size:11.5px; color:var(--ink-soft); margin-top:1px; }
.horario-linea-nota { font-size:11.5px; color:var(--ink-soft); font-style:italic; margin-top:1px; }
.horario-proximamente {
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--coral); border:1px solid var(--coral); border-radius:999px; padding:2px 8px; flex:none;
}
.horario-vacio { font-size:11.5px; color:var(--ink-soft); font-style:italic; }
.horario-sentido + .horario-sentido { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.horario-sentido-label { font-size:12px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); margin-bottom:5px; }

/* Destino elegido: la línea que SÍ pasa cerca se resalta; las demás se
   atenúan (nunca se ocultan del todo — mismo criterio que el resto del
   sitio, ver comentario de arriba). */
.horario-linea.sirve-destino { background:var(--accent-soft); border-radius:10px; padding:14px 10px; margin:14px 0; border-top:none; }
.horario-linea.sirve-destino:first-of-type { margin-top:0; }
.destino-pill-linea {
  font-size:10px; font-weight:800; color:#1c1200; background:var(--accent); border-radius:999px;
  padding:2px 8px; flex:none;
}
.destinos-activos .horario-linea:not(.sirve-destino) { opacity:.45; }

/* Cuadro real (columna por parada, fila por viaje) — idéntico a
   .horario-tabla de index.html. */
.horario-tabla-wrap {
  overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:8px;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)),
    linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) 100% 0,
    linear-gradient(to right, rgba(18,50,74,.32), rgba(18,50,74,0)),
    linear-gradient(to left, rgba(18,50,74,.32), rgba(18,50,74,0)) 100% 0;
  background-repeat:no-repeat; background-color:var(--surface);
  background-size:24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment:local, local, scroll, scroll;
}
.horario-tabla { border-collapse:separate; border-spacing:0; font-family:"IBM Plex Mono",monospace; font-size:11px; white-space:nowrap; width:100%; }
.horario-tabla th, .horario-tabla td { padding:4px 8px; text-align:center; }
.horario-tabla th {
  font-family:"Libre Franklin",sans-serif; font-weight:800; font-size:9px;
  text-transform:uppercase; letter-spacing:.02em; color:var(--ink-soft);
  border-bottom:1.5px solid var(--border); vertical-align:bottom;
  white-space:normal; max-width:62px; position:relative;
}
.horario-tabla th .punto-word { display:inline; }
.horario-tabla th .punto-word-inner { display:inline; }
.horario-tabla th .punto-word.punto-desborda {
  display:inline-block; width:100%; box-sizing:border-box; overflow:hidden;
  white-space:nowrap; vertical-align:top; text-align:left;
}
.horario-tabla th .punto-word.punto-desborda .punto-word-inner {
  display:inline-block; will-change:transform; animation:marquee var(--marquee-dur,3s) ease-in-out infinite;
}
@keyframes marquee {
  0%, 12% { transform:translateX(0); }
  50%, 62% { transform:translateX(var(--marquee-dist,0px)); }
  100% { transform:translateX(0); }
}
.horario-tabla td { color:var(--ink); border-bottom:1px solid var(--border); }
.horario-tabla tbody tr:last-child td { border-bottom:none; }
.horario-td-vacio { color:var(--border); }
.horario-tabla tbody tr.ref-domingo td { background:var(--coral-soft); }
.horario-tabla tbody tr.ref-finde td { background:var(--coral-finde-soft); }

.horarios-leyenda { font-size:10.5px; color:var(--ink-soft); padding:10px 4px 4px; line-height:1.6; }
.horarios-color-legend { display:flex; flex-wrap:wrap; gap:14px; padding:0 4px 12px; }
.horarios-color-legend-item { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--ink-soft); }
.horarios-color-legend-item .horarios-color-dot { width:10px; height:10px; }

.cta { display:block; text-align:center; background:var(--accent); color:#1c1200; font-weight:800; text-decoration:none; padding:14px; border-radius:12px; margin:28px 0; }
footer { font-size:12px; color:var(--ink-soft); border-top:1px solid var(--border); padding-top:16px; margin-top:20px; }
footer a { color:var(--co-a); }

/* ---------------------------------------------------------------
   Modal "Ver recorrido" — minimapa Leaflet con el trazado oficial
   (mismo color/grosor que renderTrail en index.html), sin buses en
   vivo: esto es sólo el CAMINO, no dónde está el coche ahora. */
.recorrido-overlay {
  position:fixed; inset:0; background:rgba(18,50,74,.55); display:none;
  align-items:center; justify-content:center; padding:16px; z-index:100;
}
.recorrido-overlay.abierto { display:flex; }
.recorrido-modal {
  background:var(--surface); border-radius:16px; width:100%; max-width:520px;
  max-height:min(560px, 90vh); display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 20px 50px rgba(18,50,74,.3);
}
.recorrido-modal-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); }
.recorrido-modal-titulo { font-size:14px; font-weight:800; flex:1; }
.recorrido-cerrar { border:none; background:var(--surface-2); border-radius:50%; width:30px; height:30px; font-size:16px; cursor:pointer; color:var(--ink-soft); flex:none; }
.recorrido-map { flex:1; min-height:320px; background:var(--surface-2); }
.recorrido-modal-nota { font-size:11px; color:var(--ink-soft); padding:8px 14px 12px; }

@media (max-width:520px) {
  main { padding:20px 14px 70px; }
  h1 { font-size:19px; }
}