/* La caja de aviso (.aviso y sus cuatro tonos) se mudó a
   components/avisos/avisos-caja.css. Vivía aquí, y aquí solo llegaba a
   las pantallas de pago y de administración: en los cuatro chats de
   trámite salía sin estilo ninguno. */

/* =========================================================
   PAGOS — añadidos sobre panel.css
   RUTH.il

   Esta hoja NO repite tokens ni componentes: se carga siempre
   DESPUÉS de panel.css y usa sus variables (--bg-2, --accent,
   --ok, --warn...) y sus clases (.panel, .btn, .estado, .toast).

   Aquí solo está lo que las cuatro pantallas del cobro necesitan y
   no existía: la tarjeta de la cuenta bancaria, la vista del
   comprobante, la caja de subida y la rejilla de revisión.
   ========================================================= */

/* ---------- ESTADOS DEL PAGO ----------
   Tres estados, tres colores, y el mismo código de color en las cuatro
   pantallas: amarillo = esperando a alguien, verde = resuelto a favor,
   rojo = resuelto en contra. Así el administrador reconoce una fila por
   el color antes de leerla. */
.estado.revision  { background: var(--warn-bg); color: var(--warn); }
.estado.aprobado  { background: var(--ok-bg);   color: var(--ok); }
.estado.rechazado { background: rgba(194,43,43,.14); color: var(--danger); }
.estado.usado     { background: var(--bg-3);    color: var(--text-3); }

/* ---------- PASOS DEL COBRO ---------- */
.pasos-pago {
  display: flex; gap: 0; margin-bottom: 26px;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-2);
}
.paso-pago {
  flex: 1; padding: 14px 16px; display: flex; gap: 11px; align-items: flex-start;
  border-right: 1px solid var(--border); min-width: 0;
}
.paso-pago:last-child { border-right: 0; }
.paso-pago .num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: .76rem; font-weight: 700;
  background: var(--bg-3); color: var(--text-3);
}
.paso-pago.activo { background: rgba(var(--accent-rgb), .07); }
.paso-pago.activo .num { background: var(--accent); color: var(--bg); }
.paso-pago.hecho .num { background: var(--ok-bg); color: var(--ok); }
.paso-pago strong { display: block; font-size: .85rem; margin-bottom: 1px; }
.paso-pago p { margin: 0; font-size: .77rem; color: var(--text-3); line-height: 1.4; }

/* ---------- TARJETA DE CUENTA BANCARIA ----------
   El número de cuenta va en monoespaciada y grande a propósito: es un dato
   que la persona copia a mano en la aplicación de su banco, y un dígito
   mal copiado manda el dinero a otra parte. */
.cuenta-banco {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 14px;
}
.cuenta-banco .banco {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .95rem; margin-bottom: 14px;
}
.cuenta-banco .banco i { color: var(--accent); font-size: 1.1rem; }
.cuenta-fila {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.cuenta-fila:last-child { border-bottom: 0; }
.cuenta-fila .etiqueta { font-size: .78rem; color: var(--text-3); flex-shrink: 0; }
.cuenta-fila .valor {
  font-size: .9rem; font-weight: 600; text-align: right; overflow-wrap: anywhere;
}
.cuenta-fila .valor.numero {
  font-family: var(--f-mono); font-size: 1.02rem; letter-spacing: .04em;
}
.btn-copiar {
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-3);
  border-radius: 7px; padding: 5px 9px; cursor: pointer; font-size: .76rem;
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-family: var(--f-body);
}
.btn-copiar:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ---------- IMPORTE A PAGAR ---------- */
.importe {
  background: rgba(var(--accent-rgb), .08); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
}
.importe .que { min-width: 0; }
.importe .que strong { display: block; font-size: 1rem; }
.importe .que span { font-size: .8rem; color: var(--text-3); }
.importe .cuanto {
  font-family: var(--f-mono); font-size: 1.7rem; font-weight: 700; color: var(--accent);
  white-space: nowrap;
}

/* ---------- FORMULARIO DE SUBIDA ---------- */
.caja-form {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
}
.caja-form h3 { margin: 0 0 4px; font-size: .95rem; }
.caja-form > p { margin: 0 0 16px; font-size: .82rem; color: var(--text-3); }

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: .8rem; color: var(--text-2); margin-bottom: 5px; font-weight: 600; }
.campo .ayuda { font-size: .75rem; color: var(--text-3); font-weight: 400; }
.campo input[type=text],
.campo input[type=number],
.campo textarea {
  width: 100%; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--text-1); font-family: var(--f-body); font-size: .9rem;
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--accent); }
.campo textarea { resize: vertical; min-height: 74px; line-height: 1.5; }

/* Zona de arrastre del comprobante. El input real se esconde y la
   etiqueta hace de botón: así se puede dar tamaño y estado sin pelearse
   con el control nativo, que cada navegador dibuja a su manera. */
.zona-archivo {
  border: 2px dashed var(--border-strong); border-radius: var(--radius);
  padding: 26px 20px; text-align: center; cursor: pointer; display: block;
  transition: border-color .15s, background .15s;
}
.zona-archivo:hover, .zona-archivo.encima { border-color: var(--accent); background: rgba(var(--accent-rgb), .05); }
.zona-archivo i { font-size: 1.9rem; color: var(--text-3); display: block; margin-bottom: 8px; }
.zona-archivo strong { display: block; font-size: .88rem; margin-bottom: 3px; }
.zona-archivo span { font-size: .77rem; color: var(--text-3); }
.zona-archivo input[type=file] { display: none; }
.zona-archivo.con-archivo { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.zona-archivo.con-archivo i { color: var(--ok); }

.vista-previa { margin-top: 14px; text-align: center; }
.vista-previa img {
  max-width: 100%; max-height: 300px; border-radius: 9px;
  border: 1px solid var(--border);
}
.vista-previa .nombre-archivo {
  margin-top: 7px; font-size: .78rem; color: var(--text-3); overflow-wrap: anywhere;
}

/* ---------- AVISOS ---------- */
/* CORREGIDO: esta regla era `.aviso strong`, sin acotar.
 *
 * Alcanzaba también a los <strong> que van DENTRO del párrafo para
 * resaltar un dato —un importe, el nombre del trámite—, y al ponerlos en
 * bloque le partía la frase al cliente en tres trozos sueltos:
 *
 *     El cliente declara
 *     USD 25.00
 *     y Compraventa de vehículo cuesta
 *
 * Ahora solo se pone en bloque el título del aviso, que es el primer
 * <strong> hijo directo de su caja. El resto se queda en línea, como
 * cualquier negrita dentro de un texto. */

/* ---------- TARJETA DE PAGO EN LAS LISTAS ---------- */
.pago {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
/* El borde de color a la izquierda es lo que permite recorrer una lista
   larga y localizar los problemas sin leerla entera. */
.pago.es-revision  { border-left: 3px solid var(--warn); }
.pago.es-aprobado  { border-left: 3px solid var(--ok); }
.pago.es-rechazado { border-left: 3px solid var(--danger); }

.pago-cab {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 16px 20px 12px; flex-wrap: wrap; align-items: flex-start;
}
.pago-quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pago-quien strong { font-size: .97rem; }
.pago-quien .sub { font-size: .79rem; color: var(--text-3); overflow-wrap: anywhere; }
.pago-cab .etiquetas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pago-monto {
  font-family: var(--f-mono); font-size: 1.12rem; font-weight: 700; white-space: nowrap;
}

.pago-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 13px; padding: 0 20px 15px;
}
.pago-datos .dato strong {
  display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-3); margin-bottom: 2px;
}
.pago-datos .dato span { font-size: .86rem; }
.pago-datos .dato .mono { font-family: var(--f-mono); font-size: .81rem; }

/* ---------- VISTA DEL COMPROBANTE ---------- */
.comprobante { padding: 0 20px 16px; }
.comprobante img {
  max-width: 100%; max-height: 420px; border-radius: 9px;
  border: 1px solid var(--border); display: block; cursor: zoom-in;
}
.comprobante .sin-imagen {
  padding: 26px; text-align: center; color: var(--text-3); font-size: .84rem;
  border: 1px dashed var(--border-strong); border-radius: 9px;
}

/* Lupa: el comprobante a pantalla completa. Una transferencia se revisa
   comparando cifras pequeñas, y la miniatura de la tarjeta no siempre da. */
.lupa {
  position: fixed; inset: 0; z-index: 900; display: none;
  background: rgba(0,0,0,.88); padding: 30px;
  align-items: center; justify-content: center;
}
.lupa.abierta { display: flex; }
.lupa img { max-width: 100%; max-height: 100%; border-radius: 9px; }
.lupa .cerrar {
  position: absolute; top: 18px; right: 22px; background: transparent;
  border: 0; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1;
}

/* ---------- CAJA DE DECISIÓN DEL ADMINISTRADOR ---------- */
.decision { border-top: 1px solid var(--border); padding: 16px 20px; background: var(--bg); }
.decision .acciones { padding: 0; }
.caja-rechazo { margin-top: 13px; display: none; }
.caja-rechazo.abierta { display: block; }
.caja-rechazo label { display: block; font-size: .8rem; margin-bottom: 5px; font-weight: 600; }
.caja-rechazo textarea {
  width: 100%; padding: 10px 12px; border-radius: 9px; min-height: 66px;
  border: 1px solid var(--border-strong); background: var(--bg-2);
  color: var(--text-1); font-family: var(--f-body); font-size: .87rem;
  resize: vertical; line-height: 1.5;
}
.caja-rechazo textarea:focus { outline: none; border-color: var(--danger); }
.btn-peligro { background: var(--danger); color: #fff; }

/* ---------- RESUMEN DEL HISTORIAL ---------- */
.resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 13px; margin-bottom: 22px;
}
.tarjeta-cifra {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.tarjeta-cifra .rotulo {
  font-size: .71rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); margin-bottom: 5px;
}
.tarjeta-cifra .cifra { font-family: var(--f-mono); font-size: 1.55rem; font-weight: 700; }
.tarjeta-cifra.bien .cifra { color: var(--ok); }
.tarjeta-cifra.mal  .cifra { color: var(--danger); }

/* ---------- TRÁMITE NO INICIADO ----------
   El relieve distinto que pide la pantalla de trámites: fondo a rayas
   suaves, borde de acento y sin sombra. Se distingue del resto de un
   vistazo, sin tener que leer la etiqueta de estado. */
.tramite.no-iniciado {
  border: 1px dashed var(--accent);
  background: repeating-linear-gradient(
    135deg,
    var(--bg-2), var(--bg-2) 11px,
    rgba(var(--accent-rgb), .05) 11px, rgba(var(--accent-rgb), .05) 22px
  );
  box-shadow: none;
}
.tramite.no-iniciado .tramite-titulo strong { color: var(--accent); }
.etiqueta-nuevo {
  background: var(--accent); color: var(--bg);
  padding: 3px 9px; border-radius: 999px; font-size: .7rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}

/* ---------- MÓVIL ---------- */
@media (max-width: 760px) {
  .pasos-pago { flex-direction: column; }
  .paso-pago { border-right: 0; border-bottom: 1px solid var(--border); }
  .paso-pago:last-child { border-bottom: 0; }
  .importe { flex-direction: column; align-items: flex-start; }
  .cuenta-fila { flex-direction: column; align-items: flex-start; gap: 3px; }
  .cuenta-fila .valor { text-align: left; }
  .pago-cab { flex-direction: column; }
}

/* ---------- El cliente declaró otra cifra ----------
   Se pinta al lado del precio, en ámbar y no en rojo: no es un error del
   sistema ni un pago rechazado, es un dato que hay que mirar antes de
   aprobar. Rojo aquí se confundiría con "rechazado", que es la etiqueta
   que tiene justo al lado. */
.pago-monto.desajuste {
  background: var(--aviso-warn-bg, rgba(240, 168, 40, .14));
  color: var(--aviso-warn, #B25E09);
  font-weight: 700;
}

/* La factura del SRI todavía no emitida.
   Va debajo de los botones del pago, en el historial del cliente. Es una
   espera normal —el SRI tarda—, así que se cuenta en tono neutro y no
   como un problema: lo que evita es la llamada de quien pagó, ve su
   recibo y no entiende por qué no está su factura. */
.nota-sri {
  margin: 0;
  padding: 0 20px 16px;
  font-size: .82rem;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 7px;
}