/*
 * Archivo: clientes_servicios/estilos.css
 * Versión: 1.0
 * Fecha de modificación: 17/08/2026
 */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #f2f4f7;

    color: #333;
}


/*
 * =========================================================
 * CONTENEDOR LOGIN
 * =========================================================
 */

.login-contenedor {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;
}


/*
 * =========================================================
 * TARJETA
 * =========================================================
 */

.login-card {

    width: 100%;

    max-width: 420px;

    background: #fff;

    padding: 35px;

    border-radius: 12px;

    box-shadow:
        0 4px 20px rgba(
            0,
            0,
            0,
            0.10
        );
}


/*
 * =========================================================
 * ICONO
 * =========================================================
 */

.login-logo {

    text-align: center;

    margin-bottom: 15px;

    color: #198754;

    font-size: 55px;
}


/*
 * =========================================================
 * TÍTULOS
 * =========================================================
 */

.login-card h1 {

    text-align: center;

    margin:
        0 0 8px 0;

    font-size: 1.7rem;

    color: #222;
}


.login-subtitulo {

    text-align: center;

    margin:
        0 0 25px 0;

    color: #777;

    line-height: 1.5;
}


/*
 * =========================================================
 * CAMPOS
 * =========================================================
 */

.campo-login {

    margin-bottom: 18px;
}


.campo-login label {

    display: block;

    margin-bottom: 7px;

    font-weight: 600;

    color: #444;
}


.campo-login label i {

    margin-right: 5px;

    color: #198754;
}


.campo-login input {

    width: 100%;

    padding: 11px 12px;

    border:
        1px solid #ccc;

    border-radius: 6px;

    font-size: 1rem;

    outline: none;
}


.campo-login input:focus {

    border-color: #198754;

    box-shadow:
        0 0 0 3px rgba(
            25,
            135,
            84,
            0.12
        );
}


/*
 * =========================================================
 * BOTÓN
 * =========================================================
 */

.boton-ingresar {

    width: 100%;

    border: none;

    border-radius: 6px;

    padding: 12px;

    background: #198754;

    color: #fff;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.1s ease;
}


.boton-ingresar:hover {

    background: #157347;
}


.boton-ingresar:active {

    transform: scale(0.99);
}


.boton-ingresar i {

    margin-right: 7px;
}


/*
 * =========================================================
 * ERROR
 * =========================================================
 */

.mensaje-error {

    margin-bottom: 18px;

    padding: 11px 13px;

    border-radius: 6px;

    background: #f8d7da;

    color: #842029;

    border:
        1px solid #f1aeb5;

    font-size: 0.95rem;
}


.mensaje-error i {

    margin-right: 5px;
}


/*
 * =========================================================
 * AYUDA
 * =========================================================
 */

.login-ayuda {

    margin-top: 22px;

    padding-top: 18px;

    border-top:
        1px solid #eee;

    text-align: center;

    color: #777;

    font-size: 0.85rem;

    line-height: 1.5;
}


.login-ayuda i {

    margin-right: 4px;
}


/*
 * =========================================================
 * RESPONSIVE
 * =========================================================
 */

@media (max-width: 480px) {

    .login-card {

        padding: 25px 20px;
    }

}