/*
 * auth.css — Estilos compartidos para las páginas de acceso
 * Usado en: register.blade.php · webLogin.blade.php
 */

/* ── Título y subtítulo de página ─────────────────────────────────────────── */
.auth-title {
    font-size: 1.45em;
    font-weight: 700;
    color: #222;
    margin: 0 0 4px;
    text-align: center;
}
.auth-subtitle {
    font-size: 0.82em;
    color: #888;
    text-align: center;
    margin: 0 0 20px;
}

/* ── Etiquetas estáticas encima de cada campo ─────────────────────────────── */
.field-label {
    display: block;
    font-size: 0.82em;
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
    margin-top: 14px;
}
.field-label .req { color: #e03030; }

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.reg-input {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px 13px;
    font-size: 0.95em;
    color: #333;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.reg-input:focus {
    border-color: #f06400;
    outline: none;
    box-shadow: 0 0 0 3px rgba(240, 100, 0, .12);
}
.reg-input.is-invalid { border-color: #dc3545; }

/* ── Enlace "desplegar formulario de email" ───────────────────────────────── */
.toggle-email-link {
    font-size: 0.88em;
    color: #f06400;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    margin-top: 10px;
    border-bottom: 1px dashed #f06400;
    transition: color .2s;
}
.toggle-email-link:hover {
    color: #c04f00;
    border-bottom-color: #c04f00;
}

/* ── Divisor "— o con correo electrónico —" ──────────────────────────────── */
.divider-email {
    text-align: center;
    color: #aaa;
    font-size: 0.82em;
    margin: 18px 0 2px;
    position: relative;
}
.divider-email::before,
.divider-email::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 22%;
    height: 1px;
    background: #ddd;
}
.divider-email::before { left: 0; }
.divider-email::after  { right: 0; }

/* ── Mensajes de error (unifica .red del registro y .rojo del login) ──────── */
.red,
.rojo {
    color: #bd2130;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Estilos exclusivos del REGISTRO                                            */
/* ══════════════════════════════════════════════════════════════════════════ */

.iconbutton { font-size: 2em; }

/* reCAPTCHA oculto visualmente pero accesible */
.recaptcha-visually-hidden {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    left: 85px;
    margin-top: 30px;
}
@media (max-width: 767px) {
    .recaptcha-visually-hidden { left: 55px !important; }
}

.validateTxt { display: inline-block; font-size: 0.9em; }

/* ── Grid de dos columnas: Nombre + Apellido ──────────────────────────────── */
.reg-row-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 480px) {
    .reg-row-two { grid-template-columns: 1fr; }
}

/* ── Barra de fortaleza de contraseña ────────────────────────────────────── */
.pw-requirements {
    display: block;
    font-size: 0.77em;
    color: #888;
    margin-top: 5px;
    line-height: 1.45;
}
.pw-strength-bar {
    display: flex;
    gap: 5px;
    margin-top: 7px;
    height: 5px;
}
.pw-segment {
    flex: 1;
    border-radius: 3px;
    background: #e0e0e0;
    transition: background .25s;
}
.pw-segment.s1 { background: #e74c3c; }
.pw-segment.s2 { background: #e67e22; }
.pw-segment.s3 { background: #f1c40f; }
.pw-segment.s4 { background: #2ecc71; }

/* ── Feedback de coincidencia de contraseña ──────────────────────────────── */
.pw-match-feedback { font-size: 0.82em; margin-top: 5px; }
.pw-match-ok    { color: #27ae60; }
.pw-match-error { color: #e03030; }

/* ── Aviso de política de privacidad ─────────────────────────────────────── */
.politica-warning {
    display: none;
    align-items: center;
    gap: 7px;
    background: #fff8e1;
    border: 1px solid #ffc107;
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 0.84em;
    color: #7d5a00;
    margin-top: 5px;
}