/* === Variables de marca === */
    :root {
      --color-primario:  #0a2c52;
      --color-acento:    #d7a625;
      --color-error:     #c62828;
      --color-fondo:     #f3f5f7;
      --color-borde:     #dfe5ea;
    }

    body {
      background: var(--color-fondo);
      color: #1f2d3d;
    }

    .form-wrapper {
      max-width: 1100px;
      margin: 40px auto;
    }

    /* === Cabecera === */
    .top-header {
      background: var(--color-primario);
      color: #fff;
      padding: 22px 24px 16px;
      border-bottom: 4px solid var(--color-acento);
    }

    .header-brand {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .header-logo {
      max-height: 70px;
      width: auto;
      display: block;
      flex-shrink: 0;
    }

    .header-text h1 {
      font-size: 2rem;
      font-weight: 800;
      margin: 0;
      letter-spacing: .3px;
    }

    .header-text .subtitle {
      font-style: italic;
      opacity: .95;
      margin-top: 4px;
      font-size: 1rem;
      line-height: 1.25;
    }

    /* === Cajas informativas === */
    .box-note {
      background: #eaf1f7;
      border-left: 5px solid #7ea4c6;
      padding: 14px 16px;
      font-size: .95rem;
      margin-bottom: 12px;
    }

    .box-warning {
      background: #f8ecec;
      border-left: 5px solid #c45252;
      padding: 12px 16px;
      font-size: .95rem;
      margin-bottom: 20px;
    }

    /* === Wizard card === */
    .wizard-card {
      background: #fff;
      border: 1px solid var(--color-borde);
      box-shadow: 0 8px 24px rgba(0,0,0,.05);
    }

    /* === Stepper === */
    .stepper {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      padding: 18px 20px 0;
    }

    .step-badge {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: #e9eef4;
      color: #4c6176;
      font-weight: 600;
      font-size: .95rem;
    }

    .step-badge .num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #b9c8d8;
      color: #fff;
      font-size: .9rem;
      font-weight: 700;
    }

    .step-badge.active {
      background: var(--color-primario);
      color: #fff;
    }

    .step-badge.active .num {
      background: var(--color-acento);
      color: var(--color-primario);
    }

    .step-badge.done {
      background: #dde8d4;
      color: #2e5a1f;
    }

    .step-badge.done .num {
      background: #4f8a31;
      color: #fff;
    }

    /* === Secciones === */
    .section-title {
      background: var(--color-primario);
      color: #f3b623;
      font-weight: 800;
      padding: 12px 16px;
      margin-bottom: 14px;
      text-transform: uppercase;
      letter-spacing: .3px;
    }

    .section-title span {
      color: #fff;
      font-weight: 700;
    }

    .step-pane {
      display: none;
      padding: 20px;
    }

    .step-pane.active {
      display: block;
    }

    /* === Etiquetas y ayudas === */
    .group-label {
      font-weight: 700;
      margin-bottom: 8px;
    }

    .help-text {
      color: #6b7785;
      font-size: .92rem;
      margin-top: -4px;
      margin-bottom: 10px;
    }

    .required::after {
      content: " *";
      color: var(--color-error);
      font-weight: 700;
    }

    .form-check {
      margin-bottom: .6rem;
    }

    /* === Acciones y progreso === */
    .actions {
      border-top: 1px solid #e5eaef;
      padding: 16px 20px 20px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .progress {
      height: 10px;
      border-radius: 999px;
      background: #e8edf2;
    }

    .progress-bar {
      background: var(--color-primario);
    }

    .small-muted {
      font-size: .9rem;
      color: #6b7785;
    }

    /* === Errores personalizados === */
    .counter-error {
      display: none;
      color: var(--color-error);
      font-size: .9rem;
      margin-top: 6px;
    }

    /* FIX: error de sector oculto correctamente sin d-block */
    #sectorError {
      display: none;
      color: #dc3545;
      font-size: .875em;
      margin-top: 4px;
    }

    /* === Resumen === */
    .summary-box {
      background: #f8fafc;
      border: 1px solid #dde5ed;
      border-radius: .5rem;
      padding: 16px;
      margin-bottom: 16px;
    }

    textarea {
      min-height: 120px;
    }

    /* === Neutraliza verde de Bootstrap en checks/radios y campos opcionales === */
    /* Evita que was-validated coloree en verde campos sin required */
    .wizard-card .was-validated textarea:valid:not([required]),
    .wizard-card .was-validated input:valid:not([required]),
    .wizard-card .was-validated select:valid:not([required]) {
      border-color: #ced4da;
      background-image: none;
      box-shadow: none;
    }

    /* === Neutraliza verde de Bootstrap en checks/radios === */
    /* Aumentamos especificidad con .wizard-card en lugar de !important */
    .wizard-card .was-validated .form-check-input:valid,
    .wizard-card .was-validated .form-check-input.is-valid,
    .wizard-card .form-check-input.is-valid {
      border-color: #ced4da;
      box-shadow: none;
      background-image: none;
    }

    .wizard-card .was-validated .form-check-input:valid ~ .form-check-label,
    .wizard-card .was-validated .form-check-input.is-valid ~ .form-check-label,
    .wizard-card .form-check-input.is-valid ~ .form-check-label {
      color: inherit;
    }

    /* === Error visual en certificaciones: solo bordes, no textos === */
    .cert-group.has-error .form-check-input {
      border-color: #dc3545;
      box-shadow: 0 0 0 0.15rem rgba(220,53,69,.15);
    }

    /* === Alineación de etiquetas === */
    .label-fijo {
      display: flex;
      align-items: end;
      min-height: 40px;
      line-height: 1.2;
      margin-bottom: 8px;
    }

    .align-bottom {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .align-bottom .form-control {
      margin-top: auto;
    }

    /* === Responsive === */
    @media (max-width: 768px) {
      .header-brand {
        flex-direction: column;
        align-items: flex-start;
      }

      .header-logo {
        max-height: 56px;
      }

      .header-text h1 {
        font-size: 1.5rem;
      }

      .stepper {
        flex-direction: column;
      }
    }