/* =====================================================================
   LCN Split — pantallas.css
   Lo propio de cada pantalla. Si algo se empieza a usar en más de una,
   se muda a componentes.css.
   ===================================================================== */

/* =====================================================================
   Inicio
   ===================================================================== */

/* El fondo cremita de la cabecera, para TODA la pantalla (Christian,
   17/8/2026: "sólo el inicio, donde está el loguito y los 2 botones").
   `min-height: 100vh` para que llegue hasta abajo aunque el contenido sea
   corto (con dos botones nomás, casi siempre lo es). La cabecera de
   adentro queda transparente: si no, la línea de `border-bottom` cortaría
   un fondo que tiene que verse de una sola pieza. */
.pantalla-inicio {
  background: var(--cabecera);
  min-height: 100vh;
}
.pantalla-inicio .cabecera {
  background: transparent;
  border-bottom: none;
}

/* Los dos únicos botones de la pantalla de Inicio (16/8/2026): la lista de
   viajes con sus montos se mudó entera al menú hamburguesa. */
.inicio-botones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

/* En qué anda cada viaje: en curso, cuánto falta, o si ya terminó.
   De todos los viajes hay UNO solo que se está viviendo, y es el que la
   vista tiene que encontrar sin leer: por eso el único con color es ese, y
   los demás quedan en gris. Si se pintaran los tres, no se destacaría
   ninguno — es la misma idea que el rojo de "debe" en los balances. */
.estado-viaje {
  flex: none;
  /* Arriba, a la altura del nombre del viaje: centrado quedaba al lado del
     renglón de los días y se leía como si hablara de ellos. */
  align-self: flex-start;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--fondo);
  color: var(--texto-suave);
  white-space: nowrap;
}

.estado-viaje.curso {
  background: var(--acento-suave);
  color: var(--acento);
}

.estado-viaje.termino { color: var(--texto-tenue); }

/* =====================================================================
   Presupuesto del viaje
   ===================================================================== */

/* La tarjeta que se mete arriba de Balances. Sin color propio: el color en
   esta app significa plata a favor o en contra, y el presupuesto no es ni
   una cosa ni la otra. */
.fila-presupuesto {
  width: 100%;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 14px;
}

.fila-presupuesto.vacia .detalle { white-space: normal; }

/* El panel de arriba de la pantalla del presupuesto. */
.panel-presupuesto {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 14px;
}

.etiqueta-panel {
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-tenue);
}

.monto-grande {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: 2px;
}

.bajo-el-monto { font-size: 13.5px; color: var(--texto-suave); margin-top: 2px; }

/* Una línea, no un desvanecido: en esta app no hay degradados. */
.separa-panel {
  height: 1px;
  background: var(--borde);
  margin: 14px 0;
}

.pasado-de-presupuesto {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--contra);
}

/* Cuánto se lleva gastado de lo presupuestado. El ancho lo pone el JS en la
   variable --parte; la regla vive acá, que es donde tienen que vivir los
   estilos. */
.barra-avance {
  height: 6px;
  border-radius: 999px;
  background: var(--fondo);
  overflow: hidden;
  margin-top: 8px;
}

.barra-avance span {
  display: block;
  height: 100%;
  width: var(--parte, 0%);
  background: var(--acento);
  border-radius: 999px;
}

/* Pasarse del presupuesto es lo mismo que deber plata: rojo, y se ve al
   instante sin leer el número. */
.barra-avance.pasado span { background: var(--contra); }

.cabeza-categoria {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 640;
  font-size: 15px;
  margin: 0 4px 4px;
}

.cabeza-categoria .con-icono {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

/* ---------- Los bloques plegados (11/8/2026) ----------
   La primera vista del presupuesto es un RESUMEN: cada categoría cerrada,
   con lo único que hace falta para decidir si abrirla —cuánto sale y cuánto
   le toca a cada uno—. Pedido de Christian: con todo desplegado era
   "demasiada info". */

.cabeza-categoria.plegable {
  width: 100%;
  appearance: none;
  background: none;
  border: 0;
  padding: 8px 4px;
  cursor: pointer;
  text-align: left;
  min-height: var(--alto-tactil);
}

/* Los dos números, uno abajo del otro y alineados a la derecha: el total en
   negrita y el "por cabeza" en negro común, los dos GRANDES.
   Estaban chicos y en gris claro, y Christian lo marcó (11/8/2026): el
   "c/u" es justo el número que se mira antes de salir de viaje —cuánta
   plata tengo que llevar—, así que tiene que leerse de una. */
.cifras-categoria {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none;
  margin-left: auto;
  line-height: 1.3;
}

.cifras-categoria .plata {
  font-size: 17px;
  font-weight: 680;
}

.cifras-categoria .por-cabeza {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--texto);
  letter-spacing: 0;
}

/* La flecha gira al abrir: es la señal de que eso se despliega, y con el
   giro se entiende sin leer nada. */
.flecha-plegar {
  flex: none;
  display: inline-flex;
  color: var(--texto-tenue);
  margin-left: 8px;
  transition: transform .18s ease;
}

.flecha-plegar .ico { width: 18px; height: 18px; }

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

.cuerpo-plegable { padding-top: 4px; }

/* Separación entre bloques cerrados: con todo plegado, la pantalla es una
   lista de categorías y necesitan aire para leerse de un vistazo. */
.bloque:has(> .plegable) { margin-bottom: 6px; }

.cuerpo-plegable .barra-avance { margin: 6px 4px 10px; }

.comparacion {
  margin: 0 4px;
  font-size: 12.5px;
  color: var(--texto-suave);
}

.comparacion .de-mas { color: var(--contra); }

/* ---------- Una línea con reserva (etapa 20b) ----------
   Lo que tiene que contestar de un vistazo, en este orden: cuánto sale,
   cuánto falta pagar, para cuándo, y a quién llamo. */

.fila-linea .centro { min-width: 0; }

/* El monto va arriba, a la altura del nombre. Centrado quedaba flotando a
   media altura entre la barra y el vencimiento, y se leía como si hablara
   de ellos. Es el mismo criterio que el saldo de los balances. */
.fila-linea .monto { align-self: flex-start; margin-top: 1px; }

/* Cuánto se pagó y cuánto falta. Verde y rojo NO se usan acá: en esta app
   verde es "le deben" y rojo es "debe", y una reserva a medio pagar no es
   ninguna de las dos cosas — es una cuenta pendiente del grupo entero. */
.reparto-linea {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12.5px;
  margin-top: 3px;
  color: var(--texto-suave);
}

.reparto-linea .falta   { font-weight: 640; color: var(--texto); }
.reparto-linea .saldada { font-weight: 640; color: var(--favor); }

.fila-linea .barra-avance { margin-top: 5px; }

/* El vencimiento del saldo. En gris mientras falta tiempo: si gritara
   desde el día uno, para cuando importe ya nadie lo mira. */
.vencimiento {
  font-size: 12.5px;
  margin-top: 4px;
  color: var(--texto-tenue);
}

.vencimiento.urgente { color: var(--aviso);  font-weight: 640; }
.vencimiento.vencido { color: var(--contra); font-weight: 640; }

.detalle.con-icono-chico {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: normal;
}

.detalle.con-icono-chico .ico { width: 15px; height: 15px; flex: none; }

/* Llamar y "cómo llegar" van FUERA de la fila: un link adentro de un botón
   no es HTML válido, y el toque se lo comía el botón de la línea. */
.acciones-linea {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 12px 10px;
  margin-top: -6px;
}

/* "Llamar" es un <a> de verdad (abre el teléfono) y "Cómo llegar" un botón:
   tienen que verse iguales, así que se le saca el subrayado del link. */
.acciones-linea a.mini-accion { text-decoration: none; }

/* ---------- Las calculadoras y los vehículos (etapa 20c) ---------- */

/* La cuenta que produjo el número: "2.400 km ÷ 100 × 14 × $1.200".
   En monoespaciada porque son cifras para revisar, no texto para leer de
   corrido, y así se alinean entre una línea y la otra. */
.detalle.la-cuenta {
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--texto-tenue);
  white-space: normal;
}

/* Dos campos cortos en una fila (kilómetros y precio, precio y cantidad).
   min-width: 0 para que no estiren el cartel más allá de la pantalla: ya
   pasó una vez con el calendario. */
.dos-campos {
  display: flex;
  gap: 10px;
}

.dos-campos > .campo { flex: 1; min-width: 0; }
.dos-campos > .campo input { width: 100%; }

/* El resultado de la calculadora mientras se escribe. Ver el número ANTES
   de guardar es lo que hace que la cuenta se pueda revisar. */
.cuenta-viva {
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--texto);
}

.bloque-nafta .ayuda { margin-bottom: 10px; }

.fila-vehiculo .monto { align-self: flex-start; margin-top: 1px; }
.fila-vehiculo .detalle { white-space: normal; }

/* =====================================================================
   Balances
   ===================================================================== */

/* Una barra de color al costado: se lee antes que el número, incluso de
   reojo y con sol en la pantalla. */
.fila-balance {
  border-left: 3px solid transparent;
  padding-left: 11px;
}

.fila-balance.a-favor   { border-left-color: var(--favor); }
.fila-balance.en-contra { border-left-color: var(--contra); }
.fila-balance.saldado   { border-left-color: var(--borde-fuerte); }

/* Quien está usando la app se distingue del resto de un vistazo. Su fila es,
   además, la entrada a armarse la carita: es donde uno se ve al lado de los
   demás, que es cuando dan ganas de cambiarla. */
.fila-balance.soy-yo { background: #fbfcfe; cursor: pointer; }
.fila-balance.soy-yo:active { background: var(--fondo); }
.fila-balance.soy-yo .nombre::after {
  content: " · vos";
  color: var(--acento);
  font-weight: 600;
}

.saldo { text-align: right; flex: none; }

.saldo .etiqueta {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-tenue);
}

.saldo .monto { font-size: 17px; font-weight: 680; margin-top: -1px; }

.a-favor   .saldo .etiqueta,
.a-favor   .saldo .monto { color: var(--favor); }
.en-contra .saldo .etiqueta,
.en-contra .saldo .monto { color: var(--contra); }
.saldado   .saldo .monto { color: var(--texto-tenue); }

/* =====================================================================
   Gastos
   ===================================================================== */

.fila-gasto.es-pago .chapa { background: var(--favor-suave); color: var(--favor); }

/* El encabezado de cada grupo de gastos por día: desde el punto Z
   (17/8/2026) ya NO lleva la fecha, sólo el total — así que el `<h2>` pasa
   a alinear su único contenido a la derecha en vez de repartir fecha a la
   izquierda y total a la derecha con `float`. ANTES el total iba con
   `float: right`, apoyado en que la fecha (texto normal, a la izquierda)
   le diera altura al encabezado; sin la fecha, el `<h2>` quedaba con un
   único hijo flotante y SIN CONTENIDO EN FLUJO NORMAL, así que colapsaba a
   alto cero y el total aparecía flotando fuera de la tarjeta, superpuesto
   a la lista de abajo — bug real, encontrado mirando la captura. */
.encabezado-gastos-dia {
  display: flex;
  justify-content: flex-end;
}

.total-dia {
  font-weight: 600;
  color: var(--texto-tenue);
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
}

/* =====================================================================
   A quién le toca pagar la próxima
   ===================================================================== */
/* Es lo primero que se mira cuando llega la cuenta a la mesa, así que va
   arriba de todo y con el nombre bien grande. */

.le-toca {
  background: var(--acento);
  color: #fff;
  border-radius: var(--radio);
  padding: 15px 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* La cara a la izquierda y las tres líneas a la derecha. El texto va en su
   propia caja para que siga apilado como estaba: el .le-toca es una columna
   y meterle la cara al lado sin esto le pone el nombre abajo de todo. */
.le-toca .cara-toca {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.le-toca .texto-toca {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.le-toca .etiqueta-toca {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .82;
}

.le-toca .nombre-toca { font-size: 23px; font-weight: 680; letter-spacing: -.02em; }
.le-toca .monto-toca { font-size: 14px; opacity: .85; }

.le-toca .siguen-toca {
  font-size: 12.5px;
  opacity: .72;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.le-toca.parejo { background: var(--favor); }

/* =====================================================================
   Cómo saldar
   ===================================================================== */
/* Sin explicaciones ni frases: nombre e importe, grandes, y listo. */

.quien-debe {
  margin: 0 0 8px 4px;
  font-size: 16px;
  font-weight: 680;
  letter-spacing: -.01em;
  color: var(--texto);
}

.quien-debe.mio { color: var(--acento); }

.fila-deuda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borde);
  min-height: 56px;
}

.fila-deuda:last-child { border-bottom: 0; }

.fila-deuda .nombre-deuda {
  font-size: 16.5px;
  font-weight: 570;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fila-deuda .monto-deuda {
  font-size: 18px;
  font-weight: 700;
  color: var(--acento);
  flex: none;
}

/* =====================================================================
   Categorías: la torta
   ===================================================================== */

.torta-caja {
  display: flex;
  justify-content: center;
  padding: 20px 14px 6px;
  background: var(--tarjeta);
}

.torta { width: 190px; height: 190px; }

/* El hueco del medio lleva el total: es el número que más se mira, y de
   paso hace que las porciones se comparen por ángulo y no por área. */
.torta-centro-etiqueta {
  font-size: 6.6px;
  fill: var(--texto-tenue);
  text-anchor: middle;
}

/* Chico a propósito: un total de siete cifras tiene que entrar en el hueco
   sin tocar el anillo. Al dibujarse a 190px se ve el doble de grande. */
.torta-centro-valor {
  font-size: 9.4px;
  font-weight: 680;
  fill: var(--texto);
  text-anchor: middle;
}

/* OJO: acá NO va ni "stroke" ni "stroke-width".
   El color y el grosor de cada porción vienen como atributos del SVG, y una
   regla CSS les gana: poniéndolos acá se pintaban todas las porciones del
   mismo color y la torta desaparecía. La separación entre porciones ya la
   hace el hueco del trazo, no un contorno. */
.porcion { transition: opacity .15s ease; }

.torta:hover .porcion { opacity: .55; }
.torta .porcion:hover { opacity: 1; }

/* La lista de abajo es a la vez la referencia de colores y la tabla con
   los números: así ningún valor depende de pasar el dedo por encima. */
.fila-categoria { padding: 11px 14px; }

.muestra-color {
  width: 13px; height: 13px;
  border-radius: 4px;
  flex: none;
}

.fila-categoria .nombre-cat { flex: 1; font-weight: 570; font-size: 14.5px; }
.fila-categoria .valor { font-weight: 650; font-variant-numeric: tabular-nums; }

.fila-categoria .porcentaje {
  color: var(--texto-tenue);
  font-size: 12.5px;
  margin-left: 7px;
  font-weight: 500;
  min-width: 34px;
  display: inline-block;
  text-align: right;
}

/* =====================================================================
   Lista de viajes archivados
   ===================================================================== */

.lista.atenuada .nombre { color: var(--texto-suave); }

.codigo-grande {
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: .1em;
  color: var(--acento);
}

/* =====================================================================
   Barras (en qué se fue la plata)
   ===================================================================== */

.riel {
  height: 8px;
  background: var(--fondo);
  border-radius: 999px;
  overflow: hidden;
}

/* El ancho llega por una variable desde el JS: el dato es dinámico, pero
   la regla de estilo vive acá y no suelta en el JavaScript. */
.relleno {
  height: 100%;
  width: var(--ancho, 0%);
  background: var(--acento);
  border-radius: 999px;
  min-width: 3px;
}

/* =====================================================================
   Formulario de gasto
   ===================================================================== */

.bloque-form {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px;
  margin-bottom: 14px;
}

.bloque-form > h2 {
  font-size: 13px;
  font-weight: 620;
  color: var(--texto-suave);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mini-accion {
  appearance: none;
  border: 0;
  background: none;
  color: var(--acento);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Los renglones que se abren, en el formulario de gasto ----------
   Christian (11/8/2026): *"lo haría todo el renglón activo clickeable, no
   sólo donde dice agregar"*. Antes el único punto que abría el bloque era
   un botón de 51 × 27 px arriba a la derecha: por eso creía que a un gasto
   ya cargado no se le podía agregar la ubicación. Ahora el renglón entero
   es el botón, con la misma flecha que gira del presupuesto. */

.cabeza-plegable {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  min-height: var(--alto-tactil);
}

.cabeza-plegable > .centro { flex: 1; min-width: 0; }

.titulo-plegable {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-suave);
  letter-spacing: .01em;
  margin-bottom: 1px;
}

/* Con los renglones plegados, los bloques van más juntos: si no, cuatro
   tarjetas con aire de formulario ocupan una pantalla entera para decir
   cuatro líneas. */
.bloque-form.sin-aire { padding-block: 10px; }

/* Lo elegido, resumido en una línea mientras la lista está cerrada. */
.resumen-eleccion {
  margin: 0;
  font-size: 15.5px;
  font-weight: 570;
  color: var(--texto);
}

.resumen-eleccion.falta { color: var(--contra); }

/* Fila de persona con tilde, en los selectores de quién pagó y entre quiénes. */
.fila-persona {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 2px;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--borde);
  cursor: pointer;
  text-align: left;
  min-height: var(--alto-tactil);
}

.fila-persona:last-child { border-bottom: 0; }

/* La carita al lado del nombre no agrega texto: agrega reconocimiento. Con
   doce personas en la lista, encontrar la propia por la cara es más rápido
   que leer doce nombres. */
.fila-persona .quien {
  flex: 1;
  font-size: 15px;
  font-weight: 550;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

/* Cuando pagan varios, aparece el monto de cada uno. */
.fila-persona input {
  width: 116px;
  text-align: right;
  padding: 7px 10px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* OJO: `.le-toca` es TAMBIÉN la tarjeta azul grande de "le toca pagar a",
   arriba de los balances. Acá es sólo un numerito al costado de un nombre, y
   hay que apagarle todo lo de la tarjeta: sin esto quedaba una cápsula azul
   enorme con el monto en gris adentro, ilegible. Estaba así desde antes de
   la etapa 20b — lo encontró mirar la captura, no un test. */
.fila-persona .le-toca {
  background: none;
  color: var(--texto-tenue);
  padding: 0;
  margin: 0;
  border-radius: 0;
  display: inline;
  flex: none;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* La misma fila sirve para elegir qué gastos son de una línea del
   presupuesto, y ahí abajo del nombre va la fecha y en qué línea está.
   min-width: 0 para que un gasto de nombre largo no estire el cartel. */
.fila-persona .quien { min-width: 0; }

.fila-persona .quien small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-tenue);
  margin-top: 1px;
}

/* Marcador de cuánto falta o sobra al repartir a mano. */
/* OJO: `display` le gana al atributo `hidden` del HTML. Sin esta línea, un
   control marcado como oculto seguía dibujando su borde de arriba, y con
   los bloques plegados quedaban dos rayas flotando en el medio de la
   pantalla. Estaba así desde antes; se vio al plegar el formulario. */
.control-suma[hidden] { display: none; }

/* =====================================================================
   Rutas — Tramos por día: reordenar afuera de la edición (18/8/2026)
   =====================================================================
   Pedido de Christian, con el orden que armó él mismo mirando la
   captura: de izquierda a derecha, el AGARRE para arrastrar (como lo
   tiene Google, primero), el CUERPO (tocable, abre el cartel de estado),
   las FLECHAS subir/bajar apiladas una arriba de la otra (no una al lado
   de la otra: ahorra ancho), y la franja azul de NAVEGAR, igual que
   Lugares ("como si la card fuera un botón partido al medio").
   Por eso `align-items: stretch` y `padding: 0` en la fila — cada parte
   pone su propio padding, y la franja azul llega de punta a punta. */

.fila-tramo { padding: 0; align-items: stretch; }

.tramo-agarre {
  flex: none;
  appearance: none;
  border: 0;
  background: none;
  color: var(--texto-suave);
  width: 34px;
  display: grid;
  place-items: center;
  /* Dedo quieto ahí, sin que la página scrollee mientras se arrastra. */
  touch-action: none;
  cursor: grab;
}
.tramo-agarre .ico { width: 18px; height: 18px; }

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

.tramo-flechas {
  display: flex;
  flex-direction: column;
  flex: none;
  justify-content: center;
}
.tramo-flechas button {
  appearance: none;
  border: 0;
  background: none;
  color: var(--texto-suave);
  width: 32px;
  height: 26px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.tramo-flechas button:disabled { opacity: .25; cursor: default; }
.tramo-flechas .ico { width: 15px; height: 15px; }

/* El botón Navegar: franja azul, SÓLO el ícono (la gota que ya usa Lugares
   para su pin), sin texto — pedido de Christian, 18/8/2026, mirando su
   propia captura ("no importa el porqué, lo quiero con esa estética").
   Angosta a propósito: acá compite con el agarre y las flechas por el
   ancho, a diferencia de la franja de Lugares que sí lleva la palabra
   "Mapa" abajo. Misma clase, compartida tal cual con la fila de la
   Biblioteca (`.fila-ruta`, más abajo) — es el mismo botón en las dos
   vistas de Rutas. */
.boton-navegar-ruta {
  flex: none;
  border: 0;
  background: var(--acento);
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}
.boton-navegar-ruta .ico { width: 22px; height: 22px; }
.boton-navegar-ruta:active { opacity: .8; }
.fila-tramo:first-child .boton-navegar-ruta { border-top-right-radius: var(--radio); }
.fila-tramo:last-child .boton-navegar-ruta { border-bottom-right-radius: var(--radio); }

/* Biblioteca de Rutas: mismo molde de dos toques que Lugares —el nombre
   abre la ficha, el botón azul va derecho a navegar— pero sin el texto
   "Mapa", icon-only como el de arriba. */
.fila-ruta { padding: 0; align-items: stretch; }
.fila-ruta .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-ruta .fila-principal:active { background: var(--fondo); }
.fila-ruta:first-child .boton-navegar-ruta { border-top-right-radius: var(--radio); }
.fila-ruta:last-child .boton-navegar-ruta { border-bottom-right-radius: var(--radio); }

/* La fila que se está arrastrando se levanta: sombra + queda por encima de
   las demás. z-index sólo mientras dura el gesto — sin esto, la sombra se
   ve recortada por la fila de abajo. */
.fila-tramo.arrastrando {
  position: relative;
  z-index: 5;
  background: var(--tarjeta);
  box-shadow: var(--sombra-alta);
  border-radius: var(--radio-chico);
}

/* Las filas vecinas se corren con una transición suave para abrir el
   lugar — sin esto el reordenar se siente como un salto, no como un
   arrastre. */
.fila-tramo.corrida { transition: transform .16s ease; }

.control-suma {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--borde);
  font-size: 13.5px;
  font-weight: 600;
}

.control-suma.cierra   { color: var(--favor); }
.control-suma.no-cierra { color: var(--contra); }

/* La barra de guardar queda siempre a la vista: el formulario es largo y
   el botón al final del scroll se pierde.
   Sin degradados en ningún lado (pedido de Christian, 10/8/2026): el corte
   con el contenido lo marca una línea, que además se ve más prolijo. */
.barra-guardar {
  position: sticky;
  bottom: 0;
  background: var(--fondo);
  border-top: 1px solid var(--borde);
  padding: 14px 0 calc(14px + var(--seguro-abajo));
  margin-top: 4px;
}

/* =====================================================================
   Elegir quién sos
   ===================================================================== */

.presentacion { text-align: center; padding: 6px 4px 16px; }
.presentacion h2 { font-size: 19px; margin-bottom: 5px; }
.presentacion p { color: var(--texto-suave); font-size: 14.5px; margin: 0 0 18px; }

/* =====================================================================
   Armá tu carita
   ===================================================================== */
/* La cara grande arriba y el botón "Otra" bien a mano: se aprieta muchas
   veces seguidas hasta que la cara causa gracia, así que es lo primero que
   tiene que caer bajo el pulgar. Tocar parte por parte va abajo, para el que
   no zafa con el azar.

   TODO ACÁ ESTÁ APRETADO A PROPÓSITO (Christian, 12/8/2026: *"ocupa mucho a lo
   alto, hay que scrolear para poder editar todo"*). La cara, el botón, las
   ocho partes y Guardar tienen que entrar de una sola mirada. */

.carita-taller {
  text-align: center;
  padding: 2px 4px 12px;
}

.carita-muestra {
  width: 108px;
  height: 108px;
  margin: 0 auto 10px;
}

/* Acá el dibujo ES la pantalla, así que pisa el tamaño de fila de .avatar. */
.carita-muestra .avatar {
  width: 100%;
  height: 100%;
}

.carita-taller .ayuda {
  margin: 8px 0 0;
  color: var(--texto-suave);
  font-size: 12.5px;
}

/* Con la foto de perfil puesta, la carita dibujada pasa a este formato
   chico y horizontal (22/8/2026): ya no es la protagonista de la pantalla,
   así que no necesita su propio bloque centrado a lo alto. */
.carita-chica {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
}

.carita-muestra.chica {
  width: 56px;
  height: 56px;
  margin: 0;
  flex: none;
}

.carita-chica-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.carita-chica-texto .ayuda {
  margin: 0;
  color: var(--texto-suave);
  font-size: 12.5px;
}

/* Una parte en UN renglón: flecha, qué es, qué tiene puesto, flecha.
   El nombre queda fijo a la izquierda y el valor pegado a la flecha derecha,
   así el texto que cambia en cada toque no le mueve el nombre de lugar. */
.fila-parte {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  min-height: 46px;
  border-bottom: 1px solid var(--borde);
}

.fila-parte:last-child { border-bottom: 0; }

.fila-parte .que-parte {
  font-size: 14.5px;
  font-weight: 600;
  flex: none;
}

.fila-parte .valor-parte {
  flex: 1;
  text-align: right;
  color: var(--texto-suave);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 40px y no los 46 de --alto-tactil: el botón vive adentro de una fila de 46,
   así que el dedo tiene el alto entero para acertarle igual. */
.paso-parte {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--tarjeta);
  color: var(--acento);
  cursor: pointer;
}

.paso-parte:active { background: var(--acento-suave); }

/* Las partes que son un color no llevan nombre: un cuadradito del color dice
   más que "Piel 4". El color entra por variable desde el JS, que es lo único
   que cambia en cada toque; la regla vive acá. */
.muestra-color {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: var(--muestra);
  border: 1px solid rgba(0, 0, 0, .22);
  vertical-align: -3px;
  margin-right: 6px;
}

.fila-parte .cual { color: var(--texto-tenue); font-size: 12.5px; }

/* =====================================================================
   Bitácora (Fase 1, 18/8/2026)
   ===================================================================== */

/* Las fotos de un gasto o un lugar, adentro de su propia tarjeta del día
   — nunca sueltas en la línea de tiempo (no tienen fecha propia). Flota a
   la DERECHA de todo el texto (título/fecha/importe a la izquierda, pedido
   de Christian, 22/8/2026): es HERMANA de `.centro` dentro del mismo
   `.fila` (que ya es flex), no está adentro de `.centro` — por eso
   `.centro` con `flex:1` la empuja sola contra el borde derecho. Con más
   de una foto, se apilan en columna en vez de desbordar a lo ancho. */
.miniaturas-bitacora {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 6px;
}

.miniaturas-bitacora img {
  width: 112px;
  height: 112px;
  border-radius: var(--radio-chico);
  object-fit: cover;
  flex: none;
  cursor: zoom-in;
}

/* La miniatura del trazado offroad (22/8/2026, elegido por Christian sobre
   un mapa con baldosas reales): se dibuja SIEMPRE, no hace falta tocar
   nada — es lo que hace que la fila se lea gráfica de entrada. Chica, al
   lado de la flecha (no hermana de `.centro` como las fotos: el tramo ya
   tiene su propio botón "abrir el mapa completo", esto es sólo un
   adelanto). Si todavía no bajó el archivo (o no hay señal),
   `dibujarTrazadosMini()` la deja vacía — el fondo tenue evita que se vea
   como un agujero roto mientras tanto. */
.trazado-mini-caja {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radio-chico);
  background: var(--acento-suave);
  color: var(--acento);
  overflow: hidden;
}

.trazado-mini-caja .trazado-mini {
  display: block;
  width: 100%;
  height: 100%;
}

/* Con el tramo ya "Hecho" (`.fila-con-ubicacion`, fondo azul sólido), la
   miniatura pasa a un vidrio blanco translúcido — mismo criterio que
   nombre/detalle/flecha, que ahí también pasan a blanco. */
.fila-con-ubicacion .trazado-mini-caja {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* ---------- La nota del día (Bloque 4 parte 3, 22/8/2026) ----------
   Misma tarjeta "fila" que el resto de la Bitácora, pero el cuerpo es
   texto libre en vez de nombre/detalle — por eso no lleva `.nombre`, sólo
   el texto ya traducido (`renderizarNota()`, en formato-nota.js) y el
   autor abajo, chico. */
.nota-bitacora-texto {
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.nota-bitacora-autor {
  color: var(--texto-tenue);
  font-size: 12px;
  margin-top: 6px;
}

/* Editar/Borrar van DEBAJO del texto (22/8/2026, pedido de Christian):
   así no le sacan ancho a la tarjeta, que a la derecha tiene lugar para
   una foto (mismo criterio que el resto de la Bitácora). */
.nota-bitacora-acciones {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}

.nota-grande { font-size: 1.28em; font-weight: 600; }

.nota-color-1 { color: var(--nota-1); }
.nota-color-2 { color: var(--nota-2); }
.nota-color-3 { color: var(--nota-3); }
.nota-color-4 { color: var(--nota-4); }
.nota-color-5 { color: var(--nota-5); }

.nota-icono {
  display: inline-flex;
  vertical-align: -3px;
  margin: 0 2px;
  color: var(--texto-suave);
}

/* El editor: fecha + barra de formato + el texto (contenteditable) + fila
   de íconos, adentro del `.dialogo` genérico de abrirCartel() (nucleo.js). */
.editor-nota #fechaNota { margin-bottom: 10px; }

/* Editor de VERDAD enriquecido (22/8/2026, segunda vuelta): reemplaza al
   <textarea>+vista previa de al lado — Christian probó esa primera versión
   y no le gustó nada ("confuso, lleno de símbolos, no está enriquecido
   mientras uno va escribiendo"). Acá lo que se toca (Negrita, un color, un
   ícono) se ve YA aplicado mientras se escribe, como cualquier editor de
   texto de verdad; ver formato-nota.js para el porqué de cada pieza. */
.editor-nota-texto {
  width: 100%;
  min-height: 200px;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--fondo);
  color: var(--texto);
  overflow-wrap: break-word;
}

.editor-nota-texto:empty::before {
  content: attr(data-placeholder);
  color: var(--texto-tenue);
}

.barra-formato {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}

/* Negrita/Grande activos justo donde está el cursor (23/8/2026, Christian:
   "no me doy cuenta si el botón de negrita está activo o no") — sin esto
   los dos botones son texto suelto, sin ningún estado que mostrar. */
.barra-formato .mini-accion.activo {
  background: var(--acento-suave);
  color: var(--acento);
  border-radius: var(--radio-chico);
  padding: 4px 8px;
}

.colores-nota { display: flex; gap: 6px; }

.color-nota {
  appearance: none;
  border: 2px solid transparent;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  padding: 0;
  cursor: pointer;
}

.color-nota.activo {
  border-color: var(--texto);
}

.color-nota-1 { background: var(--nota-1); }
.color-nota-2 { background: var(--nota-2); }
.color-nota-3 { background: var(--nota-3); }
.color-nota-4 { background: var(--nota-4); }
.color-nota-5 { background: var(--nota-5); }

.iconos-nota {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.iconos-nota .mini-accion {
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 6px 9px;
  color: var(--texto-suave);
}

/* =====================================================================
   Resumen del viaje (Fase 1, 18/8/2026) — pantalla PÚBLICA
   ===================================================================== */

.resumen-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.resumen-numero {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 8px;
  text-align: center;
}

.numero-grande {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.numero-etiqueta {
  font-size: 12px;
  color: var(--texto-suave);
  margin-top: 2px;
}