/*
  "Solicitar acceso" del Super Admin. Se apoya en acceso.css (tarjeta,
  campos, botones, pie) y solo agrega lo propio del formulario largo:
  tarjeta mas ancha, pasos numerados, rejilla de dos columnas, listas,
  prefijo del celular y la foto.
*/
.acceso--ancho{ max-width:620px; padding:42px 44px 28px }

/* Pasos */
.paso{
    padding:22px 0 6px;
    border-top:1px solid var(--linea);
}

.paso:first-of-type{ border-top:0; padding-top:0 }

.opcional{
    margin-left:4px;
    padding:2px 8px;
    border-radius:20px;
    background:var(--campo);
    color:var(--tenue);
    font-size:11px;
    font-weight:600;
    letter-spacing:.02em;
}

.campo label .opcional{ margin-left:6px }

/* Ayudas debajo del campo; data-estado lo pone registro.ts */
.ayuda{
    display:block;
    margin:7px 0 0 2px;
    font-size:12.5px;
    line-height:1.4;
    color:var(--tenue);
}

.ayuda[data-estado="ok"]{ color:#17703d; font-weight:600 }
.ayuda[data-estado="aviso"]{ color:#9a6a00 }

/* Rejilla de datos */
.rejilla{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 14px;
}

/* Fecha: el icono del navegador sobra, ya hay uno propio a la izquierda */
.caja input[type="date"]{ padding-right:14px }
.caja input[type="date"]::-webkit-calendar-picker-indicator{ opacity:.45; cursor:pointer }

/* Celular con +51 */
.caja--prefijo .prefijo{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    display:grid;
    place-items:center;
    width:52px;
    color:var(--suave);
    font-size:14.5px;
    font-weight:600;
    pointer-events:none;
}

.caja--prefijo .prefijo::after{
    content:"";
    position:absolute;
    right:0;
    top:14px;
    bottom:14px;
    width:1px;
    background:#d6dcd8;
}

.caja--prefijo input{ padding-left:64px; padding-right:14px; letter-spacing:.02em }

/* Listas con la misma piel que los campos */
.caja--lista select{
    width:100%;
    height:50px;
    padding:0 40px 0 16px;
    border:0;
    border-radius:13px;
    outline:none;
    background:var(--campo);
    color:var(--tinta);
    font:inherit;
    font-size:15px;
    -webkit-appearance:none;
    appearance:none;
    cursor:pointer;
    transition:background .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.caja--lista::after{
    content:"";
    position:absolute;
    right:17px;
    top:50%;
    width:7px;
    height:7px;
    margin-top:-6px;
    border-right:1.8px solid var(--tenue);
    border-bottom:1.8px solid var(--tenue);
    transform:rotate(45deg);
    pointer-events:none;
}

.caja--lista select:hover{ background:var(--campo-hover) }

.caja--lista select:focus{
    background:var(--tarjeta);
    box-shadow:0 0 0 1.5px var(--marca), 0 0 0 5px var(--marca-anillo);
}

.caja--lista select:disabled{ opacity:.55; cursor:not-allowed }

/* El ojo que pone auth.js */
.caja .ver-clave{ color:var(--tenue) }
.caja .ver-clave svg{ width:18px; height:18px }

/* Foto */
.foto{
    display:flex;
    align-items:center;
    gap:20px;
    padding:16px;
    border-radius:16px;
    background:var(--campo);
}

.foto-vista{
    position:relative;
    flex:none;
    width:84px;
    height:84px;
}

.foto-vista img,
.foto-vacia{
    width:84px;
    height:84px;
    border-radius:50%;
}

.foto-vista img{
    display:block;
    object-fit:cover;
    box-shadow:0 0 0 3px #fff, 0 6px 16px -6px rgba(0,0,0,.35);
}

.foto-vista img[hidden],
.foto-vacia[hidden]{ display:none }

.foto-vacia{
    display:grid;
    place-items:center;
    background:#fff;
    color:#b7bfba;
    box-shadow:inset 0 0 0 1.5px #dfe5e1;
}

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

/* registro.ts mueve "Quitar" a la esquina de la foto y lo vuelve una X */
.foto-quitar{
    position:absolute;
    top:-2px;
    right:-2px;
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    padding:0;
    border:2px solid #fff;
    border-radius:50%;
    background:var(--tinta);
    color:#fff;
    font-size:11px;
    line-height:1;
    cursor:pointer;
    transition:background .15s ease, transform .15s ease;
}

.foto-quitar:hover{ background:var(--rojo); transform:scale(1.06) }
.foto-quitar[hidden]{ display:none }

.foto-info p{
    margin:0 0 10px;
    font-size:13.5px;
    line-height:1.45;
    color:var(--suave);
}

.foto-info .ayuda{ margin:9px 0 0 }

.foto-acciones{ display:flex; flex-wrap:wrap; gap:8px }

.boton-chico{
    height:38px;
    padding:0 16px;
    border:1px solid #d3dad6;
    border-radius:11px;
    background:#fff;
    color:var(--marca);
    font:inherit;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
}

.boton-chico:hover{ background:#eff7f2; border-color:#a6c7b3 }

.boton-chico:focus-visible,
.foto-quitar:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--marca-anillo) }

/* Nota de aprobacion */
.nota{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-top:16px;
    padding:13px 15px;
    border-radius:13px;
    background:#fbf6e7;
    color:#6e5a1f;
}

.nota svg{ flex:none; width:18px; height:18px; margin-top:1px; color:#b8901f }
.nota p{ margin:0; font-size:13px; line-height:1.5 }
.nota strong{ color:#4f3f10 }

/* Enviada */
.listo{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    margin:4px 0 22px;
    text-align:center;
}

.listo-icono{
    display:grid;
    place-items:center;
    width:64px;
    height:64px;
    border-radius:50%;
    background:#e9f6ee;
    color:#17703d;
    animation:aparecer-check .6s cubic-bezier(.22,1,.36,1) .1s both;
}

.listo-icono svg{ width:30px; height:30px }

.listo p{
    max-width:380px;
    margin:0;
    font-size:14.5px;
    line-height:1.55;
    color:var(--suave);
}

@keyframes aparecer-check{
    from{ opacity:0; transform:scale(.7) }
    to{ opacity:1; transform:none }
}

.ingresar--enlace{
    display:grid;
    place-items:center;
    text-decoration:none;
}

@media (max-width:560px){
    .acceso--ancho{ padding:32px 22px 22px }
    .rejilla{ grid-template-columns:1fr }
    .foto{ flex-direction:column; text-align:center }
    .foto-acciones{ justify-content:center }
}

@media (prefers-reduced-motion:reduce){
    .listo-icono{ animation:none }
}

/* DNI: boton «Consultar RENIEC» de texto dentro del campo */
.caja--consultar input{ padding-right:150px }
.caja .consultar{
    position:absolute; right:7px; top:50%; transform:translateY(-50%);
    height:36px; padding:0 13px; border:0; border-radius:10px;
    background:#eef1ef; color:var(--tinta); font:inherit; font-size:13.5px; font-weight:600;
    white-space:nowrap; cursor:pointer; transition:background .15s ease;
}
.caja .consultar:hover{ background:#e2e7e4 }
.caja .consultar:disabled{ opacity:.55; cursor:wait }
@media (max-width:420px){ .caja--consultar input{ padding-right:120px } .caja .consultar{ padding:0 10px; font-size:12.5px } }