/* ==========================================================================
   Confianza y etiquetas del cliente

   Dos señales distintas y por eso dos formas distintas: la confianza es un
   estado —uno solo, de una escala fija— y usa la misma etiqueta que una deuda
   o una cuota; las etiquetas son características, van de a varias y cada una
   trae su propio color, así que se leen como marcas y no como estado.
   ========================================================================== */

/* La escala se lee por el color antes que por la palabra: verde está bien, azul
   es normal, gris es que todavía no se sabe y rojo es que sí se sabe y es que
   no. El gris de «nuevo» es a propósito: la ausencia de información no es una
   alarma, es un hueco. */
.confianza-confiable {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.confianza-regular {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--color-primary-active);
}
.confianza-nuevo {
  border-color: var(--color-border);
  background: var(--color-fill-tertiary);
  color: var(--color-text-secondary);
}
.confianza-riesgoso {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

/* En la lista de clientes va pegado al nombre, no en su propia columna: es una
   propiedad de la persona, no un dato que se compare de fila a fila como el DNI
   o el teléfono. */
.lista > li.cliente > .confianza { flex: none; }

/* El bloque que aparece al elegir a un cliente, y su ficha. Fondo propio para
   que se lea como una nota sobre esa persona y no como un campo más del
   formulario que tiene debajo. */
/* Dos columnas: a la izquierda lo que el cliente es, a la derecha lo que se le
   puede poner. Es más ancho que el formulario que tiene debajo a propósito —el
   costado estaba vacío y el catálogo cabe ahí sin empujar nada hacia abajo. */
.panel-cliente {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--size);
  max-width: calc(var(--ancho-formulario) + 300px);
  padding: var(--size-sm);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius);
  background: var(--color-bg-container);
}
.pc-columna {
  display: flex;
  flex-direction: column;
  gap: var(--size-xs);
  min-width: 0;
}
/* Una línea separa las dos columnas sin encerrar ninguna: un recuadro alrededor
   del catálogo lo haría parecer otro panel, y es el mismo. */
.pc-catalogo {
  padding-left: var(--size);
  border-left: 1px solid var(--color-border-secondary);
}
.pc-rotulo {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
/* Con muchas etiquetas el catálogo crece hacia abajo y estiraría el panel por
   encima del formulario; a partir de cierto alto se desplaza dentro de sí. */
.pc-sueltas {
  align-content: flex-start;
  max-height: 9rem;
  overflow-y: auto;
}
.pc-ninguna {
  font-size: var(--font-size-sm);
  color: var(--color-text-quaternary);
}
.pc-confianza {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--size-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.pc-rotulo { flex: none; }

/* Los cuatro niveles pegados, como un solo control: separados con hueco se
   leerían como cuatro botones sueltos que hacen cuatro cosas, y son uno que
   tiene cuatro posiciones. */
.confianza-grupo {
  display: flex;
  flex: none;
}
.confianza-opcion {
  width: auto;
  padding: 0 var(--size-xs);
  border: 1px solid;
  border-radius: 0;
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 22px;
  cursor: pointer;
}
/* Los colores del nivel (.confianza-confiable y compañía) se declaran más
   arriba en este archivo, así que a igual especificidad ganaría lo de acá. El
   :not los deja pasar sin tocarlos: el neutro es para los que no están puestos,
   y el puesto se pinta con el color de su nivel y nada más. */
.confianza-opcion:not(.puesta) {
  border-color: var(--color-border);
  background: var(--color-bg-container);
  color: var(--color-text-secondary);
}
/* Solo las puntas se redondean: por dentro los bordes se tocan. */
.confianza-opcion:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.confianza-opcion:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* Sin esto el borde derecho de uno y el izquierdo del siguiente suman 2px y la
   línea de en medio se ve el doble de gruesa que las de los extremos. */
.confianza-opcion + .confianza-opcion { margin-left: -1px; }
.confianza-opcion:hover:not(:disabled):not(.puesta) {
  background: var(--color-fill-tertiary);
  color: var(--color-text);
}
/* El puesto va encima: su borde de color lo tapaba el del vecino sin pintar. */
.confianza-opcion.puesta {
  position: relative;
  z-index: 1;
  font-weight: 600;
}
.confianza-opcion:disabled { cursor: default; opacity: 0.6; }

.pc-etiquetas,
.etiquetas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-xxs);
  min-width: 0;
}
/* En una fila de lista las etiquetas ceden el espacio: el nombre del cliente y
   sus columnas mandan, y las que no entren se cortan en vez de empujar. */
.lista > li > .etiquetas { flex: 0 1 auto; overflow: hidden; }

/* Cada color se declara una sola vez, en variables, y el chip las consume. Es
   por el chip del catálogo: es un <button>, así que arrastra el azul del botón
   primario al pasarle el mouse, y sin las variables reafirmar su propio color
   pediría repetir los siete colores en una segunda tanda de reglas. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--size-xxs);
  max-width: 100%;
  padding: 0 var(--size-xs);
  border: 1px solid var(--chip-borde);
  border-radius: var(--radius-sm);
  background: var(--chip-fondo);
  color: var(--chip-texto);
  font-size: var(--font-size-sm);
  line-height: 20px;
  white-space: nowrap;
}
.etiqueta-azul {
  --chip-borde: var(--color-primary-border);
  --chip-fondo: var(--color-primary-bg);
  --chip-texto: var(--color-primary-active);
}
.etiqueta-verde {
  --chip-borde: var(--color-success-border);
  --chip-fondo: var(--color-success-bg);
  --chip-texto: var(--color-success-text);
}
.etiqueta-ambar {
  --chip-borde: var(--color-warning-border);
  --chip-fondo: var(--color-warning-bg);
  --chip-texto: var(--color-warning-text);
}
.etiqueta-rojo {
  --chip-borde: var(--color-error-border);
  --chip-fondo: var(--color-error-bg);
  --chip-texto: var(--color-error-text);
}
.etiqueta-morado {
  --chip-borde: var(--color-morado-border);
  --chip-fondo: var(--color-morado-bg);
  --chip-texto: var(--color-morado-text);
}
.etiqueta-cian {
  --chip-borde: var(--color-cian-border);
  --chip-fondo: var(--color-cian-bg);
  --chip-texto: var(--color-cian-text);
}
.etiqueta-gris {
  --chip-borde: var(--color-border);
  --chip-fondo: var(--color-fill-tertiary);
  --chip-texto: var(--color-text-secondary);
}

/* La del catálogo va hueca y con el borde cortado: conserva su color para que
   se reconozca, pero sin relleno no se confunde con las que el cliente ya
   lleva. Al pasarle el mouse se rellena, que es en lo que va a quedar al
   soltar el clic. El borde punteado ya significa «todavía no está» en el botón
   de crear, así que acá dice lo mismo. */
.etiqueta-suelta {
  min-height: 0;
  border-style: dashed;
  background: none;
  cursor: pointer;
}
.etiqueta-suelta:hover,
.etiqueta-suelta:focus-visible {
  border-style: solid;
  border-color: var(--chip-borde);
  background: var(--chip-fondo);
  color: var(--chip-texto);
}
.etiqueta-suelta:disabled {
  border-color: var(--chip-borde);
  background: none;
  color: var(--chip-texto);
  opacity: 0.4;
  cursor: default;
}

/* Los botones de dentro del chip heredan su color y no traen fondo propio: son
   el chip, no dos controles encima de él. El min-height y el fondo del :hover
   hay que apagarlos a mano: el botón del proyecto mide 32px y se pinta de azul
   al pasarle el mouse, que dentro de un chip de 20px es un cuadro azul encima
   del color de la etiqueta. */
.etiqueta-nombre,
.etiqueta-quitar {
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
.etiqueta-nombre:hover,
.etiqueta-nombre:focus-visible,
.etiqueta-quitar:hover,
.etiqueta-quitar:focus-visible {
  border-color: transparent;
  background: none;
  color: inherit;
}
.etiqueta-quitar {
  font-size: var(--font-size-sm);
  opacity: 0.55;
}
.etiqueta-quitar:hover,
.etiqueta-quitar:focus-visible { opacity: 1; }
.etiqueta-nombre:hover { text-decoration: underline; }
.etiqueta-nombre:disabled,
.etiqueta-quitar:disabled { cursor: default; opacity: 0.4; }

/* En Ajustes el nombre de la etiqueta es un campo y no un texto: esas
   etiquetas llevan precio —«7% comision departamental» deja de ser cierta el
   día que pasa a 6%— y corregirla tiene que ser escribir encima, no borrarla y
   rehacerla. Va sin fondo ni borde y heredando la letra para que se siga
   leyendo como texto; el subrayado cortado aparece recién al pasar el mouse,
   que es lo que avisa que se puede escribir sin llenar la tabla de cajas. */
.etiqueta-nombre-campo {
  width: auto;
  min-height: 0;
  padding: 0;
  border: none;
  border-bottom: 1px dashed transparent;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
}
.etiqueta-nombre-campo:hover,
.etiqueta-nombre-campo:focus {
  border-color: transparent;
  border-bottom-color: currentColor;
  box-shadow: none;
}

/* El alta es un enlace y no un chip más: al lado de las etiquetas del catálogo
   —que también van con el borde cortado— un chip gris que dijera «+ etiqueta»
   se leería como una etiqueta llamada así. Sin borde queda claro que es la
   acción y no una de las opciones. */
.etiqueta-alta { display: inline-flex; align-items: center; }
.etiqueta-agregar {
  min-height: 0;
  padding: 0 var(--size-xxs);
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  line-height: 20px;
  cursor: pointer;
}
.etiqueta-agregar:hover,
.etiqueta-agregar:focus-visible {
  background: none;
  color: var(--color-primary-hover);
  text-decoration: underline;
}
.etiqueta-campo {
  width: 15rem;
  max-width: 100%;
  padding: 0 var(--size-xs);
  font-size: var(--font-size-sm);
  line-height: 20px;
}

/* La fila de «Crecimiento mes a mes» del tablero: a la izquierda el mes y a la
   derecha la plata, alineada por la coma para que la columna se lea de un
   vistazo. Un mes que terminó en rojo sale en rojo. */
.ganancia { flex-wrap: wrap; justify-content: space-between; }
.ganancia-nombre { font-weight: 500; }
.ganancia-monto {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ganancia-positiva .ganancia-monto { color: var(--color-success-text); }
.ganancia-negativa .ganancia-monto { color: var(--color-error-text); }
/* El porqué del número: volumen, lo que cobré, lo que se llevó el banco. Va en
   gris y debajo porque se lee después del monto, no en lugar de él. */
.ganancia-detalle {
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

/* Recordatorio directo al chat del cliente; sin teléfono cargado queda inerte
   en vez de desaparecer, para que se note que falta cargarlo. */
.btn-whatsapp {
  flex: none;
  padding: 0 var(--size-xs);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-sm);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  font-size: var(--font-size-sm);
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}
.btn-whatsapp:hover {
  border-color: var(--color-success);
  color: var(--color-success);
}
/* En el detalle de la operación es la acción principal: del alto de los botones vecinos. */
#efe-boleta-whatsapp .btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 32px;
  padding: var(--size-xxs) var(--size);
  border-radius: var(--radius);
  font-size: inherit;
}
.btn-whatsapp:disabled {
  border-color: var(--color-border);
  background: var(--color-fill-tertiary);
  color: var(--color-text-quaternary);
  cursor: not-allowed;
}

/* Efectivizaciones */
/* Mismo motivo que en `.lista > li.tx`: `.lista > li` fija `align-items: center`
   y le gana a `.efectivizacion` a secas, así que sin repetir el descendiente la
   fila se pinta centrada en vez de alineada a la izquierda. */
/* La fila tiene dos partes: el cuerpo apilado, y la casilla de boleta en su
   propia columna a la derecha. El `column` que antes estaba acá se mudó al
   cuerpo; el `li` ahora reparte esas dos columnas. */
.lista > li.efectivizacion {
  align-items: flex-start;
  gap: var(--size-sm);
}
.efe-cuerpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-xxs);
}
/* Ancho fijo, el mismo que el rótulo de arriba: es lo que deja las casillas
   una debajo de otra para poder recorrer la columna de un vistazo. */
.efe-boleta,
.efe-boleta-rotulo {
  flex: none;
  width: var(--ancho-col-boleta, 6rem);
  text-align: center;
}
/* Toda la celda es zona de click, no solo los 13 px de la casilla. */
.efe-boleta {
  display: flex;
  justify-content: center;
  align-self: stretch;
  cursor: pointer;
}
/* La electrónica: lo que dice SUNAT, no una casilla. Azul en camino, verde
   aceptada, rojo lo que pide algo de mí. */
span.efe-boleta { flex-direction: column; align-items: center; gap: 2px; cursor: default; }
/* «entregada» va debajo del estado: en una sola línea no entra en la columna. */
.efe-boleta-entregada { font-size: 11px; color: var(--color-text-secondary); }
.efe-boleta-falta-dni,
.efe-boleta-rechazada { background: #fcebee; color: #b00d26; }
.efe-boleta-pendiente,
.efe-boleta-informada { background: #e8f0fc; color: #1f4f9c; }
.efe-boleta-aceptada { background: #e7f5ec; color: #1d6b3a; }
.efe-boleta-anulada { background: var(--color-bg-layout); color: var(--color-text-secondary); }
/* La tira del rótulo: pegada a la lista de abajo y con el peso de un encabezado
   de tabla, que es lo que es. */
.tira-encabezado {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 var(--size-xxs);
  padding: 0 var(--size);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.efe-titulo { font-variant-numeric: tabular-nums; }
.efe-bancos {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}
.efe-pendiente {
  font-size: var(--font-size-sm);
  color: var(--color-warning-text);
}

/* Lo que gano en esa operación, con el peso que tiene: es el dato por el que se
   recorre la lista, y en gris junto a los bancos se leía como una nota al pie. */
.efe-mi-comision {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-success-text);
}
.efe-comision-banco {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

.efe-copiables {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-xs);
  align-items: center;
}

.efe-elegido {
  display: flex;
  align-items: center;
  gap: var(--size-xs);
  margin: 0;
  color: var(--color-text-secondary);
}
.efe-comprobantes {
  display: flex;
  flex-direction: column;
  gap: var(--size-md);
  max-width: var(--ancho-formulario);
}
.efe-comprobantes-lado {
  display: flex;
  flex-direction: column;
  gap: var(--size-xs);
}
.lista-comprobantes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-sm);
}
.lista-comprobantes li {
  display: flex;
  align-items: center;
  gap: var(--size-xxs);
}
.quitar-comprobante {
  padding: 0;
  min-height: 0;
  border: none;
  background: none;
  color: var(--color-error-text);
  font-size: var(--font-size-sm);
  text-decoration: underline;
}
.quitar-comprobante:hover,
.quitar-comprobante:active { background: none; color: var(--color-error-hover); }

/* ==========================================================================
   Tarjetas de estadística — el número primero, el rótulo debajo
   ========================================================================== */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--size);
}
.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--size-xxs);
  padding: var(--size) var(--size-md);
  background: var(--color-bg-container);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-lg);
}
.tarjeta-valor {
  font-size: var(--font-size-h2);
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.tarjeta-label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.tarjeta-alerta { border-color: var(--color-warning-border); background: var(--color-warning-bg); }
.tarjeta-alerta .tarjeta-valor { color: var(--color-warning-text); }

/* ==========================================================================
   Tarjetas de crédito de los clientes — el recordatorio de cuándo les toca pagar
   ========================================================================== */

/* Caja dentro de caja: la lista ya vive enmarcada por el panel, así que suelta
   su propio borde en vez de dibujar un segundo marco a un pixel del primero. */
.panel-avisos > .lista { border: none; border-radius: 0; }

/* El nombre del cliente con ancho propio: en el panel las tarjetas son de gente
   distinta y las columnas tienen que alinearse entre filas. */
.tarjeta-cliente > .tc-cliente { min-width: 140px; font-weight: 500; }
.tarjeta-cliente > .tc-nombre { font-weight: 500; }
/* Empuja el vencimiento y sus acciones contra el borde derecho, alineados entre
   filas aunque los nombres de las tarjetas midan distinto. */
.tarjeta-cliente > .tc-estado { margin-left: auto; }
/* El aspa de borrar trae su propio margin-left:auto para las listas donde es lo
   único de la derecha. Acá el hueco ya lo abre el vencimiento: con los dos, el
   espacio libre se parte en dos y el borrar se separa del resto del grupo. */
.tarjeta-cliente > .tx-eliminar { margin-left: 0; }

/* La forma de estas tres etiquetas sale de la regla común de estado, arriba:
   dicen lo mismo que el estado de una deuda o de una cuota —en qué situación
   está algo— y tres formas distintas se leerían como tres cosas.

   Verde mientras falte más de la ventana de aviso, ámbar dentro de ella, rojo
   pasado el día. Los tres salen de los mismos tokens que el resto de la app. */
.tc-vigente > .tc-estado {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.tc-por-vencer > .tc-estado {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.tc-vencida > .tc-estado {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
  color: var(--color-error-text);
}
/* Gris y no un cuarto color: la tarjeta sin día de pago no está en ningún punto
   del ciclo, así que no compite con las tres de arriba por la atención. Dice qué
   le falta y se queda quieta. */
.tc-sin-fecha > .tc-estado {
  border-color: var(--color-border);
  background: var(--color-fill-tertiary);
  color: var(--color-text-tertiary);
}

/* Las dos marcas son grises a propósito: dicen "esto ya está hecho", que es lo
   contrario de pedir atención. Si compitieran en color con el vencimiento, la
   fila tendría dos cosas gritando y ninguna de las dos se leería primero. */
.tc-avisado,
.tc-pagado {
  display: inline-flex;
  align-items: center;
  gap: var(--size-xxs);
  padding-right: var(--size-xxs); /* el aspa ya trae su propio aire a la derecha */
  border-color: var(--color-border);
  background: var(--color-fill-tertiary);
  color: var(--color-text-secondary);
}

/* El botón que cierra el ciclo entra a la altura de la fila, no con los 32px del
   botón de un formulario: comparte renglón con el vencimiento y el de WhatsApp,
   y de otro modo sería lo más alto de la fila para la acción menos frecuente.
   Secundario, además, porque lo que hay que hacer primero es avisar: si los dos
   fueran igual de llamativos, la fila no diría por dónde empezar. */
.tc-pago {
  flex: none;
  padding: 0 var(--size-xs);
  min-height: 22px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 20px;
}
/* El aspa vive dentro de la etiqueta, como el aspa de un tag que se cierra: no es
   una acción de la fila. Hay que apagarle todo lo que hereda del botón primario
   —el alto de 32px, el fondo azul— o se despega de la etiqueta y pasa a ser lo
   más llamativo de la fila para deshacer lo menos importante que hay en ella.
   El :hover del botón base gana por especificidad, así que se repite acá. */
.tc-deshacer {
  padding: 0;
  width: 16px;
  min-height: 16px;
  border: none;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--color-text-quaternary);
  font-size: var(--font-size-sm);
  line-height: 1;
  cursor: pointer;
}
/* Gris, no rojo: quitar la marca no borra nada, y en esta misma fila hay un aspa
   que sí borra la tarjeta. Si las dos se pusieran rojas al pasar por encima, el
   color dejaría de distinguir la acción reversible de la que no lo es. */
.tc-deshacer:hover,
.tc-deshacer:active {
  background: none;
  color: var(--color-text-secondary);
}

/* Dos campos que se leen juntos —el día en que se paga y el día en que cierra—
   sin dejar de ser dos campos. En el celular se apilan solos: partir en dos un
   ancho de 320px daría dos cajas donde no entra una fecha. */
.campos-par {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-xs);
}
.campos-par > label { flex: 1; min-width: 140px; }

/* Los datos del pago no caben en un renglón junto al vencimiento y sus botones,
   y recortarlos con puntos suspensivos sería esconder justo el número que se
   vino a buscar. Envuelven, y la fila crece hacia abajo. */
.tarjeta-cliente,
.cuenta-cliente { flex-wrap: wrap; }

/* Las dos fechas del ciclo y el titular acompañan; el número es el dato. Cierre
   y pago con la misma forma —son un par, se leen juntos— y el número con la del
   que se puede copiar (más abajo). */
.tc-cierre,
.tc-dia,
.tc-titular,
.cta-titular {
  flex: none;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}
.tc-pan {
  flex: none;
  font-variant-numeric: tabular-nums;
}
/* Editar vale lo mismo que ver: no compite con el aspa ni con los botones de
   aviso, así que va con el peso de un enlace y no con el de un botón. */
.tarjeta-cliente > .tc-editar { flex: none; font-size: var(--font-size-sm); }

/* La deuda es un campo dentro de una fila de lectura: entra a la altura del
   renglón, no con los 32px de un campo de formulario, o sería lo más alto de
   una fila donde todo lo demás son etiquetas. */
.tc-deuda {
  flex: none;
  width: 132px;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}
.tc-deuda input {
  min-height: 24px;
  padding: 0 var(--size-xs);
  font-variant-numeric: tabular-nums;
}
/* Cuándo se preguntó, pegado al monto: una deuda sin fecha se lee como la de hoy
   y la de hace dos semanas ya no es la misma cifra. */
.tc-deuda-fecha {
  flex: none;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* Dónde queda su local. El buscador arriba, los campos debajo y el mapa dentro
   del mismo formulario: el pin es un campo más de la dirección, no una
   ilustración al costado. */
.local {
  display: flex;
  flex-direction: column;
  gap: var(--size-sm);
}
.local-buscador {
  display: flex;
  gap: var(--size-xs);
}
.local-buscador input { flex: 1; }
#local-resultados {
  max-height: 180px;
  overflow-y: auto;
}
#local-resultados li { padding: var(--size-xxs) var(--size-xs); }

/* Alto fijo: el mapa necesita medida propia o Leaflet lo monta en cero. */
.local-mapa {
  height: 260px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.local-fotos-alta {
  display: flex;
  align-items: center;
  gap: var(--size-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
/* Se ven al abrir la ficha, sin clic y enteras: recortarlas a un cuadrado se
   comía justo la referencia de la esquina, que es lo que sirve para reconocer
   el sitio al llegar. Van en una tira que se pasa con el dedo —`scroll-snap`
   nativo, sin carrusel de JS—: en el teléfono entra una por pantalla, con un
   pedazo de la siguiente asomando para que se vea que hay más; en una pantalla
   ancha entran varias. El clic sigue abriéndola a tamaño completo. */
.local-fotos {
  display: flex;
  gap: var(--size-xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-bottom: var(--size-xxs);
}
.local-fotos:empty { display: none; }
.local-foto {
  position: relative;
  margin: 0;
  flex: 0 0 min(100%, 320px);
  scroll-snap-align: start;
}
.local-foto img {
  display: block;
  width: 100%;
  /* Alto fijo con `contain`: las fotos de un teléfono vienen paradas y
     acostadas mezcladas, y sin un alto común la tira salta de altura al
     deslizarla. El fondo rellena lo que le sobra a cada una. */
  height: 240px;
  object-fit: contain;
  background: var(--color-bg-layout);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius);
  cursor: zoom-in;
}
.local-foto .tx-eliminar {
  position: absolute;
  top: var(--size-xxs);
  right: var(--size-xxs);
  background: var(--color-bg-container);
  border-radius: var(--radius-sm);
}

/* La ficha: se ve entera a su proporción (1260×990) sin pasarse del ancho. */
.ficha-imagen {
  display: block;
  width: 100%;
  max-width: 630px;
  aspect-ratio: 1260 / 990;
  object-fit: contain;
  background: var(--color-bg-layout);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius);
  cursor: zoom-in;
  margin-bottom: var(--size-xs);
}