/* tiza-ui: shared tokens, global header and footer for the Tiza Group ecosystem
   (tizagrp.com, app.tizagrp.com, sun.tizagrp.com, shop.tizagrp.com).
   Source of truth: ~/apps/tiza-ui/src. Do not edit the copies in each property; run sync.sh. */

:root {
  --tz-negro: #0a0a09;
  --tz-panel: #121210;
  --tz-panel-2: #191917;
  --tz-linea: #2b2a27;
  --tz-linea-2: #3d3c38;
  --tz-texto: #ecebe6;
  --tz-texto-2: #d6d5d0;
  --tz-fuerte: #fff;
  --tz-gris: #9d9b94;
  --tz-muerto: #6e6c66;
  --tz-tiza: #921b84;
  --tz-tiza-hover: #a8239a;
  --tz-tiza-luz: #e061cf;
  --tz-prueba: #f5c400;
  --tz-ok: #3ddc84;
  --tz-error: #ff6b5e;
  --tz-ancho: 1240px;
  --tz-alto: 64px;
  --tz-font: "Archivo Variable", "Archivo", system-ui, sans-serif;
}
:root[data-tema="claro"] {
  --tz-negro: #fff;
  --tz-panel: #fff;
  --tz-panel-2: #f4f4f5;
  --tz-linea: #e2e2e5;
  --tz-linea-2: #b0b0b6;
  --tz-texto: #1f1e1b;
  --tz-texto-2: #34332f;
  --tz-fuerte: #0e0e0c;
  --tz-gris: #57554f;
  --tz-muerto: #85827a;
  --tz-tiza-hover: #7a1570;
  --tz-tiza-luz: #9c1f8e;
  --tz-prueba: #876500;
  --tz-ok: #0f7a45;
  --tz-error: #b3261e;
}

/* ---------- header ---------- */
.tzh, .tzh *, .tzf, .tzf * { box-sizing: border-box; }
.tzh {
  position: sticky; top: 0; z-index: 900;
  font-family: var(--tz-font); color: var(--tz-texto);
  background: var(--tz-negro); border-bottom: 1px solid var(--tz-linea);
}
.tzh-in {
  width: min(var(--tz-ancho), 100% - 48px); margin-inline: auto;
  height: var(--tz-alto); display: flex; align-items: center; gap: 20px;
}
.tzh-sel, .tzh-menu, .tzh-ico {
  flex: none; width: 40px; height: 40px; padding: 0; margin: 0;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--tz-texto);
  border: 1px solid var(--tz-linea); border-radius: 0; font: inherit;
  text-decoration: none; position: relative;
}
.tzh-sel:hover, .tzh-menu:hover, .tzh-ico:hover, .tzh-sel[aria-expanded="true"], .tzh-menu[aria-expanded="true"] { background: var(--tz-panel-2); color: var(--tz-fuerte); }
.tzh-sel:focus-visible, .tzh a:focus-visible, .tzh button:focus-visible, .tzf a:focus-visible { outline: 3px solid var(--tz-prueba); outline-offset: 2px; }
.tzh-sel svg, .tzh-menu svg, .tzh-ico svg { width: 18px; height: 18px; display: block; }
.tzh-marca { flex: none; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tz-fuerte); }
.tzh-marca img { display: block; height: 30px; width: auto; }
.tzh-marca .l-cla { display: none; }
:root[data-tema="claro"] .tzh-marca .l-osc, :root[data-tema="claro"] .tzf-marca .l-osc { display: none; }
:root[data-tema="claro"] .tzh-marca .l-cla, :root[data-tema="claro"] .tzf-marca .l-cla { display: block; }
.tzh-prod { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; font-stretch: 112%; line-height: 1; }
.tzh-prod::before { content: ""; width: 1px; height: 24px; background: var(--tz-linea-2); }
.tzh-nav { display: flex; align-items: center; gap: 24px; margin-left: 16px; min-width: 0; }
.tzh-nav a { color: var(--tz-texto-2); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; padding: 8px 0; }
.tzh-nav a:hover, .tzh-nav a[aria-current="page"] { color: var(--tz-fuerte); }
.tzh-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--tz-tiza-luz); }
.tzh-acc { margin-left: auto; flex: none; display: flex; align-items: center; gap: 12px; }
.tzh-btn {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  background: var(--tz-tiza); color: #fff; border: 1px solid var(--tz-tiza); border-radius: 0;
  text-decoration: none; font-family: var(--tz-font); font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer;
}
.tzh-btn:hover { background: var(--tz-tiza-hover); border-color: var(--tz-tiza-hover); color: #fff; }
.tzh-btn.o { background: transparent; border-color: var(--tz-linea-2); color: var(--tz-fuerte); }
.tzh-btn.o:hover { background: var(--tz-panel-2); }
.tzh-cuenta[data-estado="sesion"] {
  width: 40px; padding: 0; justify-content: center;
  background: var(--tz-panel-2); border-color: var(--tz-linea-2); color: var(--tz-fuerte); font-weight: 700;
}
.tzh-num {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--tz-tiza); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.tzh-num:empty { display: none; }
.tzh-menu { display: none; }

/* product switcher */
.tzh-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 1px;
  background: var(--tz-negro); border-bottom: 1px solid var(--tz-linea);
}
.tzh-panel[hidden] { display: none; }
.tzh-panel-in { width: min(var(--tz-ancho), 100% - 48px); margin-inline: auto; padding: 24px 0; display: flex; flex-direction: column; gap: 16px; }
.tzh-panel-t { margin: 0; font-size: 13px; color: var(--tz-gris); }
.tzh-prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--tz-linea); border: 1px solid var(--tz-linea); margin: 0; padding: 0; list-style: none; }
.tzh-prods a { display: flex; flex-direction: column; gap: 8px; min-height: 112px; height: 100%; padding: 20px; background: var(--tz-panel); text-decoration: none; }
.tzh-prods a:hover { background: var(--tz-panel-2); }
.tzh-prods a[aria-current="true"] { background: var(--tz-panel-2); box-shadow: inset 0 2px 0 var(--tz-tiza-luz); }
.tzh-prods b { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 17px; font-weight: 700; font-stretch: 112%; color: var(--tz-fuerte); }
.tzh-prods b small { font-size: 12px; font-weight: 500; font-stretch: 100%; color: var(--tz-tiza-luz); }
.tzh-prods span { font-size: 14px; line-height: 1.45; color: var(--tz-gris); }
.tzh-prods code { margin-top: auto; font: 12px ui-monospace, "JetBrains Mono", monospace; color: var(--tz-muerto); }

/* phones and tablets: product menu collapses behind a button; switcher becomes a list */
@media (max-width: 1080px) {
  .tzh-in { gap: 12px; }
  .tzh-menu { display: grid; }
  .tzh-nav { display: none; }
  .tzh-nav.abierta {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    position: absolute; left: 0; right: 0; top: 100%; padding: 8px 16px 16px;
    background: var(--tz-negro); border-bottom: 1px solid var(--tz-linea);
  }
  .tzh-nav.abierta a { padding: 14px 4px; border-bottom: 1px solid var(--tz-linea); font-size: 16px; color: var(--tz-fuerte); box-shadow: none; }
  .tzh-prods { grid-template-columns: 1fr; }
  .tzh-prods a { min-height: 0; padding: 16px; }
  .tzh-prods code { display: none; }
  .tzh-panel-in { padding: 16px 0; }
}
@media (max-width: 1080px) {
  .tzh-menu { margin-left: auto; }
  .tzh-acc { margin-left: 0; gap: 8px; }
}
@media (max-width: 560px) {
  .tzh-acc .tzh-btn:not(.tzh-cuenta) { display: none; }
  .tzh-marca img { height: 26px; }
  .tzh-prod { font-size: 16px; }
}
@media (max-width: 420px) {
  .tzh-in { gap: 8px; }
  .tzh-marca { gap: 8px; }
  .tzh-prod { gap: 8px; font-size: 15px; }
  .tzh-marca img { height: 24px; }
  .tzh-cuenta { padding: 0 10px; }
}

/* ---------- footer ---------- */
.tzf { font-family: var(--tz-font); background: var(--tz-negro); border-top: 1px solid var(--tz-linea); color: var(--tz-gris); }
.tzf-in { width: min(var(--tz-ancho), 100% - 48px); margin-inline: auto; padding: 48px 0 32px; display: flex; flex-direction: column; gap: 40px; }
.tzf-g { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.tzf-marca { display: flex; flex-direction: column; gap: 12px; }
.tzf-marca img { height: 30px; width: auto; align-self: flex-start; }
.tzf-marca .l-cla { display: none; }
.tzf p { margin: 0; font-size: 14px; line-height: 1.5; }
.tzf-t { font-size: 13px !important; font-weight: 600; color: var(--tz-fuerte); margin: 0 0 4px !important; }
.tzf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tzf li { margin: 0; padding: 0; line-height: 1.4; }
.tzf a { color: var(--tz-gris); text-decoration: none; font-size: 14px; line-height: 1.4; display: inline; padding: 0; }
.tzf a:hover { color: var(--tz-fuerte); }
.tzf-legal { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; border-top: 1px solid var(--tz-linea); padding-top: 20px; font-size: 13px; }
.tzf-legal > span:last-child { display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 900px) {
  .tzf-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tzf-marca { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .tzf-in { padding: 40px 0 24px; } }