/* Cuaderno de Ruta vivo — la estética elegida por la Jefa (2/8/2026)
   Paleta: Papel #F4EEDF · Tinta #17201E · Tomate #E34B36 · Lago #167C80 · Maíz #F2C14E · Piedra #747873
   Provisoria fina hasta que llegue la biblia visual de la mesa. Sin serif (orden de la Jefa). */
* { box-sizing: border-box; margin: 0; }
body { font-family: 'Atkinson Hyperlegible', -apple-system, sans-serif; background: #F4EEDF;
  color: #17201E; font-size: 16px; line-height: 1.5; }
header { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px;
  background: #F4EEDF; border-bottom: 2px solid #17201E; position: sticky; top: 0; z-index: 5; }
.marca { color: #17201E; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.miga { font-size: 13px; color: #747873; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miga a { color: #167C80; }
main { max-width: 680px; margin: 0 auto; padding: 16px 14px 60px; }
h1 { font-size: 22px; margin: 6px 0 2px; }
h2 { font-size: 15px; margin: 22px 0 8px; color: #747873; text-transform: uppercase;
  letter-spacing: .05em; }
.sub { color: #747873; font-size: 14px; margin-bottom: 8px; }
.vacio { color: #747873; font-style: italic; padding: 8px 0; }
.tarjetas { display: flex; flex-direction: column; gap: 10px; }
.tarjeta { background: #FFFDF6; border: 1.5px solid #E3D9C0; border-radius: 14px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
  text-decoration: none; color: inherit; }
.tarjeta.viaje { border-color: #167C80; }
.tarjeta.viaje:active { background: #EFE7D2; }
.portada { height: 68px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 38px; margin-bottom: 8px; }
.portada.ciudad { background: #EBE0C0; }
.portada.ruta { background: #DCE9E4; }
.ico { font-size: 17px; }
.tarjeta small { color: #747873; }
.lista-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dia-chip { background: #FFFDF6; border: 1.5px solid #E3D9C0; border-radius: 12px; padding: 10px 12px;
  display: flex; flex-direction: column; text-decoration: none; color: inherit; gap: 1px; }
.dia-chip.completo { border: 2px double #E34B36; background: #FBF2DC; }
.dia-chip span { font-size: 13px; color: #4a443b; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.dia-chip small { color: #747873; font-size: 12px; }
.sellos-fila { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.sello { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #747873; color: #747873;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  background: transparent; }
.sello.hecho { border: 3px double #E34B36; color: #E34B36; transform: rotate(-8deg); }
.sello.actual { border-color: #17201E; background: #F2C14E; color: #17201E; }
.sello.salteado { border-style: dashed; opacity: .55; }
.sellos-leyenda { color: #747873; display: block; margin-bottom: 10px; }
.timeline { display: flex; flex-direction: column; gap: 8px; }
.parada { background: #FFFDF6; border: 1.5px solid #E3D9C0; border-radius: 12px; padding: 10px 12px;
  display: flex; gap: 10px; align-items: flex-start; }
.parada.hecha { opacity: .62; }
.parada.hecha .cuerpo-parada strong { text-decoration: line-through; }
.parada.saltada { opacity: .55; border-style: dashed; }
.cuerpo-parada { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cuerpo-parada span { font-size: 14px; color: #4a443b; }
.cuerpo-parada small { color: #747873; }
.hora { color: #E34B36; font-weight: 700; font-variant-numeric: tabular-nums; }
button { font: inherit; cursor: pointer; }
.estado { background: none; border: none; font-size: 20px; padding: 2px; }
.borrar { background: none; border: none; color: #C9BB98; font-size: 14px; padding: 2px 4px; }
.agregar { margin: 14px 0; background: #FFFDF6; border: 1.5px dashed #C9BB98; border-radius: 12px;
  padding: 10px 14px; }
.agregar summary { cursor: pointer; color: #167C80; font-weight: 700; }
.agregar form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.fila { display: flex; gap: 8px; flex-wrap: wrap; }
.fila label { flex: 1; display: flex; flex-direction: column; font-size: 12px; color: #747873;
  gap: 2px; min-width: 120px; }
input, select { font: inherit; padding: 9px 10px; border: 1.5px solid #D8CEBD; border-radius: 9px;
  background: #FFFDF9; width: 100%; }
.agregar button, form > button { background: #167C80; color: #FFFDF6; border: none;
  border-radius: 10px; padding: 11px; font-weight: 700; }
.info { background: #FFFDF6; border: 1.5px solid #E3D9C0; border-radius: 12px; padding: 10px 14px;
  margin: 8px 0; }
.info summary { cursor: pointer; font-weight: 700; }
.info table { border-collapse: collapse; margin-top: 8px; width: 100%; }
.info td { border-top: 1px solid #EFE7D2; padding: 6px 8px; font-size: 14px; vertical-align: top; }
.info td:first-child { font-weight: 700; white-space: nowrap; }
.notas { white-space: pre-wrap; font: 13px/1.5 'Atkinson Hyperlegible', sans-serif; color: #4a443b; margin-top: 8px; }
.chip { display: inline-block; background: #F2C14E; color: #17201E; font-weight: 700;
  font-size: 12.5px; border-radius: 8px; padding: 3px 9px; }
footer { text-align: center; color: #B4A88E; font-size: 12px; padding: 20px; }
a { color: #167C80; }

/* === REFUERZO MÓVIL (2/8 noche): "todo chiquito" NUNCA MÁS — letra y botones grandes === */
body { font-size: 17px; }
h1 { font-size: 27px; }
h2 { font-size: 16px; }
.marca { font-size: 20px; }
.sub, .tarjeta small, .dia-chip small { font-size: 14.5px; }
.tarjeta { padding: 16px 18px; gap: 5px; }
.tarjeta.viaje strong { font-size: 20px; }
.portada { height: 86px; }
.portada i { font-size: 44px; }
.portada.ciudad i { color: #8A7B52; }
.portada.ruta i { color: #4C7D70; }
.lista-dias { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.dia-chip { padding: 13px 14px; }
.dia-chip strong { font-size: 16px; }
.dia-chip span { font-size: 14.5px; }
.sello { width: 36px; height: 36px; font-size: 15px; border-width: 2.5px; }
.sellos-fila { gap: 8px; }
.sellos-leyenda { font-size: 14.5px; }
.parada { padding: 14px; gap: 12px; }
.cuerpo-parada strong { font-size: 17.5px; }
.cuerpo-parada span { font-size: 15.5px; }
.cuerpo-parada small { font-size: 14.5px; }
.ico { font-size: 21px; color: #167C80; vertical-align: -3px; }
small .ti, .tarjeta > small .ti { font-size: 15px; vertical-align: -2px; color: #8a7f6d; }
.tarjeta .portada i.ti { font-size: 46px; }
.hora { font-size: 15.5px; }
.estado { font-size: 26px; padding: 4px; }
.borrar { font-size: 17px; padding: 6px; }
input, select { padding: 12px; font-size: 17px; }
.agregar button, form > button { padding: 14px; font-size: 17px; }
.link-ext { font-weight: 700; }
.info summary { font-size: 16px; padding: 4px 0; }
.info td { font-size: 15px; padding: 8px; }

/* === CHASIS NUEVO (2/8): barra de solapas, pantalla Hoy, obras y buscador === */
body { padding-bottom: 84px; }
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; background: #FFFDF6;
  border-top: 2px solid #17201E; display: flex; z-index: 20;
  padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 0 7px; text-decoration: none; color: #747873; }
.tabbar a i { font-size: 24px; }
.tabbar a span { font-size: 11px; font-weight: 700; }
.tabbar a.act { color: #E34B36; }
footer { padding-bottom: 6px; }
.obra { text-align: center; padding: 34px 10px 10px; display: flex; flex-direction: column;
  align-items: center; gap: 12px; }
.obra h1 { font-size: 26px; }
.sub-grande { color: #4a443b; font-size: 16.5px; max-width: 420px; }
.etiqueta-obra { background: #F2C14E; color: #17201E; font-weight: 700; border-radius: 9px;
  padding: 5px 14px; font-size: 13.5px; }
.lista-obra { text-align: left; background: #FFFDF6; border: 1.5px solid #E3D9C0; border-radius: 14px;
  padding: 14px 18px 14px 36px; max-width: 430px; font-size: 15.5px; }
.lista-obra li { margin: 6px 0; }
.boton-lago { background: #167C80; color: #FFFDF6; border-radius: 12px; padding: 13px 22px;
  font-weight: 700; text-decoration: none; font-size: 16px; }
#sugerencias { display: flex; flex-direction: column; gap: 4px; }
.sug { background: #FFFDF6; border: 1.5px solid #D8CEBD; border-radius: 9px; padding: 9px 11px;
  font-size: 14px; cursor: pointer; }
.sug:active { background: #EFE7D2; }
.sug.ok { border-color: #167C80; color: #167C80; font-weight: 700; }
.sug .ti { color: #E34B36; }

/* === MAPA (2/8 noche): el corazón nuevo === */
#mapa-dia { height: 300px; border-radius: 14px; border: 2px solid #17201E; margin: 4px 0 12px; z-index: 1; }
#mapa-viaje { height: 62vh; border-radius: 14px; border: 2px solid #17201E; z-index: 1; }
.pin-num { width: 34px; height: 34px; border-radius: 50%; background: #FFFDF6; border: 3px solid #167C80;
  color: #17201E; font-weight: 700; font-size: 15px; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 2px 6px rgba(23,32,30,.35); font-family: 'Atkinson Hyperlegible', sans-serif; }
.pin-hecho { border-color: #E34B36; color: #E34B36; opacity: .85; }
.leaflet-popup-content { font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 14.5px; }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; background: #E34B36;
  border: 2.5px solid #FFFDF6; box-shadow: 0 1px 5px rgba(23,32,30,.4); }
.maplibregl-popup-content { font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 14.5px;
  border-radius: 10px; }

/* === BAULERA (etapa 2) === */
.doc-fila { flex-direction: row; align-items: center; gap: 12px; }
.doc-link { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0;
  text-decoration: none; color: inherit; }
.doc-link > i { font-size: 30px; color: #E34B36; }
.doc-link strong { font-size: 16px; }
.doc-link small { color: #747873; }
input[type=file] { background: #FFFDF9; border: 1.5px dashed #C9BB98; padding: 14px; border-radius: 10px; }

/* === GASTOS (etapa 3) === */
.tabla-balance { border-collapse: collapse; width: 100%; margin-top: 6px; }
.tabla-balance th { font-size: 12px; color: #747873; text-transform: uppercase; text-align: center; padding: 4px; }
.tabla-balance td { text-align: center; padding: 6px 4px; border-top: 1px solid #EFE7D2; font-size: 15.5px; }
.tabla-balance td:first-child { text-align: left; }

/* === BOTÓN + FLOTANTE: lo urgente a UN toque, estés donde estés === */
.fab { position: fixed; right: 16px; bottom: 92px; width: 60px; height: 60px; border-radius: 50%;
  background: #E34B36; color: #FFFDF6; border: none; box-shadow: 0 4px 14px rgba(23,32,30,.35);
  z-index: 30; display: flex; align-items: center; justify-content: center; }
.fab i { font-size: 30px; }
.fab-menu { position: fixed; right: 16px; bottom: 160px; z-index: 30; display: flex;
  flex-direction: column; gap: 8px; }
.fab-menu a { background: #FFFDF6; border: 2px solid #17201E; border-radius: 12px;
  padding: 12px 16px; font-weight: 700; text-decoration: none; color: #17201E;
  box-shadow: 0 3px 10px rgba(23,32,30,.25); display: flex; gap: 8px; align-items: center; }
.fab-menu a i { color: #E34B36; font-size: 20px; }

/* === MODO AHORA: la guía del próximo tramo === */
#mapa-ahora { height: 46vh; border-radius: 14px; border: 2px solid #17201E; z-index: 1; }
.ahora-tarjeta { background: #FFFDF6; border: 2.5px solid #167C80; border-radius: 16px;
  padding: 16px 18px; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ahora-etq { font-size: 12px; font-weight: 700; color: #747873; letter-spacing: .05em; }
.ahora-lugar { font-size: 22px; }
.ahora-lugar i { color: #167C80; }
.ahora-sub { color: #4a443b; font-size: 15px; }
.ahora-dist { background: #F2C14E; border: 2px solid #E34B36; border-radius: 10px;
  padding: 8px 12px; font-weight: 700; font-size: 16.5px; }
.btn-ya { width: 100%; background: #167C80; color: #FFFDF6; border: none; border-radius: 12px;
  padding: 15px; font-weight: 700; font-size: 17px; }
.btn-saltear { width: 100%; background: #FFFDF6; color: #747873; border: 2px dashed #C9BB98;
  border-radius: 12px; padding: 14px; font-weight: 700; }
.pin-vos { width: 20px; height: 20px; border-radius: 50%; background: #1D6FE0;
  border: 3.5px solid #FFFDF6; box-shadow: 0 0 0 3px rgba(29,111,224,.3), 0 2px 6px rgba(0,0,0,.35); }
.fab-menu[hidden] { display: none; }
.ahora-paso { font-weight: 700; font-size: 16.5px; color: #17201E; }