/* Inicio de sesion y recuperacion de clave (indexestudianteca2, rcFicha, indexaspirante) - SIE
   Las paginas que arma VFP pueden cambiar los colores con :root (dinsti):
   --sie-verde (swtitb), --sie-dorado (swtabb), --sie-gris (swtapb),
   --sie-tit-txt (swtitc), --sie-tab-txt (swtabc). */
        /* Colores de la pagina de inicio (indexestudiante) */
        :root {
            --sie-verde:  #10312B;
            --sie-dorado: #BC955C;
            --sie-gris:   #6F7271;
            --sie-ok:     #7BD88F;
            --sie-error:  #FF6B6B;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, var(--sie-gris) 0%, var(--sie-verde) 100%);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* FONDO ANIMADO */
        .sie-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
        .sie-bg::before, .sie-bg::after {
            content: ''; position: absolute; border-radius: 50%;
            background: radial-gradient(circle, var(--sie-dorado) 0%, transparent 65%);
        }
        .sie-bg::before { width: 700px; height: 700px; opacity: .12; top: -200px; right: -150px; animation: pulse-orb 8s ease-in-out infinite alternate; }
        .sie-bg::after  { width: 500px; height: 500px; opacity: .08; bottom: -100px; left: -100px; animation: pulse-orb 10s ease-in-out infinite alternate-reverse; }
        @keyframes pulse-orb { from { transform: scale(1); opacity: .06; } to { transform: scale(1.2); opacity: .15; } }

        /* NAVBAR */
        .navbar.fixed-top {
            background: var(--sie-verde) !important; padding: 0 24px; height: 58px;
            box-shadow: 0 2px 30px rgba(0,0,0,.25); border-bottom: 1px solid rgba(255,255,255,.1); z-index: 1000;
        }
        .navbar.fixed-top h3 {
            color: var(--sie-tit-txt, #FFFFFF); font-size: .88rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin: 0;
        }

        /* CONTENEDOR */
        .main {
            position: relative; z-index: 1; min-height: calc(100vh - 116px);
            display: flex; align-items: center; justify-content: center;
            padding: 20px 16px; margin-top: 58px; margin-bottom: 58px;
        }

        /* TARJETA */
        .login-card {
            background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 28px;
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 30px 80px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
            overflow: hidden; width: 100%; max-width: 420px; margin: 0 auto;
            animation: aparecer .5s ease-out forwards;
        }
        @keyframes aparecer { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        .login-card-header { background: var(--sie-dorado); padding: 20px 28px; text-align: center; position: relative; overflow: hidden; }
        .login-card-header::before { content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.08); }
        .login-card-header::after  { content: ''; position: absolute; bottom: -30px; left: -30px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.06); }
        .login-card-header h6 {
            color: var(--sie-tab-txt, #FFFFFF); font-size: .88rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
            margin: 0; position: relative; z-index: 1;
        }

        /* LOGO */
        .login-logo-wrap { display: flex; justify-content: center; margin: 28px 0 24px; }
        .login-logo-outer { position: relative; width: 100px; height: 100px; }
        .login-logo-outer::before, .login-logo-outer::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; }
        .login-logo-outer::before { border-top-color: var(--sie-dorado); border-right-color: rgba(255,255,255,.1); animation: spin 4s linear infinite; }
        .login-logo-outer::after  { inset: -12px; border-bottom-color: var(--sie-dorado); border-left-color: rgba(255,255,255,.06); animation: spin 7s linear infinite reverse; opacity: .6; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .login-logo-inner {
            width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,.1);
            border: 2px solid var(--sie-dorado); display: flex; align-items: center; justify-content: center;
            box-shadow: 0 0 30px var(--sie-dorado), inset 0 0 20px rgba(255,255,255,.04);
        }
        .login-logo-inner img { width: 62px; height: 62px; object-fit: contain; border-radius: 8px; }

        /* CUERPO */
        .login-card-body { padding: 0 28px 28px; }
        .login-intro { color: rgba(255,255,255,.75); font-size: .82rem; text-align: center; margin-bottom: 18px; line-height: 1.5; }

        .login-label {
            display: block; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.6);
            text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
        }
        .login-label span { color: var(--sie-error); }

        .login-input {
            width: 100%; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.15) !important;
            border-radius: 12px !important; padding: 13px 16px !important; font-size: .9rem !important;
            font-family: 'Poppins', sans-serif !important; color: #fff !important; transition: all .3s ease !important; outline: none !important;
        }
        .login-input::placeholder { color: rgba(255,255,255,.3) !important; }
        .login-input:focus {
            background: rgba(255,255,255,.12) !important; border-color: var(--sie-dorado) !important;
            box-shadow: 0 0 0 3px rgba(255,255,255,.08) !important;
        }
        .login-input[readonly] { opacity: .6; }
        .login-input.is-valid   { border-color: var(--sie-ok) !important; }
        .login-input.is-invalid { border-color: var(--sie-error) !important; }
        .token-input { letter-spacing: .5em; text-align: center; font-weight: 700; font-size: 1.2rem !important; }

        /* Campo de contrasena con boton Ver */
        .campo-clave { position: relative; }
        .campo-clave .login-input { padding-right: 84px !important; }
        .btn-ver {
            position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
            background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
            color: rgba(255,255,255,.8); font-size: .7rem; font-weight: 600; letter-spacing: 1px;
            text-transform: uppercase; padding: 6px 10px; cursor: pointer; font-family: 'Poppins', sans-serif;
        }
        .btn-ver:hover { color: var(--sie-dorado); border-color: var(--sie-dorado); }

        .mb-login { margin-bottom: 18px; }

        /* Requisitos de la contrasena */
        .reglas { list-style: none; padding-left: 0; margin: 10px 0 0; font-size: .75rem; }
        .reglas li { color: var(--sie-error); margin-bottom: 3px; }
        .reglas li::before { content: "\2716  "; }
        .reglas li.ok { color: var(--sie-ok); }
        .reglas li.ok::before { content: "\2714  "; }
        .msg-error { color: var(--sie-error); font-size: .75rem; margin-top: 6px; display: block; }

        /* BOTON */
        .login-btn {
            width: 100%; background: var(--sie-dorado) !important; border: none !important; border-radius: 12px !important;
            padding: 14px !important; font-size: .88rem !important; font-weight: 700 !important;
            font-family: 'Poppins', sans-serif !important; color: var(--sie-tab-txt, #FFFFFF) !important; letter-spacing: 1.5px !important;
            text-transform: uppercase !important; cursor: pointer !important; transition: all .3s ease !important;
            box-shadow: 0 8px 25px rgba(0,0,0,.2) !important; margin-top: 6px;
        }
        .login-btn:hover { opacity: .9 !important; transform: translateY(-2px) !important; box-shadow: 0 12px 30px rgba(0,0,0,.3) !important; }
        .login-btn:active { transform: translateY(0) !important; }
        .login-btn:disabled { opacity: .6 !important; cursor: wait !important; transform: none !important; }

        /* Enlaces */
        .login-recover {
            display: block; width: 100%; text-align: center; margin-top: 14px; font-size: .78rem;
            color: rgba(255,255,255,.5); cursor: pointer; transition: color .2s; font-weight: 500;
            background: none; border: none; font-family: 'Poppins', sans-serif; text-decoration: none;
        }
        .login-recover:hover { color: var(--sie-dorado); }
        .login-recover:disabled { cursor: default; color: rgba(255,255,255,.35); }

        .login-card-footer {
            background: rgba(255,255,255,.04); border-top: 1px solid rgba(255,255,255,.08); padding: 12px; text-align: center;
            font-size: .72rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.4);
        }

        /* PIE */
        .navbar.fixed-bottom { background: var(--sie-verde) !important; border-top: 1px solid rgba(255,255,255,.08) !important; z-index: 1000; }
        .footer-copyright { color: rgba(255,255,255,.35) !important; font-size: .72rem !important; font-family: 'Poppins', sans-serif; letter-spacing: .5px; }
        .footer-copyright a { color: var(--sie-dorado) !important; text-decoration: none; }
        .footer-copyright a:hover { color: #fff !important; }

        .oculto { display: none !important; }

        /* Alertas con los mismos colores */
        .swal2-popup { font-family: 'Poppins', sans-serif; border-radius: 20px !important; }
        .swal2-styled.swal2-confirm { background-color: var(--sie-dorado) !important; color: var(--sie-tab-txt, #FFFFFF) !important; border-radius: 12px !important; box-shadow: none !important; }

        @media (max-width: 640px) {
            .navbar.fixed-top h3 { font-size: .68rem; letter-spacing: 1.5px; }
            .login-card { border-radius: 22px; }
            .login-card-body { padding: 0 20px 24px; }
            .login-logo-outer, .login-logo-inner { width: 85px; height: 85px; }
            .login-logo-inner img { width: 52px; height: 52px; }
        }
        @media (max-width: 380px) {
            .navbar.fixed-top h3 { font-size: .6rem; }
            .login-card-body { padding: 0 16px 20px; }
        }

/* Aviso bajo el formulario (CURP) */
.login-aviso { margin-top: 16px; font-size: .75rem; color: rgba(255,255,255,.45); text-align: center; line-height: 1.5; }
.login-aviso a { color: var(--sie-dorado); text-decoration: none; font-weight: 600; }
.login-sep { border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 18px 0 4px; }
.login-curp { text-transform: uppercase; letter-spacing: 1px; }