/* Paleta de interfaz. El recurso oficial se conserva íntegro e independiente. */
:root {
  --trigal-verde:#103e30;
  --trigal-verde-activo:#1e5842;
  --trigal-rojo:#c52b19;
  --trigal-crema:#fbf3e1;
  --trigal-marron:#75400f;
  --trigal-papel:#fff;
  --trigal-tinta:#243b32;
  --trigal-secundario:#606f67;
  --trigal-linea:#dfe5dd;
  --trigal-suave:#edf2eb;
  --trigal-alerta:#855d1b;
  --trigal-radio:12px;
  --trigal-sombra:0 5px 22px #203e3007;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none
}
*,*::before,*::after {
  box-sizing:border-box
}
html {
  scroll-padding-top:100px
}
body {
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea,summary {
  -webkit-tap-highlight-color:transparent
}
button,a,summary {
  touch-action:manipulation
}
a,button,input,select,textarea,summary {
  scroll-margin-top:100px
}
:focus-visible {
  outline:3px solid var(--trigal-rojo);
  outline-offset:3px
}
button:disabled {
  cursor:not-allowed
}
img {
  max-width:100%
}
.trigal-marca {
  display:flex!important;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  margin:0!important;
  line-height:1.2;
  min-width:0
}
.marca-texto {
  display:grid;
  gap:5px;
  min-width:0
}
.marca-nombre {
  font-size:19px;
  font-weight:750;
  letter-spacing:-.5px;
  line-height:1.2
}
.marca-area {
  font-size:10px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:.8
}
.marca-logo {
  width:auto;
  max-width:150px;
  height:45px;
  object-fit:contain
}
.trigal-marca-con-logo .marca-nombre {
  font-size:13px
}
.ui-icon {
  width:22px;
  height:22px
}
.empty-state p {
  max-width:42ch;
  margin-inline:auto
}
.money,.precio,.grand-total {
  font-variant-numeric:tabular-nums
}
button:focus-visible,summary:focus-visible {
  outline-offset:3px
}
[hidden] {
  display:none!important
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}
@media(max-width:600px) {
  .marca-nombre {
    font-size:17px
  }
  .marca-area {
    font-size:9px
  }
  .marca-logo {
    max-width:110px;
    height:36px
  }
  input,select,textarea {
    font-size:16px!important
  }
}
@media(forced-colors:active) {
  a,button,input,select,.panel {
    border:1px solid CanvasText
  }
  .trigal-marca {
    color:LinkText
  }
}