/**
 * @file wizard-system.css
 * @description Design system unificado de Wizards (Gestoría Garcés).
 *              Identidad visual basada en Matriculación Importado
 *              (verde petróleo + dorado).
 *
 * Doble función:
 *  1) Clases base reutilizables `.wz-*` (para wizards nuevos o renombrar).
 *  2) Capa de override para wizards legacy que usan otras clases
 *     (`.wizard-progress`, `.progress-step`, `.wizard-step`, `.form-section`,
 *      `.form-group`, `.form-row`, `.section-title`, `.section-number`,
 *      `.data-summary-card`, etc.) → se les aplica el look "Matri"
 *      sin tocar el HTML.
 *
 * SCOPE: aplica solo a páginas que enlacen este CSS. Matriculación
 * Importado usa su propio `/assets/matriculacion-importado/ui/wizard.css`
 * con clases `.mi-*` y no se ve afectado por este archivo.
 *
 * Última actualización: 2026-05-14 (migración Transferencia)
 */

/* ============================================================
   Tokens (paleta corporativa unificada)
   ============================================================ */
:root {
  --wz-teal: #003E3B;
  --wz-teal-soft: #005f5a;
  --wz-teal-bg: #ecfdf5;
  --wz-gold: #C99852;
  --wz-gold-soft: #faf3e6;
  --wz-bg: #f5f6f8;
  --wz-cream: #fcfaf6;
  --wz-ink: #111827;
  --wz-ink-soft: #6b7280;
  --wz-border: #e5e7eb;
  --wz-ok: #16a34a;
  --wz-warn: #d97706;
  --wz-err: #dc2626;
  --wz-radius-sm: 8px;
  --wz-radius: 10px;
  --wz-radius-lg: 14px;
  --wz-radius-xl: 16px;
  --wz-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --wz-shadow-md: 0 4px 14px rgba(0,0,0,0.06);
}

/* ============================================================
   Body / shell del wizard
   ============================================================ */
body.wz-active,
body.wizard-body {
  background: var(--wz-bg);
  color: var(--wz-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.wz-shell,
.wizard-container {
  /* FEB 2026 · Anchura global ampliada para aprovechar mejor el espacio
     disponible. Desktop estándar 1320px, hasta 1480px en pantallas ≥1600px.
     Tablet y mobile usan ancho fluido (controlado abajo por media queries). */
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 32px 80px;
}

/* FEB 2026 · En pantallas grandes, aprovechar más superficie horizontal */
@media (min-width: 1600px) {
  .wz-shell,
  .wizard-container {
    max-width: 1480px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* FEB 2026 · Tablet (721-1199): ancho 100% fluido con paddings reducidos */
@media (min-width: 721px) and (max-width: 1199px) {
  .wz-shell,
  .wizard-container {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ============================================================
   Stepper · pills (Matri parity)
   - clases base: .wz-stepper .wz-pill .wz-num
   - alias legacy: .wizard-progress .progress-step .step-circle .step-label
   ============================================================ */
.wz-stepper,
.wizard-progress {
  display: flex;
  gap: 8px;
  margin: 0 0 24px;
  background: white;
  padding: 14px;
  border-radius: var(--wz-radius-lg);
  border: 1px solid var(--wz-border);
  box-shadow: var(--wz-shadow-sm);
  overflow-x: auto;
  position: relative;        /* anula la barra de progreso :before del CSS legacy */
}
.wz-stepper::before,
.wizard-progress::before {
  content: none !important;
}

.wz-pill,
.wizard-progress .progress-step {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--wz-radius);
  color: var(--wz-ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
  background: #fafafa;
  border: 1px solid var(--wz-border);
  cursor: pointer;
  transition: all .2s ease;
  user-select: none;
  flex-direction: row;        /* anula .progress-step flex-direction:column */
  text-align: left;
}
.wz-pill:hover,
.wizard-progress .progress-step:hover { background: #f1f5f4; }

.wz-pill .wz-num,
.wizard-progress .progress-step .step-circle {
  width: 26px; height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: #e5e7eb;
  color: var(--wz-ink-soft);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0;                  /* anula margins legacy */
  flex-shrink: 0;
}
.wz-pill .wz-step-label,
.wizard-progress .progress-step .step-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: inherit;
  margin: 0;
}

/* Done (completed) — orden ANTES de active para que active siempre gane */
.wz-pill.done,
.wizard-progress .progress-step.completed {
  background: var(--wz-teal-bg);
  color: var(--wz-ok);
  border-color: #bbf7d0;
}
.wz-pill.done .wz-num,
.wizard-progress .progress-step.completed .step-circle {
  background: var(--wz-ok);
  color: white;
}

/* Active (gana sobre completed cuando se aplican ambas a la vez) */
.wz-pill.active,
.wizard-progress .progress-step.active {
  background: var(--wz-teal);
  color: white;
  border-color: var(--wz-teal);
}
.wz-pill.active .wz-num,
.wizard-progress .progress-step.active .step-circle {
  background: var(--wz-gold);
  color: var(--wz-teal);
}
.wz-pill.active .wz-step-label,
.wizard-progress .progress-step.active .step-label { color: white; }

/* ============================================================
   Cards de paso
   - clases base: .wz-card
   - alias legacy: .wizard-step
   ============================================================ */
.wz-card,
.wizard-step {
  background: white;
  border-radius: var(--wz-radius-xl);
  padding: 32px;
  border: 1px solid var(--wz-border);
  box-shadow: var(--wz-shadow-sm);
  display: none;
  margin-bottom: 16px;
}
.wz-card.active,
.wizard-step.active { display: block; }

.wz-card h2,
.wizard-step .step-title {
  color: var(--wz-teal);
  font-size: 1.35rem;
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.wz-card .step-description,
.wizard-step .step-description {
  color: var(--wz-ink-soft);
  margin: 0 0 24px;
  font-size: 0.95rem;
}

/* ============================================================
   Secciones internas
   - alias legacy: .form-section, .section-title, .section-number
   ============================================================ */
.wz-section,
.form-section {
  margin-bottom: 24px;
  padding: 0 0 22px;
  border: none;
  border-bottom: 1px dashed var(--wz-border);
  background: transparent;
  border-left: none;
  padding-left: 0;
}
.wz-section:last-child,
.form-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.wz-section-title,
.form-section .section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--wz-teal);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 16px;
  padding: 0 0 8px;
  border-bottom: 1.5px solid var(--wz-gold);
}
.wz-num-badge,
.form-section .section-number {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--wz-gold);
  color: var(--wz-teal);
  font-size: 0.9rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* ============================================================
   Form fields
   - clases base: .wz-row .wz-field
   - alias legacy: .form-row .form-row-2 .form-row-3 .form-group
   ============================================================ */
.wz-row,
.form-row,
.form-row-2,
.form-row-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}

.wz-field,
.form-group {
  flex: 1 1 240px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.wz-field label,
.form-group label {
  font-size: 0.85rem;
  color: var(--wz-ink);
  font-weight: 600;
  margin-bottom: 0;
}

.wz-field input[type="text"],
.wz-field input[type="email"],
.wz-field input[type="tel"],
.wz-field input[type="number"],
.wz-field input[type="date"],
.wz-field select,
.wz-field textarea,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea,
select.custom-select,
select.select-modern {
  border: 1.5px solid var(--wz-border);
  border-radius: var(--wz-radius);
  padding: 12px 14px;
  font-size: 0.95rem;
  background: white;
  transition: border .15s, box-shadow .15s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.wz-field input:focus,
.wz-field select:focus,
.wz-field textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
select.custom-select:focus,
select.select-modern:focus {
  outline: none;
  border-color: var(--wz-teal);
  box-shadow: 0 0 0 3px rgba(0,62,59,0.08);
}
.wz-field textarea,
.form-group textarea { resize: vertical; }

.wz-help,
.help-text,
.dropzone-hint,
.search-hint {
  font-size: 0.78rem;
  color: var(--wz-ink-soft);
  line-height: 1.4;
  margin-top: 2px;
}
.wz-req,
.required { color: var(--wz-err); }

/* ============================================================
   Radios y checks
   - clases base: .wz-radio .wz-check
   - alias legacy: .radio-group .radio-option
   ============================================================ */
.wz-radios,
.radio-group,
.toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.wz-radio,
.wz-check,
.radio-option,
.toggle-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1.5px solid var(--wz-border);
  border-radius: var(--wz-radius);
  cursor: pointer;
  background: white;
  font-size: 0.92rem;
  transition: all .15s;
  flex: 1 1 220px;
}
.wz-radio:hover,
.wz-check:hover,
.radio-option:hover,
.toggle-btn:hover {
  border-color: var(--wz-teal);
  background: #fafafa;
}
.wz-radio input,
.wz-check input,
.radio-option input { accent-color: var(--wz-teal); }
.radio-option.selected,
.toggle-btn.active {
  border-color: var(--wz-teal);
  background: var(--wz-teal-bg);
  color: var(--wz-teal);
  font-weight: 700;
}

/* ============================================================
   Botones
   - clases base: .wz-btn .wz-btn-primary etc.
   - alias legacy: .btn-primary .btn-secondary .btn-submit
                   .btn-next .btn-prev .btn-nav
   ============================================================ */
.wz-btn,
.btn-primary,
.btn-secondary,
.btn-submit,
.btn-next,
.btn-prev,
.btn-nav {
  padding: 12px 24px;
  border-radius: var(--wz-radius);
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all .15s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  text-decoration: none;
}
.wz-btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-submit:disabled,
.btn-next:disabled,
.btn-prev:disabled,
.btn-nav:disabled { opacity: 0.45; cursor: not-allowed; }

.wz-btn-primary,
.btn-primary,
.btn-submit,
.btn-next {
  background: var(--wz-teal);
  color: white;
}
.wz-btn-primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.btn-submit:hover:not(:disabled),
.btn-next:hover:not(:disabled) { background: var(--wz-teal-soft); }

.wz-btn-secondary,
.btn-secondary,
.btn-prev {
  background: white;
  color: var(--wz-teal);
  border: 1.5px solid var(--wz-teal);
}
.wz-btn-secondary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-prev:hover:not(:disabled) { background: var(--wz-teal-bg); }

.wz-btn-gold {
  background: var(--wz-gold);
  color: var(--wz-teal);
}
.wz-btn-gold:hover:not(:disabled) { filter: brightness(1.05); }

/* Navegación inferior */
.wz-nav,
.wizard-navigation,
.final-actions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 0;
  border-top: none;
}

/* ============================================================
   Resúmenes / data-summary
   - alias legacy: .data-summary-card .data-row .data-label .data-value
                   .info-box .info-row .info-label .info-value
                   .expediente-info .next-steps .magic-link-box
   ============================================================ */
.wz-summary,
.data-summary-card,
.expediente-info {
  background: var(--wz-cream);
  border: 1px solid var(--wz-border);
  border-radius: var(--wz-radius-lg);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--wz-shadow-sm);
}
.wz-summary h3,
.data-summary-card h3,
.expediente-info h3,
.next-steps h3 {
  color: var(--wz-teal);
  font-size: 1.05rem;
  margin: 0 0 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.wz-line,
.data-row,
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.92rem;
  border-bottom: 1px dashed var(--wz-border);
}
.wz-line:last-child,
.data-row:last-child,
.info-row:last-child { border-bottom: none; }

.data-label,
.info-label {
  color: var(--wz-ink-soft);
  font-weight: 500;
}
.data-value,
.info-value {
  color: var(--wz-ink);
  font-weight: 700;
  text-align: right;
}

/* Total / highlight rows
   FIX 2026-02 v5 — Esta regla aplica padding/border-radius/border-left A UN <tr>.
   Cuando .highlight-row vive DENTRO de una <table> (caso del resumen ITP), el padding
   y border-left rompen el table-layout y extienden el ancho a la derecha → overflow
   visual (las cifras 29.986,00 € quedaban cortadas). El padding/border-left solo debe
   aplicarse a divs (.wz-line.total), NO a tr. Tabla = aplicar al <td> hijo. */
.wz-line.total,
div.highlight-row,
div.orange-row {
  background: var(--wz-teal) !important;
  color: white !important;
  padding: 14px 16px !important;
  border-radius: var(--wz-radius) !important;
  margin-top: 12px !important;
  font-weight: 800 !important;
  font-size: 1.08rem !important;
  border: none !important;
  border-left: 4px solid var(--wz-gold) !important;
}
.wz-line.total .data-label,
.wz-line.total .data-value,
div.highlight-row .data-label,
div.highlight-row .data-value,
div.orange-row .data-label,
div.orange-row .data-value {
  color: white !important;
  font-weight: 800 !important;
}

/* En contexto de tabla (.cost-table) el highlight-row sólo aplica color de fondo +
   color blanco sin padding/border-radius/border-left que romperían el table-layout. */
.cost-table tr.highlight-row,
.cost-table tr.highlight-row td,
.cost-table tr.highlight-row strong,
.cost-table tr.orange-row,
.cost-table tr.orange-row td,
.cost-table tr.orange-row strong {
  background: var(--wz-teal) !important;
  color: white !important;
  font-weight: 800 !important;
}

/* Info box */
.info-box {
  padding: 12px 14px;
  background: #f0f9ff;
  border: none;
  border-left: 3px solid #0284c7;
  border-radius: var(--wz-radius-sm);
  color: #334155;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 14px;
}

/* Magic link box */
.magic-link-box {
  background: var(--wz-gold-soft);
  border: 1px solid var(--wz-gold);
  border-radius: var(--wz-radius);
  padding: 14px 16px;
}
.link-display {
  background: white;
  border: 1px solid var(--wz-border);
  border-radius: var(--wz-radius-sm);
  padding: 8px 12px;
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--wz-teal);
  word-break: break-all;
}

/* Success message */
.success-message {
  background: var(--wz-teal-bg);
  border: 1px solid #bbf7d0;
  border-left: 4px solid var(--wz-ok);
  border-radius: var(--wz-radius);
  padding: 14px 18px;
  color: var(--wz-teal);
  font-weight: 600;
}
.success-icon { color: var(--wz-ok); }

/* Error message — invisible si vacío (corrige caja roja sin texto) */
.error-message,
.field-error,
.input-error {
  display: none;
}
.error-message:not(:empty),
.field-error:not(:empty),
.input-error:not(:empty) {
  display: block;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid var(--wz-err);
  border-radius: var(--wz-radius);
  padding: 10px 14px;
  color: var(--wz-err);
  font-weight: 600;
  font-size: 0.88rem;
  margin-top: 6px;
}

/* Error message */
.error-message {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid var(--wz-err);
  border-radius: var(--wz-radius);
  padding: 14px 18px;
  color: var(--wz-err);
  font-weight: 600;
  font-size: 0.92rem;
}

/* ============================================================
   File uploaders
   - alias legacy: .file-uploader-container .uploader-dropzone
                   .uploader-header .uploader-status
   FIX 2026-02 v4 — REMOVED `.uploader-dropzone` de la regla del borde dashed.
   Antes esta regla aplicaba borde dashed + padding 16px AL DROPZONE INTERNO,
   creando el efecto de "doble caja" (dashed exterior + dashed interior) que
   se veía en el wizard genérico. El dropzone interno ahora es solo un wrapper
   flex sin borde (estilo definido en wizard.20260302.css, look idéntico a Matri).
   ============================================================ */
.wz-uploader,
.file-uploader-container {
  border: 1.5px dashed var(--wz-border);
  border-radius: var(--wz-radius-lg);
  padding: 16px 18px;
  margin-bottom: 12px;
  background: white;
  transition: border-color .15s, background .15s;
}
.uploader-dropzone:hover {
  background: transparent;
}
.uploader-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.uploader-label {
  font-weight: 700;
  color: var(--wz-ink);
  font-size: 0.95rem;
}
.uploader-status {
  font-size: 0.82rem;
  color: var(--wz-ink-soft);
  padding: 4px 10px;
  border-radius: 12px;
  background: #f3f4f6;
}
.uploader-status.ok,
.uploader-status.completed {
  background: var(--wz-teal-bg);
  color: var(--wz-ok);
}
/* FIX 2026-02 v4 — Las clases `.dropzone-text` y `.dropzone-label` se sobreescriben
   en wizard.20260302.css para dar el look de botón verde compacto (estilo Matri).
   Aquí solo dejamos un fallback básico por si se usa en otros contextos. */

/* ============================================================
   Banner / CTA flotante
   ============================================================ */
.cta-fixed {
  background: var(--wz-gold-soft);
  border-left: 4px solid var(--wz-gold);
  border-radius: var(--wz-radius);
  padding: 12px 16px;
}
.cta-fixed-btn {
  background: var(--wz-teal);
  color: white;
  padding: 10px 18px;
  border-radius: var(--wz-radius);
  font-weight: 700;
  text-decoration: none;
}

/* Loading overlay (mantenemos compatibilidad) */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.loading-overlay.active { display: flex; }
.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--wz-teal-bg);
  border-top-color: var(--wz-teal);
  border-radius: 50%;
  animation: wz-spin 0.8s linear infinite;
}
@keyframes wz-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Responsive móvil
   ============================================================ */

/* ============================================================
   HERO contextual (parity con `.mi-header` de Matri)
   ============================================================ */
.wz-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.wz-hero-logo { height: 40px; width: auto; flex-shrink: 0; }
.wz-hero-text { display: flex; flex-direction: column; gap: 2px; }
.wz-hero h1 {
  font-size: 1.55rem;
  margin: 0;
  color: var(--wz-teal);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.wz-hero-sub {
  color: var(--wz-ink-soft);
  font-size: 0.92rem;
  line-height: 1.3;
}

/* ============================================================
   Apertura visual del wizard (eliminar efecto "caja encerrada")
   El .wizard-content legacy era una box blanca grande con sombra
   que envolvía toda la zona. Convertimos cada .wizard-step en su
   propia card (como `.mi-card`) y dejamos transparente el wrapper.
   ============================================================ */
.wizard-container {
  /* FEB 2026 · Sincronizado con la regla principal arriba: max-width ampliado
     a 1320px para desktop estándar (paridad ya no con .mi-shell 980, sino con
     el nuevo ancho global). En tablet y mobile se sobrescribe por media query. */
  max-width: 1320px !important;
  padding: 28px 32px 60px !important;
}
@media (min-width: 1600px) {
  .wizard-container {
    max-width: 1480px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
@media (min-width: 721px) and (max-width: 1199px) {
  .wizard-container {
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
.wizard-content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
.wizard-step {
  background: white !important;
  border: 1px solid var(--wz-border) !important;
  border-radius: var(--wz-radius-xl) !important;
  box-shadow: var(--wz-shadow-sm) !important;
  padding: 32px !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   Navegación inferior INTEGRADA (no flotante / no sticky)
   ============================================================ */
.wizard-navigation {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 24px 0 0 !important;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  z-index: auto !important;
}
.wizard-navigation .btn-nav {
  min-width: auto !important;
  padding: 12px 24px !important;
  box-shadow: none !important;
  background: var(--wz-teal) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--wz-radius) !important;
}
.wizard-navigation .btn-prev {
  background: white !important;
  color: var(--wz-teal) !important;
  border: 1.5px solid var(--wz-teal) !important;
}
.wizard-navigation .btn-next,
.wizard-navigation .btn-submit {
  background: var(--wz-teal) !important;
  color: white !important;
}
.wizard-navigation .btn-next:hover,
.wizard-navigation .btn-submit:hover {
  background: var(--wz-teal-soft) !important;
}
.wizard-navigation .btn-prev:hover {
  background: var(--wz-teal-bg) !important;
}

/* ============================================================
   Respiración vertical extra (paridad sensación Matri)
   ============================================================ */
.wizard-step .step-title {
  margin: 0 0 6px !important;
}
.wizard-step .step-description {
  margin: 0 0 26px !important;
}
.wizard-step .form-section {
  margin-bottom: 24px;
  padding-bottom: 22px;
}
.wizard-step .form-section + .form-section {
  margin-top: 4px;
}

/* ============================================================
   Responsive móvil
   ============================================================ */
@media (max-width: 720px) {
  .wz-shell,
  .wizard-container {
    /* FEB 2026 · Mobile · sólo 10px lateral para que el wizard ocupe casi
       todo el ancho. La card interior (.wizard-step) aporta su propio padding. */
    padding: 14px 10px 60px !important;
  }
  .wz-hero {
    gap: 10px;
    margin-bottom: 18px;
  }
  .wz-hero-logo { height: 32px; }
  .wz-hero h1 { font-size: 1.2rem; }
  .wz-hero-sub { font-size: 0.82rem; }
  /* FEB 2026 · Mobile · padding interno reducido de 20 → 14 para más espacio útil. */
  .wizard-step { padding: 18px 14px !important; }
  .wizard-navigation { gap: 8px; margin-top: 18px !important; }
  .wizard-navigation .btn-nav { flex: 1; padding: 12px 14px !important; }
  .wz-stepper,
  .wizard-progress {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
  }
  /* FIX 2026-02 — pills más compactas + texto truncado para que NUNCA se salgan */
  .wz-pill,
  .wizard-progress .progress-step {
    min-width: 0;
    flex: 0 0 auto;
    font-size: 0.72rem;
    padding: 8px 10px;
    max-width: 100%;
  }
  .wz-pill .wz-num,
  .wizard-progress .progress-step .step-circle {
    width: 22px;
    height: 22px;
    min-width: 22px;
    font-size: 0.72rem;
  }
  .wz-pill .wz-step-label,
  .wizard-progress .progress-step .step-label {
    font-size: 0.72rem;
    /* No wrap, truncado elegante si el label es demasiado largo */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
  }
  .wz-card,
  .wizard-step { padding: 20px; }
  .wz-card h2,
  .wizard-step .step-title { font-size: 1.18rem; }
  .form-section,
  .wz-section { padding: 0 0 18px; }
  .form-row,
  .form-row-2,
  .form-row-3 { gap: 12px; }
  .wz-nav,
  .wizard-navigation { gap: 8px; }
  .wz-nav .wz-btn,
  .btn-primary,
  .btn-secondary,
  .btn-submit,
  .btn-prev,
  .btn-next { flex: 1; }
  /* FIX 2026-02 v5 — Reglas mobile solo para DIV (no para tr de cost-table) */
  div.highlight-row,
  div.orange-row { font-size: 1rem !important; padding: 12px 14px !important; }

  /* FIX 2026-02 — Resumen económico Paso 1 / Paso 4: nunca overflow horizontal en móvil.
     Antes las cifras largas (ej: "Honorarios profesionales (IVA incluido): 72,60 €") se
     salían del card. Stack vertical limpio + value alineado a la izquierda. */
  .data-summary-card,
  .wz-summary {
    padding: 16px !important;
  }
  .wz-line,
  .data-row,
  .info-row {
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.88rem;
  }
  .data-label,
  .info-label {
    flex: 1 1 60%;
    min-width: 0;
    font-size: 0.82rem;
    line-height: 1.3;
  }
  .data-value,
  .info-value {
    flex: 0 0 auto;
    text-align: right;
    font-size: 0.88rem;
    white-space: nowrap;
  }
  /* TOTAL row a ancho completo en móvil */
  div.highlight-row,
  div.orange-row,
  .wz-line.total {
    flex-wrap: wrap;
  }

  /* FIX 2026-02 — File items: nombre truncado, nunca overflow horizontal */
  .file-uploader-container .file-item,
  .files-list .file-item {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .file-uploader-container .file-info,
  .files-list .file-info {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }
  .file-uploader-container .file-name,
  .files-list .file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .file-uploader-container .file-size,
  .files-list .file-size {
    font-size: 0.75rem;
  }
  .file-uploader-container .file-preview,
  .files-list .file-preview {
    flex: 0 0 36px;
  }
  .file-uploader-container .file-remove,
  .files-list .file-remove {
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 6px 10px;
  }
}


/* ============================================================
 * Checkbox legal mandato + RGPD (P0 2026-05-17b)
 * Refactor responsive mobile-first. Copy compacto, links FUERA
 * del label (al estar dentro togglean el checkbox al clicarlos),
 * sin overflow horizontal, identidad corporativa.
 * ============================================================ */
.legal-accept {
    margin-top: 14px;
    padding: 12px 14px;
    background: #fcfaf6;
    border: 1px solid #e6e2d8;
    border-radius: 10px;
    max-width: 100%;
    box-sizing: border-box;
}
.legal-accept.legal-accept-error {
    border-color: #c0392b;
    background: #fdf2f0;
}
.legal-accept-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #263238;
    font-weight: 500;
}
/* P0 2026-05-17c — el label tenía display:block heredado y la regla
 * global `.form-group input { width:100% }` (wizard.20260302.css:506) hacía
 * que el checkbox creciera a 242px. Reforzamos especificidad. */
.legal-accept .legal-accept-row,
label.legal-accept-row { display: flex !important; }
.legal-accept input.legal-accept-cb,
.form-group input[type="checkbox"].legal-accept-cb {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    min-width: 18px !important;
    padding: 0 !important;
    margin: 2px 0 0 !important;
    flex: 0 0 18px !important;
    flex-shrink: 0 !important;
    accent-color: #003e3b;
    cursor: pointer;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box;
}
.legal-accept-cb {
    margin: 2px 0 0;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: #003e3b;
    cursor: pointer;
}
.legal-accept-text {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.legal-required {
    color: #c0392b;
    font-weight: 700;
}
.legal-accept-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
    margin-top: 8px;
    padding-left: 28px;
    font-size: 0.78rem;
}
.legal-accept-links a {
    color: #003e3b;
    text-decoration: underline;
    font-weight: 600;
    transition: opacity .15s;
}
.legal-accept-links a:hover { opacity: .75; }
.legal-accept-links span[aria-hidden] {
    color: #b8b4a8;
    user-select: none;
}
.legal-accept-err {
    display: none;
    color: #c0392b;
    font-size: 0.78rem;
    margin-top: 6px;
    padding-left: 28px;
    line-height: 1.35;
}
/* P0 2026-05-17c — la regla global `.error-message:not(:empty)` (line 574)
 * tiene especificidad 0,2,0 y forzaba `display:block` en el span legal
 * porque también lleva la clase `.error-message`. Subimos especificidad
 * y resetamos el estilo de caja roja para que SOLO aparezca cuando el
 * checkbox no está marcado y se ha intentado avanzar. */
.legal-accept .legal-accept-err,
.error-message.legal-accept-err {
    display: none;
    background: transparent;
    border: none;
    border-left: none;
    border-radius: 0;
    padding: 0 0 0 28px;
    margin-top: 6px;
    font-weight: 500;
    font-size: 0.78rem;
}
.legal-accept.legal-accept-error .legal-accept-err { display: block; }
.legal-accept.legal-accept-error .legal-accept-err.error-message,
.legal-accept.legal-accept-error span.error-message.legal-accept-err { display: block; }

@media (max-width: 480px) {
    .legal-accept { padding: 11px 12px; }
    .legal-accept-row { font-size: 0.85rem; gap: 9px; }
    .legal-accept-cb { width: 17px; height: 17px; }
    .legal-accept-links { font-size: 0.72rem; padding-left: 26px; gap: 4px 6px; }
    .legal-accept-err { font-size: 0.72rem; padding-left: 26px; }
}

/* ============================================================
 * Stepper responsive (P0.3 2026-05-17b)
 * En móvil pequeño los pills "Documentos"/"Pago" se cortaban.
 * Garantizamos: sin overflow horizontal hacia fuera del body,
 * scroll horizontal interno suave si hace falta, tipografía
 * adaptativa, pills proporcionales.
 * ============================================================ */
@media (max-width: 640px) {
    .wizard-progress,
    .wz-progress {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 8px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .wizard-progress::-webkit-scrollbar,
    .wz-progress::-webkit-scrollbar { display: none; }
    .progress-step,
    .wz-progress-step {
        flex: 0 0 auto;
        font-size: 0.72rem;
        padding: 6px 11px;
        white-space: nowrap;
        line-height: 1.2;
    }
    .progress-step .step-number,
    .wz-progress-step .step-number {
        width: 22px;
        height: 22px;
        font-size: 0.72rem;
    }
}
@media (max-width: 380px) {
    .progress-step,
    .wz-progress-step {
        font-size: 0.66rem;
        padding: 5px 9px;
    }
    .progress-step .step-number,
    .wz-progress-step .step-number {
        width: 20px;
        height: 20px;
        font-size: 0.66rem;
    }
}