        /* Fondo oscuro y texto claro */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: start;
            height: 25vh; /*100*/
            margin: 10;
            background-color: #0E2C40; /* Azul oscuro */
            color: #C1E1A7;  /* Color verde suave */
            padding:2px; /* 10px */
        }

        /* Contenedor principal con fondo oscuro y bordes sutiles */
        .container {
            text-align: center;
            background-color: #1A4A5A; /* Verde azulado oscuro para el contenedor */
            padding: 10px;  /*20*/
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
            width: 100%;
            max-width: 400px; /* Max ancho para que no se estire demasiado */
            box-sizing: border-box;
        }

        /* Título */
        h1 {
            color: #EFBC75;  /* Amarillo cálido */
            font-size: 1.6em;
            margin-bottom: 2px;  /*20*/
            justify-content: center;
            align-items: start;
        }

        /* Estilo para los subtítulos */
        h3 {
            color: #C1E1A7;  /* Verde suave */
        }

        /* Estilo para el tiempo actual */
        #current-time {
            font-size: 22px;
            margin: 10px 0; /*20 0*/
            color: #EFBC75; /* Amarillo cálido para resaltar el tiempo */
        }

        /* Estilo para los inputs */
        input {
            font-size: 16px;
            padding: 4px; /*10*/
            margin: 8px;
            width: 20%;  /* Establecemos el ancho al 80% por defecto */
            max-width: 300px;  /* Limita el tamaño de los inputs */
            border: 1px solid #444;  /* Bordes oscuros #444 */
            background-color: #e1f8fb;  /* Fondo oscuro para los inputs #333 */
            color: #000000;  /* Texto claro #f1f1f1*/
            border-radius: 5px;
            box-sizing: border-box;
        }

        /* Permite que los campos de entrada se redimensionen si el navegador lo permite */
        input[type="password"] {
            resize: horizontal;  /* Permite cambiar el ancho horizontalmente */
        }
        
        .error {
          background: #FF4C4C;
          padding: 10px;
          border-radius: 7px;
        }

        input:focus {
            outline: none;
            border-color: #148D8D;  /* Verde azulado brillante al hacer foco */
        }

        /* Estilo para los botones */
        button {
            padding: 8px 5px;  /* 12 15*/
            background-color: #148D8D; /* Verde azulado brillante */
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 15px;
            transition: background-color 0.3s ease;
            width: 28%; /* 58% */
            max-width: 250px;  /* Limita el tamaño máximo del botón */
        }

        .btn-group button {
/*            background-color: #04AA6D; /* Green background */
/*            border: 1px solid green; /* Green border */
/*            color: white; /* White text */
/*            padding: 10px 24px; /* Some padding */
/*            cursor: pointer; /* Pointer/hand icon */
/*            float: left; /* Float the buttons side by side */
            padding: 8px 5px;  /* 12 15*/
            width: 18%;
            max-width: 400px;  /* Limita el tamaño máximo del botón */
            margin-top: 36px;            
            margin-inline: 10px;
        }

        button:hover {
            background-color: #0E2C40;  /* Azul oscuro al pasar el mouse */
        }

        button:active {
            background-color: #1A4A5A;  /* Verde azulado al hacer clic */
        }

        hr {
            border: 1px solid #444;  /* Línea horizontal oscura */
            margin: 20px 0;
        }

        btn-group {
          /*background-color: #04AA6D; /* Green background */
          /*border: 1px solid green; /* Green border */
          /*color: white; /* White text */
          padding: 1px 2px; /* Some padding */
          /*cursor: pointer; /* Pointer/hand icon */
          /*float: left; /* Float the buttons side by side */
        }


        /* Sección para cambiar contraseña */
        .change-password {
            margin-top: 20px;
            background-color: #1A4A5A;
            padding: 15px;
            border-radius: 10px;
        }

        .change-password input {
            width: 80%;  /* Ancho por defecto del 80% */
        }
        
        /* Ajustes de márgenes y espaciado para pantallas pequeñas */
        @media (max-width: 600px) {
            h1 {
                font-size: 1.5em; /* Reduce el tamaño del título en pantallas pequeñas */
            }

            input {
                max-width: 100%;  /* Asegura que los campos de entrada sean de ancho completo */
            }

            button {
                max-width: 100%;  /* Los botones también se adaptan al ancho completo */
            }

            .container {
                /*padding: 15px;*/
                padding: 0.5em; 
                margin: 2px auto; /* Adjust for mobile */ 
            }
        }