* {
                font-family: 'Inter', sans-serif;

                box-sizing: border-box;
            }

            body {
                margin: 0;
                padding: 0;
                background-color: #EAEAEA;
            }

            .alert-message.error {
                background: #fee;
                border: 2px solid #fcc;
                color: #c33;
                padding: 10px;
                border-radius: 4px;
                margin-bottom: 15px;
            }

            .alert-message.success {
                background: #efe;
                border: 2px solid #cfc;
                color: #3c3;
                padding: 10px;
                border-radius: 4px;
                margin-bottom: 15px;
            }

            .alert-message.warning {
                background: #ffeaa7;
                border: 2px solid #fdcb6e;
                color: #d63031;
                padding: 10px;
                border-radius: 4px;
                margin-bottom: 15px;
            }

            .alert-message.info {
                background: #e3f2fd;
                border: 2px solid #90caf9;
                color: #1565c0;
                padding: 10px;
                border-radius: 4px;
                margin-bottom: 15px;
            }

            .alert-content {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .alert-text {
                flex-grow: 1;
                margin: 0 10px;
            }

            .alert-close {
                background: none;
                border: none;
                color: inherit;
                cursor: pointer;
            }

            .header-image {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 20px;
                background-color: #ffffff;
            }

            .header-image img {
                height: 60px;
                object-fit: contain;
            }

            .login-page-header {
                background-color: #f7f7f7;
                padding: 10px 20px;
                border-bottom: 1px solid #e0e0e0;
                display: flex;
                align-items: center;
                gap: 10px;
                padding-right: 15px;
                padding-left: 15px;
                margin-right: auto;
                margin-left: auto;
                border-radius: 4px;
            }

            .login-page-header .login-text {
                font-family: 'Inter', sans-serif;
                font-weight: 500;
                color: #555;
                font-size: 1.1em;
            }

            .main-content {
                display: flex;
                justify-content: center;
                align-items: flex-start;
                padding: 20px;
                min-height: calc(100vh - 300px);
            }

            .contenedor {
                text-align: center;
                width: 1000px;
                height: auto;
                padding-right: 15px;
                padding-left: 15px;
                margin-right: auto;
                margin-left: auto;
            }

            .login-container {
                display: flex;
                flex-direction: column;
                width: 100%;
                max-width: 260px;
                background-color: #fff;
                border: 1px solid #ccc;
                border-radius: 5px;
                overflow: hidden;
                font-size: small;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }

            .form-header {
                background-color: #f0f0f0;
                padding: 10px 20px;
                border-bottom: 1px solid #ddd;
            }

            .form-header h3 {
                margin: 0;
                font-size: 1.2em;
                color: #444;
            }

            .login-form-content {
                padding: 20px;
            }

            .form-field {
                margin-bottom: 15px;
            }

            .form-field label {
                display: block;
                margin-bottom: 5px;
                font-weight: bold;
                color: #555;
            }

            .form-field input[type="text"],
            .form-field input[type="password"] {
                width: 100%;
                padding: 8px;
                border: 1px solid #ccc;
                border-radius: 3px;
                box-sizing: border-box;
            }

            .captcha-container {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 15px;
            }

            .captcha-image {
                border: 1px solid #ccc;
            }

            .captcha-refresh {
                background: #ccc;
                border: none;
                padding: 5px 10px;
                cursor: pointer;
            }

            .btn-login {
                width: 100%;
                padding: 10px;
                background-color: #007bff;
                color: #fff;
                border: none;
                border-radius: 3px;
                cursor: pointer;
                font-size: 1em;
            }

            .btn-login:hover {
                background-color: #0056b3;
            }

            .forgot-password {
                text-align: right;
                font-size: 0.9em;
                margin-top: -10px;
                margin-bottom: 10px;
            }

            .forgot-password a {
                color: #007bff;
                text-decoration: none;
            }

            .forgot-password a:hover {
                text-decoration: underline;
            }

            .page-footer {
                width: 100%;
                text-align: center;
                padding: 20px;
                background-color: #f7f7f7;
                border-top: 1px solid #e0e0e0;
                color: #666;
                font-size: 0.9em;
            }

            .portal-footer {
                padding: 15px 0;
                color: #999;
                text-align: center;
            }

            .custom-modal {
                display: none;
                position: fixed;
                z-index: 9999;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.4);
            }

            .custom-modal-content {
                background-color: #fff;
                margin: 10% auto;
                width: 90%;
                max-width: 320px;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 5px 15px rgba(0,0,0,0.3);
                animation: fadeIn 0.3s ease-in-out;
                display: flex;
                flex-direction: column;
            }

            .custom-modal-header,
            .custom-modal-footer {
                padding: 12px 20px;
                background-color: #f5f5f5;
                border-bottom: 1px solid #ddd;
            }

            .custom-modal-footer {
                border-top: 1px solid #ddd;
                border-bottom: none;
                text-align: right;
            }

            .custom-modal-header h3 {
                margin: 0;
                font-size: 1.1em;
                color: #333;
            }

            .custom-modal-body {
                padding: 20px;
                text-align: center;
            }

            .modal-btn {
                padding: 6px 16px;
                background-color: #337ab7;
                color: white;
                border: none;
                border-radius: 4px;
                font-size: 0.9em;
                cursor: pointer;
            }

            .modal-btn:hover {
                background-color: #286090;
            }

            .close-modal {
                float: right;
                font-size: 22px;
                color: #aaa;
                cursor: pointer;
            }

            .close-modal:hover {
                color: #000;
            }

            .register-link {
                text-align: center;
                margin-top: 10px;
                font-size: 0.9em;
            }

            .register-link a {
                color: #007bff;
                text-decoration: none;
            }

            .register-link a:hover {
                text-decoration: underline;
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }

            /* ========== RESPONSIVE DESIGN ========== */
            @media screen and (max-width: 768px) {
                .encabezado img {
                    max-width: 100%;
                    height: auto;
                }

                .main-content {
                    padding: 15px;
                }

                .login-container {
                    max-width: 100%;
                }

                .login-form-content {
                    padding: 15px;
                }

                .form-field input[type="text"],
                .form-field input[type="password"] {
                    font-size: 16px; /* Evita zoom en iOS */
                    padding: 10px;
                }

                #captchaDisplay {
                    font-size: 20px !important;
                }

                .custom-modal-content {
                    width: 95%;
                    margin: 20% auto;
                }

                .portal-footer {
                    font-size: 0.8em;
                    padding: 10px;
                }
            }

            @media screen and (max-width: 480px) {
                .login-page-header .login-text {
                    font-size: 1em;
                }

                .form-header h3 {
                    font-size: 1.1em;
                }

                .login-form-content {
                    padding: 12px;
                }

                .form-field {
                    margin-bottom: 12px;
                }

                .portal-footer {
                    font-size: 0.75em;
                }
            }

            #captchaDisplay {
                font-size: 20px; /* Aumenté el tamaño del texto */
                letter-spacing: 6px; /* Un poco más de separación entre letras */
                padding: 12px;
                font-weight: 900; /* Más grueso */
                text-align: center;
                flex: 1;
                height: 60px; /* Ajuste proporcional */
                display: flex;
                align-items: center;
                justify-content: center;

                background: linear-gradient(to bottom, #FFFFFF 0%, #0000FF 40%, #0000FF 60%, #FFFFFF 100%);
                color: #FF9900;

                /* Fuente más ancha (extendida) */
                font-family: "Arial Black", "Impact", "Helvetica Neue", sans-serif;

                border-radius: 6px;
                border: 1px solid #ccc;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
                vertical-align: middle;
            }


            /* Fix para iOS Safari - evita zoom en inputs */
            @supports (-webkit-touch-callout: none) {
                .form-field input[type="text"],
                .form-field input[type="password"] {
                    font-size: 16px !important;
                }
            }