/*
 * Cátedra de Comercio de la Universidad de La Rioja
 *
 * Capa propia sobre Bootstrap 5.
 *
 * La identidad es la del sitio original: blanco dominante, rosa de marca como
 * único acento y grises para el texto. Los valores salen de las reglas que de
 * verdad se aplican en el CSS anterior, no de contar colores en el fichero:
 *
 *   .navbar-fixed-top       fondo #FFFFFF
 *   .navbar-nav > li > a    #636363, y #E4007D al pasar por encima o activo
 *   .submenu                fondo #E4007D, texto blanco
 *   .cuerpo h1              #E4007D, mayúsculas
 *   .destacados h2          #DD216F, peso 800, centrado
 *   .cuerpo                 #555555
 *   .footer                 #333333
 */

:root {
    /* El rosa de la marca. El sitio original usaba dos tonos casi iguales:
       #E4007D en el menú, la banda de sección y los titulares, y #DD216F en
       «Destacamos». Se conservan ambos. */
    --cc-pink: #dd216f;
    --cc-pink-strong: #e4007d;
    --cc-pink-dark: #b81a5b;

    /* Grises del texto. */
    --cc-body: #555555;
    --cc-heading: #333333;
    --cc-nav: #636363;
    --cc-muted: #7a7a7a;

    --cc-footer: #333333;
    --cc-surface: #f7f7f8;
    --cc-border: #e4e4e7;

    --cc-header-height: 96px;

    /* Bootstrap usa estas para botones, enlaces y anillos de foco. */
    --bs-primary: var(--cc-pink);
    --bs-primary-rgb: 221, 33, 111;
    --bs-link-color: var(--cc-pink);
    --bs-link-color-rgb: 221, 33, 111;
    --bs-link-hover-color: var(--cc-pink-dark);
    --bs-link-hover-color-rgb: 184, 26, 91;
    --bs-body-color: var(--cc-body);
    --bs-border-color: var(--cc-border);
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--cc-body);
    /* La cabecera es fija: se reserva su altura para que no tape el contenido. */
    padding-top: var(--cc-header-height);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--cc-heading);
}

/* El título de página va en rosa y en mayúsculas, como en el sitio original. */
h1 {
    color: var(--cc-pink-strong);
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: 1.5rem;
}

a {
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
}

/* Enlace de salto, visible solo al tabular. ----------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--cc-heading);
    color: #fff;
}

.skip-link:focus {
    left: 0;
}

/* Cabecera -------------------------------------------------------------- */
/* Blanca y despejada, como el sitio original: el logotipo a la izquierda y la
   navegación a la derecha, sin más adornos. */
.site-header {
    background: #fff;
    min-height: var(--cc-header-height);
    border-bottom: 1px solid var(--cc-border);
}

.site-header .navbar-brand img {
    max-height: 62px;
    width: auto;
}

.site-header .nav-link {
    color: var(--cc-nav);
    font-size: 1rem;
    font-weight: 400;
    padding: 0.5rem 0.85rem;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
    color: var(--cc-pink-strong);
    text-decoration: none;
}

.site-header .nav-item.active > .nav-link,
.site-header .nav-link.active {
    color: var(--cc-pink-strong);
    font-weight: 500;
}

.site-header .dropdown-menu {
    border: 0;
    border-radius: 0;
    border-top: 3px solid var(--cc-pink-strong);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.site-header .dropdown-item {
    color: var(--cc-nav);
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
    color: var(--cc-pink-strong);
    background-color: var(--cc-surface);
}

.site-header .dropdown-item:active {
    background-color: var(--cc-pink-strong);
    color: #fff;
}

.site-header .navbar-toggler {
    color: var(--cc-nav);
}

/* Selector de idioma. */
.lang-switch .nav-link {
    padding-inline: 0.4rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lang-switch .nav-link[aria-current="true"] {
    color: var(--cc-pink-strong);
    font-weight: 700;
}

/* Menú lateral en móvil: un offcanvas, en lugar de las dos vistas
   duplicadas (menu.php + menu_responsive.php) que tenía el CI3. Reproduce el
   panel de aquel sitio: rosa de marca, texto blanco en negrita, desplegado
   desde la izquierda y ocupando solo parte de la pantalla. */
.offcanvas.site-menu {
    --bs-offcanvas-width: min(320px, 82vw);
    --bs-offcanvas-bg: var(--cc-pink-strong);
    --bs-offcanvas-color: #fff;
    --bs-offcanvas-padding-x: 1.5rem;
    --bs-offcanvas-padding-y: 1rem;
    border: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
}

.offcanvas.site-menu .offcanvas-header {
    padding-bottom: 0;
}

.offcanvas.site-menu .nav-link {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.6rem 0;
}

.offcanvas.site-menu .nav-link:hover,
.offcanvas.site-menu .nav-link:focus-visible {
    color: #fff;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.offcanvas.site-menu .nav-item.active > .nav-link {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Segundo nivel: más pequeño y sin negrita, como en el original. */
.offcanvas.site-menu .submenu {
    list-style: none;
    padding-left: 0;
    margin: 0 0 0.35rem;
}

.offcanvas.site-menu .submenu .nav-link {
    font-size: 0.9rem;
    font-weight: 400;
    padding: 0.35rem 0;
    color: rgba(255, 255, 255, 0.92);
}

.offcanvas.site-menu hr {
    border-color: rgba(255, 255, 255, 0.4);
    opacity: 1;
}

/* Submenú de sección ---------------------------------------------------- */
/* La banda rosa bajo la cabecera. */
.section-nav {
    background: var(--cc-pink-strong);
}

.section-nav .nav-link {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 300;
    padding: 0.85rem 1.1rem;
}

.section-nav .nav-item + .nav-item {
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.section-nav .nav-link:hover,
.section-nav .nav-link:focus-visible {
    color: #fff;
    background: rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.section-nav .nav-link.active {
    color: #fff;
    font-weight: 500;
}

/* Contenido ------------------------------------------------------------- */
.page-body {
    padding-block: 2.5rem 3rem;
}

/* El cuerpo viene de un editor enriquecido: se acotan las imágenes y las
   tablas para que no rompan el ancho en pantallas pequeñas. */
.rich-text img {
    max-width: 100%;
    height: auto;
}

.rich-text table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.rich-text table td,
.rich-text table th {
    border: 1px solid var(--cc-border);
    padding: 0.5rem;
}

.rich-text iframe {
    max-width: 100%;
}

/* Portada --------------------------------------------------------------- */

/* Cabecera con la fotografía, solo en la portada. En el sitio anterior era
   `.header-portada`, con `margin-top: 140px` para esquivar la barra fija; aquí
   ese hueco ya lo reserva el padding de `body`. */
.home-hero {
    height: 60vh;
    min-height: 320px;
    background-color: var(--cc-heading);
    background-image: url("../img/banner2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 767.98px) {
    .home-hero {
        height: 38vh;
        min-height: 200px;
    }
}

/* Presentación bajo la cabecera fotográfica: banda rosa a ancho completo
   con el logotipo en blanco y el texto en blanco. */
.home-intro {
    background: var(--cc-pink);
    color: #fff;
}

.home-intro strong {
    color: #fff;
}

.highlights {
    background: var(--cc-surface);
    padding-block: 3rem;
}

/* «Destacamos»: rosa, en negrita y centrado, como en el sitio original. */
.highlights h2 {
    color: var(--cc-pink);
    font-weight: 800;
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 2rem;
}

.highlight-card {
    display: block;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.highlight-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.highlight-card img {
    width: 100%;
    height: auto;
    display: block;
}

.sponsors {
    padding-block: 2.5rem;
}

.sponsors img {
    max-height: 70px;
    width: auto;
}

/* Listados -------------------------------------------------------------- */
.list-entry {
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--cc-border);
}

.list-entry:last-child {
    border-bottom: 0;
}

.list-entry {
    font-size: 1.15rem;
    font-weight: 600;
}

.entry-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.list-entry .entry-meta {
    color: var(--cc-muted);
    font-size: 0.875rem;
}

.list-entry img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
}

/* Formularios ----------------------------------------------------------- */
.form-panel {
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.captcha-image {
    border: 1px solid var(--cc-border);
    border-radius: 0.375rem;
    background: #fff;
}

.btn-primary {
    --bs-btn-bg: var(--cc-pink);
    --bs-btn-border-color: var(--cc-pink);
    --bs-btn-hover-bg: var(--cc-pink-dark);
    --bs-btn-hover-border-color: var(--cc-pink-dark);
    --bs-btn-active-bg: var(--cc-pink-dark);
    --bs-btn-active-border-color: var(--cc-pink-dark);
}

/* Botones perfilados (filtros de actividades, adjuntos de una actividad). */
.btn-outline-primary {
    --bs-btn-color: var(--cc-pink);
    --bs-btn-border-color: var(--cc-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cc-pink);
    --bs-btn-hover-border-color: var(--cc-pink);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cc-pink);
    --bs-btn-active-border-color: var(--cc-pink);
    --bs-btn-focus-shadow-rgb: 221, 33, 111;
}

.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cc-pink-strong);
    --bs-btn-border-color: var(--cc-pink-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cc-pink-dark);
    --bs-btn-hover-border-color: var(--cc-pink-dark);
}

/* Paginación ------------------------------------------------------------ */
/* Bootstrap no deriva la página activa ni el anillo de foco de --bs-primary:
   los fija en su azul con variables propias, así que hay que sobrescribirlas. */
.pagination {
    --bs-pagination-active-bg: var(--cc-pink);
    --bs-pagination-active-border-color: var(--cc-pink);
    --bs-pagination-hover-color: var(--cc-pink-dark);
    --bs-pagination-hover-bg: var(--cc-surface);
    --bs-pagination-focus-color: var(--cc-pink-dark);
    --bs-pagination-focus-bg: var(--cc-surface);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(221, 33, 111, 0.25);
}

/* Galería --------------------------------------------------------------- */
.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    border-radius: 0.375rem;
}

/* Pie ------------------------------------------------------------------- */
.site-footer {
    background: var(--cc-footer);
    color: rgba(255, 255, 255, 0.75);
    padding-block: 3rem 1.5rem;
    margin-top: 3rem;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.75);
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: #fff;
}

.site-footer .footer-title {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    display: block;
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.9;
}

.site-footer .footer-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 2rem;
    padding-top: 1.25rem;
    font-size: 0.85rem;
}

/* Panel de administración ----------------------------------------------- */
body.admin {
    padding-top: 0;
    background: var(--cc-surface);
}

.admin-sidebar {
    background: var(--cc-heading);
    min-height: 100vh;
}

.admin-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.75);
    border-radius: 0.375rem;
}

.admin-sidebar .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.admin-sidebar .nav-link.active {
    color: #fff;
    background: var(--cc-pink);
}

.admin-content {
    padding: 2rem;
}

@media (max-width: 991.98px) {
    :root {
        --cc-header-height: 70px;
    }

    /* La cabecera es fija y el cuerpo reserva justo su altura: el logotipo
       tiene que caber en ella (70 px menos los rellenos de la barra y de la
       marca), o la cabecera crece y tapa la banda de sección. */
    .site-header .navbar-brand img {
        max-height: 44px;
    }

    .admin-sidebar {
        min-height: auto;
    }
}