:root {
    /* Colores base */
    --color-texto-principal: #1b262c;
    --color-texto-secundario: #3c4245;

    /* Paleta verde (hospitalaria) */
    --verde-principal: #2e7d32;
    --verde-oscuro: #1b5e20;
    --verde-medio: #43a047;
    --verde-claro: #a5d6a7;

    /* Transparencias */
    --verde-transparente-1: #43a04733;
    --verde-transparente-2: #a5d6a747;
    --verde-transparente-3: #66bb6a66;

    /* Botón */
    --verde-boton: #2e7d32cc;
    --verde-boton-hover: #1b5e20;

    /* Otros */
    --color-fondo: #ffffff;
    --color-linea: #8c8b8b;
}


/* ===============================
   EFECTOS POR DEFECTO
================================ */
body {
    font-family: 'Overpass', sans-serif;
    font-size: 100%;
    color: var(--color-texto-principal);
    margin: 0;
    background-color: #5f6769;
}

.dark {
    --color-fondo: #121212;
    --color-texto-principal: #e0e0e0;

    --verde-principal: #66bb6a;
    --verde-boton: #43a047;
}


/* ===============================
   CONTENEDOR PRINCIPAL
================================ */
#contenedor {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 100vw;
    min-height: 100vh;
    background: var(--color-fondo);
}

/* ===============================
   CONTENEDOR CENTRADO
================================ */
#contenedorcentrado {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;

    min-width: 380px;
    max-width: 900px;
    width: 90%;

    background-color: var(--verde-transparente-1);

    border-radius: 10px;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.15);

    padding: 30px;
    box-sizing: border-box;
}

/* ===============================
   FORMULARIO LOGIN
================================ */
#login {
    width: 100%;
    max-width: 320px;
    min-width: 320px;
    padding: 30px 30px 50px;

    background-color: var(--verde-transparente-2);

    box-shadow: 0 0 5px 5px rgba(0,0,0,0.15);
    border-radius: 3px;

    box-sizing: border-box;
}

#login label {
    display: block;
    font-size: 120%;
    color: var(--color-texto-secundario);
    margin-top: 15px;
}

#login input {
    font-size: 110%;
    color: var(--color-texto-principal);

    width: 100%;
    height: 40px;

    margin-bottom: 10px;
    padding-left: 10px;

    border: none;
    border-radius: 3px;
    box-sizing: border-box;
}

#login input::placeholder {
    color: #E4E4E4;
}

/* Efecto focus */
#login input:focus {
    outline: none;
    border-left: 4px solid var(--verde-principal);
}

/* ===============================
   BOTÓN LOGIN
================================ */
#login button {
    font-size: 110%;
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 3px;

    background-color: var(--verde-boton);
    color: #ffffff;

    margin-top: 10px;
    cursor: pointer;
}

#login button:hover {
    background-color: var(--verde-boton-hover);
}

/* ===============================
   SECCIÓN DERECHA
================================ */
#derecho {
    width: 100%;
    text-align: center;
    opacity: 0.70;
    padding: 20px 20px 20px 50px;
    box-sizing: border-box;
}

.titulo {
    font-size: 300%;
    color: var(--verde-principal);
}

.logo-empresa img {
    width: 60%;
}

hr {
    border-top: 1px solid var(--color-linea);
    border-bottom: 1px solid var(--verde-claro);
}

.pie-form {
    font-size: 90%;
    text-align: center;
    margin-top: 15px;
}

.pie-form a {
    text-decoration: none;
    color: var(--verde-principal);
}

.pie-form a:hover {
    color: var(--verde-oscuro);
}

/* ===============================
   RESPONSIVE
================================ */
@media all and (max-width: 775px) {

    #contenedorcentrado {
        flex-direction: column-reverse;
        background-color: var(--verde-transparente-3);
    }

    #login {
        margin: 0 auto;
    }

    #derecho {
        padding: 20px;
    }

    #login label {
        text-align: left;
    }
}