/* ── TFWizard — asistentes por pestañas (mismo lenguaje visual que el resto
   de la plataforma: Playfair Display + Inter, rojo #C8102E, esquinas rectas).
   Complementa a tramites-form.css (.tf-seccion, .form-field, .tf-oculto...).
   Cárgalo siempre DESPUÉS de tramites-form.css. Trabaja junto a tf-wizard.js,
   que espera estas clases exactas (no renombrar sin actualizar el JS). */

:root {
  --tfw-rojo:        #C8102E;
  --tfw-rojo-hover:  #A00D24;
  --tfw-rojo-claro:  #FEF2F2;
  --tfw-rojo-borde:  #FECACA;
  --tfw-verde:       #065F46;
  --tfw-verde-claro: #D1FAE5;
  --tfw-verde-borde: #6EE7B7;
  --tfw-ambar:       #92400E;
  --tfw-ambar-claro: #FED7AA;
  --tfw-ambar-borde: #FDBA74;
  --tfw-gris-90:     #1A1A1A;
  --tfw-gris-50:     #6B7280;
  --tfw-gris-20:     #E5E7EB;
}

/* ── Barra de pestañas (pasos) ───────────────────────────────────────────── */
.tfw-pasos-wrap {
  background: #fff; border-bottom: 1px solid var(--tfw-gris-20);
  padding: 1rem 0; position: sticky; top: 0; z-index: 40;
  overflow-x: auto;
}
.tfw-pasos {
  display: flex; align-items: center; min-width: max-content;
  max-width: 1100px; margin: 0 auto; padding: 0 1rem; gap: 0;
}
.paso {
  display: flex; align-items: center; gap: .5rem; position: relative;
}
.paso:not(:last-child) { padding-right: 1.6rem; }
.paso:not(:last-child)::after {
  content: ''; position: absolute; right: .35rem; top: 12px;
  width: 1rem; height: 2px; background: var(--tfw-gris-20); transition: background .25s;
}
.paso.done:not(:last-child)::after { background: var(--tfw-rojo); }
.paso-num {
  width: 26px; height: 26px; flex-shrink: 0;
  border: 2px solid var(--tfw-gris-20); background: #fff; color: var(--tfw-gris-50);
  font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.paso.active .paso-num, .paso.done .paso-num {
  background: var(--tfw-rojo); border-color: var(--tfw-rojo); color: #fff;
}
.paso.done .paso-num::before { content: '✓'; }
.paso.done .paso-num .paso-num-n { display: none; }
.paso-label {
  font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 700; color: var(--tfw-gris-50);
  white-space: nowrap; letter-spacing: .01em;
}
.paso.active .paso-label, .paso.done .paso-label { color: var(--tfw-rojo); }
@media(max-width:640px) { .paso-label { display: none; } .paso:not(:last-child) { padding-right: 1.1rem; } }

.tfw-progress-track { height: 3px; background: var(--tfw-gris-20); }
.tfw-progress-fill  { height: 100%; background: var(--tfw-rojo); transition: width .4s ease; }

/* ── Animación de cambio de paso ─────────────────────────────────────────── */
@keyframes tfwSlideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
.step-animado { animation: tfwSlideIn .3s ease; }

/* ── Cajas de subida documental (borde rojo + "+" central) ──────────────── */
.doc-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .7rem; margin: .8rem 0;
}
.doc-upload-card {
  border: 2px dashed var(--tfw-rojo); border-radius: 4px; background: #fff;
  cursor: pointer; padding: 1rem .7rem .8rem;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; gap: .4rem; min-height: 112px; transition: background .15s, border-color .15s;
}
.doc-upload-card:hover { background: var(--tfw-rojo-claro); }
.doc-upload-card.checked { border-style: solid; border-color: var(--tfw-verde); background: var(--tfw-verde-claro); }
.doc-upload-plus {
  width: 36px; height: 36px; border-radius: 50%; background: var(--tfw-rojo); color: #fff;
  font-size: 1.4rem; line-height: 36px; text-align: center; flex-shrink: 0; transition: background .2s;
}
.doc-upload-card.checked .doc-upload-plus { background: var(--tfw-verde); font-size: 1rem; }
.doc-upload-name { font-family: 'Inter', sans-serif; font-size: .74rem; font-weight: 600; color: #374151; line-height: 1.3; }
.doc-upload-obligatorio {
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tfw-rojo); background: var(--tfw-rojo-claro); padding: .1rem .4rem; border-radius: 3px;
}
.doc-upload-fn { display: flex; flex-direction: column; gap: .25rem; align-items: stretch; width: 100%; }
.tfw-file-chip {
  display: inline-flex; align-items: center; gap: .3rem; background: var(--tfw-verde-claro);
  border: 1px solid var(--tfw-verde-borde); color: var(--tfw-verde); font-size: .64rem; font-weight: 600;
  padding: .18rem .4rem; border-radius: 3px; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.tfw-file-chip button { border: none; background: none; color: var(--tfw-verde); cursor: pointer; font-weight: 800; font-size: .8rem; line-height: 1; flex-shrink: 0; padding: 0 0 0 .15rem; }
.tfw-file-chip button:hover { color: var(--tfw-rojo); }
@media(max-width:480px) { .doc-cards-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Banners de alerta (usan los mismos tonos que tf-aviso-*) ────────────── */
#tfw-alertas { margin-bottom: 1rem; }
.tfw-banner {
  display: flex; align-items: flex-start; gap: .55rem; padding: 14px 16px;
  border-radius: 0 4px 4px 0; font-family: 'Inter', sans-serif; font-size: 13px;
  line-height: 1.5; margin-bottom: .6rem;
}
.tfw-banner.tfw-bloqueo { background: var(--tfw-rojo-claro); border-left: 4px solid var(--tfw-rojo); color: var(--tfw-gris-90); font-weight: 600; }
.tfw-banner.tfw-aviso   { background: #FFFBEB; border-left: 4px solid #F59E0B; color: var(--tfw-gris-90); }
.tfw-banner-ico { flex-shrink: 0; }

/* ── Semáforo de revisión final ──────────────────────────────────────────── */
.tfw-semaforo {
  display: flex; align-items: center; gap: .6rem; padding: 14px 16px; border-radius: 4px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 1rem;
}
.tfw-semaforo .dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.tfw-semaforo.verde   { background: var(--tfw-verde-claro); color: var(--tfw-verde); }
.tfw-semaforo.verde   .dot { background: var(--tfw-verde); }
.tfw-semaforo.naranja { background: var(--tfw-ambar-claro); color: var(--tfw-ambar); }
.tfw-semaforo.naranja .dot { background: #F59E0B; }
.tfw-semaforo.rojo    { background: var(--tfw-rojo-claro); color: var(--tfw-rojo); }
.tfw-semaforo.rojo    .dot { background: var(--tfw-rojo); }

/* ── Panel de alta/login embebido en el último paso ──────────────────────── */
#tfw-auth-panel { display: none; margin-top: 1.2rem; }
.tfw-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media(max-width:700px) { .tfw-auth-grid { grid-template-columns: 1fr; } }
.tfw-auth-grid .tf-seccion h3 { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700; color: var(--tfw-gris-90); margin-bottom: .2rem; }
.tfw-auth-grid .tf-seccion p.hint { font-size: 12px; color: var(--tfw-gris-50); margin-bottom: .8rem; }
.tfw-auth-grid .check-row { display: flex; align-items: flex-start; gap: .5rem; font-size: 12px; color: var(--tfw-gris-50); margin: .6rem 0; cursor: pointer; }
.tfw-auth-grid .check-row a { color: var(--tfw-rojo); text-decoration: underline; }
.tfw-auth-grid .check-row input { margin-top: 2px; accent-color: var(--tfw-rojo); flex-shrink: 0; }

/* ── Selector de modalidad con precio dinámico (MOVES III, placas...) ────── */
.tfw-modalidad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.4rem; }
@media(max-width:700px) { .tfw-modalidad-grid { grid-template-columns: 1fr; } }
.tfw-modalidad-card {
  border: 2px solid var(--tfw-gris-20); border-radius: 4px; padding: 1.4rem 1.2rem;
  cursor: pointer; background: #fff; transition: all .2s; text-align: center;
}
.tfw-modalidad-card:hover { border-color: var(--tfw-rojo); }
.tfw-modalidad-card.sel { border-color: var(--tfw-rojo); background: var(--tfw-rojo-claro); }
.tfw-modalidad-card .tit { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.05rem; margin-bottom: .4rem; color: var(--tfw-gris-90); }
.tfw-modalidad-card .precio { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 2rem; color: var(--tfw-rojo); }
.tfw-modalidad-card .desc { font-family: 'Inter', sans-serif; font-size: .78rem; color: var(--tfw-gris-50); margin-top: .3rem; }

.tfw-precio-sticky {
  position: sticky; top: 58px; z-index: 39; background: #fff; border: 1px solid var(--tfw-gris-20);
  padding: .6rem 1rem; margin-bottom: 1rem; display: flex; align-items: center;
  justify-content: space-between; gap: .6rem; flex-wrap: wrap;
}
.tfw-precio-sticky .lbl { font-family: 'Inter', sans-serif; font-size: .72rem; color: var(--tfw-gris-50); font-weight: 600; }
.tfw-precio-sticky .val { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 900; color: var(--tfw-rojo); }

/* ── Bloques repetibles (convivientes, actuaciones, inversiones...) ──────── */
.tfw-repetible { border: 1px solid var(--tfw-gris-20); border-radius: 4px; padding: 1rem 1.1rem; margin-bottom: .8rem; background: #FAFAFA; }
.tfw-repetible-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.tfw-repetible-titulo { font-family: 'Inter', sans-serif; font-size: .74rem; font-weight: 700; color: var(--tfw-gris-50); text-transform: uppercase; letter-spacing: .04em; }
.tfw-repetible-quitar { background: none; border: none; color: var(--tfw-rojo); cursor: pointer; font-size: .78rem; font-weight: 700; font-family: 'Inter', sans-serif; }
.tfw-repetible-quitar:hover { text-decoration: underline; }
.tfw-btn-anadir {
  display: inline-flex; align-items: center; gap: .4rem; background: #fff;
  border: 1.5px dashed var(--tfw-rojo); color: var(--tfw-rojo); font-family: 'Inter', sans-serif;
  font-size: .82rem; font-weight: 700; padding: .55rem 1rem; border-radius: 4px; cursor: pointer;
}
.tfw-btn-anadir:hover { background: var(--tfw-rojo-claro); }

/* ── Guardado automático ──────────────────────────────────────────────────── */
.tfw-autosave { font-family: 'Inter', sans-serif; font-size: .68rem; color: var(--tfw-gris-50); display: flex; align-items: center; gap: .3rem; }
.tfw-autosave .ok { color: var(--tfw-verde); }

/* ── Botonera de navegación ───────────────────────────────────────────────── */
.tfw-nav { display: flex; justify-content: space-between; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }