/* ==========================================================================
   validator.css — Carta de Garantía Validator (self-contained)
   All design tokens are inlined below — no external CSS dependencies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts — Roboto
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* --------------------------------------------------------------------------
   Global tokens (from tokens/global.css)
   -------------------------------------------------------------------------- */
:root {
  /* Neutral colors */
  --neutral-color-xhigh:  #121314;
  --neutral-color-high:   #2E2F33;
  --neutral-color-medium: #6A6C74;
  --neutral-color-low:    #F0F1F2;
  --neutral-color-xlow:   #FDFDFD;

  /* Feedback / Success */
  --feedback-color-success-xhigh:  #0B3D33;
  --feedback-color-success-high:   #137A66;
  --feedback-color-success-medium: #1FA78D;
  --feedback-color-success-low:    #4DDDC0;
  --feedback-color-success-xlow:   #CCF5EA;

  /* Feedback / Danger */
  --feedback-color-danger-xhigh:  #541C1C;
  --feedback-color-danger-high:   #B3261E;
  --feedback-color-danger-medium: #DC3B31;
  --feedback-color-danger-low:    #F37C72;
  --feedback-color-danger-xlow:   #FDEAEA;

  /* Feedback / Warning */
  --feedback-color-warning-xhigh:  #4A2A0F;
  --feedback-color-warning-high:   #A65400;
  --feedback-color-warning-medium: #DF670C;
  --feedback-color-warning-low:    #F7B66A;
  --feedback-color-warning-xlow:   #FFF3E6;

  /* Feedback / Info */
  --feedback-color-info-xhigh:  #1B2D3A;
  --feedback-color-info-high:   #0253C6;
  --feedback-color-info-medium: #237CF3;
  --feedback-color-info-low:    #B5B8FD;
  --feedback-color-info-xlow:   #E9F2FF;

  /* Typography — Font family */
  --font-family-base: 'Roboto', sans-serif;

  /* Typography — Font sizes */
  --font-size-xs:  0.75rem;
  --font-size-s:   0.875rem;
  --font-size-m:   1rem;
  --font-size-l:   1.5rem;
  --font-size-xl:  2rem;
  --font-size-2xl: 3rem;
  --font-size-3xl: 4rem;
  --font-size-4xl: 5rem;

  /* Typography — Font weights */
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* Typography — Line heights */
  --line-height-small:  1.32;
  --line-height-medium: 1.36;
  --line-height-large:  1.44;
  --line-height-xlarge: 1.52;

  /* Typography — Letter spacing */
  --letter-spacing-small:  0.015rem;
  --letter-spacing-medium: 0.01rem;
  --letter-spacing-large:  0rem;
  --letter-spacing-xlarge: -0.01rem;

  /* Spacing */
  --spacing-none: 0;
  --spacing-2xs:  0.25rem;
  --spacing-xs:   0.5rem;
  --spacing-s:    0.75rem;
  --spacing-m:    1rem;
  --spacing-l:    1.5rem;
  --spacing-xl:   2rem;
  --spacing-2xl:  3rem;
  --spacing-3xl:  4rem;
  --spacing-4xl:  5rem;
  --spacing-5xl:  6rem;
  --spacing-6xl:  10rem;

  /* Border radius */
  --border-radius-none:     0px;
  --border-radius-small:    0.5rem;
  --border-radius-medium:   1rem;
  --border-radius-large:    1.5rem;
  --border-radius-circular: 500px;

  /* Border width */
  --border-width-none:   0px;
  --border-width-small:  1px;
  --border-width-medium: 2px;

  /* Opacity */
  --opacity-none:   1;
  --opacity-soft:   0.88;
  --opacity-medium: 0.32;
  --opacity-high:   0.16;

  /* Shadows */
  --shadow-down-small:  0px 2px 8px rgba(18, 19, 20, 0.08);
  --shadow-down-medium: 0px 4px 16px rgba(18, 19, 20, 0.12);
  --shadow-down-large:  0px 8px 32px rgba(18, 19, 20, 0.16);
  --shadow-up-small:    0px -2px 8px rgba(18, 19, 20, 0.08);
  --shadow-up-medium:   0px -4px 16px rgba(18, 19, 20, 0.12);
  --shadow-up-large:    0px -8px 32px rgba(18, 19, 20, 0.16);

  /* --------------------------------------------------------------------------
     Pacifico brand tokens (from tokens/pacifico.css)
     -------------------------------------------------------------------------- */

  /* Pacifico — Primary (Teals) */
  --pacifico-color-primary-xhigh:  #003840;
  --pacifico-color-primary-high:   #007499;
  --pacifico-color-primary-medium: #0099CC;
  --pacifico-color-primary-low:    #79C2E4;
  --pacifico-color-primary-xlow:   #F2F9FD;

  /* Pacifico — Secondary (Pinks) */
  --pacifico-color-secondary-xhigh:  #40001B;
  --pacifico-color-secondary-high:   #9F0140;
  --pacifico-color-secondary-medium: #E02667;
  --pacifico-color-secondary-low:    #EF8DA9;
  --pacifico-color-secondary-xlow:   #FEF4F6;

  /* --------------------------------------------------------------------------
     Semantic aliases (from tokens/aliases.css) — Pacifico active brand
     -------------------------------------------------------------------------- */

  /* Brand primary scale */
  --color-brand-primary-xhigh:  var(--pacifico-color-primary-xhigh);
  --color-brand-primary-high:   var(--pacifico-color-primary-high);
  --color-brand-primary-medium: var(--pacifico-color-primary-medium);
  --color-brand-primary-low:    var(--pacifico-color-primary-low);
  --color-brand-primary-xlow:   var(--pacifico-color-primary-xlow);

  /* Brand secondary scale */
  --color-brand-secondary-xhigh:  var(--pacifico-color-secondary-xhigh);
  --color-brand-secondary-high:   var(--pacifico-color-secondary-high);
  --color-brand-secondary-medium: var(--pacifico-color-secondary-medium);
  --color-brand-secondary-low:    var(--pacifico-color-secondary-low);
  --color-brand-secondary-xlow:   var(--pacifico-color-secondary-xlow);
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* [hidden] must always win over display rules */
[hidden] {
  display: none !important;
}

body {
  /* Page background — neutral-low */
  background-color: var(--neutral-color-low);
  font-family: var(--font-family-base);
  font-size: var(--font-size-m);
  color: var(--neutral-color-xhigh);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Header / Nav — mirrors Pacifico brand reference
   -------------------------------------------------------------------------- */
.vld-header {
  /* Surface — neutral-xlow (white) */
  background-color: var(--neutral-color-xlow);
  /* Subtle elevation */
  box-shadow: var(--shadow-down-small);
  /* Stack above page content */
  position: sticky;
  top: 0;
  z-index: 100;
}

.vld-header__inner {
  /* Max-width centered, flex row */
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
  height: var(--spacing-3xl); /* 64px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-l);
}

.vld-header__logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.vld-header__logo {
  height: 32px;
  width: auto;
  display: block;
}

.vld-header__app-title {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  /* Secondary text — neutral-medium */
  color: var(--neutral-color-medium);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Main layout — centered column
   -------------------------------------------------------------------------- */
.vld-main {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-l);
}

/* --------------------------------------------------------------------------
   Card base
   -------------------------------------------------------------------------- */
.vld-card {
  /* Surface — neutral-xlow */
  background-color: var(--neutral-color-xlow);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-down-medium);
}

/* --------------------------------------------------------------------------
   Form card header
   -------------------------------------------------------------------------- */
.vld-card__header {
  margin-bottom: var(--spacing-l);
}

.vld-card__title {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-large);
  /* Title — brand primary */
  color: var(--color-brand-primary-medium);
}

.vld-card__subtitle {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  /* Muted — neutral-medium */
  color: var(--neutral-color-medium);
  margin-top: var(--spacing-2xs);
}

/* --------------------------------------------------------------------------
   Form layout — sections inside the card
   -------------------------------------------------------------------------- */
.vld-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

/* Section divider inside the form card */
.vld-form__divider {
  height: var(--border-width-small);
  /* Divider — neutral-low */
  background-color: var(--neutral-color-low);
  margin: var(--spacing-xs) 0;
}

/* Section label — visible heading for each group */
.vld-form__section-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-small);
  /* Section label — brand primary-medium */
  color: var(--color-brand-primary-medium);
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}

.vld-form__section-label::after {
  content: '';
  flex: 1;
  height: var(--border-width-small);
  /* Trailing line — brand primary-xlow */
  background-color: var(--color-brand-primary-xlow);
}

/* 2-column row — collapses on mobile */
.vld-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-m);
  min-width: 0;
}

@media (max-width: 600px) {
  .vld-row {
    grid-template-columns: 1fr;
  }
}

/* Generic field wrapper */
.vld-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  min-width: 0; /* prevent grid blowout */
}

.vld-field__label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-medium);
  letter-spacing: var(--letter-spacing-small);
  /* Label — neutral-high */
  color: var(--neutral-color-high);
}

/* Filter hint — shown below a search field when the list is narrowed */
.vld-field__hint {
  margin-top: var(--spacing-2xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-medium);
  /* Hint — brand-primary-high for informational accent */
  color: var(--color-brand-primary-high);
}

/* --------------------------------------------------------------------------
   Dropdown component
   -------------------------------------------------------------------------- */
.vld-dropdown {
  position: relative;
  width: 100%;
  min-width: 0; /* prevent grid blowout */
}

.vld-dropdown__trigger {
  /* Sizing — 48px height */
  height: var(--spacing-2xl);
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  padding: 0 var(--spacing-m);
  gap: var(--spacing-xs);
  overflow: hidden; /* contain children */

  border-radius: var(--border-radius-small);
  border: var(--border-width-small) solid var(--neutral-color-medium);
  background-color: var(--neutral-color-xlow);

  cursor: pointer;
  outline: none;
  transition: border-color 200ms ease-in-out;
}

.vld-dropdown__trigger:hover {
  border-color: var(--neutral-color-high);
}

.vld-dropdown.is-open .vld-dropdown__trigger {
  border-color: var(--neutral-color-high);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: var(--neutral-color-low);
}

.vld-dropdown__value {
  flex: 1;
  min-width: 0;
  text-align: left;

  font-family: var(--font-family-base);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xlarge);
  letter-spacing: var(--letter-spacing-medium);
  /* Placeholder — neutral-medium */
  color: var(--neutral-color-medium);

  /* Always truncate */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vld-dropdown__value--selected {
  /* Selected value — neutral-xhigh */
  color: var(--neutral-color-xhigh);
}

.vld-dropdown__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--neutral-color-medium);
  transition: transform 200ms ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vld-dropdown.is-open .vld-dropdown__chevron {
  transform: rotate(180deg);
}

/* Dropdown menu */
.vld-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;

  border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
  border: var(--border-width-small) solid var(--neutral-color-high);
  border-top: none;

  background-color: var(--neutral-color-xlow);
  box-shadow: var(--shadow-down-large);

  max-height: 264px;
  overflow-y: auto;

  padding: var(--spacing-s) var(--spacing-2xs);
  list-style: none;

  display: none;
}

.vld-dropdown.is-open .vld-dropdown__menu {
  display: block;
}

.vld-dropdown__option {
  display: flex;
  align-items: flex-start;
  /* Sizing — min 48px, grows to fit wrapped text */
  min-height: var(--spacing-2xl);
  padding: var(--spacing-s) var(--spacing-m);

  font-size: var(--font-size-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xlarge);
  letter-spacing: var(--letter-spacing-medium);
  color: var(--neutral-color-xhigh);

  cursor: pointer;
  border-radius: var(--border-radius-small);
  transition: background-color 150ms ease-in-out;
}

.vld-dropdown__option:hover,
.vld-dropdown__option.is-active {
  /* Hover — brand primary-xlow */
  background-color: var(--color-brand-primary-xlow);
}

.vld-dropdown__option--selected {
  font-weight: var(--font-weight-medium);
  /* Selected — brand primary-high */
  color: var(--color-brand-primary-high);
}

/* --------------------------------------------------------------------------
   Search autocomplete component
   -------------------------------------------------------------------------- */
.vld-search {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.vld-search__field {
  position: relative;
  width: 100%;
}

.vld-search__container {
  display: flex;
  align-items: center;
  height: var(--spacing-2xl);
  padding: 0 var(--spacing-xs) 0 var(--spacing-m);

  border-radius: var(--border-radius-small);
  border: var(--border-width-small) solid var(--neutral-color-medium);
  background-color: var(--neutral-color-xlow);

  transition: border-color 200ms ease-in-out;
}

.vld-search__container:hover {
  border-color: var(--neutral-color-high);
}

.vld-search__container:focus-within {
  border-color: var(--neutral-color-high);
}

.vld-search.is-open .vld-search__container {
  border-color: var(--neutral-color-high);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: var(--neutral-color-low);
}

/* Left search icon */
.vld-search__icon {
  width: var(--spacing-l);
  height: var(--spacing-l);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Default — neutral-medium */
  color: var(--neutral-color-medium);
  margin-right: var(--spacing-xs);
  transition: color 200ms ease-in-out;
}

.vld-search.is-open .vld-search__icon,
.vld-search--selected .vld-search__icon {
  /* Active — brand primary-medium */
  color: var(--color-brand-primary-medium);
}

/* Input */
.vld-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;

  border: none;
  background: transparent;
  outline: none;

  font-family: var(--font-family-base);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xlarge);
  letter-spacing: var(--letter-spacing-medium);
  /* Placeholder — neutral-medium */
  color: var(--neutral-color-medium);
  transition: color 200ms ease-in-out;
}

.vld-search__input::placeholder {
  color: var(--neutral-color-medium);
}

.vld-search__input:not(:placeholder-shown) {
  color: var(--neutral-color-xhigh);
}

/* Clear button — [hidden] stays hidden */
.vld-search__clear[hidden] {
  display: none;
}

.vld-search__clear {
  width: var(--spacing-l);
  height: var(--spacing-l);
  flex-shrink: 0;
  margin-left: var(--spacing-xs);

  display: flex;
  align-items: center;
  justify-content: center;

  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;

  /* Color — neutral-medium */
  color: var(--neutral-color-medium);
  border-radius: var(--border-radius-small);
  transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
}

.vld-search__clear:hover {
  color: var(--neutral-color-xhigh);
  background-color: var(--neutral-color-low);
}

/* Dropdown menu */
.vld-search__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;

  border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
  border: var(--border-width-small) solid var(--neutral-color-high);
  border-top: none;

  background-color: var(--neutral-color-xlow);
  box-shadow: var(--shadow-down-large);

  max-height: 264px;
  overflow-y: auto;

  padding: var(--spacing-s) var(--spacing-2xs);
  list-style: none;
  display: none;
}

.vld-search.is-open .vld-search__menu {
  display: block;
}

.vld-search__option {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  height: var(--spacing-2xl);
  padding: var(--spacing-s) var(--spacing-m);

  font-size: var(--font-size-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xlarge);
  letter-spacing: var(--letter-spacing-medium);
  color: var(--neutral-color-xhigh);

  cursor: pointer;
  border-radius: var(--border-radius-small);
  transition: background-color 150ms ease-in-out;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vld-search__option:hover,
.vld-search__option.is-active {
  /* Hover — brand primary-xlow */
  background-color: var(--color-brand-primary-xlow);
}

/* Match highlight — <mark> */
.vld-search__option mark {
  background: transparent;
  /* Highlight — brand primary-high, medium weight */
  color: var(--color-brand-primary-high);
  font-weight: var(--font-weight-medium);
}

/* Code badge */
.vld-search__code {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-small);
  /* Muted — neutral-medium */
  color: var(--neutral-color-medium);
  flex-shrink: 0;
}

/* Empty state */
.vld-search__empty {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-s) var(--spacing-m);
  height: var(--spacing-2xl);

  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  color: var(--neutral-color-medium);
}

/* Selected state — border turns success */
.vld-search--selected .vld-search__container {
  border-color: var(--feedback-color-success-medium);
}

/* --------------------------------------------------------------------------
   Submit button
   -------------------------------------------------------------------------- */
.vld-submit {
  width: 100%;
  height: var(--spacing-2xl);
  margin-top: var(--spacing-xs);

  border-radius: var(--border-radius-circular);
  border: none;

  /* Surface — brand primary-medium */
  background-color: var(--color-brand-primary-medium);

  font-family: var(--font-family-base);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-medium);
  /* Text — neutral-xlow (white) */
  color: var(--neutral-color-xlow);

  cursor: pointer;
  outline: none;
  transition: background-color 200ms ease-in-out;
}

.vld-submit:hover:not(:disabled) {
  /* Hover — brand primary-high */
  background-color: var(--color-brand-primary-high);
}

.vld-submit:focus-visible {
  outline: var(--border-width-medium) solid var(--color-brand-primary-medium);
  outline-offset: 2px;
}

.vld-submit:disabled {
  /* Disabled — opacity-medium */
  opacity: var(--opacity-medium);
  pointer-events: none;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Latency card — separate card below form, warning bg
   -------------------------------------------------------------------------- */
.vld-latency-card {
  background-color: var(--feedback-color-warning-xlow);
  border: var(--border-width-small) solid var(--feedback-color-warning-low);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-down-small);
}

.vld-latency-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-m);
  margin-bottom: var(--spacing-l);
}

.vld-latency-card__icon {
  flex-shrink: 0;
  width: var(--spacing-l);
  height: var(--spacing-l);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Warning icon — warning-medium */
  color: var(--feedback-color-warning-medium);
  margin-top: 2px;
}

.vld-latency-card__info {
  flex: 1;
}

.vld-latency-card__title {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-xlarge);
  letter-spacing: var(--letter-spacing-medium);
  /* Title — warning-high */
  color: var(--feedback-color-warning-high);
}

.vld-latency-card__range {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  /* Range text — warning-high */
  color: var(--feedback-color-warning-high);
  margin-top: var(--spacing-2xs);
}

.vld-latency-card__range strong {
  font-weight: var(--font-weight-bold);
}

.vld-latency-card__nota {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-medium);
  letter-spacing: var(--letter-spacing-small);
  /* Nota — neutral-medium */
  color: var(--neutral-color-medium);
  margin-top: var(--spacing-xs);
}

/* Date inputs row — 2-col on desktop */
.vld-latency-card__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-m);
  margin-bottom: var(--spacing-m);
}

@media (max-width: 600px) {
  .vld-latency-card__dates {
    grid-template-columns: 1fr;
  }
}

/* Siteds note */
.vld-latency-card__siteds {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-small);
  /* Note — warning-high */
  color: var(--feedback-color-warning-high);
}

/* Computed warning inside latency card */
.vld-latency-card__warning {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-m);
  padding: var(--spacing-m);
  border-radius: var(--border-radius-small);
  /* Warning bg */
  background-color: var(--feedback-color-warning-low);
  border: var(--border-width-small) solid var(--feedback-color-warning-medium);
}

.vld-latency-card__warning-text {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  /* Warning — warning-xhigh */
  color: var(--feedback-color-warning-xhigh);
}

.vld-latency-card__warning--ok {
  /* Success bg */
  background-color: var(--feedback-color-success-xlow);
  border-color: var(--feedback-color-success-medium);
}

.vld-latency-card__warning--ok .vld-latency-card__warning-text {
  /* Success — success-high */
  color: var(--feedback-color-success-high);
}

.vld-latency-card__warning--danger {
  /* Danger bg */
  background-color: var(--feedback-color-danger-xlow);
  border-color: var(--feedback-color-danger-medium);
}

.vld-latency-card__warning--danger .vld-latency-card__warning-text {
  /* Danger — danger-high */
  color: var(--feedback-color-danger-high);
}

/* Date field inside latency card */
.vld-date {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.vld-date__label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-medium);
  letter-spacing: var(--letter-spacing-small);
  color: var(--neutral-color-high);
}

.vld-date__input {
  height: var(--spacing-2xl);
  width: 100%;
  padding: 0 var(--spacing-m);

  border-radius: var(--border-radius-small);
  border: var(--border-width-small) solid var(--neutral-color-medium);
  /* Slightly warm bg to match warning card */
  background-color: var(--neutral-color-xlow);
  outline: none;

  font-family: var(--font-family-base);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xlarge);
  letter-spacing: var(--letter-spacing-medium);
  color: var(--neutral-color-xhigh);

  transition: border-color 200ms ease-in-out;
}

.vld-date__input:hover {
  border-color: var(--neutral-color-high);
}

.vld-date__input:focus {
  border-color: var(--neutral-color-high);
}

/* --------------------------------------------------------------------------
   Result card
   -------------------------------------------------------------------------- */
.vld-result {
  /* Inherits .vld-card base */
}

/* ---- Big answer block at top ---- */
.vld-result__answer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-m);
  flex-wrap: wrap;
  padding-bottom: var(--spacing-l);
  border-bottom: var(--border-width-small) solid var(--neutral-color-low);
  margin-bottom: var(--spacing-l);
}

.vld-result__answer-left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.vld-result__answer-question {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-small);
  /* Question label — neutral-medium */
  color: var(--neutral-color-medium);
  text-transform: uppercase;
}

.vld-result__answer-value {
  font-size: var(--font-size-xl); /* 32px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-xlarge);
}

/* Sí — danger (requires action) */
.vld-result__answer-value--si {
  color: var(--feedback-color-danger-high);
}

/* No — success */
.vld-result__answer-value--no {
  color: var(--feedback-color-success-high);
}

/* Verificar — warning */
.vld-result__answer-value--ver {
  color: var(--feedback-color-warning-high);
}

/* No corresponde — info (diagnosis / service type mismatch) */
.vld-result__answer-value--mismatch {
  color: var(--feedback-color-info-high);
  font-size: var(--font-size-l); /* slightly smaller to fit */
}

/* No se financia — dark neutral (coverage exclusion) */
.vld-result__answer-value--nofinancia {
  color: var(--neutral-color-xhigh);
  font-size: var(--font-size-l);
}

/* Exclusión — warning (coverage exclusion with details) */
.vld-result__answer-value--exclusion {
  color: var(--feedback-color-warning-high);
  font-size: var(--font-size-l);
}

.vld-result__stamp {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-small);
  /* Muted — neutral-medium */
  color: var(--neutral-color-medium);
  white-space: nowrap;
  align-self: flex-end;
}

/* ---- Section title (docs / carencia / summary) ---- */
.vld-result__section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-small);
  /* Section heading — neutral-medium */
  color: var(--neutral-color-medium);
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}

.vld-result__block {
  margin-bottom: var(--spacing-l);
}

/* Mensaje */
.vld-result__mensaje {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  color: var(--neutral-color-xhigh);
}

/* Divider between result sections */
.vld-result__divider {
  height: var(--border-width-small);
  background-color: var(--neutral-color-low);
  margin-bottom: var(--spacing-l);
}

/* ---- Docs checklist ---- */
.vld-docs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.vld-docs__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  color: var(--neutral-color-xhigh);
}

/* Checkbox-style bullet */
.vld-docs__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--border-radius-small);
  /* Filled box — brand primary-medium */
  background-color: var(--color-brand-primary-medium);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vld-docs__check svg {
  /* Check icon — white */
  color: var(--neutral-color-xlow);
}

.vld-docs__none {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  /* Muted — neutral-medium */
  color: var(--neutral-color-medium);
}

/* ---- Carencia info in result (3-state) ---- */
.vld-result__carencia-box {
  border-left: 3px solid var(--neutral-color-low);
  border-radius: var(--border-radius-small);
  padding: var(--spacing-m);
}

.vld-result__carencia-box--danger {
  background-color: var(--feedback-color-danger-xlow);
  border-left-color: var(--feedback-color-danger-medium);
}

.vld-result__carencia-box--warning {
  background-color: var(--feedback-color-warning-xlow);
  border-left-color: var(--feedback-color-warning-medium);
}

.vld-result__carencia-box--safe {
  background-color: var(--feedback-color-success-xlow);
  border-left-color: var(--feedback-color-success-medium);
}

.vld-result__carencia-text {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  color: var(--neutral-color-xhigh);
}

.vld-result__carencia-text strong {
  font-weight: var(--font-weight-bold);
}

/* ---- Espera info in result (info style) ---- */
.vld-result__espera-box {
  background-color: var(--feedback-color-info-xlow);
  border-left: 3px solid var(--feedback-color-info-medium);
  border-radius: var(--border-radius-small);
  padding: var(--spacing-m);
}

.vld-result__espera-text {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  color: var(--neutral-color-xhigh);
}

.vld-result__espera-text strong {
  font-weight: var(--font-weight-bold);
}

/* ---- Summary grid ---- */
.vld-result__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-xs) var(--spacing-l);
}

.vld-result__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-medium);
  letter-spacing: var(--letter-spacing-small);
  /* Muted — neutral-medium */
  color: var(--neutral-color-medium);
  white-space: nowrap;
}

.vld-result__value {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  color: var(--neutral-color-xhigh);
}

/* ---- Action buttons ---- */
.vld-result__actions {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-m);
  flex-wrap: wrap;
  padding-top: var(--spacing-l);
  border-top: var(--border-width-small) solid var(--neutral-color-low);
  margin-top: var(--spacing-l);
}

/* Secondary button */
.vld-btn-secondary {
  height: var(--spacing-2xl);
  padding: 0 var(--spacing-l);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);

  border-radius: var(--border-radius-circular);
  border: var(--border-width-small) solid var(--color-brand-primary-medium);
  background-color: transparent;

  font-family: var(--font-family-base);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-medium);
  /* Text — brand primary-medium */
  color: var(--color-brand-primary-medium);

  cursor: pointer;
  outline: none;
  transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
  text-decoration: none;
}

.vld-btn-secondary:hover {
  background-color: var(--color-brand-primary-xlow);
}

/* Ghost button */
.vld-btn-ghost {
  height: var(--spacing-2xl);
  padding: 0 var(--spacing-l);

  border-radius: var(--border-radius-circular);
  border: none;
  background-color: transparent;

  font-family: var(--font-family-base);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-medium);
  /* Text — neutral-medium */
  color: var(--neutral-color-medium);

  cursor: pointer;
  outline: none;
  transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
}

.vld-btn-ghost:hover {
  color: var(--neutral-color-xhigh);
  background-color: var(--neutral-color-low);
}

/* --------------------------------------------------------------------------
   History section
   -------------------------------------------------------------------------- */
.vld-history-details summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-m) var(--spacing-l);
  background-color: var(--neutral-color-xlow);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-down-small);

  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  /* History title — brand primary-medium */
  color: var(--color-brand-primary-medium);

  list-style: none;
  user-select: none;
  transition: background-color 150ms ease-in-out;
}

.vld-history-details summary::-webkit-details-marker {
  display: none;
}

.vld-history-details summary:hover {
  background-color: var(--color-brand-primary-xlow);
}

.vld-history-details summary .vld-history-chevron {
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: var(--neutral-color-medium);
  transition: transform 200ms ease-in-out;
  flex-shrink: 0;
}

.vld-history-details[open] summary .vld-history-chevron {
  transform: rotate(180deg);
}

.vld-history-details[open] summary {
  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}

.vld-history-body {
  background-color: var(--neutral-color-xlow);
  border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
  padding: 0 var(--spacing-l) var(--spacing-m);
  box-shadow: var(--shadow-down-small);
}

.vld-history__list {
  list-style: none;
}

.vld-history__entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-m);
  padding: var(--spacing-s) 0;
  border-bottom: var(--border-width-small) solid var(--neutral-color-low);
  flex-wrap: wrap;
}

.vld-history__entry:last-child {
  border-bottom: none;
}

.vld-history__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  flex: 1;
  min-width: 0;
}

.vld-history__meta {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-small);
  /* Muted — neutral-medium */
  color: var(--neutral-color-medium);
}

.vld-history__detail {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  color: var(--neutral-color-xhigh);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Small history badge */
.vld-history__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--spacing-xs);
  border-radius: var(--border-radius-circular);
  border: var(--border-width-small) solid;

  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-small);
  white-space: nowrap;
}

.vld-history__badge--si {
  background-color: var(--feedback-color-danger-xlow);
  color: var(--feedback-color-danger-high);
  border-color: var(--feedback-color-danger-medium);
}

.vld-history__badge--no {
  background-color: var(--feedback-color-success-xlow);
  color: var(--feedback-color-success-high);
  border-color: var(--feedback-color-success-medium);
}

.vld-history__badge--ver {
  background-color: var(--feedback-color-warning-xlow);
  color: var(--feedback-color-warning-high);
  border-color: var(--feedback-color-warning-medium);
}

.vld-history__empty {
  padding: var(--spacing-m) 0;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-small);
  color: var(--neutral-color-medium);
  text-align: center;
}

.vld-history__footer {
  display: flex;
  justify-content: flex-end;
  /* Gap between export and clear buttons */
  gap: var(--spacing-xs);
  padding-top: var(--spacing-s);
  border-top: var(--border-width-small) solid var(--neutral-color-low);
  margin-top: var(--spacing-xs);
}

.vld-history__clear {
  background: none;
  border: none;
  padding: var(--spacing-2xs) var(--spacing-xs);
  cursor: pointer;
  outline: none;

  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-small);
  /* Danger — danger-medium */
  color: var(--feedback-color-danger-medium);

  border-radius: var(--border-radius-small);
  transition: background-color 150ms ease-in-out;
}

.vld-history__clear:hover {
  background-color: var(--feedback-color-danger-xlow);
}

/* Export button — secondary/neutral style next to clear */
.vld-history__export {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  background: none;
  border: none;
  padding: var(--spacing-2xs) var(--spacing-xs);
  cursor: pointer;
  outline: none;

  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-small);
  /* Brand primary */
  color: var(--color-brand-primary-high);

  border-radius: var(--border-radius-small);
  transition: background-color 150ms ease-in-out;
}

.vld-history__export:hover {
  background-color: var(--color-brand-primary-xlow);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.vld-footer {
  text-align: center;
  padding: var(--spacing-l) var(--spacing-xl);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-small);
  /* Muted — neutral-medium */
  color: var(--neutral-color-medium);
}

/* Footer log link */
.vld-footer__log-link {
  color: var(--color-brand-primary-high);
  text-decoration: none;
}
.vld-footer__log-link:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Error banner
   -------------------------------------------------------------------------- */
.vld-error-banner {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-m);
  border-radius: var(--border-radius-small);
  /* Danger — danger-xlow bg */
  background-color: var(--feedback-color-danger-xlow);
  border: var(--border-width-small) solid var(--feedback-color-danger-medium);

  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  color: var(--feedback-color-danger-high);
}

/* --------------------------------------------------------------------------
   Email modal
   -------------------------------------------------------------------------- */

/* Overlay backdrop */
.vld-email-overlay {
  position: fixed;
  inset: 0;
  /* Semi-transparent backdrop using neutral-xhigh at medium opacity */
  background-color: rgba(18, 19, 20, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spacing-m);
}

/* Modal card */
.vld-email-modal {
  background-color: var(--neutral-color-xlow);
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow-down-large);
  width: 100%;
  max-width: 440px;
  padding: var(--spacing-l);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

/* Modal header row */
.vld-email-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-m);
}

.vld-email-modal__title {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-small);
  color: var(--neutral-color-xhigh);
  margin: 0;
}

/* Close icon button */
.vld-email-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: var(--border-radius-small);
  color: var(--neutral-color-medium);
  cursor: pointer;
  transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
}

.vld-email-modal__close:hover {
  color: var(--neutral-color-xhigh);
  background-color: var(--neutral-color-low);
}

/* Description */
.vld-email-modal__desc {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-large);
  color: var(--neutral-color-medium);
  margin: 0;
}

/* Email text input */
.vld-email-modal__input {
  width: 100%;
  box-sizing: border-box;
  height: var(--spacing-2xl);
  padding: 0 var(--spacing-m);
  border: var(--border-width-small) solid var(--neutral-color-low);
  border-radius: var(--border-radius-small);
  background-color: var(--neutral-color-xlow);
  font-family: var(--font-family-base);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-large);
  color: var(--neutral-color-xhigh);
  outline: none;
  transition: border-color 150ms ease-in-out;
}

.vld-email-modal__input:focus {
  /* Primary medium border on focus */
  border-color: var(--color-brand-primary-medium);
  box-shadow: 0 0 0 3px var(--color-brand-primary-xlow);
}

.vld-email-modal__input.is-invalid {
  border-color: var(--feedback-color-danger-medium);
}

/* Inline validation error */
.vld-email-modal__error {
  display: block;
  margin-top: var(--spacing-2xs);
  font-size: var(--font-size-xs);
  color: var(--feedback-color-danger-high);
}

/* Modal form */
.vld-email-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

/* Actions row */
.vld-email-modal__actions {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-m);
  align-items: center;
}

/* Send button — full-width primary style, reuse .vld-submit */
.vld-email-modal__send {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

/* --------------------------------------------------------------------------
   Print styles
   -------------------------------------------------------------------------- */
@media print {
  .vld-header,
  .vld-form-section,
  #vld-latency-card,
  .vld-history-section,
  .vld-footer,
  .vld-result__actions,
  .vld-email-overlay {
    display: none !important;
  }

  #vld-result-section {
    display: block !important;
  }

  body {
    background-color: white;
  }

  .vld-card {
    box-shadow: none;
    border: var(--border-width-small) solid var(--neutral-color-low);
  }

  .vld-main {
    padding: var(--spacing-m);
  }
}

/* ── Monto input with currency prefix ───────────────────────────── */
.vld-input-wrap {
  display: flex;
  align-items: center;
  height: 48px;
  border: var(--border-width-small) solid var(--neutral-color-medium);
  border-radius: var(--border-radius-small);
  background: var(--neutral-color-xlow);
  transition: border-color 0.15s, outline-color 0.15s;
}

.vld-input-wrap:focus-within {
  border-color: var(--color-brand-primary-medium);
  outline: 2px solid var(--color-brand-primary-xlow);
  outline-offset: 0;
}

.vld-input-prefix {
  padding: 0 var(--spacing-xs) 0 var(--spacing-m);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-color-medium);
  user-select: none;
  white-space: nowrap;
}

.vld-input--with-prefix {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--font-size-m);
  color: var(--neutral-color-xhigh);
  padding-right: var(--spacing-m);
  outline: none;
  -moz-appearance: textfield;
}

.vld-input--with-prefix::-webkit-outer-spin-button,
.vld-input--with-prefix::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}