/* Overlay de la cámara para el ingreso/registro por reconocimiento facial. */
.rostro-scrim {
    position: fixed; inset: 0; z-index: 90;
    background: color-mix(in srgb, #000 62%, transparent);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.rostro-modal {
    width: min(360px, 100%); background: var(--panel);
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 60px var(--sombra);
}
.rostro-cab {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.rostro-cab b { color: var(--ink); font-size: 14px; }
.rostro-x {
    border: none; background: transparent; color: var(--dim); font-size: 15px;
    cursor: pointer; width: 26px; height: 26px; border-radius: 6px;
}
.rostro-x:hover { background: var(--panel); color: var(--ink); }
.rostro-video-wrap { position: relative; background: #000; aspect-ratio: 4 / 3; }
.rostro-video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
.rostro-ring {
    position: absolute; inset: 14px; border: 3px solid color-mix(in srgb, var(--acento) 70%, transparent);
    border-radius: 50%; pointer-events: none; transition: border-color .2s;
}
.rostro-ring.ok { border-color: var(--pos); }
.rostro-estado {
    padding: 12px 14px; text-align: center; color: var(--ink-soft, var(--dim));
    font-size: 13px; font-family: var(--f-body); min-height: 20px;
}