/* Colores base */
:root {
    --color-text: #FFF;           /* Color para texto principal */
    --color-contrast: #264566;    /* Color de contraste para el texto */
    --color-background: #c4d8eb8a;  /* Color de fondo */
    --color-highlight: #112668;   /* Color de resalte */
}

/* Estilos generales */
body {
    background-color: var(--color-background);
    color: var(--color-contrast);
    font-family: Arial, sans-serif;
}

/* Estilos para títulos */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text); /* Color blanco para los títulos */
}

/* Estilos para enlaces */
a {
    color: var(--color-highlight);
    text-decoration: none;
}

a:hover {
    color: var(--color-contrast);
    text-decoration: underline;
}

/* Botones personalizados */
.btn-primary {
    background-color: var(--color-highlight);
    border-color: var(--color-highlight);
    color: var(--color-text);
}

.btn-primary:hover {
    background-color: var(--color-contrast);
    border-color: var(--color-contrast);
    color: var(--color-text);
}

/* Tarjetas personalizadas */
.card {
    background-color: var(--color-background);
    color: var(--color-contrast);
    border: 1px solid var(--color-highlight);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
    background-color: var(--color-highlight);
    color: var(--color-text);
    font-weight: bold;
}

/* Fondo y texto de la barra de navegación */
.navbar {
    background-color: var(--color-contrast);
}

.navbar .navbar-brand,
.navbar .nav-link {
    color: var(--color-text) !important;
}

.navbar .nav-link:hover {
    color: var(--color-highlight) !important;
}

.middle-pos {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
}