/**
 * @file
 * UNE brand over the shared commerce theme, and the atoms shared by pages
 * and assistant panels (badges, chips, facts, buttons, standard sheets).
 */

/* The theme hardcodes Minsait's muted text colour; follow the site palette. */
html .text-text-muted {
  color: var(--muted-foreground);
}

/* WebAssistant derives tints from RGB triplets that default to Minsait's
 * palette; html:root outranks its :root declaration. */
html:root {
  --minsait-rgb-pruno: 0, 37, 50;
  --minsait-rgb-pruno-dark: 0, 20, 28;
  --minsait-rgb-ceramica: 217, 225, 228;
  --minsait-rgb-fucsia: 0, 66, 84;
  --ign-primary: var(--color-primary, #002532);
  --ign-accent: #007a87;
  --ign-ok: #1f7a4d;
  --ign-ok-bg: #e3f4ea;
  --ign-off: #9a3b12;
  --ign-off-bg: #fbeadf;
  --ign-draft: #6b4bb3;
  --ign-draft-bg: #efe9fb;
}

/* UNE does not sell standards on its site (AENOR does): no cart. */
.js-commerce-cart-block {
  display: none !important;
}

/* Badges and chips. */
.ign-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent, #e3f2f7);
  color: var(--ign-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ign-badge--vigente { background: var(--ign-ok-bg); color: var(--ign-ok); }
.ign-badge--anulada { background: var(--ign-off-bg); color: var(--ign-off); }
.ign-badge--proyecto { background: var(--ign-draft-bg); color: var(--ign-draft); }
.ign-badge--demo { background: #fff4d6; color: #7a5a00; }

.ign-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.ign-chip {
  padding: 2px 10px;
  border: 1px solid var(--border, #d7dee2);
  border-radius: 999px;
  background: var(--card, #fff);
  font-size: 13px;
}

.ign-chip.is-highlighted {
  border-color: var(--ign-accent);
  background: var(--ign-accent);
  color: #fff;
  font-weight: 700;
}

.ign-chip--vigente { border-color: var(--ign-ok); color: var(--ign-ok); }
.ign-chip--anulada { border-color: var(--ign-off); color: var(--ign-off); }

/* Facts (dl of label/value pairs). */
.ign-facts {
  display: grid;
  /* auto-fit: the boxes share the whole width instead of leaving empty
   * tracks, whatever the number of facts (2 in a code card, 4-5 in a
   * standard sheet). */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.ign-facts div {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--muted, #eceeef);
}

.ign-facts dt {
  color: var(--muted-foreground, #5b6670);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ign-facts dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  color: var(--foreground, #1f2a30);
  font-weight: 600;
}

/* Buttons. */
.ign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 12px;
}

.ign-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--ign-primary);
  border-radius: 10px;
  background: var(--ign-primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.ign-button:hover,
.ign-button:focus-visible {
  background: color-mix(in srgb, var(--ign-primary) 85%, #000);
  color: #fff;
}

.ign-button--ghost {
  background: transparent;
  color: var(--ign-primary);
}

.ign-button--ghost:hover,
.ign-button--ghost:focus-visible {
  background: var(--accent, #e3f2f7);
  color: var(--ign-primary);
}

.ign-button--small {
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
}

.ign-button .material-symbols-outlined {
  font-size: 18px;
}

.ign-button[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* Notices. */
.ign-notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--muted, #eceeef);
}

.ign-notice--warning { background: var(--ign-off-bg); color: var(--ign-off); }
.ign-notice--error { background: #fde8e8; color: #9b1c1c; }
.ign-notice a { color: inherit; font-weight: 800; }

.ign-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 10px;
  color: var(--foreground, #1f2a30);
  font-size: 1.1rem;
  font-weight: 800;
}

.ign-section-title .material-symbols-outlined {
  color: var(--ign-accent);
}

/* Standard data sheet. */
.ign-norm {
  padding: 20px;
  border: 1px solid var(--border, #d7dee2);
  border-left: 6px solid var(--ign-ok);
  border-radius: 16px;
  background: var(--card, #fff);
}

.ign-norm--anulada { border-left-color: var(--ign-off); }
.ign-norm--proyecto { border-left-color: var(--ign-draft); }

.ign-norm__code {
  margin: 8px 0 4px;
  font-size: 1.35rem;
  font-weight: 900;
}

.ign-norm__code a {
  color: var(--ign-primary);
  text-decoration: none;
}

.ign-norm__title {
  margin: 0 0 4px;
  font-weight: 600;
}

.ign-norm__title--alt {
  color: var(--muted-foreground, #5b6670);
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 400;
}

.ign-norm__lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.ign-norm__lists ul {
  margin: 4px 0 0;
  padding-inline-start: 18px;
}

.ign-norm__label {
  margin: 0;
  color: var(--muted-foreground, #5b6670);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.ign-norm__summary {
  color: var(--muted-foreground, #5b6670);
}

/* Standard rows. */
.ign-norm-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ign-norm-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: baseline;
  padding: 12px 14px;
  border: 1px solid var(--border, #d7dee2);
  border-radius: 12px;
  background: var(--card, #fff);
}

.ign-norm-row__code {
  color: var(--ign-primary);
  font-weight: 800;
}

.ign-norm-row__title,
.ign-norm-row__meta {
  grid-column: 2;
}

.ign-norm-row__meta {
  color: var(--muted-foreground, #5b6670);
  font-size: 13px;
}

/* Prompt buttons. */
.ign-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.ign-prompt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px dashed color-mix(in srgb, var(--ign-primary) 45%, transparent);
  border-radius: 999px;
  background: var(--accent, #e3f2f7);
  color: var(--ign-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ign-prompt:hover,
.ign-prompt:focus-visible {
  border-style: solid;
}

.ign-prompt .material-symbols-outlined {
  font-size: 18px;
}

.ign-eyebrow {
  margin: 0 0 6px;
  color: var(--ign-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}