.app-shell {
  max-width: 900px;
  margin: 0 auto;
}

.dash-slider-track {
  background: var(--linea) !important;
  height: 4px !important;
  border-radius: var(--radius) !important;
}

.dash-slider-range {
  background: var(--granate2) !important;
  height: 4px !important;
  border-radius: var(--radius) !important;
}

.dash-slider-thumb {
  border-color: var(--granate2) !important;
  background: var(--blanco) !important;
  width: var(--slider-thumb-size, 18px) !important;
  height: var(--slider-thumb-size, 18px) !important;
  cursor: grab;
  transition: transform .08s ease, border-color .08s ease;
}

.dash-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
}

.slider-with-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider-with-controls .dash-slider-root {
  flex: 1;
}

.slider-step-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: var(--blanco);
  color: var(--granate2);
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}

.slider-step-btn:hover {
  border-color: var(--granate2);
}

.slider-step-btn:active {
  transform: scale(.92);
}

.slider-number-input {
  width: 64px;
  text-align: center;
  flex: none;
}

.app-header {
  background: var(--granate);
  color: var(--blanco);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-session {
  font-size: 12px;
  color: var(--blanco);
}

.header-session a {
  color: #E8B7B9;
}

.brand-link {
  text-decoration: none;
  color: inherit;
}

.home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: var(--blanco);
  color: var(--granate2);
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}

.home-link:hover {
  background: var(--granate2);
  border-color: var(--granate2);
  color: var(--blanco);
}

.home-link:active {
  transform: scale(.92);
}

.brand-logo {
  height: 22px;
  display: block;
}

.brand-subtitle {
  font-size: 11px;
  color: #E8B7B9;
  letter-spacing: .6px;
  margin-top: 4px;
}

.step-badge {
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

.card {
  background: var(--blanco);
  border: 1px solid var(--linea);
  padding: 16px 18px;
  margin: 18px 20px;
}

.card--accent {
  border-top: 3px solid var(--granate);
}

.card-title {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: .1px;
  color: var(--granate);
  margin: 0 0 8px;
}

.tag {
  display: inline-block;
  background: var(--suave);
  color: var(--granate);
  border-radius: var(--radius);
  padding: 2px 8px;
  font-size: 11px;
}

.tag--reco {
  background: var(--granate2);
  color: var(--blanco);
  font-weight: bold;
}

.design-family-card {
  flex: 1;
  min-width: 220px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color .12s ease, background-color .12s ease;
}

.design-family-card--active {
  border-color: var(--granate2);
  background: var(--suave);
}

.family-tag {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12px;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.family-tag:hover {
  border-color: var(--granate2);
}

.family-tag--active {
  background: var(--granate2);
  border-color: var(--granate2);
  color: var(--blanco);
  font-weight: bold;
}

.design-info-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--granate2);
  cursor: pointer;
  text-decoration: none;
}

.design-info-link:hover {
  text-decoration: underline;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--suave);
  color: var(--granate);
  border-radius: 10px;
  padding: 3px 9px 3px 6px;
  font-size: 11px;
  font-weight: bold;
}

.chip--ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.chip--muted {
  background: var(--fondo);
  color: var(--gris);
}

.chip .icon {
  width: 10px;
  height: 10px;
  min-width: 10px;
}

.btn {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: 7px 14px;
  font-size: 12px;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease,
    transform .06s ease;
}

.btn:hover {
  border-color: var(--granate2);
  color: var(--granate2);
}

.btn:active {
  transform: scale(.96);
}

.btn--primary {
  background: var(--granate2);
  border-color: var(--granate2);
  color: var(--blanco);
  font-weight: bold;
}

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

.icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  min-width: 15px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon--factors {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Ccircle cx='9' cy='6' r='2'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Ccircle cx='15' cy='12' r='2'/%3E%3Cline x1='4' y1='18' x2='20' y2='18'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Ccircle cx='9' cy='6' r='2'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Ccircle cx='15' cy='12' r='2'/%3E%3Cline x1='4' y1='18' x2='20' y2='18'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
}

.icon--design {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E");
}

.icon--runs {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11'/%3E%3Cpath d='M9 12h11'/%3E%3Cpath d='M9 18h11'/%3E%3Cpath d='M4 6l1.5 1.5L8 5'/%3E%3Cpath d='M4 12l1.5 1.5L8 11'/%3E%3Cpath d='M4 18l1.5 1.5L8 17'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11'/%3E%3Cpath d='M9 12h11'/%3E%3Cpath d='M9 18h11'/%3E%3Cpath d='M4 6l1.5 1.5L8 5'/%3E%3Cpath d='M4 12l1.5 1.5L8 11'/%3E%3Cpath d='M4 18l1.5 1.5L8 17'/%3E%3C/svg%3E");
}

.icon--data {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v6c0 1.66 3.58 3 8 3s8-1.34 8-3V6'/%3E%3Cpath d='M4 12v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v6c0 1.66 3.58 3 8 3s8-1.34 8-3V6'/%3E%3Cpath d='M4 12v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6'/%3E%3C/svg%3E");
}

.icon--analysis {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10'/%3E%3Cpath d='M10 20V4'/%3E%3Cpath d='M16 20v-7'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10'/%3E%3Cpath d='M10 20V4'/%3E%3Cpath d='M16 20v-7'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E");
}

.icon--profiler {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23000'/%3E%3C/svg%3E");
}

.icon--check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

.icon--home {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 10v9a1 1 0 0 0 1 1h4v-6h2v6h4a1 1 0 0 0 1-1v-9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 10v9a1 1 0 0 0 1 1h4v-6h2v6h4a1 1 0 0 0 1-1v-9'/%3E%3C/svg%3E");
}

.icon--target {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

.icon--refresh {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11A8 8 0 1 0 18 16'/%3E%3Cpath d='M20 5v6h-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11A8 8 0 1 0 18 16'/%3E%3Cpath d='M20 5v6h-6'/%3E%3C/svg%3E");
}

.icon--copy {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='1'/%3E%3Cpath d='M4 16V5a1 1 0 0 1 1-1h11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='1'/%3E%3Cpath d='M4 16V5a1 1 0 0 1 1-1h11'/%3E%3C/svg%3E");
}

.icon--download {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E");
}

.icon--upload {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18V8'/%3E%3Cpath d='M8 12l4-4 4 4'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18V8'/%3E%3Cpath d='M8 12l4-4 4 4'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E");
}

.icon--trash {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M6 7v13a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7'/%3E%3Cpath d='M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M6 7v13a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7'/%3E%3Cpath d='M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
}

.icon--spin {
  animation: icon-spin .8s linear infinite;
}

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--linea);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.segmented-option {
  background: var(--blanco);
  border: none;
  border-right: 1px solid var(--linea);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--gris);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.segmented-option:last-child {
  border-right: none;
}

.segmented-option:hover {
  color: var(--granate2);
}

.segmented-option--active {
  background: var(--granate2);
  color: var(--blanco);
  font-weight: bold;
}

.segmented-option--active:hover {
  color: var(--blanco);
}

.info-icon-btn {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  border: 1px solid var(--granate2);
  background: var(--blanco);
  color: var(--granate2);
  font-size: 11px;
  font-style: italic;
  font-weight: bold;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, transform .06s ease;
}

.info-icon-btn:hover {
  background: var(--granate2);
  color: var(--blanco);
}

.info-icon-btn:active {
  transform: scale(.9);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: var(--blanco);
  color: var(--gris);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease,
    transform .06s ease;
}

.icon-btn:hover {
  border-color: var(--granate2);
  color: var(--granate2);
}

.icon-btn:active {
  transform: scale(.9);
}

.icon-btn--danger:hover {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}

.btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--blanco);
  font-weight: bold;
}

.btn--danger:hover {
  background: #8f1e18;
  border-color: #8f1e18;
  color: var(--blanco);
}

.project-name-input {
  border: none;
  background: none;
  padding: 2px 0;
  font-size: 14px;
  font-weight: bold;
  color: var(--granate);
  flex: 1;
}

.project-name-input:focus {
  outline: none;
  border-bottom: 1px solid var(--granate2);
}

.empty-state {
  background: var(--blanco);
  border: 1px dashed var(--linea);
  padding: 30px;
  text-align: center;
  color: var(--gris);
}

.upload-zone {
  cursor: pointer;
  font-size: 12px;
  transition: border-color .12s ease, background-color .12s ease;
}

.upload-zone:hover {
  border-color: var(--granate2);
  background: var(--suave);
}

.progress-track {
  height: 8px;
  background: var(--linea);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--granate2);
  transition: width .2s ease;
}

table.table--brand {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  border: 1px solid var(--linea);
}

table.table--brand th {
  background: var(--granate2);
  color: var(--blanco);
  text-align: left;
  padding: 7px 9px;
  font-size: 11.5px;
}

table.table--brand td {
  padding: 7px 9px;
  border-top: 1px solid var(--linea);
}

.text-input {
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: 7px 9px;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--tinta);
}

.text-input:focus {
  outline: none;
  border-color: var(--granate2);
}

.form-error {
  color: var(--danger);
  font-size: 12px;
  margin-top: 8px;
}

.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 20px 0;
}

.wizard-steps-group {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.wizard-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--linea);
  background: var(--blanco);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 12px;
  color: var(--gris);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.wizard-step:hover {
  border-color: var(--granate2);
  color: var(--granate2);
}

.wizard-step--done {
  background: var(--suave);
  border-color: var(--granate2);
  color: var(--granate);
}

.wizard-step--active {
  background: var(--granate2);
  border-color: var(--granate2);
  color: var(--blanco);
  font-weight: bold;
}

.wizard-step--active:hover {
  color: var(--blanco);
}

.wizard-nav-mobile {
  margin: 18px 20px 0;
}

.muted {
  color: var(--gris);
}

.wizard-progress-track {
  height: 4px;
  background: var(--linea);
  border-radius: var(--radius);
  margin: 0 0 10px;
  overflow: hidden;
}

.wizard-progress-fill {
  height: 100%;
  background: var(--granate2);
  transition: width .15s ease;
}

.wizard-dots {
  display: flex;
  gap: 10px;
}

.wizard-dot {
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 50%;
  background: var(--blanco);
  border: 2px solid var(--linea);
  display: inline-block;
  transition: background-color .12s ease, border-color .12s ease;
}

.wizard-dot--done {
  background: var(--suave);
  border-color: var(--granate2);
}

.wizard-dot--active {
  background: var(--granate2);
  border-color: var(--granate2);
}

.wizard-mobile-label {
  font-size: 12px;
  font-weight: bold;
  color: var(--granate);
  margin: 8px 0 0;
}

.mobile-run-card {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
}