body { margin: 0;
       font-family: 'Open Sans', sans-serif;
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
       background: url('fondo_oficina.png') no-repeat center center fixed;
       background-repeat: no-repeat;
       background-size: 95% 95%; 
       background-position: center top; 
       position: relative;
       color: #333; }

body::before { content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Capa semi-transparente oscura */
    z-index: 0; }

.login-container { position: relative;
                   z-index: 1; /* Para que el login esté por encima del overlay */
                   padding: 20px; }

.login-card { background-color: #E4E6E5;
              padding: 40px;
              border-radius: 12px;
              box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
              text-align: center;
              width: 380px; /* Ancho fijo para el formulario */
              max-width: 90vw; /* Responsivo para pantallas pequeñas */ }

.login-logo img { width: 480px; /* Tamaño del logo pequeño en el login */
    height: 180px;
    object-fit: contain;
    margin-bottom: 20px; }

h2 { margin-top: 0;
    margin-bottom: 30px;
    color: #333;
    font-weight: 600; }

.input-group { position: relative;
    margin-bottom: 25px; }

.input-group input { width: calc(100% - 40px);
    padding: 12px 15px 12px 40px; /* Espacio para el icono */
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s ease; }

.input-group input:focus { border-color: #007bff; /* Color de acento al enfocar */ }

.input-group .icon { position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 18px; }

.options { display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 30px;
           font-size: 14px; }

.options label { display: flex;
                 align-items: center;
                 color: #555; }

.options a { color: #007bff; /* Color de acento */
             text-decoration: none;
             transition: color 0.3s ease; }

.options a:hover { color: #0056b3; }

.captcha-module { margin-top: 20px;
                  margin-bottom: 30px;
                  text-align: center; }

.captcha-module p { font-size: 15px;
                    color: #555;
                    margin-bottom: 10px; }

.captcha-box { display: flex;
               align-items: center;
               justify-content: center;
               border: 1px solid #ddd;
               border-radius: 8px;
               padding: 15px;
               margin: 0 auto;
               width: fit-content;
               background-color: #f9f9f9; }

.captcha-box img { width: 180px; /* Tamaño del QR */
                   height: 180px;
                   object-fit: contain;
                   margin-right: 15px;
                   border-radius: 4px; }

.captcha-box .captcha-icon { font-size: 36px;
                             color: #28a745; /* Color verde para "check" */ }

.login-button { width: 100%;
                padding: 15px;
                background-color: #007bff; /* Color de acento del botón */
                color: white;
                border: none;
                border-radius: 8px;
                font-size: 18px;
                font-weight: 700;
                cursor: pointer;
                transition: background-color 0.3s ease; }

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