/* Triclo Design System — CSS de componentes.
   Extraído de "Design System/marca/components.html" por .design-sync/build-offscript.mjs. */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


    /* ---- Buttons ---- */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-6);
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 500;
      cursor: pointer;
      transition: background var(--transition-fast), border-color var(--transition-fast);
      text-decoration: none;
      border: 1.5px solid transparent;
    }


    .btn-primary {
      background: var(--color-action-primary);
      color: var(--color-text-inverse);
      border-color: var(--color-action-primary);
    }

    .btn-primary:hover {
      background: var(--color-action-primary-hover);
      border-color: var(--color-action-primary-hover);
    }


    .btn-secondary {
      background: transparent;
      color: var(--color-text-primary);
      border-color: var(--color-border-strong);
    }

    .btn-secondary:hover {
      background: var(--color-bg-subtle);
    }


    /* ---- Badges ---- */
    .badge {
      display: inline-block;
      padding: 2px var(--space-3);
      border-radius: var(--radius-full);
      font-family: var(--font-body);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }


    .badge-bodywork   { background: var(--color-category-bodywork);   color: var(--color-text-primary); }

    .badge-mechanical { background: var(--color-category-mechanical); color: var(--color-text-inverse); }

    .badge-clips      { background: var(--color-category-clips);      color: var(--color-text-inverse); }


    /* ---- Product Card ---- */
    .product-card {
      border: 1px solid var(--color-border-default);
      border-radius: var(--radius-md);
      background: var(--color-bg-page);
      padding: var(--space-6);
      max-width: 320px;
    }


    .product-card__ref {
      font-family: var(--font-technical);
      font-size: 0.8125rem;
      color: var(--color-text-muted);
      margin-top: var(--space-2);
    }


    .product-card__name {
      font-family: var(--font-body);
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--color-text-primary);
      margin-top: var(--space-2);
      line-height: 1.3;
    }


    .product-card__oem {
      font-family: var(--font-technical);
      font-size: 0.75rem;
      color: var(--color-text-muted);
      margin-top: var(--space-1);
    }


    .product-card__compat {
      font-size: 0.8125rem;
      color: var(--color-text-muted);
      margin-top: var(--space-4);
      line-height: 1.5;
      border-top: 1px solid var(--color-border-subtle);
      padding-top: var(--space-3);
    }


    .product-card__compat strong {
      color: var(--color-text-primary);
      font-size: 0.6875rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      display: block;
      margin-bottom: var(--space-1);
    }


    /* ---- Search Input ---- */
    .search-wrap {
      position: relative;
      max-width: 400px;
    }


    .search-wrap svg {
      position: absolute;
      left: var(--space-3);
      top: 50%;
      transform: translateY(-50%);
      color: var(--color-text-muted);
      pointer-events: none;
    }


    .input-search {
      width: 100%;
      padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
      border: 1.5px solid var(--color-border-default);
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--color-text-primary);
      background: var(--color-bg-page);
      outline: none;
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }


    .input-search::placeholder { color: var(--color-text-muted); }


    .input-search:focus {
      border-color: var(--color-focus-ring);
      box-shadow: 0 0 0 3px rgba(0, 74, 153, 0.15);
    }


    /* ---- Header/Nav ---- */
    .nav {
      background: var(--color-bg-inverse);
      padding: var(--space-4) var(--space-8);
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: var(--radius-md);
    }


    .nav__logo {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-text-inverse);
      text-decoration: none;
    }


    .nav__links {
      display: flex;
      gap: var(--space-6);
      list-style: none;
    }


    .nav__links a {
      color: var(--color-text-inverse);
      text-decoration: none;
      font-size: 0.875rem;
      font-weight: 400;
      opacity: 0.85;
      transition: opacity var(--transition-fast);
    }


    .nav__links a:hover { opacity: 1; }


    /* ---- Footer ---- */
    .footer {
      background: var(--color-bg-inverse-strong);
      color: var(--color-text-inverse);
      padding: var(--space-8);
      border-radius: var(--radius-md);
    }


    .footer__brand {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: var(--space-4);
    }


    .footer__contact {
      font-size: 0.8125rem;
      opacity: 0.75;
      line-height: 1.8;
    }


    .footer__divider {
      border: none;
      border-top: 1px solid rgba(255,255,255,0.12);
      margin: var(--space-6) 0;
    }


    .footer__copy {
      font-size: 0.75rem;
      opacity: 0.5;
    }


    /* ---- Alerts / Toasts ---- */
    .alert {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
      border-radius: var(--radius-sm);
      border-left: 4px solid transparent;
      background: var(--color-bg-subtle);
      font-size: 0.9375rem;
      margin-bottom: var(--space-3);
    }


    .alert-success { border-left-color: var(--color-success);  background: #f0f9eb; }

    .alert-warning { border-left-color: var(--color-warning);  background: #fffce0; }

    .alert-danger  { border-left-color: var(--color-danger);   background: #fff0f3; }


    .alert__icon { flex-shrink: 0; margin-top: 2px; }

    .alert__title { font-weight: 600; margin-bottom: 2px; color: var(--color-text-primary); }

    .alert__body  { color: var(--color-text-muted); font-size: 0.875rem; }


    /* ---- Data Table ---- */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.875rem;
    }


    .data-table thead th {
      background: var(--color-bg-subtle);
      color: var(--color-text-primary);
      font-weight: 600;
      text-align: left;
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-border-default);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }


    .data-table tbody td {
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-border-subtle);
      vertical-align: middle;
    }


    .data-table tbody tr:nth-child(even) td {
      background: var(--color-bg-muted);
    }


    .data-table .td-ref {
      font-family: var(--font-technical);
      font-size: 0.8125rem;
      color: var(--color-text-primary);
      white-space: nowrap;
    }


    .data-table .td-desc {
      color: var(--color-text-primary);
    }


    .data-table .td-muted {
      color: var(--color-text-muted);
      font-size: 0.8125rem;
    }


    .seal {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 120px;
      height: 120px;
      background: var(--color-bg-inverse);
      color: var(--color-text-inverse);
      border-radius: var(--radius-sm);
      outline: 2px solid var(--color-bg-inverse);
      outline-offset: 3px;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);
      padding: var(--space-4);
      text-align: center;
      gap: var(--space-2);
    }


    .seal__label-top {
      font-family: var(--font-technical);
      font-size: 0.5rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      opacity: 0.7;
    }


    .seal__text {
      font-family: var(--font-display);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1.2;
    }


    .seal__desc {
      font-size: 0.8125rem;
      color: var(--color-text-muted);
      max-width: 240px;
      line-height: 1.5;
    }

/* ---- Base de página Triclo (del quick-start del README del repo) -------- */
body {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

/* ---- Logos Triclo (SVG embebido; ver components/Marca/Logos) ------------- */
.triclo-logo {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.triclo-logo--imagotipo         { background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%20%3Csvg%20id%3D%22Capa_1%22%20data-name%3D%22Capa%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205917.37%201125%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%231c2f76%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M451.91%2C0L0%2C675h104.29v112.5c0%2C191.99%2C155.64%2C337.5%2C347.62%2C337.5h34.76v-478.12l208.58-309.38h-243.34V0ZM564.53%2C407.02l-135.5%2C200.99-11.88%2C17.62v427.87c-62.09-7.11-118.99-33.27-162.9-75.42-51.87-49.78-80.43-117.47-80.43-190.58v-182.02h-43.6l252.17-376.66v178.21h182.14Z%22%2F%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M5788.82%2C375.01h-597.04c-71.04%2C0-128.55%2C57.56-128.55%2C128.55v367.87c0%2C71%2C57.51%2C128.55%2C128.55%2C128.55h597.04c71%2C0%2C128.55-57.56%2C128.55-128.55v-367.87c0-71-57.55-128.55-128.55-128.55ZM5738.49%2C792.46c0%2C40.51-33.46%2C73.34-74.76%2C73.34h-346.95c-41.26%2C0-74.72-32.83-74.72-73.34v-209.91c0-40.51%2C33.45-73.38%2C74.72-73.38h346.95c41.31%2C0%2C74.76%2C32.87%2C74.76%2C73.38v209.91Z%22%2F%3E%20%3Cpolygon%20class%3D%22cls-1%22%20points%3D%22820.25%20512.55%201119.88%20512.55%201119.88%201000%201318.89%201000%201318.89%20512.55%201618.52%20512.55%201618.52%20375.02%20820.25%20375.02%20820.25%20512.55%22%2F%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M2413.42%2C375h-661.86v624.98h177.75v-156.54h413.98c14.03%2C0%2C25.44%2C11.4%2C25.44%2C25.48v131.06h177.75v-163.22c0-28.4-22.09-42.22-51.41-51.45%2C51.41-49.74%2C51.41-90.55%2C51.41-90.55v-186.69c0-73.51-59.56-133.06-133.07-133.06ZM2368.73%2C613.15c0%2C45.07-36.54%2C81.61-81.65%2C81.61h-357.76v-182.22h357.76c45.11%2C0%2C81.65%2C36.54%2C81.65%2C81.61v19Z%22%2F%3E%20%3Crect%20class%3D%22cls-1%22%20x%3D%222793.58%22%20y%3D%22375.01%22%20width%3D%22199.01%22%20height%3D%22624.98%22%2F%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3927.7%2C375.01h-543.12c-64.61%2C0-116.94%2C57.56-116.94%2C128.55v367.87c0%2C71%2C52.33%2C128.55%2C116.94%2C128.55h543.12c64.57%2C0%2C116.99-57.55%2C116.99-128.55v-86.12h-177.8v7.85c0%2C40.1-28.4%2C72.63-63.48%2C72.63h-294.57c-35.04%2C0-63.44-32.54-63.44-72.63v-207.95c0-40.14%2C28.4-72.71%2C63.44-72.71h294.57c35.08%2C0%2C63.48%2C32.58%2C63.48%2C72.71v27.94h177.8v-109.59c0-71-52.42-128.55-116.99-128.55Z%22%2F%3E%20%3Cpolygon%20class%3D%22cls-1%22%20points%3D%224499.7%20375.01%204321.94%20375.01%204321.94%20999.99%204975.99%20999.99%204975.99%20865.83%204499.7%20865.83%204499.7%20375.01%22%2F%3E%20%3C%2Fsvg%3E"); aspect-ratio: 5917.37 / 1125; width: 240px; }
.triclo-logo--imagotipo-inverse { background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%20%3Csvg%20id%3D%22Capa_1%22%20data-name%3D%22Capa%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205917.37%201125%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23fff%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M451.91%2C0L0%2C675h104.29v112.5c0%2C191.99%2C155.64%2C337.5%2C347.62%2C337.5h34.76v-478.12l208.58-309.38h-243.34V0ZM564.53%2C407.02l-135.5%2C200.99-11.88%2C17.62v427.87c-62.09-7.11-118.99-33.27-162.9-75.42-51.87-49.78-80.43-117.47-80.43-190.58v-182.02h-43.6l252.17-376.66v178.21h182.14Z%22%2F%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M5788.82%2C375.01h-597.04c-71.04%2C0-128.55%2C57.56-128.55%2C128.55v367.87c0%2C71%2C57.51%2C128.55%2C128.55%2C128.55h597.04c71%2C0%2C128.55-57.56%2C128.55-128.55v-367.87c0-71-57.55-128.55-128.55-128.55ZM5738.49%2C792.46c0%2C40.51-33.46%2C73.34-74.76%2C73.34h-346.95c-41.26%2C0-74.72-32.83-74.72-73.34v-209.91c0-40.51%2C33.45-73.38%2C74.72-73.38h346.95c41.31%2C0%2C74.76%2C32.87%2C74.76%2C73.38v209.91Z%22%2F%3E%20%3Cpolygon%20class%3D%22cls-1%22%20points%3D%22820.25%20512.55%201119.88%20512.55%201119.88%201000%201318.89%201000%201318.89%20512.55%201618.52%20512.55%201618.52%20375.02%20820.25%20375.02%20820.25%20512.55%22%2F%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M2413.42%2C375h-661.86v624.98h177.75v-156.54h413.98c14.03%2C0%2C25.44%2C11.4%2C25.44%2C25.48v131.06h177.75v-163.22c0-28.4-22.09-42.22-51.41-51.45%2C51.41-49.74%2C51.41-90.55%2C51.41-90.55v-186.69c0-73.51-59.56-133.06-133.07-133.06ZM2368.73%2C613.15c0%2C45.07-36.54%2C81.61-81.65%2C81.61h-357.76v-182.22h357.76c45.11%2C0%2C81.65%2C36.54%2C81.65%2C81.61v19Z%22%2F%3E%20%3Crect%20class%3D%22cls-1%22%20x%3D%222793.58%22%20y%3D%22375.01%22%20width%3D%22199.01%22%20height%3D%22624.98%22%2F%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3927.7%2C375.01h-543.12c-64.61%2C0-116.94%2C57.56-116.94%2C128.55v367.87c0%2C71%2C52.33%2C128.55%2C116.94%2C128.55h543.12c64.57%2C0%2C116.99-57.55%2C116.99-128.55v-86.12h-177.8v7.85c0%2C40.1-28.4%2C72.63-63.48%2C72.63h-294.57c-35.04%2C0-63.44-32.54-63.44-72.63v-207.95c0-40.14%2C28.4-72.71%2C63.44-72.71h294.57c35.08%2C0%2C63.48%2C32.58%2C63.48%2C72.71v27.94h177.8v-109.59c0-71-52.42-128.55-116.99-128.55Z%22%2F%3E%20%3Cpolygon%20class%3D%22cls-1%22%20points%3D%224499.7%20375.01%204321.94%20375.01%204321.94%20999.99%204975.99%20999.99%204975.99%20865.83%204499.7%20865.83%204499.7%20375.01%22%2F%3E%20%3C%2Fsvg%3E"); aspect-ratio: 5917.37 / 1125; width: 240px; }
.triclo-logo--isotipo           { background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%20%3Csvg%20id%3D%22Capa_1%22%20data-name%3D%22Capa%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20695.25%201125%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%231c2f76%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M451.91%2C0L0%2C675h104.29v112.5c0%2C191.99%2C155.64%2C337.5%2C347.62%2C337.5h34.76v-478.12l208.58-309.38h-243.34V0ZM564.53%2C407.02l-135.5%2C200.99-11.88%2C17.62v427.87c-62.09-7.11-118.99-33.27-162.9-75.42-51.87-49.78-80.43-117.47-80.43-190.58v-182.02h-43.6l252.17-376.66v178.21h182.14Z%22%2F%3E%20%3C%2Fsvg%3E"); aspect-ratio: 695.25 / 1125; width: 40px; }
.triclo-logo--isotipo-inverse   { background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%20%3Csvg%20id%3D%22Capa_1%22%20data-name%3D%22Capa%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20695.25%201125%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23fff%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M451.91%2C0L0%2C675h104.29v112.5c0%2C191.99%2C155.64%2C337.5%2C347.62%2C337.5h34.76v-478.12l208.58-309.38h-243.34V0ZM564.53%2C407.02l-135.5%2C200.99-11.88%2C17.62v427.87c-62.09-7.11-118.99-33.27-162.9-75.42-51.87-49.78-80.43-117.47-80.43-190.58v-182.02h-43.6l252.17-376.66v178.21h182.14Z%22%2F%3E%20%3C%2Fsvg%3E"); aspect-ratio: 695.25 / 1125; width: 40px; }