/* ==========================================================
   custom.css — Himnes Cristians
   Ubicación: css/custom.css
   ========================================================== */

/* --- Tipografía personalizada --- */
@font-face {
    font-family: 'ChronicleDispSemibold';
    src: url('../fonts/chronicledisp-semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'ChronicleDispSemibold', serif;
}

/* --- Restaura el fondo original del body, que Bootstrap (reboot.scss)
   pisa con su propio "background-color: var(--bs-body-bg)" (blanco).
   Como custom.css se carga después de Bootstrap, esta regla gana. --- */
body {
    background: #8793a1 url('../images/bg_blue2.png') repeat-x top left fixed !important;
}

/* --- Asegura que el fondo cubra toda la altura de la pantalla,
   aunque el contenido de la página sea más corto que el viewport.
   Se usa vh en vez de % porque los porcentajes de altura solo
   funcionan si el elemento padre tiene una altura definida. --- */
html, body, .page_margins, .page {
    min-height: 100vh !important;
}

/* --- Espaciado de los versos/versículos ---
   Aplica a todos los <p> dentro de la columna de contenido
   (col-md-8 / col-md-6, etc.), sin necesidad de tocar el HTML
   de cada página ni añadir clases a los miles de párrafos existentes. */
/*[class*="col-"]*/ p {
    letter-spacing: 0.8px;
    /*line-height: 1.8;*/
}

/* --- Oculta fotos e imágenes al imprimir (himnos y biografías).
   Solo se activa en el momento de imprimir; en pantalla no cambia nada. --- */
@media print {
    .vcard img,
    [class*="col-"] img {
        display: none !important;
    }
}

.dropdown-submenu {
  position: relative;
}
/*.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}*/

/* color en reposo del propio "Descargas" */
.dropdown-submenu > a.dropdown-item {
    color: #162646;
}

/* color al pasar el ratón o hacer foco sobre "Descargas" */
.dropdown-submenu > a.dropdown-item:hover,
.dropdown-submenu > a.dropdown-item:focus {
    background-color: #162646;
    color: #ffffff;
}

/* si además quieres que se quede resaltado en amarillo/crema mientras el submenú está abierto */
.dropdown-submenu > a.dropdown-item.show {
    background-color: #f8f8ec;
    color: #162646;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: #162646;
    color: #ffffff;
}

.navbar .dropdown-menu > li:first-child > .dropdown-item {
    border-top-left-radius: 4px;   /* antes 6px */
    border-top-right-radius: 4px;
}

.navbar .dropdown-item {
    margin: 0;
    box-sizing: border-box;
}

.navbar .dropdown-menu li,
.dropdown-submenu .dropdown-menu li {
    margin-left: 0 !important;
}

/*Boto per pujar la página*/

.cmn-divfloat {
    position: fixed !important;
    bottom: 45px;
    right: 15px;
    display: none;
}

.cmn-btncircle {
    width: 40px !important;
    height: 40px !important;
    padding: 6px 0px;
    border-radius: 15px;
    font-size: 18px;
    text-align: center;
}