/* ESTILOS GENERALES CSNET */

:root {
    --principal: #009ca3;
    --secundario: #30aab0;
    --negro: #131313;
    --marron: #42210b;
    --verde: #909b2d;
    --amarillo: #fcc044;
    --beige: #f3e9db;
    --marron-placeholder: #746862;
}

@font-face {
    font-family: "Aleo";
    src: url("/fonts/Aleo/Aleo-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Grand Hotel";
    src: url("/fonts/Grand_Hotel/GrandHotel-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Luckiest Guy";
    src: url("/fonts/Luckiest_Guy/LuckiestGuy-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 1rem;
    font-family: "Aleo", monospace;
}

main {
    flex-grow: 1;
}

/* COLORES Y BOTONES */

.fondo-principal {
    background-color: var(--principal);
}

.color-principal {
    color: var(--principal);
}

.boton-principal {
    color: white;
    background-color: var(--principal);
    border: 1px solid var(--principal);
}

.boton-principal:hover {
    color: white;
    background-color: var(--secundario);
    border: 1px solid var(--secundario);
}

.boton-outline-principal {
    color: var(--principal);
    border: 1px solid var(--principal);
}

.boton-outline-principal:hover {
    color: white;
    background-color: var(--principal);
}

/* BOTÓN DE INSCRIPCIÓN */

.boton-inscripcion {
    padding: 12px 24px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background: var(--marron);
    transition: 0.3s;
}

.boton-inscripcion:hover {
    background: var(--verde);
}

/* TEXTOS */

h1 {
    font-family: "Luckiest Guy";
}

h2 {
    font-family: "Grand Hotel", serif;
}

.fondo-verde {
    background-color: var(--verde);
}

.color-amarillo {
    color: var(--amarillo);
}

.color-verde {
    color: var(--verde);
}

.color-marron {
    color: var(--marron);
}

/* FORMULARIO */

.contenedor-formulario {
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--marron);
}

input.form-control,
textarea.form-control,
select.form-select {
    color: var(--marron-placeholder);
    display: flex;
    padding: 10px;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #f3e9db;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 1rem;
}

input.form-control::placeholder,
textarea.form-control::placeholder,
select.form-select::placeholder {
    color: var(--marron-placeholder);
    opacity: 1;
}

label {
    color: var(--marron);
    font-family: "Aleo", serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* ESTILOS UNIFICADOS PARA RADIO Y CHECKBOX PERSONALIZADOS */

input[type="radio"],
input[type="checkbox"] {
    display: none;
}

label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--marron);
    border-radius: 50%;
    background: white;
    transition: background-color 0.3s, border-color 0.3s;
}

input[type="radio"]:checked + label::before,
input[type="checkbox"]:checked + label::before {
    background-color: var(--marron);
    border-color: var(--marron);
}

input[type="radio"]:checked + label::after,
input[type="checkbox"]:checked + label::after {
    content: "✓";
    position: absolute;
    left: 4px;
    top: 0;
    font-size: 14px;
    font-weight: 700;
    color: white;
}

.form-check-label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    user-select: none;
}

.form-check-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--marron);
    border-radius: 50%;
    background: white;
    transition: background-color 0.3s, border-color 0.3s;
}

.form-check-input.rounded-check {
    display: none;
}

/* LISTA DE PROPENSO */

.label-lista-propenso {
    width: 200px;
    text-align: center;
}

.opciones-lista-propenso {
    width: 200px;
}

/* PAGINACIÓN, PIE Y DROPDOWNS */

ul.pagination {
    justify-content: center;
    margin-bottom: 3em;
}

.pagination .page-item.active .page-link {
    background-color: var(--verde);
    border-color: var(--verde);
}

.pagination .page-link {
    color: var(--verde);
}

.pagination .page-link:focus:not(:focus-visible) {
    box-shadow: none;
}

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border-radius: 0;
}

.pie {
    background-color: var(--marron);
}

.dropdown-menu li {
    position: relative;
}

.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    right: 100%;
    top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
}