/* ==========================================================================
   Efectivizar — el formulario, en pasos
   ========================================================================== */

/* Las operaciones a medio hacer, una pestaña cada una. Parte en renglones
   antes que desbordar: el nombre del cliente y lo que salió no se recortan. */
.e2-en-curso {
  align-self: flex-start;
  flex-wrap: wrap;
  max-width: 100%;
}
/* Lo que salió otro día no se edita: se lee, y la nota dice cuándo. */
.e2-salio {
  flex: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* Paso 1: qué clase de operación es. Son dos tarjetas grandes y no un select
   porque es la decisión que abre el resto de la pantalla, y una decisión que
   manda tiene que verse antes que lo que viene después. */
.e2-tipos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--size-sm);
}
.e2-tipo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-xxs);
  padding: var(--size);
  min-height: 0;
  background: var(--color-bg-container);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-align: left;
}
.e2-tipo:hover:not([disabled]) {
  background: var(--color-bg-container);
  border-color: var(--color-primary);
  color: var(--color-text);
}
/* El elegido se marca con fondo y borde de marca, no solo con negrita: es el
   estado que explica por qué apareció todo lo de abajo. */
.e2-tipo.activo {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
}
.e2-tipo[disabled] {
  background: var(--color-fill-tertiary);
  border-color: var(--color-border-secondary);
  color: var(--color-text-quaternary);
}
.e2-tipo-nombre { font-size: var(--font-size-lg); font-weight: 600; }
.e2-tipo-nota {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 400;
  white-space: normal;
}
.e2-tipo[disabled] .e2-tipo-nota { color: var(--color-text-quaternary); }

/* Esta es la única pantalla que trabaja en dos columnas a la vez —el formulario
   y los saldos—, y los 1120 px del resto le quedan cortos: el lateral se estruja
   contra el flujo mientras a la derecha de la ventana sobra sitio sin usar. Se
   ensancha solo acá; en las vistas de una columna el límite se queda como está,
   porque ahí lo que se hace es leer y una línea más larga se lee peor. */
.contenido:has(#vista-efectivizar:not([hidden])) {
  max-width: 1360px;
}

/* El formulario a la izquierda y los saldos a la derecha: se elige de qué cuenta
   sale el dinero mirando con cuánto quedaría, y para eso las dos cosas tienen
   que estar a la vista al mismo tiempo. */
.e2-cuerpo {
  display: grid;
  /* El lateral crece con la ventana en vez de quedarse en un ancho fijo: con
     300 px, «BANCO CONTINENTAL (BBVA)» y su saldo entran justos y cualquier
     nombre un poco más largo envuelve. El mínimo es ese mismo 300 —por debajo
     el saldo se parte en dos líneas y se lee como otra cifra— y el techo evita
     que en una pantalla ancha una lista de referencia le gane al formulario. */
  grid-template-columns: minmax(0, 1fr) clamp(300px, 28%, 420px);
  align-items: start;
  gap: var(--size-md);
}
.e2-flujo,
.e2-lateral {
  display: flex;
  flex-direction: column;
  gap: var(--size-md);
}
/* Acompañan al formulario mientras se baja por él: son referencia, no un paso. */
.e2-lateral { position: sticky; top: var(--size-md); }
#form-e2 {
  display: flex;
  flex-direction: column;
  gap: var(--size-md);
}
/* Prestar invierte el orden del dinero: primero sale de mis cuentas y recién
   después el cliente devuelve pasando sus tarjetas. La pantalla sigue ese
   orden en vez de pedir que se lea de abajo hacia arriba. */
#e2-cuerpo.modo-prestamo #e2-panel-pago { order: -1; }
/* El dato es el saldo, no el nombre de la cuenta: el número manda y el nombre
   acompaña en chico, como en cualquier panel de saldos. Más apretado que una
   lista normal porque son seis cuentas de referencia, no seis cosas que hacer. */
/* Dos columnas y no una fila de tres: con «BANCO CONTINENTAL (BBVA)» y una
   flecha de proyección compitiendo en el mismo renglón, el nombre se estrujaba
   hasta cortarse. Acá el nombre envuelve en su columna y los dos números se
   apilan a la derecha, alineados entre sí. */
.e2-saldo {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 var(--size-xs);
  padding: var(--size-xs) var(--size-sm);
}
.e2-saldo span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
/* Lo que quedaría después de esta operación, junto al saldo de ahora: sin la
   flecha se tendría que restar a mano para saber si alcanza. Solo aparece
   cuando la operación mueve algo en ese banco —si no, es ruido repitiendo el
   mismo número. */
.e2-saldo-proyectado {
  grid-column: 2;
  text-align: right;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}
/* Lo que entrará cuando abone el POS. Se apila en la misma columna de los
   números y en el mismo gris que la proyección porque es de la misma clase de
   dato —todavía no pasó—, pero en su propio renglón: mezclado con el saldo se
   leería como plata que ya está. */
.e2-saldo-luego {
  grid-column: 2;
  text-align: right;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  font-style: italic;
}
/* El saldo nunca se parte en dos líneas: «S/ 10,616.18» cortado a la mitad se
   lee como otra cifra. Si algo tiene que envolver, que sea el nombre. */
.e2-saldo strong {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.e2-momento-campos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size);
}

/* Cada tarjeta que se pasó es una columna: el POS parte el mismo dinero en
   varios pases y verlos uno al lado del otro es lo que deja comparar montos.
   Se acomodan solas —agregar una cuarta no rompe la fila, la envuelve. */
.e2-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--size-sm);
}
.e2-entrada {
  display: flex;
  flex-direction: column;
  gap: var(--size-xs);
  padding: var(--size-sm);
  background: var(--color-bg-layout);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius);
}
/* La cara de la tarjeta, del tamaño de una tarjeta de verdad: es lo primero que
   se reconoce cuando hay tres columnas iguales. */
.e2-entrada-cara {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  overflow: hidden;
  background: var(--color-bg-container);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius);
  color: var(--color-text-quaternary);
  font-size: var(--font-size-xl);
  font-weight: 600;
}
.e2-entrada-cara img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* El nombre debajo de la cara, chico: la imagen es la que identifica, el nombre
   está para desempatar dos plásticos parecidos. */
.e2-entrada-nombre {
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}
/* El check califica al monto de arriba, no a la columna entera: va pegado a él
   —sin el aire que separa a los demás campos— y en el gris de los rótulos, que
   es lo que es. */
.e2-entrada-pend {
  margin-top: calc(-1 * var(--size-xxs));
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
/* Las dos acciones de la columna, del mismo peso y en los extremos: agregar
   otro pase y sacar este son lo mismo de frecuente. */
.e2-entrada-pie {
  display: flex;
  justify-content: space-between;
  gap: var(--size-xs);
  font-size: var(--font-size-sm);
}

/* El catálogo entero a la vista, por familias: se toca la tarjeta y baja su
   columna. Es lo primero del panel porque es la primera decisión —qué pasó el
   cliente—, y son botones con imagen y no una lista porque en el mostrador la
   tarjeta se reconoce mirándola. */
.e2-picker {
  display: flex;
  flex-direction: column;
  gap: var(--size);
  margin-bottom: var(--size);
}
.e2-picker-reja {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--size-xs);
}
.e2-picker-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--size-xxs);
  padding: var(--size-xs);
  background: var(--color-bg-container);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-align: center;
}
.e2-picker-tarjeta:hover {
  background: var(--color-bg-container);
  border-color: var(--color-primary);
  color: var(--color-text);
}
/* Elegida: borde y fondo de color, no solo un tilde en una esquina. Con doce
   tarjetas en la reja hay que ver de un vistazo cuáles entran en la operación. */
.e2-picker-tarjeta.activo {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.e2-picker-tarjeta.activo:hover { background: var(--color-primary-bg); }
.e2-picker-nombre { overflow-wrap: anywhere; }
/* Cuántas veces se pasó la misma tarjeta. Encima de la esquina porque cuenta
   algo de la tarjeta entera, no de una parte suya. */
.e2-picker-veces {
  position: absolute;
  top: calc(-1 * var(--size-xs));
  right: calc(-1 * var(--size-xs));
  min-width: 22px;
  padding: 0 var(--size-xxs);
  background: var(--color-primary);
  border-radius: 999px;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 22px;
}

/* Pago de tarjeta: la que se paga. Panel propio, primero dentro del
   formulario —es lo primero que se decide en este modo—, con el mismo aire
   que el picker de la simple. */
.e2-pago-tarjeta {
  display: grid;
  gap: var(--size-xs);
  justify-items: start;
  max-width: var(--ancho-formulario);
}
.e2-pago-tarjeta > label,
.e2-pago-tarjeta > select,
.e2-pago-tarjeta > .form-tx,
.e2-pago-tarjeta > .e2-cajas-pago,
.e2-pago-tarjeta > .lista { width: 100%; }

/* Una card angosta por tarjeta, todas del mismo alto y en reja: se pagan dos o
   tres a la vez y en filas cada una tomaba una forma distinta según qué datos
   tenía cargados, que es justo lo que impide compararlas de un vistazo. */
.e2-cajas-pago {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--size-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.e2-caja-pago {
  display: flex;
  flex-direction: column;
  gap: var(--size-xs);
  padding: var(--size-sm);
  background: var(--color-bg-container);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius);
}
.e2-caja-pago > .tc-nombre { font-weight: 500; }
/* El titular cuelga del número, no es un dato suelto más de la caja: va pegado
   a él y no a la distancia que separa a los demás. */
.e2-caja-pago > .tc-titular { margin-top: calc(-1 * var(--size-xxs)); }
.e2-caja-pago .e2-por-pos { font-size: var(--font-size-sm); }
.e2-caja-pago label { width: 100%; }
/* El alta se abre debajo del select y hay que ver dónde empieza: sin el borde,
   los campos nuevos se leen como parte de la misma línea de arriba. */
#e2-tarjeta-alta {
  padding: var(--size-sm);
  background: var(--color-bg-layout);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius);
}

/* El interruptor del ITF. Va pegado al título del panel y no junto a la fila
   porque en este modo la fila no tiene campo de ITF que mirar: lo que explica el
   cero es esta línea. */
.e2-por-pos { color: var(--color-text-secondary); }

/* Rótulo arriba y campo abajo, que es como se leen los formularios largos sin
   tener que medir dos columnas. */
.campo-mini {
  display: flex;
  flex-direction: column;
  gap: var(--size-xxs);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.campo-mini input { width: 100%; }

/* La acción de sumar una fila, junto a los totales que esa fila cambia. */
.e2-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-sm);
}
.e2-acciones .resumen-linea { flex: 1; min-width: 180px; }
.e2-acciones .resumen-linea strong { font-size: var(--font-size-lg); }

/* Las dos formas de cobrar la comisión. Se enseñan enteras y no en un select
   porque la diferencia está en la explicación, no en el nombre. */
.e2-variantes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--size-xs);
}
.e2-variante {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--size-xs);
  padding: var(--size-xs) var(--size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}
.e2-variante:has(input:checked) {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
}
.e2-variante input { grid-row: span 2; margin: 0; }
.e2-variante-nombre { font-weight: 600; }
.e2-variante-nota {
  grid-column: 2;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

#e2-desembolsos {
  display: grid;
  gap: var(--size-xs);
}
.e2-desembolso {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--size-xs);
}
.e2-desembolso select { flex: 1; min-width: 140px; }
.e2-desembolso .campo-mini { flex: none; width: 112px; }
.e2-desembolso .drop { flex: 1; min-width: 160px; }
.e2-desembolso .quitar-cuenta { flex: none; }
.e2-desembolso input[readonly] {
  background: var(--color-bg-layout);
  color: var(--color-text-secondary);
}

/* El cierre: lo que se gana y el botón que lo registra, juntos porque es la
   última mirada antes de guardar. */
.e2-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-sm);
}
.e2-pie .resumen-linea { flex: 1; min-width: 200px; }
.e2-pie button[type='submit'] { flex: none; }

/* La fila de espera. Va arriba de todo y con el ámbar de lo que está pendiente:
   es lo único de esta pantalla que reclama algo —hay gente esperando— y tiene
   que distinguirse de un vistazo del resto, que son pasos de un formulario.

   El ámbar solo cuando hay alguien: encendido siempre dejaría de significar
   nada, y lo que tiene que saltar a la vista es justamente que hay cola. */
.e2-pendientes.con-gente {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}
/* Las cajas de dentro vuelven al blanco: sobre el ámbar del panel, una lista sin
   fondo propio se leería como parte del aviso y no como filas que se tocan. */
.e2-pendientes .lista { background: var(--color-bg-container); }
#e2-pend-alta {
  display: flex;
  flex-direction: column;
  gap: var(--size-xs);
}

.pendiente { cursor: pointer; }
.pendiente:hover { background: var(--color-fill-tertiary); }
/* La hora primero y con ancho fijo: es el orden de llegada, y de columna en
   columna tiene que alinearse o deja de servir para comparar. */
.pend-hora {
  flex: none;
  width: 44px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.pend-nombre { flex: none; font-weight: 500; }
/* La nota se lleva el sobrante y se corta si es larga: es contexto —«quiere 3000
   con la del BCP»— y no puede empujar al aspa fuera de la fila. */
.pend-nota {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A quién se está atendiendo. La marca va por dentro del borde y no como un
   borde de verdad: un borde de 3px correría el contenido de la fila activa y la
   lista dejaría de leerse como columnas. */
.pendiente.activo {
  background: var(--color-primary-bg);
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.pendiente.activo:hover { background: var(--color-primary-bg); }

/* Los datos del cliente durante la operación: sus tarjetas y sus cuentas, para
   pagarle o depositarle sin salir de la pantalla. Las dos listas van seguidas y
   sin rótulo propio: se distinguen por su forma —una lleva vencimientos, la otra
   números de cuenta— y dos títulos más serían ruido en medio del paso. La lista
   vacía no deja hueco: `.lista:empty` la esconde entera. */
.e2-datos .tarjeta-cliente,
.e2-datos .cuenta-cliente { padding: var(--size-xs) var(--size-sm); }

/* En pago de tarjeta, cada tarjeta del cliente es clicable: elige cuál se
   paga. Mismo lenguaje visual que `.e2-picker-tarjeta.activo` para la
   elegida, para que "seleccionado" se lea igual en toda la pantalla. */
.e2-datos .tarjeta-cliente.tarjeta-cliente-elegible { cursor: pointer; }
/* El check va primero y no se encoge: es lo que anuncia que se puede marcar más
   de una tarjeta, y en una fila que envuelve no puede quedar aplastado. */
.e2-datos .tarjeta-cliente > .tc-elegir {
  flex: none;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}
.e2-datos .tarjeta-cliente.tarjeta-cliente-elegible:hover { border-color: var(--color-primary); }
/* La cuenta de una cita de préstamo se resalta igual: es a la que se le manda. */
.e2-datos .tarjeta-cliente.elegida,
.e2-datos .cuenta-cliente.elegida {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

/* Lo que ve el operador en lugar del saldo: si la cuenta aguanta la salida. */
.e2-alcanza {
  justify-self: end;
  padding: 0 var(--size-xs);
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: normal;
}
.e2-alcanza-si { color: var(--color-success-text); background: var(--color-success-bg); border-color: var(--color-success-border); }
.e2-alcanza-no { color: var(--color-error-text); background: var(--color-error-bg); border-color: var(--color-error-border); }
.e2-alcanza-espera { color: var(--color-text-tertiary); border-color: transparent; }