/* ═══════════════════════════════════════════════════════════════════════
   HOJA TU CUENTA (mockups/barra-recorrer-amigos.html, A5; js/tu-cuenta.js)
   El cajón lateral (#drawer, waze.css + piel.css) pasa a ser una hoja que sube desde abajo, sobre la barra.
   Carga después de piel.css. Un solo acento, tinta y grises; nada por debajo de 12 px.
   ═══════════════════════════════════════════════════════════════════════ */
.w-drawer.tc-hoja { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: 560px; margin: 0 auto; max-height: calc(100dvh - 72px);
  border-radius: 22px 22px 0 0; padding: 6px 0 calc(14px + var(--sa-abajo, 0px)); transform: translateY(105%); z-index: 1400; }
.w-drawer.tc-hoja.abierto { transform: translateY(0); }
.tc-asa { display: block; width: 44px; height: 18px; margin: 0 auto 2px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.tc-asa::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 4px; background: var(--line); }

.w-drawer.tc-hoja .cabecera { padding: 6px 18px 14px; border-bottom: 0; }
.w-drawer.tc-hoja .cabecera .quien { flex: 1; }
.w-drawer.tc-hoja .cabecera .w-avatar.grande { width: 52px; height: 52px; }
.w-drawer.tc-hoja .cabecera .modo-chip { margin-top: 4px; }
.w-drawer.tc-hoja .tc-lnk { flex: none; width: auto; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--field); color: var(--ink);
  font-size: 13px; font-weight: 500; gap: 0; }

/* Mosaico: Vales · Boletos · Logros · Tokens (tres cuadros fuera de un país con sorteos) */
.tc-mosaico { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px 12px; }
.tc-mosaico.tres { grid-template-columns: repeat(3, 1fr); }
.w-drawer.tc-hoja .tc-mosaico a { display: grid; justify-items: center; align-content: start; gap: 2px; min-height: 0; width: auto; padding: 12px 4px 10px;
  border-radius: 14px; background: var(--surf); text-align: center; color: var(--ink); font-size: 12px; }
.w-drawer.tc-hoja .tc-mosaico a .trazo { width: 20px; height: 20px; margin: 0 0 2px; color: var(--muted); }
.tc-mosaico b { font-size: 18px; font-weight: 500; line-height: 1.1; }
.tc-mosaico small { font-size: 12px; color: var(--muted); line-height: 1.2; }

/* Filas con su estado a la derecha (Membresía, Modo) */
.w-drawer.tc-hoja .tc-est { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; text-align: right; }
.w-drawer.tc-hoja .tc-modos { padding: 0 0 4px 34px; }
.w-drawer.tc-hoja .tc-modos .modo { min-height: 44px; font-size: 15px; border-radius: 12px; }

/* El botón redondo: tu monograma y el punto de aviso */
.tc-mono { position: absolute; inset: 3px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--surf); font-size: 15px; font-weight: 500; }
#btn-cuenta, [data-cuenta] { position: relative; }
.tc-punto { position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 2px var(--surf); }

@media (min-width: 900px) {
  .w-drawer.tc-hoja { bottom: 16px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .w-drawer.tc-hoja { transition: none; } }