/* =====================================================================
   LCN Split — componentes.css
   Piezas reutilizables: se usan igual en cualquier pantalla.
   Si algo sirve en más de un lugar, va acá. Si es de una sola pantalla,
   va en pantallas.css.
   ===================================================================== */

/* ---------- Estructura de página ---------- */

/* La cabecera queda fija arriba al deslizar, así que necesita separarse del
   contenido que le pasa por debajo. Va con un beige tostado (pedido de
   Christian, 10/8/2026) y NO con un color de los que significan algo: el
   verde, el rojo y el azul están reservados para la plata y las acciones. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--cabecera);
  border-bottom: 1px solid var(--cabecera-borde);
  padding: 14px 16px 0;
}

.cabecera.sin-solapas { padding-bottom: 14px; }

.cabecera-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Los botones de la derecha de la cabecera (invitar, ajustes). */
.cabecera-acciones {
  display: flex;
  gap: 8px;
  flex: none;
}

/* El parche de LCN Adventure al lado del título. */
.con-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

/* En Inicio (16/8/2026) el logo va al lado del botón de menú hamburguesa:
   sin esto, `justify-content: space-between` de `.cabecera-fila` los deja
   pegados cada uno a una punta con un hueco vacío en el medio. */
.cabecera-fila > .con-logo { flex: 1; }

.logo {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
}

.titulo-pantalla { font-size: 21px; }

.bajada {
  margin: 3px 0 0;
  color: var(--texto-suave);
  font-size: 13.5px;
}

.bajada strong { color: var(--texto); font-weight: 600; }

main {
  padding: 16px 12px 0;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  /* Deja lugar para el botón flotante y la barra de gestos del teléfono. */
  padding-bottom: calc(96px + var(--seguro-abajo));
}

/* ---------- Botón de volver ---------- */

.volver {
  appearance: none;
  border: 0;
  background: none;
  padding: 6px 8px 6px 0;
  margin-left: -6px;
  color: var(--acento);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14.5px;
  font-weight: 550;
  cursor: pointer;
}

/* ---------- Cabecera de pantalla adentro ---------- */
/* Flecha grande y bien visible, y arriba del título de dónde venís: en las
   pantallas de adentro hay que saber siempre en qué sección se está y cómo
   salir sin buscar. */

.cabecera-atras {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.btn-atras {
  appearance: none;
  border: 1px solid var(--borde-fuerte);
  background: var(--tarjeta);
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--acento);
  cursor: pointer;
  flex: none;
  margin-top: 2px;
}

.btn-atras .ico { width: 24px; height: 24px; stroke-width: 2.2; }
.btn-atras:active { background: var(--acento-suave); }

.donde-estoy { min-width: 0; flex: 1; }

.donde-estoy .de-donde {
  display: block;
  font-size: 12px;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-tenue);
  margin-bottom: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Solapas ---------- */

.solapas {
  display: flex;
  gap: 2px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.solapas::-webkit-scrollbar { display: none; }

.solapas {
  padding-bottom: 12px;
}

.solapa {
  appearance: none;
  border: 0;
  background: none;
  /* Medido para que las CINCO entren con aire de sobra en los teléfonos de
     hoy (360, 390 y 430 px): una solapa cortada contra el borde no invita a
     tocarla y encima no deja ver que hay más al costado — ya fue un error de
     este proyecto una vez.
     En 320 px (un iPhone SE viejo) no entran y se deslizan, que es el
     comportamiento previsto.
     Al agregar otra solapa hay que VOLVER A MEDIR con medir-solapas.js. */
  padding: 9px 8px;
  /* Apenas redondeadas, casi cuadradas (pedido de Christian, 10/8/2026).
     Con la pastilla totalmente redonda se veían blandas. */
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 570;
  color: var(--texto-suave);
  cursor: pointer;
  white-space: nowrap;
}

/* La solapa activa va con fondo lleno y no con una rayita: de un vistazo
   se ve en cuál estás parado, sin buscar la línea fina. */
.solapa[aria-selected="true"] {
  background: var(--acento);
  color: #fff;
  font-weight: 640;
}

/* Con TRES solapas en vez de cinco sobra lugar, así que se agrandan (pedido
   de Christian, 10/8/2026): más superficie para el pulgar y más legibles al
   sol. Se reparten el ancho en partes iguales, que además hace que la
   seleccionada sea una barra pareja y no una pastilla de ancho variable. */
.solapas.grandes { gap: 6px; }

.solapas.grandes .solapa {
  flex: 1;
  padding: 12px 6px;
  font-size: 14.5px;
}

/* El título del viaje, entre la hamburguesa y los tres puntitos. */
.titulo-viaje { flex: 1; min-width: 0; }

.titulo-viaje .titulo-pantalla {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Un texto de ayuda centrado abajo de un botón ancho. */
.ayuda.centrada { text-align: center; }

/* ---------- Botón redondo de la cabecera ---------- */

.boton-icono {
  appearance: none;
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--texto-suave);
  cursor: pointer;
  flex: none;
}

/* ---------- Listas y filas ---------- */

.lista {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.lista + .lista,
.lista + .bloque,
.bloque + .bloque { margin-top: 14px; }

.fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde);
  min-height: 62px;
  width: 100%;
  text-align: left;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
}

.fila:last-child { border-bottom: 0; }
.fila:active { background: var(--fondo); }
.fila.sin-accion { cursor: default; }
.fila.sin-accion:active { background: none; }

/* Una fila apagada: está ahí, pero es de segundo orden. Se muestra así en vez
   de esconderla, para que se entienda que existe.

   ATENCIÓN, es la misma clase para dos cosas que se tocan distinto, que es
   una trampa ya pisada en este proyecto (`.le-toca`). Se separan por el
   elemento, que es lo que ya dice cuál es cuál:
     · <div>    — el que todavía no entró, en "Quién entró al viaje": no se toca.
     · <button> — el nombre que tiene otro teléfono, en "¿Quién sos?": SÍ se
                  toca desde el 12/8/2026, porque se puede reclamar. Tiene que
                  hundirse al apoyar el dedo como cualquier otra fila, o parece
                  rota. Va un poco menos apagada, porque hay que poder leer el
                  "tocá si sos vos". */
.fila.atenuada { opacity: .5; }
div.fila.atenuada { cursor: default; }
div.fila.atenuada:active { background: none; }
button.fila.atenuada { opacity: .62; }

.fila .centro { flex: 1; min-width: 0; }

.fila .nombre {
  font-weight: 600;
  font-size: 15.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fila .detalle {
  color: var(--texto-tenue);
  font-size: 12.5px;
  margin-top: 1px;
}

.fila .monto { font-weight: 640; font-size: 15.5px; flex: none; }

/* El monto de "Quién puso la plata" en la ficha del gasto: sin ningún otro
   lugar donde mostrarlo (se sacó del encabezado, 16/8/2026), es donde el ojo
   va a buscar el número — un poco más grande que el resto de las filas. */
.fila .monto.grande { font-size: 19px; }

/* "Ver en el mapa" cuando el lugar (o el gasto) YA TIENE ubicación guardada:
   azul sólido con letras blancas, PERMANENTE — no es un aviso de "esto
   acaba de pasar", es el estado "esto tiene ubicación" (mismo azul sólido
   que ya usa la tarjeta "le toca pagar a", `.le-toca`, no el celeste tenue
   de fondo). Antes era una animación de 2,8 s que se apagaba sola;
   Christian, 17/8/2026, la quiso fija: "cuando tiene ubicación guardada que
   se vea azul". El aviso de "esto acaba de pasar" ya lo da el número de
   metros bajando en vivo mientras el GPS busca (ver `#estadoGPS` en
   lugares.js) — no hace falta que el color lo diga también. */
.fila-con-ubicacion { background: var(--acento); }
.fila-con-ubicacion .nombre,
.fila-con-ubicacion .detalle,
.fila-con-ubicacion .flecha { color: #fff; }
/* Sin esto, `.fila:active` (más específico por sumar el pseudo-selector)
   pisaría el fondo azul con el gris genérico de "tocado" al apretar. */
.fila-con-ubicacion:active { background: var(--acento); opacity: .85; }

/* Acciones que no se deshacen (borrar el viaje). El rojo acá significa lo
   mismo que en la plata: cuidado. */
.fila .nombre.peligroso { color: var(--contra); }

/* La marquita del que manda en el viaje (Christian, 12/8/2026: "algo que lo
   identifique, sutil"). Punto LLENO el que organiza, HUECO el que ayuda.

   ES FORMA Y NO COLOR a propósito, y es la regla más dura del proyecto: el
   color sólo se usa cuando significa algo —verde le deben, rojo debe, azul
   acción—. Un cuarto color para "manda" le sacaría fuerza a los tres. Por eso
   toma el gris del texto tenue, que no quiere decir nada.

   El tamaño está elegido para que se vea al lado de un nombre de 15,5 px sin
   competirle: se nota si lo mirás, no si no.

   El disco relleno (dueño) y el anillo (ayudante) no pesan igual al mismo
   tono: el anillo tiene contraste por los dos bordes, el disco por uno solo,
   así que a color parejo el dueño se veía MENOS que el ayudante — quejado
   por Christian el 13/8/2026. El dueño pasa a --texto (gris fuerte) y 9 px;
   el ayudante queda igual. Sigue siendo forma y no color: los dos usan
   grises, ninguno de los tres colores que significan algo en la app. */
.marca-rol {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--texto-tenue);
  /* Sin esto queda pegado a la línea de base y parece un punto de puntuación. */
  vertical-align: 1px;
}

.marca-rol.lleno {
  width: 9px;
  height: 9px;
  border-color: var(--texto);
  background: var(--texto);
}

/* Una fila que abre y cierra lo que tiene abajo.
   La palabra "Ver" al lado de la flecha no es un adorno: una flecha sola se
   lee como "esto te lleva a otra pantalla", y acá no te lleva a ningún lado.
   Con la palabra se entiende que se despliega ahí mismo. */
/* La palabra de acción al final de una fila, en azul porque es una acción.
   La usan el desplegador ("Ver" / "Ocultar") y el nombre que tiene otro
   teléfono en "¿Quién sos?" ("Soy yo"). Va acá y no adentro del detalle
   porque, metida ahí, el renglón se partía en dos y desalineaba la fila. */
.fila .ver-mas {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--acento);
}

/* La flecha apunta hacia abajo mientras está cerrado y gira al abrir: es la
   señal de "acá hay más" que ya conoce cualquiera que use un teléfono. */
.fila.desplegador .flecha {
  transform: rotate(90deg);
  transition: transform .18s ease;
}

.fila.desplegador[aria-expanded="true"] .flecha { transform: rotate(-90deg); }

/* Lo que aparece al desplegar. Va separado de la fila que lo abre, para que
   se lea como contenido nuevo y no como parte de la misma fila. */
.desplegado { margin-top: 12px; }

/* La marquita de "este gasto tiene ubicación guardada", al lado del monto
   en la lista de Gastos. Usa `icono('lugarContorno')` —la misma gota, sin
   relleno— así se distingue POR FORMA de la chapa, que va rellena: dos
   gotas rellenas iguales en el mismo renglón se leían como una sola cosa
   repetida ("está en todos lados", Christian, 14/8/2026; y de nuevo el
   15/8: "es redundante tenerlo en 2 lugares en el mismo renglón"). Azul y
   no rojo, a pedido de Christian —esta marca puntual queda afuera de la
   regla del color a propósito, la chapa de al lado ya usa el rojo.

   El pin de Lugares (`.tocar-mapa .marca-mapa`, más abajo) rompe esta regla
   a propósito desde el 17/8/2026: ahí SÍ va relleno, más grande y blanco.
   No es el mismo caso que motivó lo de arriba — acá está solo, en su propia
   zona azul del otro lado de la fila, no al lado de otra gota rellena. */
.marca-mapa {
  color: var(--acento);
  display: inline-flex;
  flex: none;
}

.marca-mapa .ico { width: 17px; height: 17px; }

/* Dos toques en la misma tarjeta de Lugares (punto Y, 17/8/2026): el
   nombre abre la ficha, el pin va derecho al mapa. La fila deja de ser UN
   botón y pasa a ser un <div> con dos botones adentro (uno no puede ir
   anidado dentro del otro) — cada uno lleva su propio padding y su propio
   estado ":active", porque el padding de `.fila` ya no sirve (se aplicaba
   al botón único de antes). */
/* `align-items: stretch` (pisa el `center` de `.fila`): sin esto,
   `.tocar-mapa` queda del alto de su propio ícono, centrado con aire arriba
   y abajo — Christian, 17/8/2026, lo quiso "todo ese costado de la card de
   fondo azul", de punta a punta de la fila, no una isla chica. */
.fila-lugar { padding: 0; align-items: stretch; }

.fila-lugar .fila-principal {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.fila-lugar .fila-principal:active { background: var(--fondo); }

/* El pin que va derecho al mapa (punto Y, 17/8/2026): Christian lo quiso
   "todo ese costado de la card de fondo azul... como si toda la card fuera
   un botón partido al medio" — no un ícono suelto sin fondo. Ocupa menos de
   la mitad de la fila, a diferencia de `.fila-principal`, que se lleva el
   resto con `flex: 1`.

   Primera vuelta: sólo el ícono, angosto. Segunda vuelta, mismo día,
   probando en el teléfono: "quedó como demasiado angosto... más ancho
   sería mejor, con el globito más grande y blanco macizo, más
   identificable, y un texto que se entienda que es clickeable" — de ahí
   el ícono relleno (no el contorno) más grande, el padding más generoso, y
   la palabra "Mapa" abajo, en vez de dejar el pin solo.

   Las esquinas SÓLO se redondean cuando la fila es la primera o la última
   de la lista — ahí es donde el costado azul llega hasta el borde real,
   redondeado, de la tarjeta (`.lista`, `border-radius: var(--radio)`). En
   una fila del medio el borde de la tarjeta es recto en ese punto, así que
   una esquina redondeada ahí se vería flotando, sin ningún borde con el que
   alinearse. */
.fila-lugar .tocar-mapa {
  flex: none;
  border: 0;
  background: var(--acento);
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.fila-lugar .tocar-mapa .marca-mapa { color: #fff; }
.fila-lugar .tocar-mapa .marca-mapa .ico { width: 25px; height: 25px; }
.fila-lugar .tocar-mapa .texto-mapa {
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .01em;
}
.fila-lugar .tocar-mapa:active { background: var(--acento); opacity: .8; }
.fila-lugar:first-child .tocar-mapa { border-top-right-radius: var(--radio); }
.fila-lugar:last-child .tocar-mapa { border-bottom-right-radius: var(--radio); }

/* La chapa del lugar en la lista SIEMPRE va roja, sin importar si es la
   variante gris o azul (que ahí significa "tiene un gasto enganchado", una
   cosa aparte). Puesta a mano y no adentro del ícono: `icono('lugar')` es
   currentColor como el resto del sistema, y este es el único lugar donde
   ese color se fuerza a rojo. */
.ico-pin-rojo { color: var(--contra); }

/* ---------- Fotos ---------- */

/* Cuatro por fila entran justas en un teléfono angosto; con dos columnas
   las miniaturas quedan grandes y se ve de qué es cada foto sin abrirla. */
.fotos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.foto {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-chico);
  overflow: hidden;
  background: var(--fondo);
}

/* La galería de sólo ver (la ficha de un gasto o un lugar, no el
   formulario): con una sola foto se ve grande, a todo el ancho, en vez de
   la mitad de la grilla sola con el otro lado vacío (Christian, 16/8/2026).
   Con dos o más, la grilla de siempre. */
.fotos.una-sola .foto { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

.foto img {
  width: 100%;
  height: 100%;
  /* Recortada y no deformada: una cara estirada se nota al instante. */
  object-fit: cover;
  display: block;
}

/* La cruz para borrar, sobre la foto. Fondo oscuro sólido y no
   semitransparente: sobre una foto clara, un blanco translúcido desaparece. */
.foto-borrar {
  position: absolute;
  top: 6px; right: 6px;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 22, 26, .78);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.foto-borrar .ico { width: 16px; height: 16px; }

/* El reloj de la foto sacada SIN SEÑAL, que todavía está en la cola.
   Va abajo a la izquierda, lejos de la cruz de borrar: son dos cosas
   distintas y no se pueden confundir de un toque.
   Fondo oscuro sólido por lo mismo que la cruz: sobre una foto clara, un
   blanco translúcido desaparece. */
.foto-espera {
  position: absolute;
  bottom: 6px; left: 6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(20, 22, 26, .78);
  color: #fff;
  display: grid;
  place-items: center;
}

/* Un borde que la distingue del resto sin tapar la foto. No se atenúa la
   imagen a propósito: la foto YA ESTÁ GUARDADA en el teléfono, sólo le falta
   subir. Mostrarla apagada haría pensar que está a medias. */
.foto.esperando { outline: 2px solid var(--aviso); outline-offset: -2px; }

.foto-agregar {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--tarjeta);
  color: var(--texto-suave);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 570;
  cursor: pointer;
}

/* La miniatura se toca para verla en grande, así que tiene que invitar. */
.foto img { cursor: zoom-in; }

/* ---------- Ver una foto en grande ---------- */

/* Fondo negro y nada más: la foto es lo único que importa acá, y cualquier
   color de la app al lado le cambia los tonos a la foto. */
.visor {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  display: grid;
  place-items: center;
  padding: 20px 8px;
}

.visor-foto {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  touch-action: none;   /* el dedo mueve la foto, no la página */
}

.visor-cerrar,
.visor-paso {
  position: absolute;
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.visor-cerrar { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }

/* Las flechas también, aunque el gesto de deslizar funcione: un gesto que no
   se ve no existe para el que no lo prueba. */
.visor-paso.izquierda { left: 10px;  top: 50%; margin-top: -22px; }
.visor-paso.derecha   { right: 10px; top: 50%; margin-top: -22px; }

.visor-cuenta {
  position: absolute;
  bottom: calc(16px + var(--seguro-abajo));
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
}

.botonera.con-aire-arriba { margin-top: 16px; }
.boton.fantasma.peligroso { color: var(--contra); }

.encabezado-bloque {
  margin: 0 0 7px 4px;
  font-size: 12.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-tenue);
}

/* ---------- Chapa de icono ---------- */

.chapa {
  width: 38px; height: 38px;
  border-radius: var(--radio-chico);
  background: var(--acento-suave);
  color: var(--acento);
  display: grid;
  place-items: center;
  flex: none;
}

.chapa.verde   { background: var(--favor-suave);   color: var(--favor); }
.chapa.gris    { background: var(--fondo);         color: var(--texto-suave); }
.chapa.azul    { background: var(--acento-suave);  color: var(--acento); }
/* Un track GPX/KML, distinto de un link de Google Maps (22/8/2026): ver
   `--sendero` en base.css para el porqué del color. */
.chapa.sendero { background: var(--sendero-suave); color: var(--sendero); }

/* El texto al lado del nombre de un track (22/8/2026): el ícono/color solo
   no alcanzaba para que se note que es offroad — mismos colores que la
   chapa, para que se lean como la misma idea. */
.etiqueta-track {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sendero-suave);
  color: var(--sendero);
  font-size: 11px;
  font-weight: 650;
}

/* La chapa de Tareas (antes Equipaje) es un BOTÓN (tilda el ítem), no sólo
   un ícono — sin esto hereda el cursor/fondo por defecto de un <button> y
   queda con un borde raro alrededor de la chapa. Vacía cuando falta, con
   el ícono "listo" cuando ya está tildada. */
.chapa-boton { border: 0; background: none; padding: 0; cursor: pointer; display: flex; }

/* El nombre de una tarea ya tildada. */
.nombre.tachado { text-decoration: line-through; color: var(--texto-tenue); }

/* El cuerpo de una fila (todo lo que no es la chapa ni la mini-acción) como
   BOTÓN propio, para tener tres zonas tocables distintas en la misma fila
   sin anidar un <button> adentro de otro (Tareas, 22/8/2026: tocar la chapa
   tilda, tocar el cuerpo abre "¿quién se encarga?"). Sin ningún estilo
   propio más allá de ocupar el mismo lugar que ocupaba el `.centro` suelto:
   por eso `padding: 0` y `background: none`, para no duplicar el padding
   de `.fila`. */
.fila-cuerpo-boton {
  flex: 1;
  min-width: 0;
  display: block;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.fila-cuerpo-boton:active .nombre { opacity: .7; }

/* ---------- La carita de cada uno ----------

   Redonda y no cuadrada como la chapa a propósito: una cara redonda se lee
   como "una persona" de un vistazo, sin leer el nombre, que es justo para lo
   que está. El dibujo lo arma js/avatares.js. */

/* SIN DISCO DE COLOR ATRÁS (pedido de Christian, 12/8/2026): la cara va suelta
   sobre lo que haya, como una calco. Queda más liviana y se parece más al
   resto de la app, que es sobria. */
.avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  flex: none;
  display: block;
  background: transparent;
}

/* La foto de perfil real (punto GG, 17/8/2026) usa la misma clase `.avatar`
   (y sus modificadores de tamaño) que la carita dibujada, para no duplicar
   ninguna regla — sólo necesita esto de más, porque una foto es un `<img>`,
   no un SVG con su propio recorte circular adentro.

   Agrandada más que la carita a propósito (18/8/2026, pedido de Christian):
   la foto real tiene que notarse más que el dibujo, para reconocer bien a
   la persona — por eso `img.avatar` pisa el tamaño con un número mayor en
   vez de heredar el de `.avatar`. */
img.avatar { object-fit: cover; width: 78px; height: 78px; }

/* Un poco más grande donde la cara ES el contenido y no un adorno de la fila:
   el cartel de "le toca pagar" y la pregunta de quién sos. */
.avatar.grande { width: 70px; height: 70px; }
img.avatar.grande { width: 98px; height: 98px; }

/* Chica donde va pegada a un nombre adentro de un renglón: las listas de
   quién pagó y entre quiénes del formulario de gasto. */
.avatar.chico { width: 27px; height: 27px; }

/* Sobre el azul del cartel de "le toca pagar" la cara SÍ necesita un disco
   claro atrás: sin él, el contorno oscuro del dibujo y el pelo se pierden
   contra el fondo y no se reconoce a nadie. Es la única excepción. */
.avatar.sobre-color {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

/* ---------- Botones ---------- */

.boton {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 18px;
  min-height: var(--alto-tactil);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--acento);
  color: #fff;
}

.boton:disabled { opacity: .5; cursor: default; }
.boton.ancho { width: 100%; }

/* Para el que va DENTRO de una fila, como "Liberar": tiene que caber al lado
   del nombre sin empujarlo ni hacer la fila más alta. */
.boton.chico {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13.5px;
  flex: none;
}

/* Aire antes de un botón suelto que cierra una lista. */
.separador-boton { height: 14px; }

/* Un bloque que necesita separarse más de lo que está arriba. */
.bloque.con-aire { margin-top: 22px; }

.boton.fantasma {
  background: var(--tarjeta);
  color: var(--texto);
  border-color: var(--borde-fuerte);
}

.boton.peligro { background: var(--contra); color: #fff; }

.botonera { display: flex; gap: 10px; }
.botonera .boton { flex: 1; }
/* Cuando un texto de botón es largo (p. ej. "Sacar de este día"), compartir
   la fila con otro botón lo aprieta a dos renglones — apilados entra cómodo
   y cada uno se lee de una sola línea. */
.botonera.vertical { flex-direction: column; }

/* ---------- Botón flotante ---------- */

.flotante {
  position: fixed;
  right: 16px;
  bottom: calc(18px + var(--seguro-abajo));
  z-index: 20;
}

.flotante-boton {
  appearance: none;
  border: 0;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  box-shadow: var(--sombra-alta);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .18s ease;
}

.flotante-boton .ico { width: 26px; height: 26px; stroke-width: 2; }
.flotante[data-abierto="si"] .flotante-boton { transform: rotate(45deg); }

.flotante-opciones {
  position: absolute;
  right: 0;
  bottom: 70px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.flotante:not([data-abierto="si"]) .flotante-opciones { display: none; }

/* Cada opción con su explicación al lado: lo que Splid resuelve bien y
   se copia — nadie duda de qué es "un pago" contra "un gasto". */
.flotante-opcion {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: right;
}

/* Sin cortar las palabras: partido en cuatro renglones se vuelve ilegible
   y se mezcla con la lista que quedó atrás. */
.flotante-opcion .texto { line-height: 1.3; white-space: nowrap; }
.flotante-opcion .titulo { font-weight: 620; font-size: 15px; }
.flotante-opcion .sub { color: var(--texto-suave); font-size: 12.5px; }

.flotante-opcion .redonda {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--tarjeta);
  color: var(--acento);
  box-shadow: var(--sombra-alta);
  display: grid;
  place-items: center;
  flex: none;
}

/* Tapa la pantalla mientras el botón está abierto, para que un toque
   afuera lo cierre y no se dispare sin querer lo que hay debajo.
   Bien opaco: con la lista de saldos asomándose por atrás, los textos de
   las opciones se leían mezclados con los montos. */
.flotante-telon {
  position: fixed;
  inset: 0;
  background: rgba(244, 245, 247, .95);
  z-index: 19;
}

/* ---------- Formularios ---------- */

.campo { margin-bottom: 14px; }

.campo > label {
  display: block;
  font-size: 13px;
  font-weight: 620;
  color: var(--texto-suave);
  margin-bottom: 6px;
}

.campo input[type="text"],
.campo input[type="date"],
.campo input[type="number"],
.campo input[type="password"],
.campo input[type="tel"],
.campo select {
  width: 100%;
  min-height: var(--alto-tactil);
  padding: 10px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 10px;
  background: var(--tarjeta);
}

/* Nota de un lugar (16/8/2026, pedido de Christian: "un poco más grande el
   espacio de nota"): mismo look que los campos de arriba, pero con varias
   líneas de alto en vez de una sola — es lo que la distingue de un campo
   común. `resize: vertical` para no dejar que se estire para los costados y
   desborde la pantalla. */
.campo textarea {
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 10px;
  background: var(--tarjeta);
  font: inherit;
  resize: vertical;
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
}

/* El botón que abre el calendario propio en la fecha del gasto (22/8/2026):
   mismo look que un <input> de `.campo` de al lado (mismo padding, borde,
   fondo, alto táctil) para que "Cuánto salió" y "Cuándo" se vean como el
   mismo tipo de campo compartiendo la fila — no la fila ancha con chapa e
   ícono que se usa para elegir el rango del alojamiento (esa es de un solo
   campo por fila entera, ésta comparte la mitad con el monto). */
.campo-boton-fecha {
  width: 100%;
  min-height: var(--alto-tactil);
  padding: 10px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 10px;
  background: var(--tarjeta);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}
.campo-boton-fecha .ico { color: var(--texto-suave); flex: none; }
.campo-boton-fecha:focus-visible { outline: 2px solid var(--acento); outline-offset: -1px; }

/* Un sí/no con su explicación al lado. Son los primeros casilleros de la app
   (12/8/2026, la pantalla de permisos): hasta acá todo se resolvía con filas
   y botones.

   El TODO es tocable, no sólo el cuadradito: un checkbox de 16 px es
   imposible de acertar con el dedo. Por eso el `label` envuelve las dos
   cosas y tiene el alto táctil de siempre. */
.campo-si-no {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--alto-tactil);
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--tarjeta);
  cursor: pointer;
}

.campo-si-no input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--acento);
}

.campo-si-no > span { font-size: 14.5px; line-height: 1.35; }
.campo-si-no .ayuda { font-size: 12.5px; }

/* El monto es el dato más importante del formulario: se muestra grande. */
.campo-monto input {
  font-size: 26px !important;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ayuda { font-size: 12.5px; color: var(--texto-tenue); margin: 5px 0 0; }
.ayuda.error { color: var(--contra); font-weight: 550; }

/* Un aviso que NO frena nada: la fecha del gasto cae fuera del viaje, pero
   se guarda igual. Va en ámbar y no en rojo justamente por eso: el rojo
   está reservado para lo que está mal de verdad. */
.ayuda.atencion { color: var(--aviso); font-weight: 550; }

/* La precisión del GPS mientras busca en vivo (16/8/2026): mismo criterio
   de arriba, ámbar y no rojo — no está mal, sólo todavía no es buena. */
.texto-aviso { color: var(--aviso); font-weight: 600; }

/* ---------- El mapa táctil para "Ponerla a mano" (15/8/2026) ---------- */
/* Buscar el lugar por nombre o tocar el mapa, en vez de ir a Google Maps a
   copiar un link — pensado para cuando se carga el viaje de golpe, varios
   días después (Christian, 15/8/2026: "buscando ubicación por ubicación de
   todos los lugares puede ser muy incómodo y abandonarlo se entiende"). */

/* El `z-index` (con `position: relative`, que Leaflet ya le pone en línea al
   armar el mapa) es lo que hace que ESTO tenga su propio contexto de
   apilamiento — sin eso, el `.leaflet-popup-pane` de adentro (z-index 700,
   en `leaflet.css`) compite DIRECTO con el `.telon` de cualquier cartel
   (z-index 50) en la raíz del documento, y el popup de un lugar tocado en
   el mapa queda flotando ARRIBA de un cartel abierto encima — se come sus
   toques. Encontrado el 16/8/2026 armando "Ver mapa del viaje": abrir el
   popup de un lugar y, sin cerrarlo, abrir "Armar ruta" dejaba el botón
   "Ver la ficha" del popup tapando los casilleros del cartel. Mismo
   síntoma que "Un aviso que se va solo no puede comerse los toques". */
.mapa-elegir {
  position: relative;
  z-index: 1;
  height: 220px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--borde-fuerte);
}

/* A pantalla completa (15/8/2026): se tapa TODO, hasta el cartel del que
   salió — por eso el z-index queda arriba del `.telon` (50) pero abajo del
   `.aviso-flotante` (60), para que un "Punto marcado" siga viéndose si
   aparece mientras el mapa está grande.

   El `!important` en `position` NO es para pelear contra nuestro propio
   CSS: Leaflet le pone `position: relative` a este mismo div como estilo
   EN LÍNEA (por JavaScript, al armar el mapa) porque no tenía ningún
   `position` propio antes de esto. Un estilo en línea le gana a cualquier
   regla de hoja de estilos sin importar cuántas clases tenga — se probó sin
   el `!important` y el mapa "grande" quedaba con `position: relative`,
   angosto y metido en el medio de la pantalla en vez de taparla entera. */
.mapa-elegir.completo {
  position: fixed !important;
  inset: 0;
  z-index: 65;
  height: 100vh;
  width: 100vw;
  border-radius: 0;
  border: none;
  margin: 0;
}

/* Los botones propios que flotan sobre el mapa (expandir, elegir capa) —
   mismo look que los controles de Leaflet, para no meter un estilo ajeno
   encima del nuestro.
   `touch-action: manipulation` es necesario, no cosmético: sin esto, dos
   toques seguidos casi en el mismo lugar (tocar el botón, dejarlo, tocarlo
   de nuevo) el navegador los lee como "doble toque para hacer zoom" del
   mapa de abajo y se come el segundo click — encontrado con una prueba que
   tocaba el botón de satélite dos veces seguidas y se quedaba pegado. */
.boton-mapa,
.boton-capa {
  background: var(--tarjeta);
  border: none;
  box-shadow: 0 1px 4px rgba(16, 20, 28, .35);
  border-radius: 8px;
  color: var(--texto);
  padding: 0;
  touch-action: manipulation;
}

.boton-mapa {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boton-mapa .ico { width: 18px; height: 18px; }

.boton-capa {
  min-width: 74px;
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 620;
  color: var(--acento);
}

.lista-sugerencias {
  border: 1px solid var(--borde-fuerte);
  border-radius: 10px;
  margin: -4px 0 10px;
  max-height: 180px;
  overflow-y: auto;
}

.sugerencia-lugar {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--borde);
  background: var(--tarjeta);
  min-height: var(--alto-tactil);
}

.sugerencia-lugar:last-child { border-bottom: 0; }
.sugerencia-lugar:active { background: var(--fondo); }
.sugerencia-lugar .nombre { display: block; font-weight: 600; font-size: 14.5px; }
.sugerencia-lugar .detalle { display: block; font-size: 12.5px; color: var(--texto-tenue); }

/* El pin del mapa: la misma gota roja que el resto de la app usa para
   ubicación (`icono('lugar')`) — Christian, 14/8/2026: "todos los íconos de
   ubicación de toda la app los quiero iguales". La sombra lo despega de las
   baldosas del mapa, que son un fondo ocupado y sin eso se pierde adentro. */
.pin-mapa { color: var(--contra); filter: drop-shadow(0 2px 2px rgba(16, 20, 28, .4)); }
.pin-mapa .ico { width: 30px; height: 30px; fill: var(--contra); stroke: none; }

/* ---------- El mapa con TODOS los lugares del viaje (16/8/2026) ---------- */
/* Mismo `.mapa-elegir` que "Ponerla a mano", pero como acá es la pantalla
   entera y no un campo más de un formulario, va bastante más alto — el
   botón de pantalla completa (`agregarControlDeExpandir`) sigue andando
   igual arriba de esto. */
.mapa-conjunto { height: calc(100vh - 260px); min-height: 260px; }

/* El contenido del popup de cada lugar (nombre + "Ver la ficha"): Leaflet le
   pone su propio padding al globo, esto sólo separa el botón del nombre. */
.popup-lugar { text-align: center; }
.popup-lugar b { display: block; margin-bottom: 8px; font-size: 14px; }

/* La atribución que exige la licencia de OpenStreetMap: legible pero chica,
   Leaflet la agrega sola en la esquina del mapa. */
.leaflet-control-attribution { font-size: 10px !important; }

/* Dos campos que se leen juntos y entran en una línea. */
.par-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ---------- Calendario de los días del viaje ---------- */

/* La fila que lo abre. Va con borde propio porque aparece suelta dentro de
   un formulario, no adentro de una lista. */
.selector-fechas {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
}

/* Los meses se scrollean acá adentro, no la pantalla: así los nombres de los
   días quedan fijos arriba mientras se busca el mes. */
.calendario {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 14px;
}

.dias-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 8px 6px;
  border-bottom: 1px solid var(--borde);
  background: var(--fondo);
}

.dias-semana span {
  text-align: center;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--texto-tenue);
}

.meses {
  max-height: 54vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* que no se arrastre la pantalla de atrás */
  padding: 4px 6px 10px;
}

.mes + .mes { margin-top: 6px; }

.mes h4 {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--texto-suave);
  margin: 10px 0 6px 4px;
}

.grilla-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
}

.dia {
  appearance: none;
  border: 0;
  background: none;
  /* Alto fijo en vez de cuadrado: cuadrados quedaban de 50 px de alto y
     entraba poco más de un mes en la pantalla. Así entra un mes y medio y
     el segundo asoma, que es lo que invita a scrollear. */
  min-height: 40px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--texto);
  cursor: pointer;
  /* Sin redondear: los días del medio del viaje se tienen que tocar entre sí
     para que el rango se lea como una franja y no como bolitas sueltas. */
  border-radius: 0;
}

.dia.vacio { cursor: default; }

/* Hoy, marcado sin color: que sea hoy no es bueno ni malo, es una referencia
   para no perderse al scrollear. */
.dia.hoy { font-weight: 700; text-decoration: underline; }

/* La franja del viaje. El azul es el mismo de las acciones: acá significa
   "esto es lo que elegiste". */
.dia.adentro { background: var(--acento-suave); color: var(--acento); }

.dia.punta {
  background: var(--acento);
  color: #fff;
  font-weight: 650;
  border-radius: var(--radio-chico);
}

/* Las puntas se redondean sólo del lado de afuera, para que la franja del
   medio quede pegada y se vea como una sola barra. */
.dia.punta.arranca { border-radius: var(--radio-chico) 0 0 var(--radio-chico); }
.dia.punta.termina { border-radius: 0 var(--radio-chico) var(--radio-chico) 0; }

/* En COLUMNA, no en fila. Con los tres botones en una línea, el ancho mínimo
   del pie era mayor que la pantalla: el cartel se estiraba, y el calendario
   quedaba cortado por la derecha justo en la columna del domingo. */
.calendario-pie {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calendario-pie .mini-accion { align-self: flex-start; }

/* ---------- Pastillas de selección ---------- */

.pastillas { display: flex; flex-wrap: wrap; gap: 7px; }

.pastilla {
  appearance: none;
  background: var(--tarjeta);
  border: 1px solid var(--borde-fuerte);
  /* Esquinas sutiles, no píldora completa (pedido de Christian, 18/8/2026:
     "muy redondeadas las puntas") — mismo radio que .boton, para que las
     pastillas se sientan de la misma familia que el resto de los botones. */
  border-radius: var(--radio-chico);
  padding: 8px 13px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--texto);
}

.pastilla[aria-pressed="true"] {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--acento);
  font-weight: 640;
}

.pastilla .ico { width: 17px; height: 17px; }

/* ---------- Filas con tilde ---------- */

.tilde {
  width: 23px; height: 23px;
  border-radius: 7px;
  border: 1.8px solid var(--borde-fuerte);
  flex: none;
  display: grid;
  place-items: center;
  color: transparent;
  background: var(--tarjeta);
}

[aria-pressed="true"] > .tilde,
.marcado > .tilde {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.tilde .ico { width: 15px; height: 15px; stroke-width: 2.6; }

/* ---------- Diálogo ---------- */

.telon {
  position: fixed;
  inset: 0;
  background: rgba(16, 20, 28, .45);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 50;
}

.dialogo {
  background: var(--tarjeta);
  border-radius: var(--radio);
  padding: 20px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--sombra-alta);
  /* Sin esto, un contenido ancho estira el cartel MÁS QUE LA PANTALLA: el
     telón es una grilla y sus hijos no bajan de su ancho mínimo por defecto.
     Pasó con el calendario, que se cortaba por la derecha. */
  min-width: 0;

  /* Y lo mismo PARA ABAJO, que es peor todavía: un cartel más alto que la
     pantalla se desborda y los botones de abajo quedan afuera, donde el dedo
     no llega. Pasó el 11/8/2026 con el cartel del presupuesto: 943 px de
     alto en una pantalla de 844, y el botón Guardar no se podía tocar.
     No alcanzaba con hacer scroll en la página: el telón es fijo y no
     scrollea. Con esto, el cartel nunca pasa del alto de la pantalla y lo
     que sobra se scrollea adentro. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ---------- El menú lateral (la hamburguesa) ---------- */

/* El telón común centra lo que tiene adentro (es una grilla con
   place-items: center). Acá el panel va PEGADO al borde izquierdo, así que
   no alcanza con volverlo bloque: hay que anular también el centrado, o el
   menú aparece flotando en el medio de la pantalla. Pasó. */
.telon-lateral {
  display: flex;
  place-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.menu-lateral {
  background: var(--tarjeta);
  width: min(78%, 320px);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px 14px calc(16px + var(--seguro-abajo));
  box-shadow: var(--sombra-alta);
  overflow-y: auto;
  /* No ocupa todo el ancho a propósito (pedido de Christian, 10/8/2026):
     el pedazo de pantalla que queda a la derecha es lo que hace entender
     que el viaje sigue ahí atrás y que esto se cierra tocando al costado. */
}

.menu-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.menu-cabecera h2 { font-size: 19px; }

.menu-lista { display: flex; flex-direction: column; gap: 2px; }

.menu-viaje {
  appearance: none;
  border: 0;
  background: none;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 10px;
  border-radius: var(--radio-chico);
  cursor: pointer;
  color: var(--texto);
}

.menu-viaje .centro { flex: 1; min-width: 0; }

.menu-viaje .nombre {
  display: block;
  font-weight: 600;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-viaje .detalle {
  display: block;
  color: var(--texto-tenue);
  font-size: 12.5px;
  margin-top: 1px;
}

/* El viaje abierto, marcado. Sin esto, en un menú de tres o cuatro no se
   sabe de cuál se está viendo la pantalla de atrás. */
.menu-viaje.actual { background: var(--acento-suave); }
.menu-viaje.actual .nombre { color: var(--acento); }

.menu-lateral .boton.ancho { margin-top: 14px; }

/* Lo de abajo de todo: las dos formas de entrar a la app. Van acá TAMBIÉN,
   no sólo en "Mis viajes": quien borra los datos del teléfono tiene que
   poder volver a entrar desde donde esté. */
.menu-pie {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-secundario {
  appearance: none;
  border: 0;
  background: none;
  text-align: left;
  padding: 10px;
  border-radius: var(--radio-chico);
  font-size: 14px;
  color: var(--texto-suave);
  cursor: pointer;
}

/* La línea que separa el bloque de Administración del resto del menú
   (16/8/2026): es de la app en general, no de "mis viajes", y tiene que
   notarse aparte sin gritar. */
.menu-separador {
  border-top: 1px solid var(--borde);
  margin: 14px 0 12px;
}

/* ---------- Hoja que sube desde abajo ---------- */

/* Para los ajustes del viaje: ocho decisiones sueltas que no merecen una
   pantalla entera. Sube desde abajo, donde está el pulgar. */
.telon-hoja {
  display: flex;
  place-items: end stretch;
  align-items: flex-end;
  padding: 0;
}

.hoja {
  background: var(--tarjeta);
  width: 100%;
  max-height: 88vh;
  border-radius: var(--radio) var(--radio) 0 0;
  padding: 10px 14px calc(16px + var(--seguro-abajo));
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-alta);
}

/* La rayita de arriba: es la señal de "esto se arrastra/se cierra" que ya
   conoce cualquiera que use un teléfono. */
.hoja-agarre {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--borde-fuerte);
  margin: 0 auto 12px;
}

.hoja-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.hoja-cabecera h3 { font-size: 17px; }

/* El cuerpo scrollea solo: con doce integrantes desplegados en "quién
   entró", la hoja entera no entra en la pantalla. */
.hoja-cuerpo {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dialogo h3 { font-size: 17px; margin-bottom: 6px; }
.dialogo p { margin: 0 0 18px; color: var(--texto-suave); font-size: 14.5px; }

/* ---------- Opciones grandes de un diálogo ---------- */
/* Para las decisiones que cambian la plata de todos (sumar o sacar gente de
   un viaje con gastos): cada opción con su explicación, y la más común ya
   marcada, para que se elija leyendo y no adivinando. */

.opciones-grandes {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 18px;
}

.opcion-grande {
  appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 12px;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--tarjeta);
  cursor: pointer;
}

.opcion-grande[aria-pressed="true"] {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.opcion-grande .tilde { border-radius: 50%; margin-top: 1px; }

.opcion-grande .texto-opcion { display: block; line-height: 1.32; }
.opcion-grande .texto-opcion b { display: block; font-weight: 620; font-size: 14.5px; }
.opcion-grande .texto-opcion span {
  display: block;
  color: var(--texto-suave);
  font-size: 12.5px;
  margin-top: 2px;
}

/* ---------- Aviso flotante ---------- */

/* Banner arriba, con gesto (Christian, 22/8/2026: que se vea y se saque
   como una notificación real del teléfono) — antes era un cartelito abajo
   que sólo se cerraba solo. El MARCO no toca ni un toque (`pointer-events:
   none`, igual que antes): ocupa el ancho entero arriba de la pantalla,
   pero con `padding` a los costados para dejar SIEMPRE libres los botones
   de la cabecera (volver/hamburguesa a la izquierda, ajustes a la
   derecha) — la misma trampa que ya se pisó con el cartelito de abajo
   tapando un botón, evitada de entrada en vez de parcheada después. */
.aviso-flotante-envoltorio {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0 68px;
  pointer-events: none;
}

/* El CARTEL sí recibe el toque (`pointer-events: auto`): es lo que hace
   falta para poder arrastrarlo. El centrado es del envoltorio (flexbox),
   nunca un `transform` acá — `arrastrarParaCerrar()` (nucleo.js) escribe
   su propio `transform` en cada arrastre, y si el centrado también
   dependiera de un `transform` los dos se pisarían. */
.aviso-flotante {
  pointer-events: auto;
  background: #14161a;
  color: #fff;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 550;
  box-shadow: var(--sombra-alta);
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .22s ease, transform .22s ease;
  max-width: 100%;
  text-align: center;
}

.aviso-flotante.visible { opacity: 1; transform: translateY(0); }
.aviso-flotante.error { background: var(--contra); }

/* ---------- Estado de la conexión ---------- */

/* Barra de arriba de todo. Sólo aparece cuando hay algo que avisar: sin
   señal, o con cosas esperando para subir. Con todo en orden no se muestra,
   porque un cartel permanente se vuelve invisible de tanto estar. */
.barra-estado {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding: 9px 16px;
  padding-top: calc(9px + env(safe-area-inset-top, 0px));
  font-size: 13px;
  font-weight: 550;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.barra-estado b { font-weight: 700; }

.barra-estado .punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}

.barra-estado.sin-red   { background: var(--contra); color: #fff; }
.barra-estado.pendiente { background: var(--aviso); color: #fff; }
.barra-estado.subiendo  { background: var(--acento); color: #fff; }

/* Mientras la barra está, todo baja para no quedar tapado. */
body.con-barra .cabecera { top: 38px; }
body.con-barra { padding-top: 38px; }

/* Indicador chico dentro de la cabecera (pantalla de viajes). */
.sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  font-size: 12px;
  color: var(--texto-suave);
  white-space: nowrap;
}

.sync .punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--favor);
  flex: none;
}

.sync.sin-red { background: var(--contra-suave); border-color: #f3cdc8; color: var(--contra); }
.sync.sin-red .punto { background: var(--contra); }

/* ---------- Invitación a instalar ---------- */
/* El botón que ofrece el navegador está escondido en un menú distinto en
   cada teléfono y mucha gente no lo encuentra. Sin instalar, la app no
   funciona sin señal — que es para lo que está hecha. */

.cartel-instalar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--acento-suave);
  border: 1px solid #cddcef;
  border-radius: var(--radio);
  padding: 13px 14px;
  margin-bottom: 14px;
}

.cartel-instalar .texto-instalar { flex: 1; min-width: 0; line-height: 1.3; }
.cartel-instalar .texto-instalar b { display: block; font-size: 14.5px; color: #163f6b; }
.cartel-instalar .texto-instalar span { font-size: 12.5px; color: var(--texto-suave); }
.cartel-instalar .boton { min-height: 40px; padding: 0 16px; flex: none; }

/* Pasos para instalar en iPhone, donde no se puede hacer por código. */
.pasos-instalar {
  margin: 0 0 16px;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.75;
}

.pasos-instalar li { margin-bottom: 4px; }

.dibujo-paso {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 5px;
  color: var(--acento);
}

.dibujo-paso .ico { width: 19px; height: 19px; }

/* ---------- Avisos en bloque ---------- */

.nota {
  margin: 14px 4px 0;
  padding: 12px 14px;
  background: var(--acento-suave);
  border: 1px solid #cddcef;
  border-radius: var(--radio);
  font-size: 13.5px;
  color: #163f6b;
}

.nota.atencion {
  background: var(--aviso-suave);
  border-color: var(--aviso-borde);
  color: var(--aviso);
}

/* Un aviso que además propone hacer algo (el viaje terminó → archivarlo).
   El botón va al costado y no abajo: al costado se lee como parte del
   mismo aviso, abajo parece un botón suelto de la pantalla. */
.nota-con-boton {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Abajo también: este aviso tiene contenido debajo, y sin este margen
     queda pegado al panel siguiente y los dos parecen un solo bloque.
     Los .nota comunes van al final de su pantalla y no lo necesitan. */
  margin-bottom: 14px;
}

.nota-con-boton span { flex: 1; }
.nota-con-boton .boton { flex: none; }

/* El campo para agregar un ítem de Equipaje, con el botón al costado —
   mismo criterio de layout que `.nota-con-boton`, de arriba. */
.campo-con-boton { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.campo-con-boton .campo { flex: 1; margin-bottom: 0; }
.campo-con-boton .boton { flex: none; }

.vacio { padding: 30px 20px; text-align: center; color: var(--texto-tenue); }
.vacio p { margin: 0 0 14px; }

@media (min-width: 480px) {
  main { padding-inline: 16px; }
}