:root {
    --color-primary: 255, 255, 255;           /* RGB Blanco */
    --color-primary-content: 17, 17, 17;      /* RGB Negro */
    --color-secondary: 24, 38, 50;            /* RGB Negro Azulado */
    --color-secondary-content: 255, 255, 255; /* RGB Blanco */
    --color-accent: 248, 244, 236;            /* RGB Blanco Hueso */
    --color-accent-content: 0, 31, 63;        /* RGB Navy*/
    --color-info: 0, 31, 63;                  /* RGB Navy */
    --color-info-content: 127, 219, 255;      /* RGB Aqua */
    --color-success: 1, 255, 112;             /* RGB Lima */
    --color-success-content: 18, 114, 31;     /* RGB Verde */
    --color-error: 255, 71, 61;               /* RGB Rojo */
    --color-error-content: 82, 0, 0;          /* RGB Marrón */
    --clrs-navy: 0, 31, 63;
    --clrs-blue: 0, 116, 217;
    --clrs-aqua: 127, 219, 255;
    --clrs-teal: 57, 204, 204;
    --clrs-purple: 177, 13, 201;
    --clrs-fuchsia: 240, 18, 190;
    --clrs-maroon: 133, 20, 75;
    --clrs-red: 255, 65, 54;
    --clrs-orange: 255, 133, 27;
    --clrs-yellow: 255, 220, 0;
    --clrs-olive: 61, 153, 112;
    --clrs-green: 46, 204, 64;
    --clrs-lime: 1, 255, 112;
    --clrs-black: 17, 17, 17;
    --clrs-gray: 170, 170, 170;
    --clrs-silver: 221, 221, 221;
    --clrs-white: 255, 255, 255;
    --udg-azul: 32, 41, 69;
    --udg-rojo: 177, 32, 40;

    --font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --header-height: 120px;
    --sidebar-width: 250px;

    --border-radius: 10px;
    --icon-size: 30px;
}

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

body {
    font-family: var(--font-family);
    color: rgb(var(--color-primary-content));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 16px;
}

.image-background {
    background:
        linear-gradient(rgba(var(--color-primary), 0.9), rgba(var(--color-primary), 0.9)),
        url('../imgs/background2.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

iframe {
    border: none;
}

button {
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius);
    font-weight: bold;
    font-size: 16px;
    padding: 10px 20px;
}

input:-webkit-autofill {
    font-family: var(--font-family);
    font-size: 16px;
}

/* Pantallas medianas */
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

/* Escritorio normal */
@media (min-width: 1024px) {
    body {
        font-size: 20px;
    }
}

/* Monitores grandes */
@media (min-width: 1440px) {
    body {
        font-size: 20px;
    }
}