/*
 * Sitio web de Nalt: estilos propios sobre los tokens de las apps
 * (tlq-sitio-tokens.css). Solo variables de los tokens: nada de colores sueltos.
 * Botones y zonas táctiles de al menos 48 px; contraste AA.
 */

/* --- Barra superior única (mismo estilo que el menú de escritorio de la app) ---
   Sustituye al encabezado del tema: un solo menú, con el saldo, el carrito y la entrada. */
.ct-header, #header.ct-header { display: none !important; }
.admin-bar .tlq-barra { top: 32px; }
@media (max-width: 782px) { .admin-bar .tlq-barra { top: 46px; } }
/* En celular WordPress deja su barra negra sin fijar y se va al bajar; así quedaba un hueco sobre la nuestra */
@media (max-width: 600px) { #wpadminbar { position: fixed !important; } }

/* Fija en la pantalla, siempre visible al bajar. El "hueco" ocupa su lugar en la página
   (su alto lo ajusta tlq-barra.js; el mínimo evita saltos si el script tarda). */
.tlq-barra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--nalt-negro);
  color: #fff;
  font-family: var(--nalt-fuente);
}
.tlq-barra-hueco { min-height: 82px; }
@media (max-width: 1023.98px) { .tlq-barra-hueco { min-height: 100px; } }
.tlq-barra__interior {
  display: flex;
  align-items: center;
  gap: var(--nalt-espacio-4);
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px var(--nalt-espacio-4);
}
.tlq-barra__marca {
  flex-shrink: 0;
  font-family: var(--nalt-fuente-titulo);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
}
.tlq-barra__boton {
  display: none;
  margin-left: auto;
  min-height: 48px;
  padding: 0 var(--nalt-espacio-4);
  background: transparent;
  border: 1.5px solid var(--color-borde-oscuro, #3A342C);
  border-radius: var(--nalt-radio-pill);
  color: #fff;
  font: 700 var(--nalt-texto-sm) var(--nalt-fuente);
  cursor: pointer;
}
.tlq-barra__menu { flex: 1; min-width: 0; }
.tlq-barra__menu ul, .tlq-barra__sub { margin: 0; padding: 0; list-style: none; }
.tlq-barra__menu > ul { display: flex; flex-wrap: nowrap; gap: var(--nalt-espacio-4); }
.tlq-barra__item { position: relative; }
.tlq-barra__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 2px;
  border-bottom: 2px solid transparent;
  color: #B8B0A3;
  font-size: var(--nalt-texto-sm);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.tlq-barra__enlace[aria-current="page"] { color: #fff; border-bottom-color: var(--nalt-jade-sobre-oscuro); }
.tlq-barra__enlace:hover { color: #fff; }
.tlq-barra__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: var(--nalt-espacio-2);
  background: var(--nalt-negro);
  border: 1px solid #3A342C;
  border-radius: var(--nalt-radio-md);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6);
}
.tlq-barra__item--sub:hover > .tlq-barra__sub, .tlq-barra__item--sub:focus-within > .tlq-barra__sub { display: block; }
.tlq-barra__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--nalt-espacio-3);
  border-radius: var(--nalt-radio-sm);
  color: #B8B0A3;
  font-size: var(--nalt-texto-sm);
  font-weight: 600;
  text-decoration: none;
}
.tlq-barra__sub a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.tlq-barra__derecha { display: flex; align-items: center; gap: var(--nalt-espacio-3); flex-shrink: 0; }
.tlq-barra__saldo {
  padding: 6px 12px;
  border-radius: var(--nalt-radio-pill);
  background: var(--nalt-dorado);
  color: var(--nalt-negro);
  font-size: var(--nalt-texto-xs);
  font-weight: 700;
  white-space: nowrap;
}
.tlq-barra__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #fff;
}
.tlq-barra__svg { width: 24px; height: 24px; }
.tlq-barra__derecha .tlq-barra__enlace { padding: 0 var(--nalt-espacio-3); border: 0; border-radius: var(--nalt-radio-sm); color: #fff; }
.tlq-barra__derecha .tlq-barra__enlace:hover { background: rgba(255, 255, 255, .12); }
.tlq-barra__derecha .tlq-barra__enlace--principal { background: var(--nalt-naranja); color: var(--nalt-negro); }
.tlq-barra__derecha .tlq-barra__enlace--principal:hover { background: var(--nalt-naranja-petalo); }
.tlq-barra a:focus-visible, .tlq-barra__boton:focus-visible { outline: 3px solid var(--nalt-jade-sobre-oscuro); outline-offset: 2px; }

/* Franja de papel picado, igual que la de la app */
.tlq-barra__picado {
  height: 15px;
  width: 100%;
  background: var(--nalt-naranja);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 97.5% 0%, 92.5% 100%, 87.5% 0%, 82.5% 100%, 77.5% 0%, 72.5% 100%, 67.5% 0%, 62.5% 100%, 57.5% 0%, 52.5% 100%, 47.5% 0%, 42.5% 100%, 37.5% 0%, 32.5% 100%, 27.5% 0%, 22.5% 100%, 17.5% 0%, 12.5% 100%, 7.5% 0%, 2.5% 100%, 0 0);
}

/* Celular y tableta: los enlaces se abren con el botón "Menú" */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .tlq-barra__menu > ul { gap: var(--nalt-espacio-3); }
  .tlq-barra__enlace { font-size: var(--nalt-texto-xs); }
}
@media (max-width: 1023.98px) {
  .tlq-barra__menu > ul { flex-wrap: wrap; }
  .tlq-barra__interior { flex-wrap: wrap; gap: var(--nalt-espacio-2) var(--nalt-espacio-3); padding: 8px var(--nalt-espacio-4); }
  .tlq-barra__marca { order: 1; }
  .tlq-barra__derecha { order: 2; margin-left: auto; }
  .tlq-barra__boton { order: 3; display: inline-flex; align-items: center; margin-left: 0; }
  .tlq-barra__menu { order: 4; display: none; flex-basis: 100%; }
  .tlq-barra__menu.is-abierto { display: block; }
  /* Abierto, el menú es una rejilla compacta: cabe en la pantalla y la barra no necesita deslizarse */
  .tlq-barra__menu > ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nalt-espacio-1) var(--nalt-espacio-2); }
  .tlq-barra__enlace { width: 100%; min-height: 44px; justify-content: center; text-align: center; border-bottom-width: 0; }
  /* Los submenús (categorías de Tienda) no se despliegan aquí: alargaban la barra y la hacían deslizarse */
  .tlq-barra__sub, .tlq-barra__item--sub:hover > .tlq-barra__sub, .tlq-barra__item--sub:focus-within > .tlq-barra__sub { display: none; }
}

@media (max-width: 600px) {
  /* Celular: marca y "Menú" arriba; saldo, carrito y entrada en una segunda fila */
  .tlq-barra__boton { order: 2; margin-left: auto; }
  .tlq-barra__derecha { order: 3; flex-basis: 100%; margin-left: 0; justify-content: space-between; }
  .tlq-barra__menu > ul { grid-template-columns: repeat(2, 1fr); }
}

/* --- Entrada (Mi cuenta de WooCommerce) con el estilo oscuro de las apps --- */
.woocommerce-account:not(.logged-in) .tlq-saludo {
  margin: var(--nalt-espacio-5) 0 var(--nalt-espacio-2);
  font-family: var(--nalt-fuente-titulo);
  font-size: var(--nalt-texto-xl);
  font-weight: 800;
  color: var(--nalt-naranja-texto);
}
.woocommerce-form-login {
  --color-fondo-tarjeta: #17130F;
  --color-texto: #E6E0D5;
  --color-borde: #3A342C;
  padding: var(--nalt-espacio-5);
  background: var(--nalt-fondo-login);
  border: 1px solid var(--color-borde) !important;
  border-radius: var(--nalt-radio-xl);
  color: var(--color-texto);
  font-family: var(--nalt-fuente);
}
.woocommerce-form-login label { color: var(--color-texto); font-weight: 700; }
.woocommerce-form-login input.input-text {
  min-height: 48px;
  padding: 0 var(--nalt-espacio-3);
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--nalt-radio-sm);
  color: var(--color-texto);
}
.woocommerce-form-login input.input-text:focus-visible { outline: 3px solid var(--nalt-jade-sobre-oscuro); outline-offset: 2px; }
.woocommerce-form-login .woocommerce-button,
.woocommerce-form-login button[type="submit"] {
  min-height: var(--nalt-boton-alto);
  padding: 0 var(--nalt-espacio-5);
  background: var(--nalt-naranja);
  border: 0;
  border-radius: var(--nalt-radio-md);
  color: var(--nalt-negro);
  font-weight: 800;
}
.woocommerce-form-login .lost_password a { color: var(--nalt-jade-sobre-oscuro); }

/* --- Autorización del pago con saldo (checkout) --- */
.tlq-autoriza {
  margin: var(--nalt-espacio-4) 0;
  padding: var(--nalt-espacio-4);
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--nalt-radio-lg);
  box-shadow: var(--nalt-sombra-tarjeta);
}
.tlq-autoriza__pedir { min-height: 48px; margin-bottom: var(--nalt-espacio-3); }
.tlq-autoriza__codigo {
  display: block;
  width: 100%;
  min-height: 56px;
  text-align: center;
  font-family: var(--nalt-fuente-titulo);
  font-size: var(--nalt-texto-xl);
  font-weight: 800;
  letter-spacing: .3em;
}
.tlq-autoriza__estado { margin: var(--nalt-espacio-2) 0 0; font-size: var(--nalt-texto-sm); color: var(--color-texto-tenue); }

/* --- Solo la barra superior queda fija: sin botón de subir ni barra de progreso del tema --- */
.ct-back-to-top, .ct-scroll-progress, #ct-scroll-progress { display: none !important; }

/* --- Los títulos de las páginas no se muestran (cada página trae el suyo dentro del contenido) --- */
.page .hero-section, .page .entry-header, .page .page-title, .page h1.entry-title, .page .ct-page-title { display: none !important; }

/* --- Pie de página propio (sustituye al del tema) --- */
.ct-footer, footer#footer, .tlq-tomin-pie, .tlq-av-pie { display: none !important; }
.tlq-pie { margin-top: var(--nalt-espacio-6); background: var(--nalt-negro); color: #B8B0A3; font-family: var(--nalt-fuente); }
.tlq-pie__picado {
  height: 15px;
  background: var(--nalt-naranja);
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 97.5% 100%, 92.5% 0%, 87.5% 100%, 82.5% 0%, 77.5% 100%, 72.5% 0%, 67.5% 100%, 62.5% 0%, 57.5% 100%, 52.5% 0%, 47.5% 100%, 42.5% 0%, 37.5% 100%, 32.5% 0%, 27.5% 100%, 22.5% 0%, 17.5% 100%, 12.5% 0%, 7.5% 100%, 2.5% 0%, 0 100%);
}
.tlq-pie__interior {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nalt-espacio-5);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--nalt-espacio-6) var(--nalt-espacio-4) var(--nalt-espacio-4);
}
.tlq-pie__nombre { margin: 0; font-family: var(--nalt-fuente-titulo); font-size: var(--nalt-texto-xl); font-weight: 800; color: #fff; }
.tlq-pie__lema { margin: var(--nalt-espacio-1) 0 0; font-size: var(--nalt-texto-sm); }
.tlq-pie__enlaces ul { margin: 0; padding: 0; list-style: none; }
.tlq-pie__enlaces a, .tlq-pie__contacto a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-size: var(--nalt-texto-sm); font-weight: 600; text-decoration: none; }
.tlq-pie__enlaces a:hover, .tlq-pie__contacto a:hover { color: var(--nalt-jade-sobre-oscuro); }
.tlq-pie a:focus-visible { outline: 3px solid var(--nalt-jade-sobre-oscuro); outline-offset: 2px; }
.tlq-pie__contacto { margin: 0; font-size: var(--nalt-texto-sm); }
.tlq-pie__derechos { margin: 0; padding: var(--nalt-espacio-4); border-top: 1px solid #3A342C; text-align: center; font-size: var(--nalt-texto-xs); }
@media (min-width: 768px) {
  .tlq-pie__interior { grid-template-columns: 1.2fr 1.6fr 1.2fr; padding-left: var(--nalt-espacio-5); padding-right: var(--nalt-espacio-5); }
}
@media (min-width: 1024px) {
  .tlq-pie__interior { padding-left: var(--nalt-espacio-6); padding-right: var(--nalt-espacio-6); }
}