@font-face {
	font-family: 'A';
	src: url(fuentes/poppins_regular.ttf);
	font-weight: normal;
}
@font-face {
	font-family: 'A';
	src: url(fuentes/poppins_bold.ttf);
	font-weight: bold;
}
:root {
    --blue: #3533cd;
    --blue2: rgba(53, 51, 205, 0.5);
    --blueDark: #1d1a5c;
    --blueDark2: rgba(29, 26, 92, 0.5);
	--gray: rgba(0, 0, 0, 0.5);
    --gray2: rgba(0, 0, 0, 0.25);
    --gray3: rgba(0, 0, 0, 0.125);
    --light: rgba(255, 255, 255, 0.5);
    --light2: rgba(255, 255, 255, 0.25);
    --black: #000;
    --silver: #ccc;
    --white: #f0f0f0;
    --realWhite: #fff;
    --gold: #fc0;
    --gold2: #da0;
    --gold3: #b80;
    --shadow: rgba(107, 55, 55, 0.125);
    --important: #f23;
    --importantDark: rgb(122, 14, 23);
    --important2: rgba(255, 34, 51, 0.5);
    --ok: #093;
    --buttonAction: linear-gradient(to bottom, var(--blue), var(--blueDark));
    --buttonActionColor: var(--white);
    --buttonActionHover: linear-gradient(to top, var(--blueDark), var(--blueDark));
    --buttonActionHoverColor: var(--silver);
    --inputHover: drop-shadow(0 0 0.075rem var(--blue));
    --radius: 0.5rem;
    --blur: blur(2px);
}
*, ::after, ::before {
    outline: 0;
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

	scrollbar-color: var(--blue) var(--gray);
	scrollbar-width: thin;

    scroll-behavior: smooth;
    transition: all 0.125s;

    font-family: 'A', -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;

    font-size: inherit;
    word-spacing: 0.25rem;
    line-height: 1.25;
    color-scheme: light;
    accent-color: var(--blue);
    user-select: none;
}
:active, :focus {
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}
::selection {
    opacity: 1;
    background: var(--black);
    color: var(--white);
}
::placeholder {
    color: var(--black);
    opacity: 0.5;
}
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}
::-webkit-scrollbar-thumb { background: var(--gray); }
::-webkit-scrollbar-track { background: var(--blue); }
html, body {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
	overflow-y: auto;
}
a {
    text-decoration: none;
    color: var(--blue);
}
a[href]:hover, a[href]:active, a[href]:focus { opacity: 0.5; }
html { background-color: var(--blue); }
body {
    overscroll-behavior: none;
    text-align: left;
    font-size: 1rem;
    text-shadow: 0 0.05rem 0.05rem var(--shadow);
    color: var(--black);
}
body:not([data-cargando-componentes]):before,
body:not([data-cargando-componentes]):after {
    content: '';
    position: fixed !important;
    z-index: -1;
}
body:not([data-cargando-componentes]):before {
    width: 30rem;
    height: 30rem;
    right: -15rem;
    top: -12.5em;
    background: radial-gradient(closest-side, #f36, #c36, #936, transparent);
}
body:not([data-cargando-componentes]):after {
    width: 12.5rem;
    height: 12.5rem;
    right: -6.25rem;
    top: 2.5rem;
    background: radial-gradient(closest-side, #f90, transparent);
}
ol, ul { list-style: none; }

[data-cargando-componentes]:before {
    content: 'Cargando...';
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    flex-flow: column;
    justify-content: center;
    color: var(--realWhite);
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
	animation: _a 0.5s linear 0s alternate infinite forwards;
    background: none;
    top: 0;
    left: 0;
    right: 0;
}
@keyframes _a {
	to {
		color: var(--blueDark);
        text-shadow: 0 0 0.25rem var(--realWhite), 0 0 0.5rem var(--realWhite), 0 0 1rem var(--realWhite);
	}
}
[data-cargando-componentes] * { visibility: hidden; }


[data-hidden] { display: none; }
[disabled] { opacity: 0.5; }

[data-incorrect], [data-incorrect]:hover, [data-incorrect]:active, [data-incorrect]:focus {
    accent-color: var(--important) !important;
    border-color: var(--important) !important;
    filter: drop-shadow(0 0 0.125rem var(--important)) !important;
    color: var(--important);
}
input[type="radio"][data-incorrect]{ filter: drop-shadow(0 0 0.25rem var(--important)) drop-shadow(0 0 0.25rem var(--important)) !important; }
[data-incorrect]:not(input, select, button, textarea){
    display: block;
    text-align: center;
    font-weight: bold;
    background: var(--important);
    color: var(--realWhite) !important;
}

[data-correct], [data-correct]:hover, [data-correct]:active, [data-correct]:focus {
    accent-color: var(--ok) !important;
    border-color: var(--ok) !important;
    filter: drop-shadow(0 0 0.125rem var(--ok)) !important;
    color: var(--ok);
}
[data-correct]:not(input, select, button, textarea){
    display: block;
    text-align: center;
    font-weight: bold;
    background: var(--ok);
    color: var(--realWhite) !important;
}

@media screen and (max-width: 640px), (max-width: 960px) {
    
}