/* ============================================================
   VISTA DE ESCRITORIO de la app de talleres (2026-09-08, pedido de
   Hernán: "que haya una vista web para cuando en la computadora y
   otra cuando este en el celular, como esta").

   En el celular NO cambia nada: sigue el marco .phone de siempre. En
   una pantalla ancha (>=900px), si la pantalla actual ya tiene una
   versión de escritorio (ver escritorio_flag en base_cliente.html --
   hoy Inicio, Catálogo, Carrito, Pedidos, Perfil y Producto, todas las
   pantallas principales de la app de talleres), se oculta el .phone y
   se muestra este bloque en su lugar, reusando las clases t-* de
   tienda.css (header, buscador, grilla de tarjetas, ficha de producto,
   carrito de dos columnas, tarjetas de formulario) para que se vea
   como un sitio de verdad, no como un simulador de celular estirado.

   Si se agrega una pantalla nueva a la app de talleres sin vista de
   escritorio propia todavía, no pasa nada raro: al no imprimir el
   "si" de escritorio_flag, el "if" de base_cliente.html ni genera el
   ".tc-desktop", así que el ".phone" se sigue viendo centrado en
   pantallas anchas -- mejor eso que una pantalla en blanco.
   ============================================================ */

.tc-desktop { display: none; }

.tc-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tc-navlink {
  font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.75);
  padding: 8px 12px; border-radius: 8px;
}
.tc-navlink:hover { color: #fff; background: rgba(255,255,255,.08); }
.tc-navlink.activo { color: #fff; background: rgba(255,255,255,.14); }

.tc-cuenta {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  font-size: 12.5px; color: rgba(255,255,255,.75); white-space: nowrap;
}
.tc-cuenta a, .tc-cuenta button {
  color: rgba(255,255,255,.9); font-weight: 600; text-decoration: underline;
  border: none; background: none; padding: 0; font-size: inherit; font-family: inherit; cursor: pointer;
}
.tc-cuenta a:hover, .tc-cuenta button:hover { color: #fff; }

@media (min-width: 900px) {
  .tc-desktop { display: block; }
  body:has(.tc-desktop) .phone { display: none; }
}