@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  /* Colores institucionales */
  --primary: #285a9c;
  --dark: #00125a;
  --highlight: #ffc83a;
  

  /* Colores complementarios */
  --teal: #00a79d;
  --gold: #c69e51;
  --amber: #fab22e;
  --blue-light: #348ebb;
  --gray-light: #e8e8e7;
  --orange: #f66e20;
  --navy: #044278;
  --blue-muted: #8aabca;
  --blue-soft: #5aa4cf;

  /* Colores funcionales */
  --light-color: #f8f9fa;
  --error-color: #e74c3c;
  --success-color: #2ecc71;

  --border-radius: 10px;
  --box-shadow: 0 15px 35px rgba(0, 18, 90, 0.1);
  --transition: all 0.3s ease;
}

        body {
            font-family: 'Montserrat', system-ui, sans-serif;
            background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .main-content {
            flex: 1;
            display: flex;
            align-items: center;
            padding: 2rem 0;
            min-height: calc(100vh - 100px);
            /* Espacio para el footer */
        }

        .floating {
            animation: floating 3s ease-in-out infinite;
        }

        @keyframes floating {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-5px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        /* Preloader */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #loader {
            width: 50px;
            height: 50px;
            border: 5px solid #e8e8e7;
            border-top: 5px solid var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Inputs más grandes */
        .form-control-lg-custom {
            padding: 1rem 5rem 1rem 3rem !important;
            font-size: 1.1rem !important;
            height: auto !important;
        }

        .input-group-lg-custom .input-group-text {
            padding: 1rem !important;
        }

        /* Botón más grande */
        .btn-lg-custom {
            padding: 1rem 2rem !important;
            font-size: 1.1rem !important;
        }

        /* Footer en la parte inferior */
        .login-footer {
            margin-top: auto;
            padding: 1.5rem 0;
            background: transparent;
        }

        .password-input-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}


.password-input-container .input-group-text {
    border: 1px solid #e8e8e7;
    border-right: none;
    height: 56px;
}

.password-toggle-btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 56px;
    width: 60px;
    background: white !important;
    border: 1px solid #dee2e6 !important;
    border-left: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.75rem !important;
}

.password-toggle-btn:hover {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
}