:root {
    --bordo: #7a2e2a;
    --terracota: #c0583a;
    --terracota-oscuro: #9e4329;
    --ocre: #d9a441;
    --ocre-oscuro: #b8862c;
    --verde-quebrada: #5b7f4a;
    --verde-oscuro: #476639;
    --rosa-cerro: #c97b84;
    --crema: #faf5ec;
    --arena: #f1e6d3;
    --tierra: #3d2b23;
    --rojo-teja: #a23b3b;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: var(--crema);
    color: var(--tierra);
}

h1, h3, h5 {
    color: var(--bordo);
}

a {
    color: var(--terracota);
}

    a:hover {
        color: var(--bordo);
    }

/* ----- Barra de navegacion ----- */
.barra-quebrada {
    background: linear-gradient(90deg, var(--bordo), var(--terracota));
}

    .barra-quebrada .navbar-brand {
        color: #ffffff;
        letter-spacing: 0.5px;
    }

    .barra-quebrada .nav-link {
        color: var(--arena) !important;
        font-weight: 500;
    }

        .barra-quebrada .nav-link:hover {
            color: var(--ocre) !important;
        }

/* Franja de colores del cerro debajo del menu */
.franja-colores {
    height: 6px;
    margin-bottom: 1.5rem;
    background: linear-gradient(90deg, var(--bordo) 0%, var(--bordo) 14%, var(--terracota) 14%, var(--terracota) 28%, var(--rosa-cerro) 28%, var(--rosa-cerro) 42%, var(--ocre) 42%, var(--ocre) 57%, #e8d5a9 57%, #e8d5a9 71%, var(--verde-quebrada) 71%, var(--verde-quebrada) 85%, #6b8fa3 85%, #6b8fa3 100%);
}

/* ----- Botones ----- */
.btn-primary {
    --bs-btn-bg: var(--terracota);
    --bs-btn-border-color: var(--terracota);
    --bs-btn-hover-bg: var(--terracota-oscuro);
    --bs-btn-hover-border-color: var(--terracota-oscuro);
    --bs-btn-active-bg: var(--terracota-oscuro);
    --bs-btn-active-border-color: var(--terracota-oscuro);
}

.btn-success {
    --bs-btn-bg: var(--verde-quebrada);
    --bs-btn-border-color: var(--verde-quebrada);
    --bs-btn-hover-bg: var(--verde-oscuro);
    --bs-btn-hover-border-color: var(--verde-oscuro);
    --bs-btn-active-bg: var(--verde-oscuro);
    --bs-btn-active-border-color: var(--verde-oscuro);
}

.btn-info {
    --bs-btn-color: var(--tierra);
    --bs-btn-bg: var(--ocre);
    --bs-btn-border-color: var(--ocre);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ocre-oscuro);
    --bs-btn-hover-border-color: var(--ocre-oscuro);
    --bs-btn-active-bg: var(--ocre-oscuro);
    --bs-btn-active-border-color: var(--ocre-oscuro);
}

.btn-danger {
    --bs-btn-bg: var(--rojo-teja);
    --bs-btn-border-color: var(--rojo-teja);
    --bs-btn-hover-bg: var(--bordo);
    --bs-btn-hover-border-color: var(--bordo);
    --bs-btn-active-bg: var(--bordo);
    --bs-btn-active-border-color: var(--bordo);
}

.btn-secondary {
    --bs-btn-color: var(--tierra);
    --bs-btn-bg: var(--arena);
    --bs-btn-border-color: #d8c6a8;
    --bs-btn-hover-color: var(--tierra);
    --bs-btn-hover-bg: #e6d5b8;
    --bs-btn-hover-border-color: #c9b38f;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(217, 164, 65, 0.6);
    border-color: var(--ocre);
}

/* ----- Formularios ----- */
.form-group {
    margin-bottom: 0.8rem;
}

.formulario {
    background-color: #ffffff;
    border-radius: 0.75rem;
    border-top: 5px solid var(--terracota);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(61, 43, 35, 0.12);
}

.control-label {
    font-weight: 500;
    color: var(--tierra);
}

/* ----- Tablas ----- */
.table {
    --bs-table-striped-bg: rgba(217, 164, 65, 0.10);
    --bs-table-hover-bg: rgba(192, 88, 58, 0.10);
    background-color: #ffffff;
}

table.table thead th {
    background-color: var(--bordo);
    color: #ffffff;
    border-color: var(--bordo);
}

/* ----- Alertas ----- */
.alert-success {
    --bs-alert-bg: #e7efe2;
    --bs-alert-border-color: var(--verde-quebrada);
    --bs-alert-color: var(--verde-oscuro);
}

.alert-warning {
    --bs-alert-bg: #fbf0d9;
    --bs-alert-border-color: var(--ocre);
    --bs-alert-color: #7a5a17;
}

.alert-danger {
    --bs-alert-bg: #f6e1df;
    --bs-alert-border-color: var(--rojo-teja);
    --bs-alert-color: var(--bordo);
}

/* ----- Pagina de inicio ----- */
.portada {
    background-color: #ffffff;
    border-radius: 0.75rem;
    padding: 2rem 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(61, 43, 35, 0.12);
}

    .portada .lead {
        color: var(--terracota);
    }

.tarjeta {
    background-color: #ffffff;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(61, 43, 35, 0.12);
}

.tarjeta-cursos {
    border-left: 6px solid var(--terracota);
}

.tarjeta-inscripciones {
    border-left: 6px solid var(--verde-quebrada);
}

.tarjeta .display-6 {
    color: var(--ocre-oscuro);
    font-weight: 700;
}

.list-group-item {
    border-color: var(--arena);
}

/* ----- Pie de pagina ----- */
.footer {
    background-color: var(--arena);
    color: var(--bordo) !important;
    border-top: 3px solid var(--ocre) !important;
}