/* ==========================================================================
   Cuentas del cliente — la libreta de a dónde depositarle

   No hay saldos ni movimientos: cada fila es un número para copiar. Por eso el
   número es lo único con peso y todo lo demás lo rodea en gris.
   ========================================================================== */
.cuenta-cliente > .cta-banco { flex: none; font-weight: 500; }
.cta-rotulo {
  flex: none;
  color: var(--color-text-quaternary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
}
/* Un número que se copia de un toque. Se ve como un dato y no como un botón
   —el borde punteado es la única señal de que se puede pulsar— porque en la
   fila lo que importa es leerlo; copiarlo es la comodidad, no la acción. */
.cta-copiar {
  flex: none;
  padding: 0 var(--size-xxs);
  min-height: 22px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  cursor: pointer;
}
.cta-copiar:hover,
.cta-copiar:active {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--color-primary-active);
}

/* ==========================================================================
   Transferencias entre cuentas propias
   ========================================================================== */

/* El botón que abre el formulario: secundario y a lo ancho de los formularios,
   porque no es la acción principal de la vista —esa es registrar un ingreso—
   pero sí una de las dos que hay. */
#btn-transferir {
  align-self: flex-start;
  max-width: var(--ancho-formulario);
}

/* Comisión e ITF, uno al lado del otro: son la misma pregunta —cuánto costó
   moverlo— aunque en el reporte se separen. */
.tf-cargos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size);
}

/* Las dos puntas del traslado antes de guardar. Sobre fondo suave y no como
   aviso: no hay nada que corregir, es lo que va a pasar. */
.tf-resumen:not(:empty) {
  margin: 0;
  padding: var(--size-xs) var(--size-sm);
  background: var(--color-primary-bg);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* Guardar y cancelar en la misma línea: son la misma decisión vista por sus dos
   lados, y apiladas el cancelar parece otro paso del formulario. */
.form-acciones {
  display: flex;
  gap: var(--size-xs);
}

/* La marca de la fila del movimiento. Azul y no ámbar como la de una
   efectivización pendiente: acá no hay nada en el aire, solo se dice de qué
   operación viene la fila. */
.tx-transferencia {
  order: 1;
  flex: none;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}

/* ==========================================================================
   Usuarios y dispositivos
   ========================================================================== */

/* La única regla que hace falta para esconder todo lo que el operador no
   alcanza: cada módulo marca su botón con `solo-admin` y la decisión de rol
   vive acá, en un sitio, en vez de repetida en veinte condicionales. Es
   comodidad —el 403 del servidor es lo que manda—, así que basta con ocultar. */
body[data-rol='operador'] .solo-admin { display: none !important; }
/* Lo mismo para lo que es de la central: la sucursal registra clientes y manda
   solicitudes desde la Agenda, y todo lo demás lo opera la central. */
body[data-principal='0'] .solo-principal { display: none !important; }

/* El pie del lateral va sobre negro, así que sus controles no pueden usar los
   globales (fondo blanco, borde gris claro). */
.sucursal-activa {
  width: 100%;
  border-color: #333;
  background: #1e1e1e;
  color: #fff;
}

.lateral-pie {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 8px;
}
.yo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.yo-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--marca-oro);
  color: var(--marca-negro);
  font-size: 12px;
  font-weight: 600;
}
.yo-avatar:empty { display: none; }
/* Nombre arriba y rol abajo. El separador « · » existe solo para que el texto
   corrido siga diciendo «Nombre · Rol» (lectores de pantalla, tests). */
.yo-nombre {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  line-height: 1.35;
}
.yo-n {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yo-sep { display: none; }
.yo-rol { color: #9a9a9a; font-size: 12px; }

.lateral-pie #btn-logout {
  min-height: 34px;
  border: 1px solid #333;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 13px;
}
.lateral-pie #btn-logout:hover { background: #1e1e1e; border-color: #333; color: #fff; }

.usuario { flex-wrap: wrap; }
.usuario-info,
.sesion-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.usuario-nombre,
.sesion-nombre { font-weight: 500; }
.usuario-alias {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}
/* Un usuario desactivado sigue en la lista —hay que poder reactivarlo— pero
   apagado: es el estado excepcional y no debe leerse igual que el normal. */
.usuario-inactivo .usuario-nombre,
.usuario-inactivo .usuario-alias { color: var(--color-text-quaternary); }

.rol {
  flex: none;
  padding: 0 var(--size-xs);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 20px;
}
.rol-admin {
  border-color: var(--color-primary-border);
  background: var(--color-primary-bg);
  color: var(--color-primary-active);
}
.rol-operador {
  border-color: var(--color-border);
  background: var(--color-fill-tertiary);
  color: var(--color-text-secondary);
}
.usuario-estado {
  flex: none;
  padding: 0 var(--size-xs);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  line-height: 20px;
}

.usuario-acciones {
  display: flex;
  align-items: center;
  gap: var(--size-sm);
  margin-left: auto;
}
.usuario-tu {
  color: var(--color-text-quaternary);
  font-size: var(--font-size-sm);
}

/* Alta de usuario: cuatro campos que entran en una línea en escritorio y se
   apilan sin tocar nada cuando no. */
.form-usuario {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-xs);
  margin-top: var(--size);
}
.form-usuario input { flex: 1 1 140px; }
.form-usuario select { flex: 0 1 160px; }

.sesion-meta {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}
/* El dispositivo desde el que se está mirando, marcado para que nadie se cierre
   a sí mismo creyendo que cerraba otro. */
.sesion-esta { background: var(--color-primary-bg); }
.sesion-actual {
  flex: none;
  padding: 0 var(--size-xs);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-container);
  color: var(--color-primary-active);
  font-size: var(--font-size-sm);
  line-height: 20px;
}