/* ============================================================
   crm-auth.css  ·  Refresh para /login y /registro
   - Foco de inputs y links a la paleta del brand
   - Toggle "ver contraseña" en login (.sn-password-wrap)
   - Toque distintivo SOLO para login, scoped a
     .login-register-page-wrapper (no afecta a /registro)
   ============================================================ */

:root {
    --sn-heading: #0B2E44;
    --sn-secondary: #F86F03;
    --sn-secondary-glow: rgba(248, 111, 3, 0.18);
    --sn-heading-glow: rgba(11, 46, 68, 0.10);
}

/* ============================================================
   COMPARTIDO  ·  login + registro
   ============================================================ */

/* Foco de inputs */
.login-form .input-box input[type="text"]:focus,
.login-form .input-box input[type="password"]:focus,
.rnt-contact-form input:focus,
.rnt-contact-form select:focus,
.rnt-contact-form textarea:focus,
#modalRestaurar .form-control:focus,
#idCedula:focus {
    outline: none;
    border-color: var(--sn-secondary) !important;
    box-shadow: 0 0 0 3px var(--sn-secondary-glow);
}

/* Checkbox términos */
.login-form .input-box input[type="checkbox"] {
    accent-color: var(--sn-secondary);
}

/* Links comunes a la paleta */
#vertermcond,
.login-form-box .btn-link,
.rnt-contact-form .btn-link {
    color: var(--sn-secondary);
    transition: color 0.2s ease;
}

#vertermcond:hover,
.login-form-box .btn-link:hover,
.rnt-contact-form .btn-link:hover {
    color: var(--sn-heading);
}

.js-animation-link.link-muted {
    transition: color 0.2s ease;
}

.js-animation-link.link-muted:hover {
    color: var(--sn-secondary);
}

/* Modal Bienvenida — solo hover de los botones inline */
#modalBievenida .btn[id^="inicio_"] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#modalBievenida .btn[id^="inicio_"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px var(--sn-secondary-glow);
}

/* Select2 (registro) */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--sn-secondary) !important;
    box-shadow: 0 0 0 3px var(--sn-secondary-glow);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--sn-secondary) !important;
}

/* ============================================================
   LOGIN  ·  toque distintivo (scoped a .login-register-page-wrapper)
   ============================================================ */

/* Contenedor del formulario — sutil acento esquinero naranja */
.login-register-page-wrapper .login-form-box {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: box-shadow 0.3s ease;
}

.login-register-page-wrapper .login-form-box::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 110px;
    height: 110px;
    background: radial-gradient(circle at top right,
        var(--sn-secondary-glow) 0%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.login-register-page-wrapper .login-form-box > * {
    position: relative;
    z-index: 1;
}

.login-register-page-wrapper .login-form-box:hover {
    box-shadow: 0 12px 30px var(--sn-heading-glow);
}

/* Heading "¡Bienvenido!" un poco más distintivo */
.login-register-page-wrapper .login-form-box h3 {
    color: var(--sn-heading);
    font-weight: 700;
    letter-spacing: 0.3px;
}

.login-register-page-wrapper .login-form-box h3::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    background: var(--sn-secondary);
    border-radius: 2px;
    margin-top: 8px;
}

/* Inputs del login con un sutil borde left naranja al focus */
.login-register-page-wrapper .login-form .input-box input[type="text"],
.login-register-page-wrapper .login-form .input-box input[type="password"] {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, border-left-width 0.2s ease;
    border-left: 3px solid transparent;
}

.login-register-page-wrapper .login-form .input-box input[type="text"]:focus,
.login-register-page-wrapper .login-form .input-box input[type="password"]:focus {
    border-left-color: var(--sn-secondary);
}

/* Botón principal: sutil shimmer al hover (sin reemplazar el estilo base) */
.login-register-page-wrapper .login-form .rn-btn.edu-btn {
    transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.login-register-page-wrapper .login-form .rn-btn.edu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px var(--sn-secondary-glow);
}

/* Botón SGA+ (login con UNEMI) — solo hover sutil */
.login-register-page-wrapper .btn-soft-facebook {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login-register-page-wrapper .btn-soft-facebook:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px var(--sn-heading-glow);
}

/* ============================================================
   REGISTRO  ·  toque distintivo (scoped a .about-me-1, registro.html)
   ============================================================ */

/* Acento radial sutil arriba-derecha del bloque del formulario */
.eduvibe-contact-me-top.about-me-1 {
    position: relative;
}

.eduvibe-contact-me-top.about-me-1 .section-title .title {
    color: var(--sn-heading);
    font-weight: 700;
    letter-spacing: 0.3px;
}

.eduvibe-contact-me-top.about-me-1 .section-title .title i {
    color: var(--sn-secondary);
    margin-right: 6px;
}

.eduvibe-contact-me-top.about-me-1 .section-title .title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: var(--sn-secondary);
    border-radius: 2px;
    margin-top: 10px;
}

.eduvibe-contact-me-top.about-me-1 .section-title .pre-title {
    color: var(--sn-secondary);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 13px;
}

/* Inputs del registro: borde izquierdo naranja al focus */
.eduvibe-contact-me-top.about-me-1 .rnt-contact-form input[type="text"],
.eduvibe-contact-me-top.about-me-1 .rnt-contact-form input[type="email"],
.eduvibe-contact-me-top.about-me-1 .rnt-contact-form input[type="password"],
.eduvibe-contact-me-top.about-me-1 .rnt-contact-form input[type="number"],
.eduvibe-contact-me-top.about-me-1 .rnt-contact-form input[type="tel"],
.eduvibe-contact-me-top.about-me-1 .rnt-contact-form input[type="date"],
.eduvibe-contact-me-top.about-me-1 .rnt-contact-form textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, border-left-width 0.2s ease;
    border-left: 3px solid transparent;
}

.eduvibe-contact-me-top.about-me-1 .rnt-contact-form input:focus,
.eduvibe-contact-me-top.about-me-1 .rnt-contact-form textarea:focus {
    border-left-color: var(--sn-secondary);
}

/* Labels del form en azul institucional para jerarquía visual */
.eduvibe-contact-me-top.about-me-1 .rnt-contact-form label.control-label {
    color: var(--sn-heading);
    font-weight: 600;
}

/* Separadores entre secciones del registro — texto en azul */
.eduvibe-contact-me-top.about-me-1 .rnt-contact-form h6 span {
    color: var(--sn-heading);
    font-weight: 700;
}

/* Botón "Registrarme" — hover lift suave */
.eduvibe-contact-me-top.about-me-1 .rnt-contact-form .rn-btn.edu-btn {
    transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.eduvibe-contact-me-top.about-me-1 .rnt-contact-form .rn-btn.edu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px var(--sn-secondary-glow);
}

/* Indicador de fortaleza de contraseña (passy) — alinear con paleta cuando es seguro */
.eduvibe-contact-me-top.about-me-1 #help-text-passsena {
    font-weight: 600;
    margin-left: 6px;
}

/* ============================================================
   TOGGLE "VER CONTRASEÑA"  ·  .sn-password-wrap (login)
   ============================================================ */

.sn-password-wrap {
    position: relative;
}

/* Reservar espacio a la derecha para que el input no quede debajo del botón */
.sn-password-wrap input[type="password"],
.sn-password-wrap input[type="text"] {
    padding-right: 46px !important;
}

.sn-toggle-password {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #8a949b;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease;
    padding: 0;
    z-index: 2;
}

.sn-toggle-password:hover,
.sn-toggle-password:focus {
    color: var(--sn-secondary);
    background-color: var(--sn-secondary-glow);
    outline: none;
}

.sn-toggle-password i {
    font-size: 16px;
    line-height: 1;
}