/* =========================================================
   1. FUENTES
   ========================================================= */

/* --- Roboto --- */
@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-Thin.ttf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-ExtraLight.ttf');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-Light.ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-Bold.ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-Black.ttf');
    font-weight: 900;
    font-style: normal;
}

/* =========================================================
   2. VARIABLES
   ========================================================= */

:root {
    /* Colores */
    --color-azul-unifersa: #0082C0;
    --color-azul-muy-claro: #F3F8FB;
    --color-blanco: #ffffff;
    --color-negro: #000000;
    --color-negro-2: #2B2B2B;
    --color-gris-claro: #EBEBEB;

    /* Tipografías */
    --font-principal: 'Roboto', sans-serif;

    /* Pesos */
    --peso-regular: 400;
    --peso-medium: 500;
    --peso-semibold: 600;
    --peso-bold: 700;
}

/* =========================================================
   3. UTILIDADES DE TIPOGRAFÍA
   (equivalen a los antiguos mixins @include roboto-*)
   ========================================================= */

.roboto-regular,
.roboto-regular-italic,
.roboto-medium,
.roboto-medium-italic,
.roboto-semibold,
.roboto-bold {
    font-family: var(--font-principal);
    line-height: normal;
}

.roboto-regular {
    font-style: normal;
    font-weight: var(--peso-regular);
}

.roboto-regular-italic {
    font-style: italic;
    font-weight: var(--peso-regular);
}

.roboto-medium {
    font-style: normal;
    font-weight: var(--peso-medium);
}

.roboto-medium-italic {
    font-style: italic;
    font-weight: var(--peso-medium);
}

.roboto-semibold {
    font-style: normal;
    font-weight: var(--peso-semibold);
}

.roboto-bold {
    font-style: normal;
    font-weight: var(--peso-bold);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100vh;
    width: 100vw;
}

body {
    margin: 0;
    height: 100%;
    width: 100%;
}

/* =========================================================
   4. LOGIN
   ========================================================= */

.mantenimiento {
    height: 100%;
    display: flex;
    align-items: center;
    background-color: var(--color-azul-unifersa);
    overflow-y: auto;
}

/* --- Panel de información (izquierda) --- */
.mantenimiento .panel-informacion {
    display: flex;
    padding-inline: 9%;
    padding-bottom: calc(20dvh + 40px);
    flex-direction: column;
    justify-content: end;
    gap: 60px;
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
}

.mantenimiento .panel-informacion img {
    max-width: min(100%, 650px);
}

.mantenimiento .panel-informacion h2 {
    margin: 0;
    color: var(--color-blanco);
    font-family: var(--font-principal);
    font-style: normal;
    font-weight: var(--peso-medium);
    font-size: 67px;
    line-height: 66px;
}

.mantenimiento .panel-informacion .lista-caracteristicas {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.mantenimiento .panel-informacion .lista-caracteristicas span {
    display: flex;
    gap: 8px;
    color: var(--color-blanco);
    font-family: var(--font-principal);
    font-style: normal;
    font-weight: var(--peso-regular);
    line-height: normal;
    font-size: 20px;
}

.mantenimiento .panel-informacion .lista-caracteristicas span::before {
    content: ""; /* obligatorio para que aparezca el pseudo-elemento */
    display: inline-block;
    width: 21px;
    height: 21px;
    background-image: url("assets/icons/icon-check-circulo.svg");
    background-size: contain; /* escala el SVG al tamaño del contenedor */
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Panel blanco (derecha) --- */
.mantenimiento .contenedor-contenido {
    display: flex;
    height: 100%;
    flex: 0 0 48%;
    min-width: 0;
    padding-inline: 9%;
    align-items: center;
    justify-content: center;
    background: var(--color-blanco);
}

/* --- Contenido de mantenimiento --- */
.mantenimiento .contenido-mantenimiento {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 24px;
    margin-top: 4vh;
}

.mantenimiento .contenido-mantenimiento h1 {
    width: 100%;
    margin: 0;
    color: var(--color-negro-2);
    font-family: var(--font-principal);
    font-size: 36px;
    font-style: normal;
    font-weight: var(--peso-medium);
}

.mantenimiento .contenido-mantenimiento .cuerpo {
    display: flex;
    padding: 36px;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    align-self: stretch;
    border: 1px solid var(--color-gris-claro);
    background: var(--color-azul-muy-claro);
}

.mantenimiento .contenido-mantenimiento .cuerpo span {
    color: var(--color-negro-2);
    font-family: var(--font-principal);
    font-size: 15px;
    font-style: normal;
    font-weight: var(--peso-medium);
}

/* =========================================================
   5. RESPONSIVE
   ========================================================= */

@media screen and (max-width: 1700px) {
    .mantenimiento .panel-informacion h2 {
        font-size: 60px;
        line-height: 66px;
    }

    .mantenimiento .contenido-mantenimiento h1 {
        font-size: 30px;
    }
}

@media screen and (max-width: 1280px) {
    .mantenimiento .panel-informacion {
        padding-inline: 5%;
    }

    .mantenimiento .panel-informacion h2 {
        font-size: 56px;
    }

    .mantenimiento .panel-informacion .lista-caracteristicas span {
        font-size: 18px;
    }

    .mantenimiento .contenedor-contenido {
        padding-inline: 5%;
    }

    .mantenimiento .contenido-mantenimiento h1 {
        font-size: 26px;
    }
}

@media screen and (max-width: 1080px) {
    .mantenimiento {
        flex-direction: column;
    }

    .mantenimiento .panel-informacion {
        display: flex;
        padding: 10%;
        flex-direction: column;
        justify-content: flex-start;
        gap: 40px;
        flex: 1 0 0;
        align-self: stretch;
    }

    .mantenimiento .panel-informacion h2 {
        font-size: 42px;
        line-height: 46px;
    }

    .mantenimiento .panel-informacion h2 br {
        display: none;
    }

    .mantenimiento .panel-informacion .lista-caracteristicas {
        gap: 22px;
    }

    .mantenimiento .panel-informacion .lista-caracteristicas span {
        font-size: 15px;
    }

    .mantenimiento .panel-informacion .lista-caracteristicas span::before {
        width: 15px;
        height: 15px;
    }

    .mantenimiento .contenedor-contenido {
        /* flex: 0 0 auto; */
        width: 100%;
        height: auto;
        padding: 10%;
    }

    .mantenimiento .contenedor-contenido .contenido-mantenimiento {
        margin-top: 0;
    }
}

@media screen and (max-width: 650px) {
    .mantenimiento {
        flex-direction: column;
    }

    .mantenimiento .panel-informacion {
        gap: 40px;
    }

    .mantenimiento .panel-informacion h2 {
        font-size: 36px;
        line-height: 40px;
    }
}

@media screen and (max-width: 600px) {
    .mantenimiento .panel-informacion h2 br {
        display: block;
    }

    .mantenimiento .contenido-mantenimiento h1 {
        font-size: 24px;
    }
}