/* kuendigung.css — Calculadora de plazos de cancelación (LegalClaro).
   Solo tokens del design system. Complementa design-system.css + de.css. */

.kf-hidden { display: none !important; }

/* ── Herramienta / formulario de cálculo ── */
.kf-tool {
  max-width: var(--container-sm);
  margin: var(--space-8) auto 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: 0 1px 3px rgba(0, 41, 61, 0.06);
  text-align: left;
}
@media (min-width: 48rem) {
  .kf-tool { padding: var(--space-8); }
}

.kf-field { margin-bottom: var(--space-5); }
.kf-field > label,
.kf-legend {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--navy-900);
  margin-bottom: var(--space-2);
}
.kf-hint {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin: calc(-1 * var(--space-1)) 0 var(--space-2);
}

.kf-input,
.kf-select {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-height: 2.75rem;
}
.kf-input:focus,
.kf-select:focus {
  outline: none;
  border-color: var(--navy-500);
  box-shadow: 0 0 0 3px var(--navy-100);
}

.kf-grid { display: grid; gap: var(--space-4); }
@media (min-width: 40rem) {
  .kf-grid--2 { grid-template-columns: 1fr 1fr; }
}

.kf-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.kf-check input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

.kf-override-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.kf-override-inline .kf-input { max-width: 6rem; }

.kf-status {
  min-height: 1.25rem;
  font-size: var(--text-sm);
  color: var(--color-error);
  margin-top: var(--space-3);
}

/* ── Resultado (solo la fecha) ── */
.kf-result {
  margin-top: var(--space-6);
  background: var(--navy-50);
  border: 1px solid var(--navy-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.kf-result__line {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--navy-200);
}
.kf-result__line:last-of-type { border-bottom: none; }
.kf-result__lbl { font-size: var(--text-sm); color: var(--color-ink-muted); }
.kf-result__date {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--navy-800);
}
.kf-result__line--main .kf-result__date--main {
  font-size: var(--text-3xl);
  color: var(--navy-950);
}
.kf-result__meta { font-size: var(--text-sm); color: var(--color-accent-dark); margin: var(--space-3) 0 0; }
.kf-result__note {
  font-size: var(--text-sm);
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0 0;
}

/* ── Bloque de venta de la carta ── */
.kf-sell {
  max-width: var(--container-sm);
  margin: var(--space-8) auto 0;
  background: var(--color-surface);
  border: 2px solid var(--claro-500);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: left;
}
@media (min-width: 48rem) { .kf-sell { padding: var(--space-8); } }

.kf-sell__price {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  color: var(--navy-800);
  background: var(--claro-100);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.kf-sell h2 { margin-top: 0; }
.kf-sell__list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0;
  display: grid;
  gap: var(--space-3);
}
.kf-sell__list li {
  position: relative;
  padding-left: var(--space-7);
  font-size: var(--text-base);
  color: var(--color-ink);
}
.kf-sell__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--claro-700);
  font-weight: var(--weight-bold);
}

/* ── Formulario de datos de la carta ── */
.kf-letter-form { margin-top: var(--space-6); }
.kf-letter-form fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: 0 0 var(--space-5);
}
.kf-letter-form legend {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--navy-800);
  padding: 0 var(--space-2);
}
.kf-readonly {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  background: var(--navy-50);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}
.kf-readonly strong { font-family: var(--font-heading); color: var(--navy-800); font-size: var(--text-base); }

.kf-letter-form textarea.kf-input { min-height: 4.5rem; resize: vertical; line-height: var(--leading-normal); }

.kf-letter-status {
  min-height: 1.25rem;
  font-size: var(--text-sm);
  color: var(--color-error);
  margin: var(--space-3) 0 0;
}
.kf-pay-note {
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
  margin-top: var(--space-3);
  line-height: var(--leading-normal);
}
.kf-btn-block { width: 100%; }

/* ── Página de gracias ── */
.kf-danke-action { margin: var(--space-6) 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.kd-emailed { font-size: var(--text-sm); color: var(--color-ink-muted); margin: 0; }