/* Registro institucional (registro_organizacion.php): estilos propios del asistente de 4 pasos.
   Se carga DESPUES de css/registro_usuario_v2.css, que aporta la base (barra superior, panel de marca, campos, modales).
   Prototipo aprobado: registro_institucional_propuesta.html. */

.stepper{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px}
.stepper li{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--gris-400)}
.stepper li::before{content:"";height:5px;border-radius:99px;background:var(--gris-300)}
.stepper li.done{color:var(--gris-700)}.stepper li.done::before{background:var(--verde)}
.stepper li.current{color:var(--azul-700)}.stepper li.current::before{background:var(--azul)}
.stepper li span{display:flex;align-items:center;gap:6px}
.stepper li b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gris-100);font-size:11px}
.stepper li.current b{background:var(--azul);color:#fff}.stepper li.done b{background:var(--verde);color:#fff}
.stepper-label{display:none;font-size:13px;font-weight:700;color:var(--azul-700);margin-top:8px}

.step{display:none}.step.active{display:block;animation:fade .2s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.step h3{font-size:20px;margin-top:24px}
.step > p.hint{margin-top:4px;font-size:14px}
.nav{display:flex;gap:10px;margin-top:26px}
.nav .submit{margin-top:0;flex:1}
.nav .back[hidden]{display:none}
.back{height:52px;padding:0 20px;border-radius:99px;border:1.5px solid var(--gris-300);background:#fff;font-weight:700;cursor:pointer;color:var(--gris-700)}
.back:hover{background:var(--gris-100)}

/* logo de la institucion con vista previa */
.logo-up{display:flex;align-items:center;gap:14px;margin:18px 0 6px}
.logo-up label.box{width:76px;height:76px;border-radius:14px;background:var(--gris-100);border:2px dashed var(--gris-300);display:grid;place-items:center;cursor:pointer;overflow:hidden;color:var(--gris-400);flex:none}
.logo-up label.box:hover{border-color:var(--azul)}
.logo-up img{width:100%;height:100%;object-fit:contain;background:#fff}
.logo-up b{display:block;font-size:14.5px}

/* avisos suaves (institucion existente, correo personal) */
.notice{display:none;gap:10px;align-items:flex-start;background:var(--azul-50);border:1px solid #C5DBF7;border-radius:10px;padding:10px 12px;font-size:14px;color:#1B4E92;margin-top:-4px;margin-bottom:14px}
.notice.show{display:flex}
.notice svg{flex:none;margin-top:2px}

/* categoria como chips */
.chips-r{display:flex;flex-wrap:wrap;gap:8px}
.chip-r{position:relative}
.chip-r input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip-r span{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--gris-300);background:#fff;border-radius:99px;padding:9px 14px;font-size:14.5px;font-weight:600;color:var(--gris-700)}
.chip-r input:checked + span{border-color:var(--azul);background:var(--azul-50);color:var(--azul-700)}
.chip-r input:checked + span::before{content:"✓";font-weight:800}
.chip-r input:focus-visible + span{outline:3px solid #7FB0F5;outline-offset:2px}
.field.invalid .chips-r .chip-r span{border-color:#F1B8B4}

/* tarjetas de revision */
.review{margin-top:16px;display:grid;gap:12px}
.rv{background:#fff;border:1.5px solid var(--gris-300);border-radius:var(--radio);padding:14px 16px}
.rv__h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.rv__h b{font-size:15px}
.rv__h button{border:0;background:none;color:var(--azul-700);font-weight:700;cursor:pointer;text-decoration:underline;font-size:14px}
.rv dl{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:14px}
.rv dt{color:var(--gris-500)}
.rv dd{font-weight:600;word-break:break-word}

@media (max-width:560px){
  .stepper li{font-size:0;gap:0}.stepper li span{display:none}
  .stepper-label{display:block}
  .rv dl{grid-template-columns:1fr;gap:0}.rv dd{margin-bottom:8px}
  .nav{flex-direction:column-reverse}.back{width:100%}.nav .submit{flex:none}
}