/*
  Accessibility.cl · Contrast Checker WCAG 2.2
  Hoja de estilos aislada para WordPress.
  Todas las clases usan el prefijo: acc-contrast-checker
*/
.acc-contrast-checker {
  --acc-contrast-checker-primary: #2a14b4;
  --acc-contrast-checker-primary-container: #4338ca;
  --acc-contrast-checker-secondary: #8126d1;
  --acc-contrast-checker-secondary-soft: #f0dbff;
  --acc-contrast-checker-background: #f9f9ff;
  --acc-contrast-checker-surface: #ffffff;
  --acc-contrast-checker-surface-soft: #f1f3ff;
  --acc-contrast-checker-surface-variant: #dce2f7;
  --acc-contrast-checker-outline: #c7c4d7;
  --acc-contrast-checker-text: #141b2b;
  --acc-contrast-checker-muted: #464554;
  --acc-contrast-checker-pass: #057a55;
  --acc-contrast-checker-pass-bg: #d1fae5;
  --acc-contrast-checker-fail: #ba1a1a;
  --acc-contrast-checker-fail-bg: #ffdad6;
  background: var(--acc-contrast-checker-background);
  color: var(--acc-contrast-checker-text);
  font-family: Inter, var(--bs-font-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.acc-contrast-checker__hero {
  max-width: 860px;
}

.acc-contrast-checker__eyebrow {
  background: var(--acc-contrast-checker-secondary-soft);
  color: #2c0051;
  letter-spacing: .04em;
}

.acc-contrast-checker__eyebrow-dot {
  width: .5rem;
  height: .5rem;
  display: inline-block;
  border-radius: 999px;
  background: var(--acc-contrast-checker-secondary);
}

.acc-contrast-checker__title {
  color: var(--acc-contrast-checker-primary);
  letter-spacing: -.045em;
  line-height: .98;
}

.acc-contrast-checker__lead,
.acc-contrast-checker__muted,
.acc-contrast-checker .form-text,
.acc-contrast-checker__criterion-threshold,
.acc-contrast-checker__metric-label {
  color: var(--acc-contrast-checker-muted);
}

.acc-contrast-checker__panel,
.acc-contrast-checker__preview {
  background: var(--acc-contrast-checker-surface);
  border: 1px solid var(--acc-contrast-checker-outline) !important;
  border-radius: 1rem;
}

.acc-contrast-checker__section-title,
.acc-contrast-checker__ratio,
.acc-contrast-checker__ratio-suffix,
.acc-contrast-checker__metric-value,
.acc-contrast-checker__criterion-level {
  color: var(--acc-contrast-checker-primary);
}

.acc-contrast-checker__btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--acc-contrast-checker-primary-container);
  --bs-btn-border-color: var(--acc-contrast-checker-primary-container);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #5148d7;
  --bs-btn-hover-border-color: #5148d7;
  --bs-btn-focus-shadow-rgb: 67, 56, 202;
  border-bottom: 3px solid var(--acc-contrast-checker-primary);
  border-radius: .5rem;
}

.acc-contrast-checker__btn-outline {
  --bs-btn-color: var(--acc-contrast-checker-primary-container);
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: var(--acc-contrast-checker-primary-container);
  --bs-btn-hover-color: var(--acc-contrast-checker-primary-container);
  --bs-btn-hover-bg: var(--acc-contrast-checker-surface-soft);
  --bs-btn-hover-border-color: var(--acc-contrast-checker-primary-container);
  --bs-btn-focus-shadow-rgb: 67, 56, 202;
  border-width: 2px;
  border-radius: .5rem;
}

.acc-contrast-checker__btn-soft,
.acc-contrast-checker__color-button {
  --bs-btn-color: var(--acc-contrast-checker-primary-container);
  --bs-btn-bg: var(--acc-contrast-checker-surface-soft);
  --bs-btn-border-color: var(--acc-contrast-checker-outline);
  --bs-btn-hover-color: var(--acc-contrast-checker-primary-container);
  --bs-btn-hover-bg: var(--acc-contrast-checker-surface-variant);
  --bs-btn-hover-border-color: var(--acc-contrast-checker-outline);
  --bs-btn-focus-shadow-rgb: 67, 56, 202;
  border-radius: .5rem;
}

.acc-contrast-checker__color-button {
  display: inline-flex;
  align-items: center;
}

.acc-contrast-checker .form-control,
.acc-contrast-checker .input-group-text {
  border-color: var(--acc-contrast-checker-outline);
}

.acc-contrast-checker .form-control {
  background: #ffffff;
  color: var(--acc-contrast-checker-text);
  border-radius: .5rem;
}

.acc-contrast-checker .form-control:focus,
.acc-contrast-checker .form-check-input:focus,
.acc-contrast-checker .btn:focus-visible {
  border-color: var(--acc-contrast-checker-primary-container);
  box-shadow: 0 0 0 .25rem rgba(67, 56, 202, .18);
}

.acc-contrast-checker__hex-input {
  min-height: 3rem;
  letter-spacing: .04em;
  font-weight: 600;
}

.acc-contrast-checker__textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.acc-contrast-checker__color-row .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.acc-contrast-checker__swatch {
  width: 3rem;
  min-height: 3rem;
  border-radius: .5rem 0 0 .5rem;
  box-shadow: inset 0 0 0 1px rgba(20, 27, 43, .06);
}

.acc-contrast-checker__check-box {
  border: 1px solid var(--acc-contrast-checker-outline);
  background: #ffffff;
}

.acc-contrast-checker__check-box .form-check-input {
  float: none;
  border-color: var(--acc-contrast-checker-outline);
}

.acc-contrast-checker__check-box .form-check-input:checked {
  background-color: var(--acc-contrast-checker-primary-container);
  border-color: var(--acc-contrast-checker-primary-container);
}

.acc-contrast-checker__actions {
  border-top: 1px solid var(--acc-contrast-checker-outline);
}

.acc-contrast-checker__copy-status {
  min-height: 1.25rem;
  color: var(--acc-contrast-checker-pass);
}

.acc-contrast-checker__status-pill {
  width: max-content;
  padding: .5rem .75rem;
}

.acc-contrast-checker__status-pill.acc-contrast-checker-is-pass {
  background: var(--acc-contrast-checker-pass-bg);
  color: var(--acc-contrast-checker-pass);
  border: 1px solid rgba(5, 122, 85, .25);
}

.acc-contrast-checker__status-pill.acc-contrast-checker-is-fail {
  background: var(--acc-contrast-checker-fail-bg);
  color: var(--acc-contrast-checker-fail);
  border: 1px solid rgba(186, 26, 26, .25);
}

.acc-contrast-checker__ratio {
  font-size: clamp(4rem, 10vw, 6.25rem);
  letter-spacing: -.06em;
  font-weight: 900;
}

.acc-contrast-checker__meter {
  position: relative;
  height: 1rem;
  background: var(--acc-contrast-checker-surface-variant);
  border-radius: 999px;
  overflow: hidden;
}

.acc-contrast-checker__meter-bar {
  background: var(--acc-contrast-checker-primary);
  border-radius: 999px;
  transition: width .2s ease;
}

.acc-contrast-checker__meter-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(20, 27, 43, .2);
}

.acc-contrast-checker__meter-mark--ui { left: 14.285%; }
.acc-contrast-checker__meter-mark--aa { left: 21.428%; }
.acc-contrast-checker__meter-mark--aaa { left: 33.333%; }

.acc-contrast-checker__metric,
.acc-contrast-checker__color-summary {
  background: var(--acc-contrast-checker-surface-soft);
  border: 1px solid rgba(199, 196, 215, .65);
}

.acc-contrast-checker__mini-swatch {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  display: inline-block;
  border-radius: .4rem;
  border: 1px solid var(--acc-contrast-checker-outline);
}

.acc-contrast-checker__arrow {
  color: var(--acc-contrast-checker-outline);
  font-size: 1.5rem;
  font-weight: 700;
}

.acc-contrast-checker__criterion {
  border: 1px solid var(--acc-contrast-checker-outline);
  background: #ffffff;
  transition: background-color .2s ease, border-color .2s ease;
}

.acc-contrast-checker__criterion.acc-contrast-checker-is-pass {
  background: rgba(209, 250, 229, .45);
  border-color: rgba(5, 122, 85, .35);
}

.acc-contrast-checker__criterion.acc-contrast-checker-is-fail {
  background: rgba(255, 218, 214, .45);
  border-color: rgba(186, 26, 26, .35);
}

.acc-contrast-checker__criterion-kicker {
  color: var(--acc-contrast-checker-text);
  letter-spacing: .04em;
}

.acc-contrast-checker__criterion-status {
  color: var(--acc-contrast-checker-muted);
}

.acc-contrast-checker__criterion.acc-contrast-checker-is-pass .acc-contrast-checker__criterion-status {
  color: var(--acc-contrast-checker-pass);
}

.acc-contrast-checker__criterion.acc-contrast-checker-is-fail .acc-contrast-checker__criterion-status {
  color: var(--acc-contrast-checker-fail);
}

.acc-contrast-checker__preview {
  border: 2px dashed var(--acc-contrast-checker-secondary) !important;
  min-height: 22rem;
}

.acc-contrast-checker__preview-label {
  background: rgba(129, 38, 209, .12);
  color: var(--acc-contrast-checker-secondary);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.acc-contrast-checker__preview-text {
  max-width: 24rem;
  line-height: 1.2;
}

.acc-contrast-checker__preview-actions {
  max-width: 14rem;
}

.acc-contrast-checker__preview-actions .btn:first-child {
  border-bottom-width: 3px;
}

@media (min-width: 992px) {
  .acc-contrast-checker {
    padding-top: 6rem !important;
    padding-bottom: 4rem !important;
  }
}

@media (max-width: 575.98px) {
  .acc-contrast-checker__color-button {
    padding-inline: .65rem;
  }

  .acc-contrast-checker__title {
    font-size: clamp(2.4rem, 14vw, 3.5rem);
  }
}