/*! styles.css v0.7.3 */

/* Fuentes (Orden: Alfabetico)
------------------------------------------------------------------------------------------------ */

@font-face {
    font-family: 'Arvo';
    font-style: normal;
    font-weight: normal;
    src: url('../../resources/fonts/arvo.ttf') format('truetype');
}

@font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: normal;
    src: url('../../resources/fonts/inconsolata.ttf') format('truetype');
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: normal;
    src: url('../../resources/fonts/oswald.ttf') format('truetype');
}

/* Seguridad (Orden: Alfabetico)
------------------------------------------------------------------------------------------------ */

body {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

img {
    pointer-events: none;
}

/* Clases Globales (Orden: Prioridad)
------------------------------------------------------------------------------------------------ */

* {
    box-sizing: border-box;
}

body {
    background-color: #f0f0f0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 10px solid #F6B17A;
    box-sizing: border-box;
    color: #333;
    display: flex;
    flex-direction: column;
    font-family: 'Arvo', serif;
    min-height: 100vh;
}

.fusion-group {
    position: relative;
}

main {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

h1 {
    color: #F6B17A;
}

h2 {
    color: #7077A1;
}

p {
    color: #121212;
}

a {
    color: #7077A1;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: #424769;
}

/* Objetos Reusables (Orden: Prioridad)
------------------------------------------------------------------------------------------------ */

/* Fondo del Body */
.UANL {
    background-image: url('../../resources/visuals/background/background-UANL.webp');
}

header {
    align-items: center;
    background-color: #424769;
    display: flex;
    gap: 40px;
    justify-content: center;
    padding: 10px 0px;
}

footer {
    align-items: center;
    background-color: #424769;
    display: flex;
    gap: 100px;
    justify-content: center;
    padding: 10px 0px;
    text-align: center;
}

/* Contenedor Reusable */
.info-container {
    background: #424769;
    border-radius: 10px;
    max-width: 500px;
    padding: 40px;
}

/* Overlay Oscuro */
.global-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    display: none;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;
}

/* Sidebar Dinamica */
.sidebar {
    background-color: #424769;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    color: white;
    height: 100%;
    padding: 20px;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: 250px;
    z-index: 1;
}

.sidebar.active {
    transform: translateX(0);
}

/* Espaciador Vertical de Objetos */
.spacing-objects {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Input Reusable */
.input {
    background: #F6B17A;
    border: 3px solid #7077A1;
    border-radius: 15px;
    color: #f0f0f0;
    outline: none;
    padding: 12px;
    transition: border-color 0.3s;
    width: 100%;
}

.input:focus {
    border: 3px solid #f0f0f0;
}

.input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Boton Reusable */
.button {
    align-items: center;
    background: none;
    border: none;
    border-radius: 40%;
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
    width: 40px;
}

/* Boton Reusable */
.button-horizon {
    align-items: center;
    background: none;
    border: none;
    border-radius: 10%;
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
    width: 65px;
}

/* Boton Reusable Especializado */
.info-button {
    align-items: center;
    background: #F6B17A; 
    border: none;
    border-radius: 40%;
    cursor: pointer;
    display: flex;
    height: 35px;
    justify-content: center;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
    width: 35px;
}

.button:active,
.button-horizon:active,
.info-button:active {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Boton de Envio */
.submit-button {
    background-color: #7077A1;
    border: none;
    border-radius: 15px;
    color: #f0f0f0;
    cursor: pointer;
    padding: 12px;
    transition: filter 0.3s;
}

.submit-button:hover {
    filter: brightness(1.1);
}

.submit-button:active {
    filter: brightness(0.9);
}

/* Clases Reusables (Orden: Grupos)
------------------------------------------------------------------------------------------------ */

/* Fuentes (Orden: Alfabetico) ----------------------------------------- */

/* Fuente Error */
.laberror {
    color: red;
}

/* Fuente Mediana */
.font-mid {
    font-size: 24px;
}

/* Fuente Amarillo Naranja */
.mellow {
    color: #F6B17A;
}

/* Fuente Inconsolata */
.inconsolata {
    font-family: 'Inconsolata';
}

/* Fuente Oswald */
.oswald {
    font-family: 'Oswald';
}

/* Fuente Purpura */
.purple {
    color: #7077A1;
}

.purple a {
    color: #7077A1;
}

.purple a:hover {
    color: #F6B17A;
}

/* Fuente Purpura Claro */
.purplest {
    color: #2D3250;
}

/* Sin Enumeración */
.single {
    list-style-type: none;
}

/* Espaciado Sencillo */
.spacing-pad {
    padding: 10px;
}

/* Espaciado de Tabla */
.spacing-tab th, td {
    padding: 15px;
}

/* Espaciado Doble */
.spacing-padest {
    padding: 20px;
}

/* Fuente Exito */
.sucessabel {
    color: green;
}

/* Fuente Blanca */
.whiter {
    color: #f0f0f0;
}

.whiter a {
    color: #f0f0f0;
}

.whiter a:hover {
    color: #F6B17A;
}

/* Tabla Blanca */
.whiter-tab th {
    background-color: #f5f5f5;
}

/* Filtros (Orden: Alfabetico) ----------------------------------------- */

/* Filtro Amarillo Naranja */
.filter-mellow {
    filter: invert(60%) sepia(35%) saturate(400%) hue-rotate(325deg) brightness(170%) contrast(85%);
}

/* Filtro Purpura */
.filter-purple {
    filter: invert(20%) sepia(15%) saturate(1000%) hue-rotate(194deg) brightness(92%) contrast(91%);
}

/* Filtro Purpura Claro */
.filter-purplet {
    filter: grayscale(30%) brightness(40%) sepia(30%) hue-rotate(190deg) saturate(500%);
}

/* Líneas Separadoras (Orden: Alfabetico) ----------------------------------------- */

/* Línea Delgada Negra */
.line-blackest {
    border-bottom: 1px solid rgba(0, 0, 0, 0.316);
}

/* Línea Delgada Blanca */
.line-whiter {
    border-bottom: 1px solid rgba(255, 255, 255, 0.316);
}

/* Tamaño de Imagen (Orden: Alfabetico) ----------------------------------------- */

/* Imagen Tamaño Boton */
.size-button img {
    width: 22px;
}

/* Imagen Responsiva */
.size-responsive {
    width: 100%;
}

/* Imagen Tamaño Carga */
.size-load {
    width: 200px;
}

/* Imagen Tamaño Logotipo */
.size-logo img {
    width: 50px;
}

/* Imagen Tamaño Icono */
.size-icon {
    width: 50px;
}

/* Imagen Tamaño Medio */
.size-mid {
    width: 300px;
}

/* Legacy & Sandbox (Orden: Libre)
------------------------------------------------------------------------------------------------ */

input:-webkit-autofill { 
    -webkit-box-shadow:200px 200px 100px #F6B17A inset;
    box-shadow:200px 200px 100px #F6B17A inset;
}

/* Footer de versión */
.version {
    background-color: transparent;
    bottom: 10px;
    left: 10px;
    position: fixed;
}

.bolder {
    font-weight: bold;
}

.modal {
    background-color: #424769;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    display: none;
    flex-direction: column;
    gap: 20px;
    max-width: 90%;
    padding: 30px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -55%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.modal.active {
    display: flex;
}

#modalOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* semitransparente para oscurecer el fondo */
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 900; /* menor que el modal (1000) */
}

/* cuando esté activo, se muestra */
#modalOverlay.active {
  display: block;
}

#exam-container {
  text-align: justify;
}

#exam-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}