/* Tu Próximo Tren · Línea Belgrano Norte (Ramal a Villa Rosa) — temas claro/oscuro, móvil primero */
:root{
  color-scheme:dark;
  --bg:#0A0D12;
  --surface:#121821;
  --surface-2:#18202B;
  --line:#222B39;
  --text:#E9EEF6;
  --muted:#8D99AE;
  --faint:#7A879C;
  --accent:#4ADE80;
  --accent-soft:rgba(74,222,128,.12);
  --info:#38BDF8;
  --warn:#FBBF24;
  --danger:#F87171;
  --r:16px;
  --tap:52px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* El atributo hidden tiene que ganarle a cualquier display del autor.
   Sin esta regla, .sheet (display:flex) y otras cajas con display propio
   siguen visibles aunque el JS las marque como ocultas. */
[hidden]{display:none!important}

/* Texto sólo para lectores de pantalla (no ocupa lugar). */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

html,body{margin:0;padding:0}
html{background:var(--bg)}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

.app{
  max-width:520px;
  margin:0 auto;
  padding:max(10px,env(safe-area-inset-top)) 14px calc(13px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:100vh;
  min-height:100dvh;
}

/* El contenido principal repite el ritmo vertical de la app. */
main{display:flex;flex-direction:column;gap:inherit;min-width:0}

/* ---------------------------------------------------------------- topbar */
/* Tres columnas: marca, tren al centro y día + menú a la derecha. La marca
   sigue abriendo el selector de línea y muestra un chevron: es una acción
   importante, sobre todo cuando se habiliten más líneas. En pantallas
   angostas la marca baja un poco el texto para dejar entrar el chevron. */
.topbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:2px;
}
.brand{
  grid-column:1;grid-row:1;
  display:flex;flex-direction:column;min-width:0;width:100%;
  background:none;border:0;padding:2px 0;color:inherit;font:inherit;
  text-align:left;cursor:pointer;border-radius:8px;
}
.brand:active{opacity:.75}
.brand-line{
  display:flex;align-items:center;gap:2px;
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--text);white-space:nowrap;overflow:hidden;
}
.brand-line > span{overflow:hidden;text-overflow:ellipsis}
.brand-chev{display:block;width:8px;height:8px;flex:none}
.brand-chev path{stroke:var(--faint);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.brand-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* A 320–380 px la marca necesita un poco menos de texto para que el chevron
   y el nombre completo entren antes del glifo central. */
@media (max-width:380px){
  .brand-line,.brand-sub{font-size:10.5px}
}

.topbar-logo{
  grid-column:2;grid-row:1;
  display:grid;place-items:center;
  width:24px;height:24px;color:var(--text);pointer-events:none;
}
.topbar-logo svg{display:block;width:24px;height:24px}

.topbar-right{
  grid-column:3;grid-row:1;
  display:flex;align-items:center;justify-content:flex-end;gap:4px;
  justify-self:end;min-width:0;
}

.dia{
  flex:none;
  display:flex;flex-direction:column;align-items:flex-end;gap:0;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:5px 6px;color:var(--text);cursor:pointer;font:inherit;
  transition:border-color .15s,background .15s;
}
.dia:active{background:var(--surface-3, var(--line))}
.dia-hoy{font-size:9px;letter-spacing:.03em;color:var(--muted);white-space:nowrap}
.dia-txt,.dia-txt-corto{font-size:9.5px;font-weight:650;color:var(--text);white-space:nowrap}
.dia-txt-corto{display:none}

.menu-btn{
  flex:none;display:grid;place-items:center;
  width:30px;height:30px;padding:0;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  font:inherit;cursor:pointer;
}
.menu-btn svg{width:16px;height:16px;display:block}
.menu-btn circle{fill:currentColor}
.menu-btn:active{background:var(--line);color:var(--text)}

/* ------------------------------------------------------------------ ruta */
.ruta{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:2px 0;
}
/* La posición final la calcula app.js junto al nombre más largo; este
   right es el respaldo si el JS no corre. No agrega altura a la tarjeta. */
.ruta-swap{
  position:absolute;right:54px;top:50%;transform:translateY(-50%);
  z-index:3;width:30px;height:30px;padding:0;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  cursor:pointer;transition:background .15s,border-color .15s,color .15s,opacity .15s;
}
.ruta-swap svg{width:15px;height:15px;display:block}
.ruta-swap path{stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.ruta-swap:active{background:var(--line);border-color:var(--muted);color:var(--text)}
.ruta-swap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ruta-swap:disabled{opacity:.35;cursor:default}
.ruta-fila{position:relative;z-index:1;display:flex;align-items:center}
.ruta-sel{
  position:relative;
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  min-height:48px;padding:8px 10px 8px 12px;
  background:none;border:0;color:var(--text);font:inherit;
  text-align:left;cursor:pointer;border-radius:12px;
}
.ruta-sel:active{background:var(--surface-2)}
.ruta-punto{width:10px;height:10px;border-radius:50%;flex:none}
.ruta-punto.origen{background:var(--accent);box-shadow:0 0 0 4px rgba(74,222,128,.12)}
.ruta-punto.destino{background:var(--info);box-shadow:0 0 0 4px rgba(56,189,248,.12)}
.ruta-texto{display:flex;flex-direction:column;min-width:0;flex:1}
.ruta-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ruta-valor{font-size:16px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ruta-valor.vacio{color:var(--muted);font-weight:550}

/* Chevron: indica que la fila abre la lista de estaciones. Va a la izquierda
   del wordmark y lo más cerca posible de los nombres; app.js calcula el
   desplazamiento a partir del botón de invertir. */
.ruta-chev{
  position:absolute;left:var(--chev-left,auto);top:50%;right:auto;
  transform:translateY(-50%);z-index:2;
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);
  transition:background .15s,border-color .15s;
}
.ruta-chev svg{width:15px;height:15px;display:block}
.ruta-chev path{stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ruta-sel:active .ruta-chev{background:var(--line);border-color:var(--muted)}
.ruta-sel:active .ruta-chev path{stroke:var(--text)}

.ruta-guion{
  height:10px;margin-left:16px;border-left:2px dotted var(--line);
}

/* Marca de agua "TU PRÓXIMO TREN" en el hueco a la derecha de los chevrones.
   Es decorativa; app.js le ajusta el tamaño y la centra según el espacio
   libre. Si el nombre de la estación achica demasiado el hueco, se oculta. */
.ruta-marca{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;line-height:.78;font-weight:800;letter-spacing:-.045em;
  text-transform:uppercase;color:transparent;-webkit-text-stroke:1px var(--muted);
  opacity:.75;pointer-events:none;white-space:nowrap;font-family:inherit;
  font-size:24px;
}
.ruta-marca span{display:block}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#15202C 0%,var(--surface) 55%);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 16px 16px;
  text-align:center;
}
.hero::after{
  content:"";position:absolute;inset:-40% 30% 55% -10%;
  background:radial-gradient(closest-side,rgba(74,222,128,.16),transparent 70%);
  pointer-events:none;
}
.hero-cabecera{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative}
.hero-kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.hero-sentido{
  font-size:11.5px;font-weight:600;color:var(--info);
  background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.22);
  border-radius:999px;padding:3px 9px;white-space:nowrap;
}
.hero-hora{
  position:relative;
  font-size:58px;line-height:1.02;font-weight:750;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  margin:8px 0 2px;
}
.hero-hora.verde{color:var(--accent)}
.hero-hora.gris{color:var(--faint)}
.hero-cuenta{position:relative;color:var(--muted);font-size:13.5px;min-height:20px}
.hero-cuenta b{color:var(--text);font-weight:650}
.hero-tags{position:relative;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
.hero-tags:empty{margin-top:0}
.tag{
  font-size:11.5px;font-weight:600;border-radius:999px;padding:4px 10px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--muted);
}
.tag.orig{color:var(--warn);border-color:rgba(251,191,36,.28);background:rgba(251,191,36,.09)}
.tag.fin{color:var(--info);border-color:rgba(56,189,248,.28);background:rgba(56,189,248,.09)}
.tag.tren{color:var(--text);font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- bloques */
.bloque{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.bloque-titulo{
  margin:0 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:600;
}
.siguientes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sig{
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:8px 3px;text-align:center;
}
.sig-hora{font-size:15.5px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sig-min{font-size:10.5px;color:var(--faint);margin-top:1px}
.sig.vacia{opacity:.35}
.sig.corta{border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.07)}
.sig.corta .sig-hora{color:#E8C979}
.sig.corta .sig-min{color:var(--warn)}

/* ------------------------------------ fila del recorrido (abre una hoja) */
.bloque-plegable{padding:0;overflow:hidden}
.plegable{
  display:flex;align-items:center;gap:10px;width:100%;min-height:48px;
  padding:10px 12px;background:none;border:0;color:var(--text);font:inherit;
  text-align:left;cursor:pointer;
}
.plegable:active{background:var(--surface-2)}
.plegable-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.plegable .bloque-titulo{margin:0}
.plegable-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plegable-chev{
  flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);
  transition:transform .18s,border-color .18s;
}
.plegable-chev svg{width:14px;height:14px;display:block}
.plegable-chev path{stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------- recorrido */
.recorrido{list-style:none;margin:0;padding:0}
.parada{display:flex;align-items:center;gap:10px;padding:6px 0;position:relative}
.parada + .parada::before{
  content:"";position:absolute;left:4.5px;top:-8px;width:1px;height:16px;background:var(--line);
}
.parada-punto{
  width:10px;height:10px;border-radius:50%;background:var(--line);flex:none;
  border:2px solid var(--surface);
}
.parada.origen .parada-punto{background:var(--accent)}
.parada.destino .parada-punto{background:var(--info)}
.parada-nombre{flex:1;font-size:14px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.parada-nombre small{color:var(--faint);font-size:11px;font-weight:400}
.parada.destino .parada-nombre{font-weight:650;color:var(--text)}
.parada-hora{font-size:14px;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.parada.origen .parada-hora{color:var(--accent)}
.parada.destino .parada-hora{color:var(--info)}
.parada.quedada .parada-nombre{color:var(--muted)}
.parada.extremo .parada-punto{background:transparent;border-color:var(--faint)}
.parada.extremo .parada-nombre{color:var(--muted)}

/* ----------------------------------------------------------------- aviso */
.aviso{
  background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.26);
  color:#F5D48A;border-radius:var(--r);padding:10px 12px;font-size:12.5px;line-height:1.45;
}
.aviso.info{background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.26);color:#9EDCF7}
.aviso b{color:#fff}

/* ------------------------------------------------------------------- pie */
.pie{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:0 2px;margin-top:auto}
.pie-texto{
  font-size:11.5px;color:var(--muted);letter-spacing:.01em;
}

/* ----------------------------------------------------- publicidad/donación */
.anuncio{
  position:relative;
  background:var(--surface);
  border:1px dashed var(--line);
  border-radius:var(--r);
  padding:9px 12px 11px;
  min-height:0;
}
.anuncio-marca{
  display:block;margin-bottom:5px;
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.anuncio.es-donacion{
  border-style:solid;
  border-color:rgba(74,222,128,.22);
  background:linear-gradient(180deg,rgba(74,222,128,.05),transparent);
}
.anuncio.es-donacion .anuncio-marca{color:var(--accent)}

/* Cafecito compacto: se activa sólo cuando hay un aviso en la pantalla
   principal, para que el espacio publicitario siga entrando sin scroll. */
#anuncio-banner.compacto{padding:6px 8px 7px}
#anuncio-banner.compacto .anuncio-marca{display:none}
#anuncio-banner.compacto .donacion{gap:8px}
#anuncio-banner.compacto .donacion-texto b{display:none}
#anuncio-banner.compacto .donacion-texto span{font-size:10.5px;line-height:1.3}
#anuncio-banner.compacto .donacion-icono{width:30px;height:30px;font-size:15px;border-radius:9px}
#anuncio-banner.compacto .donacion-btn{min-height:30px;padding:0 9px;font-size:11px}

/* Banner publicitario principal, debajo de "Los 4 siguientes".
   Muestra el mensaje de venta mientras no haya una red contratada. */
.publicidad{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:50px;overflow:hidden;
}
.publicidad-placeholder{
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:4px;
  width:320px;max-width:100%;min-height:50px;padding:0 10px;
  border:1px dashed var(--line);border-radius:8px;
  color:var(--muted);font-size:11px;font-weight:600;text-align:center;
}
.publicidad-placeholder span{color:var(--faint);font-weight:400}
.publicidad.modo-prueba:empty::after{
  content:"Publicidad · 320×50";
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  width:320px;max-width:100%;height:50px;
  border:1px dashed var(--line);border-radius:8px;
  color:var(--faint);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
}

/* Tercer espacio: Google AdSense, debajo del banner de venta.
   Medidas exactas: 320×100 en móvil y 468×60 en pantallas anchas.
   El alto se reserva para que el anuncio no empuje el contenido cuando
   termina de cargar. */
.publicidad-adsense{min-height:100px}
.adsense-slot{
  width:100%;max-width:728px;min-height:100px;
  display:flex;align-items:center;justify-content:center;
}
.adsense-slot .adsbygoogle{width:320px;max-width:100%;height:100px}
/* Por debajo de 348 px el ancho útil de la app es menor que 320 px. El
   banner ocupa todo el ancho de la pantalla para que el anuncio de 320×100
   no se recorte ni se achique; no genera scroll horizontal. */
@media (max-width:347px){
  .publicidad-adsense{width:calc(100% + 28px);margin-left:-14px;margin-right:-14px}
  .adsense-slot .adsbygoogle{width:320px;max-width:none;flex:none}
}
@media (min-width:501px){
  .publicidad-adsense{min-height:60px}
  .adsense-slot{min-height:60px}
  .adsense-slot .adsbygoogle{width:468px;height:60px}
}
.publicidad-adsense.modo-prueba .adsense-slot:empty::after{
  content:"Google AdSense · 320×100";
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  width:320px;max-width:100%;min-height:100px;
  border:1px dashed var(--line);border-radius:8px;
  color:var(--faint);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
}
@media (min-width:501px){
  .publicidad-adsense.modo-prueba .adsense-slot:empty::after{content:"Google AdSense · 468×60";width:468px;min-height:60px}
}

/* Tarjeta de donación (Cafecito fijo). El link se configura en
   DONACION.url (js/app.js); sin link, el botón no se muestra. */
.donacion{display:flex;align-items:center;gap:10px;min-width:0;width:100%}
.donacion-icono{
  flex:none;display:grid;place-items:center;width:38px;height:38px;
  border-radius:12px;background:var(--surface-2);border:1px solid var(--line);
  font-size:19px;line-height:1;
}
.donacion-texto{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.donacion-texto b{font-size:13.5px;font-weight:650;color:var(--text)}
.donacion-texto span{font-size:11.5px;color:var(--muted);line-height:1.35}
.donacion-btn{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:0 12px;border-radius:999px;
  background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.35);
  color:var(--accent);font-size:12px;font-weight:650;text-decoration:none;
  white-space:nowrap;
}
.donacion-btn:active{background:rgba(74,222,128,.22)}
.donacion-btn.pendiente{
  background:var(--surface-2);border-color:var(--line);color:var(--muted);
  cursor:default;font-weight:600;
}
/* ----------------------------------------------------------------- sheet */
.sheet-velo{position:fixed;inset:0;background:rgba(3,6,10,.66);backdrop-filter:blur(2px);z-index:40}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--surface);border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;
  max-width:520px;margin:0 auto;
  max-height:82vh;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
  animation:subir .22s ease-out;
}
/* Netlify inyecta su badge fijo en la esquina inferior derecha. No lo
   ocultamos: dejamos libre ese espacio para que no tape el final de las
   hojas ni los botones de la bienvenida en pantallas angostas. */
.con-badge-netlify .sheet{
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
@keyframes subir{from{transform:translateY(18px);opacity:.4}to{transform:none;opacity:1}}
.sheet-cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 10px}
.sheet-textos{min-width:0}
.sheet-titulo{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.sheet-sub{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.sheet-cerrar{
  flex:none;display:grid;place-items:center;
  width:36px;height:36px;padding:0;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  font:inherit;font-size:14px;line-height:1;cursor:pointer;
}
.sheet-cerrar:active{background:var(--line);color:var(--text)}
.sheet-buscar{
  margin:0 16px 10px;padding:11px 13px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  font:inherit;font-size:15px;outline:none;
}
.sheet-buscar:focus{border-color:#2E3A4C}
.sheet-lista{overflow-y:auto;padding:0 10px 16px;-webkit-overflow-scrolling:touch}
.opcion{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;color:var(--text);font:inherit;text-align:left;
  padding:13px 8px;min-height:48px;cursor:pointer;border-bottom:1px solid var(--line);
}
.opcion:active{background:var(--surface-2)}
.opcion:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.opcion-nombre{flex:1;font-size:15px}
.opcion-nombre span{display:block;font-size:11.5px;color:var(--faint);margin-top:1px}
.opcion-marca{color:var(--accent);font-size:13px;font-weight:700}
.opcion.futura{opacity:.5;cursor:default}
.opcion.futura .opcion-marca{
  color:var(--faint);font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
}
.sheet-info{
  margin:0 16px 16px;padding:10px 12px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);
  color:var(--muted);font-size:12.5px;line-height:1.5;
}
.sheet-lista-recorrido{padding:0 16px 16px}
.sheet-lista-recorrido .parada{padding:5px 0}

/* Manual de uso: contenido dentro de la hoja, con secciones numeradas. */
.manual{padding:2px 6px 4px}
.manual-seccion{
  display:flex;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--line);
}
.manual-seccion:last-of-type{border-bottom:0}
.manual-ilustracion{
  flex:none;width:120px;align-self:flex-start;
  overflow:hidden;border-radius:10px;
}
.manual-ilustracion svg{display:block;width:100%;height:auto}
/* En el manual las etiquetas se agrandan para que se lean dentro de la
   miniatura; el texto de la sección sigue explicando cada función. */
.manual-ilustracion .ilu-label{font-size:8px}
.manual-texto{min-width:0;flex:1}
.manual-texto h3{
  display:flex;align-items:center;gap:6px;
  margin:0;font-size:14px;font-weight:650;line-height:1.3;color:var(--text);
}
.manual-num{
  flex:none;display:grid;place-items:center;
  width:20px;height:20px;border-radius:7px;
  background:var(--accent-soft);border:1px solid var(--accent-border);
  color:var(--accent);font-size:10px;font-weight:700;
}
.manual-texto p{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.manual-consejo{
  margin:12px 0 4px;padding:10px 12px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);
  color:var(--muted);font-size:12px;line-height:1.5;
}
.manual-consejo b{color:var(--text)}

/* ----------------------------------------------------------------- modal */
.modal-velo{
  position:fixed;inset:0;z-index:70;
  background:rgba(3,6,10,.72);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:8px;
  animation:aparecer .18s ease-out;
}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.modal{
  width:100%;max-width:420px;
  max-height:calc(100dvh - 16px);
  overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:12px 8px 14px;
  display:flex;flex-direction:column;gap:10px;
  animation:subir .22s ease-out;
  -webkit-overflow-scrolling:touch;
}
.con-badge-netlify .modal-velo{padding-bottom:72px}
.con-badge-netlify .modal{max-height:calc(100dvh - 88px)}
.modal-publicidad{padding:12px 12px 14px}
.modal-cabecera{display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal-marca{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.modal-cerrar{
  flex:none;display:grid;place-items:center;
  width:32px;height:32px;padding:0;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  font:inherit;font-size:13px;line-height:1;cursor:pointer;
}
.modal-cerrar:active{background:var(--line);color:var(--text)}
.modal-slot{
  width:100%;min-height:250px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:transparent;
}
/* Bloque de la ventana emergente: 300×250. Queda reservado para publicidad
   propia o una red directa; AdSense no se monta acá por la política de
   ventanas que se abren solas. */
.modal-slot.modo-prueba:empty::after{
  content:"Publicidad · 300×250";
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  width:300px;max-width:100%;height:250px;
  border:1px dashed var(--line);border-radius:12px;
  color:var(--faint);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;padding:0 16px;
}
.modal-publicidad-placeholder{
  box-sizing:border-box;width:300px;max-width:100%;min-height:250px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:18px;border:1px dashed var(--line);border-radius:12px;
  background:var(--surface-2);text-align:center;
}
.modal-publicidad-titulo{
  margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--text);
}
.modal-publicidad-sub{
  margin:0;font-size:12.5px;line-height:1.4;color:var(--muted);
}
.modal-accion{
  width:100%;min-height:46px;border-radius:12px;cursor:pointer;
  background:var(--accent-soft);border:1px solid rgba(74,222,128,.35);
  color:var(--accent);font:inherit;font-size:14.5px;font-weight:650;
}
.modal-accion:active{background:rgba(74,222,128,.2)}
.modal-accion-secundaria{
  background:transparent;border-color:var(--line);color:var(--muted);
  font-weight:600;
}
.modal-accion-secundaria:active{background:var(--surface-2);color:var(--text)}
.modal-accion:focus-visible,
.modal-cerrar:focus-visible,
.sheet-cerrar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Bienvenida de primer inicio: mismo ancho que la ventana de colaboración,
   con el cuerpo desplazable y las acciones siempre visibles. */
.modal-bienvenida{
  padding:12px 12px 12px;
  gap:0;overflow:hidden;
}
.modal-bienvenida .modal-cabecera{flex:none}
.modal-bienvenida-cuerpo{
  min-height:0;overflow-y:auto;padding:2px 2px 0;
  -webkit-overflow-scrolling:touch;
}
.bienvenida-titulo{
  margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em;
  line-height:1.25;color:var(--text);
}
.bienvenida-intro{
  margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);
}
.bienvenida-galeria{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin-top:11px;
}
.bienvenida-tarjeta{
  min-width:0;padding:6px 6px 8px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);
}
.bienvenida-ilustracion{
  display:block;margin-bottom:6px;border-radius:9px;
  overflow:hidden;background:var(--surface);
}
.bienvenida-ilustracion svg{display:block;width:100%;height:auto}
.bienvenida-tarjeta-titulo{
  display:block;font-size:12px;font-weight:650;line-height:1.25;color:var(--text);
}
.bienvenida-tarjeta-texto{
  display:block;margin-top:2px;font-size:11px;line-height:1.4;color:var(--muted);
}
.modal-bienvenida-acciones{
  flex:none;display:flex;flex-direction:column;gap:7px;
  padding-top:8px;
}
.bienvenida-no-mostrar{
  display:flex;align-items:center;gap:8px;min-height:38px;
  padding:0 2px;color:var(--muted);font-size:12px;line-height:1.3;
  cursor:pointer;user-select:none;
}
.bienvenida-no-mostrar input{
  flex:none;width:17px;height:17px;margin:0;
  accent-color:var(--accent);cursor:pointer;
}
.bienvenida-no-mostrar input:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.modal-bienvenida-acciones .modal-accion{min-height:44px;font-size:14px}

/* ---------------------------------------------------- páginas internas */
.pagina{max-width:520px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 18px calc(36px + env(safe-area-inset-bottom))}
.con-badge-netlify .pagina{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
.pagina-cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.pagina h1{font-size:22px;letter-spacing:-.02em;margin:0}
.pagina h2{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin:26px 0 8px;
}
.pagina p{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 10px}
.pagina a{color:var(--info)}
.volver{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--muted);text-decoration:none;
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:7px 12px;flex:none;
}
.volver:active{background:var(--surface-2)}
.datos{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dato{padding:12px 14px;border-bottom:1px solid var(--line)}
.dato:last-child{border-bottom:0}
.dato b{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:3px;font-weight:600}
.dato span{color:var(--muted);font-size:13.5px;line-height:1.5}
.lista-estaciones{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;
  margin:0;padding:0;list-style:none;
}
.lista-estaciones li{font-size:13px;color:var(--muted);padding:4px 0;border-bottom:1px solid var(--line)}
.lista-estaciones .orden{color:var(--faint);font-variant-numeric:tabular-nums;margin-right:6px;font-size:11.5px}
.nota{font-size:12.5px;color:var(--faint)}

@media (min-width:480px){
  .hero-hora{font-size:76px}
  .siguientes{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:359px){
  .brand-line{font-size:10px;letter-spacing:.01em}
  .brand-sub{font-size:10px}
  .topbar{gap:2px}
  .topbar-right{gap:3px}
  .dia{padding:4px 6px}
  .dia-txt{display:none}
  .dia-txt-corto{display:block}
  .menu-btn{width:30px;height:30px}
  /* A 320 px el modal necesita 300 px útiles para el banner de 300×250. */
  .modal-velo{padding:4px}
  .modal{padding:10px 4px 12px}
}

/* Pantallas bajas: la app tiene que entrar sin scroll con el recorrido
   plegado. Se recorta aire, no información. */
@media (max-height:760px){
  .app{gap:9px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .hero{padding:12px 14px 14px}
  .hero-hora{font-size:52px;margin:6px 0 0}
  .hero-cuenta{font-size:13px;min-height:19px}
  .ruta-sel{min-height:46px;padding-top:7px;padding-bottom:7px}
  .bloque{padding:10px}
  .bloque.bloque-plegable{padding:0}
  .sig{padding:7px 2px}
  .anuncio{padding:8px 11px 9px}
  .donacion-icono{width:34px;height:34px;font-size:17px}
  .plegable{min-height:46px;padding:8px 12px}
}
/* Teléfonos muy bajos (iPhone SE y similares): una vuelta más de rosca para
   que la app siga entrando completa, sin scroll. */
@media (max-height:700px){
  .app{gap:6px;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .topbar{gap:2px}
  .brand-line{font-size:11px}
  .brand-sub{font-size:10.5px}
  .dia{padding:3px 6px}
  .dia-hoy{font-size:9px;line-height:1.15}
  .dia-txt,.dia-txt-corto{font-size:9.5px;line-height:1.2}
  .menu-btn{width:34px;height:34px}
  .ruta{padding:0}
  .ruta-sel{min-height:48px;padding:6px 9px 6px 11px}
  .ruta-valor{font-size:15.5px}
  .ruta-label{font-size:10px;line-height:1.1}
  .ruta-guion{height:8px}
  .hero{padding:10px 12px 12px;border-radius:16px}
  .hero-hora{font-size:46px;margin:5px 0 0}
  .hero-cuenta{font-size:12.5px;min-height:18px}
  .hero-tags{margin-top:7px}
  .aviso{padding:8px 10px;font-size:12px;line-height:1.4}
  .bloque{padding:8px}
  .bloque.bloque-plegable{padding:0}
  .sig{padding:5px 2px}
  .sig-hora{font-size:15px}
  .sig-min{font-size:10px}
  .anuncio{padding:6px 10px 7px}
  .anuncio-marca{margin-bottom:3px}
  .donacion-icono{width:30px;height:30px;font-size:15px;border-radius:9px}
  .donacion-texto b{font-size:12.5px}
  .donacion-texto span{font-size:10.5px}
  .donacion-btn{min-height:30px;padding:0 9px;font-size:11px}
  .plegable{min-height:46px;padding:6px 10px}
  .plegable-sub{font-size:11.5px}
  .pie-texto{font-size:10.5px}
}

/* A 320 px de ancho y poca altura, la marca necesita un punto menos para
   entrar completa; la cabecera conserva el icono centrado y el día corto. */
@media (max-width:359px) and (max-height:700px){
  .brand-line{font-size:10px;letter-spacing:.01em}
  .brand-sub{font-size:10px}
}

/* Cuando se activa el espacio de 320×50 (prueba o futura red), el aire
   vertical se recorta un poco para que la pantalla principal siga entrando
   completa a 360×740 y 360×800. */
@media (min-height:761px){
  .app.con-publicidad{gap:8px}
}
@media (min-height:701px) and (max-height:760px){
  .app.con-publicidad{gap:6px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* --------------------------------------------------------- tema claro Nieve
   El modo oscuro sigue siendo la base. Este bloque sólo pisa lo necesario
   cuando <html data-tema="claro">. Las variables cubren la mayor parte; las
   reglas siguientes reemplazan los colores fijos de hero, avisos, tags,
   Cafecito, hojas y modal. */
:root[data-tema="claro"]{
  color-scheme:light;
  --bg:#F2F6FA;
  --surface:#FFFFFF;
  --surface-2:#EAF0F7;
  --surface-3:#DCE6F2;
  --line:#D3DDE9;
  --text:#111827;
  --muted:#536174;
  --faint:#5B6B80;
  --accent:#166534;
  --accent-soft:rgba(22,101,52,.10);
  --accent-border:rgba(22,101,52,.30);
  --accent-active:rgba(22,101,52,.20);
  --info:#0369A1;
  --info-soft:rgba(3,105,161,.10);
  --info-border:rgba(3,105,161,.26);
  --warn:#A84B08;
  --warn-soft:rgba(168,75,8,.09);
  --warn-border:rgba(168,75,8,.28);
  --danger:#B91C1C;
  --overlay:rgba(15,23,42,.42);
  --overlay-strong:rgba(15,23,42,.56);
}
:root[data-tema="claro"] .hero{
  background:linear-gradient(160deg,#FFFFFF 0%,#F0FDF4 55%,#FFFFFF 100%);
}
:root[data-tema="claro"] .hero::after{
  background:radial-gradient(closest-side,rgba(22,101,52,.12),transparent 70%);
}
:root[data-tema="claro"] .hero-sentido{
  background:var(--info-soft);border-color:var(--info-border);color:var(--info);
}
:root[data-tema="claro"] .ruta-punto.origen{
  box-shadow:0 0 0 4px var(--accent-soft);
}
:root[data-tema="claro"] .ruta-punto.destino{
  box-shadow:0 0 0 4px var(--info-soft);
}
:root[data-tema="claro"] .tag.orig{
  color:var(--warn);border-color:var(--warn-border);background:var(--warn-soft);
}
:root[data-tema="claro"] .tag.fin{
  color:var(--info);border-color:var(--info-border);background:var(--info-soft);
}
:root[data-tema="claro"] .sig.corta{
  border-color:var(--warn-border);background:var(--warn-soft);
}
:root[data-tema="claro"] .sig.corta .sig-hora{color:var(--warn)}
:root[data-tema="claro"] .aviso{
  background:var(--warn-soft);border-color:var(--warn-border);color:var(--warn);
}
:root[data-tema="claro"] .aviso.info{
  background:var(--info-soft);border-color:var(--info-border);color:var(--info);
}
:root[data-tema="claro"] .aviso b{color:var(--text)}
:root[data-tema="claro"] .anuncio.es-donacion{
  border-color:var(--accent-border);
  background:linear-gradient(180deg,var(--accent-soft),transparent);
}
:root[data-tema="claro"] .donacion-btn{
  background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent);
}
:root[data-tema="claro"] .donacion-btn:active{background:var(--accent-active)}
:root[data-tema="claro"] .sheet-buscar:focus{border-color:var(--accent)}
:root[data-tema="claro"] .sheet-velo{background:var(--overlay)}
:root[data-tema="claro"] .modal-velo{background:var(--overlay-strong)}
:root[data-tema="claro"] .modal-accion{border-color:var(--accent-border)}
:root[data-tema="claro"] .modal-accion:active{background:var(--accent-active)}
:root[data-tema="claro"] .modal-accion-secundaria{border-color:var(--line)}
:root[data-tema="claro"] .modal-accion-secundaria:active{background:var(--surface-2);color:var(--text)}