/* ===========================
   TIPOGRAFÍA
=========================== */
body {
    font-family: 'Montserrat', 'Roboto', sans-serif;
    background-color: #f8f9fa;
    color: #003B5C;
    margin: 0;
    padding: 0;
}

/* ===========================
   COLORES INSTITUCIONALES
=========================== */
:root {
    --azul-tecnm: #003B5C;
    --azul-claro: #0076A8;
    --gris-oscuro: #4D4D4D;
    --gris-claro: #E6E6E6;
    --blanco: #FFFFFF;
    --acento: #F28C28;
}

/* ===========================
   ENCABEZADO
=========================== */
.header-congreso {
    background-color: #ffffff;
    border-bottom: 3px solid #003366;
}


.header-congreso h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
}
/*============================
    BARRA DE NAVEGACION
=============================*/
/* NAVBAR AZUL INSTITUCIONAL */
.navbar-tecnm {
    background-color: #003366 !important;
    border: none !important;
}

.navbar-tecnm .navbar-nav > li > a {
    color: #ffffff !important;
    font-weight: 600;
}

.navbar-tecnm .navbar-nav > li > a:hover,
.navbar-tecnm .navbar-nav > li.active > a {
    background-color: #002244 !important;
    color: #ffffff !important;
}

/* Marca (Inicio) */
.navbar-tecnm .navbar-brand {
    color: #ffffff !important;
    font-weight: bold;
}

/* Botones */
.navbar-tecnm .navbar-btn {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* ===========================
   BOTONES
=========================== */
.btn-tecnm {
    background-color: var(--azul-claro);
    color: var(--blanco);
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-tecnm:hover {
    background-color: var(--azul-tecnm);
    color: var(--blanco);
}

.btn-acento {
    background-color: var(--acento);
    color: var(--blanco);
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 600;
}

.btn-acento:hover {
    background-color: #d97706;
}

/* ===========================
   TARJETAS
=========================== */
.card-congreso {
    border: 1px solid var(--gris-claro);
    border-radius: 10px;
    padding: 20px;
    background: var(--blanco);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.card-congreso:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}

/* ===========================
   TÍTULOS
=========================== */
h2.section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--azul-tecnm);
    border-left: 6px solid var(--acento);
    padding-left: 12px;
    margin-bottom: 20px;
}

/* ===========================
   FOOTER
=========================== */
.footer-tecnm {
    background: var(--azul-tecnm);
    color: var(--blanco);
    padding: 20px;
    text-align: center;
    margin-top: 40px;
    font-size: 0.9rem;
}


/*Botones de salir*/
.sidebar-logout-container {
    margin-top: 20px;
    padding: 10px;
    text-align: left;
}

.btn-logout {
    background-color: var(--acento);
    color: white;
    font-weight: 600;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    width: auto; /* ← evita que se estire */
    display: inline-block;
    cursor: pointer;
    transition: 0.3s;
}

.btn-logout:hover {
    background-color: #d97706;
}

/*Modifica el login de webvimark para que este un poco más hacia arriab*/
#login-wrapper {
    top: 0 !important;
    margin-top: 20px !important; /* o el valor que quieras */
}


/*Logos del congreso*/
.header-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-logos img {
    max-height: 90px;
    width: auto;
}


/*Titulo y lema del congreso*/
.titulo-bienvenida{
    text-align: center;
}
.titulo-frase {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 30px;
    color: #003366; /* Azul institucional TecNM */
    line-height: 1.3;
}


/*Configuración del programa del congreso por pestañas*/
/* Estilo de pestañas */
.congreso-tabs > li > a {
    color: #003366; /* Azul TecNM */
    font-weight: 600;
}

.congreso-tabs > li.active > a,
.congreso-tabs > li > a:hover,
.congreso-tabs > li.active > a:focus {
    background-color: #003366 !important;
    color: #fff !important;
    border-color: #003366 !important;
}

/* Fuerza total: letras blancas en la barra */
.navbar.navbar-tecnm .navbar-nav > li > a {
    color: #ffffff !important;
}

/* Cuando está activo, seleccionado o en hover */
.navbar.navbar-tecnm .navbar-nav > li.active > a,
.navbar.navbar-tecnm .navbar-nav > li > a:hover,
.navbar.navbar-tecnm .navbar-nav > li > a:focus {
    color: #ffffff !important;
    background-color: #002244 !important;
}

/* Marca (Inicio) */
.navbar.navbar-tecnm .navbar-brand {
    color: #ffffff !important;
}

/* Seleccionar talleres*/
.taller-item {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

.taller-item.selected {
    background-color: #e0f3ff; /* azul claro */
    border-left: 5px solid #007bff;
}