/*
  "Solicitar acceso" en pestanas: Identidad, Contacto y Acceso. Se suma a
  acceso.css y solicitud.css. registro.ts pone la clase `con-pestanas` en
  el formulario; sin JavaScript se ven las tres secciones seguidas.
*/
.acceso--ancho{ max-width:560px }

.cabecera{ margin-bottom:22px }

/* Las pestanas: un control segmentado */
.pestanas{
    display:none;
    grid-template-columns:repeat(3, 1fr);
    gap:4px;
    margin:0 0 22px;
    padding:4px;
    border-radius:14px;
    background:var(--campo);
}

.con-pestanas .pestanas{ display:grid }

.pestanas button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:42px;
    padding:0 8px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:var(--suave);
    font:inherit;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}

.pestanas button:hover{ color:var(--tinta) }

.pestanas button b{
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border-radius:50%;
    border:1.5px solid currentColor;
    font-size:11px;
    font-weight:700;
    line-height:1;
    transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.pestanas button[aria-selected="true"]{
    background:var(--tarjeta);
    color:var(--tinta);
    box-shadow:0 1px 2px rgba(0,0,0,.06), 0 2px 8px -2px rgba(0,0,0,.08);
}

.pestanas button[aria-selected="true"] b{
    border-color:var(--marca);
    background:var(--marca);
    color:#fff;
}

/* Paso completo: el numero se vuelve un check */
.pestanas button.hecho b{
    border-color:transparent;
    background:#e3f2e8;
    color:transparent;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300582a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E");
    background-size:12px;
    background-position:center;
    background-repeat:no-repeat;
}

.pestanas button:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--marca-anillo) }

/* Paneles */
.panel{ padding-bottom:4px }

.con-pestanas .panel{ display:none }

.con-pestanas .panel.activo{
    display:block;
    animation:panel .32s cubic-bezier(.22,1,.36,1);
}

@keyframes panel{
    from{ opacity:0; transform:translateY(6px) }
    to{ opacity:1; transform:none }
}

/* Sin JavaScript, cada seccion lleva una linea arriba */
.panel + .panel{ margin-top:6px; padding-top:20px; border-top:1px solid var(--linea) }
.con-pestanas .panel + .panel{ margin-top:0; padding-top:0; border-top:0 }

.ayuda:empty{ display:none }

/* Foto compacta, arriba de Identidad */
.foto--compacta{
    gap:16px;
    margin-bottom:18px;
    padding:14px;
}

.foto--compacta .foto-vista,
.foto--compacta .foto-vista img,
.foto--compacta .foto-vacia{ width:64px; height:64px }

.foto--compacta .foto-vacia svg{ width:30px; height:30px }

.foto--compacta .foto-info strong{
    display:flex;
    align-items:center;
    margin-bottom:9px;
    font-size:14px;
    font-weight:650;
    color:var(--tinta);
}

.pendiente{
    margin:2px 2px 0;
    font-size:12.5px;
    color:var(--tenue);
}

/* Botones de abajo */
.pasos-nav{
    display:flex;
    gap:10px;
    margin-top:14px;
}

.pasos-nav .ingresar{ flex:1; margin-top:0 }
.pasos-nav [hidden]{ display:none }

.boton-volver{
    height:50px;
    padding:0 22px;
    border:1px solid #d3dad6;
    border-radius:13px;
    background:#fff;
    color:var(--tinta-2);
    font:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
}

.boton-volver:hover{ background:var(--campo); border-color:#c3ccc7 }
.boton-volver:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--marca-anillo) }

.ya-tengo{
    margin:22px 0 0;
    padding-top:18px;
    border-top:1px solid var(--linea);
    font-size:13.5px;
    color:var(--suave);
    text-align:center;
}

.ya-tengo a{ color:var(--marca); font-weight:600; text-decoration:none }
.ya-tengo a:hover{ text-decoration:underline }

@media (max-width:560px){
    .pestanas button{ gap:5px; padding:0 4px; font-size:12.5px }
    .pestanas button b{ width:18px; height:18px; font-size:10px }
    .foto--compacta .boton-chico{ height:36px; padding:0 12px; font-size:13px }
    .foto--compacta{ flex-direction:row; text-align:left }
    .foto--compacta .foto-acciones{ justify-content:flex-start }
    .boton-volver{ padding:0 16px }
}

@media (prefers-reduced-motion:reduce){
    .con-pestanas .panel.activo{ animation:none }
}