@layer legado {
/* tarjeta-visita: «Mi tarjeta» (el QR que escanea el cliente) y la lista de Ajustes → Usuarios (15-oct-2026).
 * Ver static/tarjeta-visita.js y backend/typy_tarjetas.py. El SVG del QR trae su propio fondo blanco y su
 * zona blanca, así que se lee igual sobre la superficie oscura de los diálogos. Todo cuelga de `.ty-tarjeta-`
 * y de `.sidebar-tarjeta`. La página PÚBLICA de la tarjeta no usa esta hoja: lleva sus estilos en línea. */

/* El botón del menú lateral, justo encima de «Cerrar sesión», que es quien empuja al fondo (margin-top: auto). */
.sidebar-tarjeta {
  margin-top: auto;
  width: 100%;
  min-height: 42px;
  border-radius: var(--ty-r-3);
}

.sidebar-tarjeta + .sidebar-logout {
  margin-top: var(--ty-e-2);
}

.ops-shell.nav-collapsed .sidebar-tarjeta {
  display: none;
}

.ty-tarjeta-qr {
  display: flex;
  justify-content: center;
}

/* Lo más grande que quepa: un móvil lo lee desde la pantalla de otro a un brazo de distancia. */
.ty-tarjeta-qr svg {
  width: min(320px, calc(1vw * 72));
  height: auto;
  border-radius: var(--ty-r-2);
}

.ty-tarjeta-datos {
  margin-top: var(--ty-e-4);
  text-align: center;
}

.ty-tarjeta-datos p {
  margin: var(--ty-e-1) 0;
}

.ty-tarjeta-datos b {
  color: var(--ty-marca);
  margin-right: var(--ty-e-1);
}

.ty-tarjeta-cargo {
  opacity: 0.75;
}

.ty-tarjeta-enlace {
  margin-top: var(--ty-e-3);
  text-align: center;
  font-size: 0.85em;
  word-break: break-all;
}

.ty-tarjeta-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ty-tarjeta-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ty-e-3);
  padding: var(--ty-e-3) 0;
  border-bottom: 1px solid var(--ty-raya);
}

.ty-tarjeta-fila small {
  display: block;
  opacity: 0.7;
}

.ty-tarjeta-fila > span {
  display: flex;
  gap: var(--ty-e-2);
  flex: none;
}

.ty-tarjeta-fila.is-inactiva {
  opacity: 0.55;
}

/* «Mi firma de correo» (20-oct-2026). La firma sobre blanco, como la verá el cliente: la superficie del
 * diálogo es oscura y la firma trae sus tintas en línea (azul marino y gris), que sobre oscuro no se leen. */
.ty-firma-papel {
  background-color: var(--ty-papel-correo);
  color: var(--ty-tinta-correo);
  border-radius: var(--ty-r-2);
  padding: var(--ty-e-2) var(--ty-e-4) var(--ty-e-4);
  overflow-x: auto;
}

.ty-firma-nota {
  margin: var(--ty-e-3) 0 var(--ty-e-2);
  opacity: 0.8;
}

.ty-firma-pasos {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.9em;
}

.ty-firma-pasos li {
  margin: var(--ty-e-1) 0;
}
}