/* Variables globales y overrides de BS */ :root { --bs-primary: #d35400; --bs-primary-dark: #943b00; --bs-primary-rgb: 211, 84, 0; --bs-body-bg: #f2f4f5; --bs-body-bg-rgb: 242, 244, 245; --bs-card-title-color: #333; --noticia-subtitle-color: var(--bs-gray-900); } /* Bootstrap compila .btn-primary con sus propios --bs-btn-* fijados al azul por defecto (no leen la variable --bs-primary de arriba), así que sin esto todos los botones "btn-primary" del sitio salían azules en vez de naranjas. Esta regla, al cargar después de bootstrap.min.css, gana por orden. */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary-dark); --bs-btn-active-border-color: var(--bs-primary-dark); --bs-btn-disabled-bg: var(--bs-gray-600); --bs-btn-disabled-border-color: var(--bs-gray-600); } /* El color de hover (más oscuro) solo se aplica en dispositivos con puntero real (ratón). En pantallas táctiles, el estado "hover" se queda pegado tras tocar un botón hasta que se toca otra cosa, haciendo que un botón recién pulsado se vea de un color distinto al resto sin motivo. */ @media (hover: hover) { .btn-primary { --bs-btn-hover-bg: var(--bs-primary-dark); --bs-btn-hover-border-color: var(--bs-primary-dark); } } /* Modo oscuro: usa el color mode nativo de Bootstrap 5.3 (atributo data-bs-theme="dark" en ). Como --bs-body-bg está fijado arriba en :root con la misma especificidad que los selectores [data-bs-theme] de Bootstrap, hay que repetir aquí el valor oscuro para que gane por orden de aparición. */ [data-bs-theme="dark"] { --bs-body-bg: #14181c; --bs-body-bg-rgb: 20, 24, 28; --noticia-subtitle-color: var(--bs-gray-400); --bs-card-title-color: var(--bs-body-color); } /* Bootstrap, en modo oscuro, pone el texto del carrusel en negro por defecto (pensado para imágenes claras). Aquí las fotos siempre llevan un fondo oscuro semitransparente detrás del texto, así que se queda siempre en blanco, sea cual sea el tema. */ [data-bs-theme="dark"] .carousel .carousel-caption { color: #fff; } /* Las tablas que vienen del contenido de la noticia (TinyMCE) llevan colores de fondo fijos pensados para modo claro (algunas celdas con color, otras sin él). En modo oscuro les damos un fondo claro fijo a toda la tabla para que tanto las celdas con color como las que no lo tienen sigan siendo legibles. */ [data-bs-theme="dark"] .noticia-contenido table { background-color: #fff; color: #212529; } /* El contenido de la noticia viene de TinyMCE y puede traer imágenes con width/height fijos en el propio HTML (p.ej. width="900" al pegar desde otra web). Sin esto, en móvil desbordan la página horizontalmente y descolocan los botones fijos "Volver"/"Subir arriba". */ .noticia-contenido img { max-width: 100%; height: auto; } /* Espacio al final de cualquier página para que el contenido no quede tapado por los botones fijos "Subir arriba" (y "Volver" en las noticias) al hacer scroll hasta el final. */ body { padding-bottom: 6rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Escut de Benavites junto al nombre en la cabecera, en blanco y negro (escala de grises + contraste) para que quede discreto sobre el navbar oscuro en vez de competir con sus colores heráldicos originales. */ .escut-benavites { height: 34px; width: auto; filter: grayscale(1) brightness(1.8) contrast(1.15); } header.header { position: sticky; top: 0; z-index: 9999; /* Para asegurarte de que siempre esté encima */ } /* Estos modales se abren desde dentro del offcanvas, que vive dentro de header.header (z-index: 9999). Sin esto, quedarían tapados por el header al comparar stacking contexts. */ #modalFarmaciaGuardia, #modalTelefonsInteres { z-index: 10001; } .modal-backdrop { z-index: 10000; } .card-header[role="button"] { cursor: pointer; } /* Hover zoom para las tarjetas */ .hover-zoom { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-zoom:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } /* Estilo moderno para imágenes */ .card-img-top { width: 100%; height: auto; object-fit: cover; } /* Mejora de legibilidad en textos truncados */ .card-text { font-size: 0.9rem; line-height: 1.4; } .card-text, .card-body, .card-title, .card-subtitle { word-break: break-word; overflow-wrap: break-word; white-space: normal; } #btnTop, #btnBack { position: fixed; bottom: 24px; right: 24px; z-index: 99; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; transition: all 0.4s ease-in-out; pointer-events: none; /* evita clics cuando está oculto */ } #btnTop { opacity: 0; visibility: hidden; pointer-events: none; /* evita clics cuando está oculto */ /* Siempre el naranja normal del sitio, sin oscurecerse en hover/active/focus */ background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; } #btnTop.show { opacity: 1; visibility: visible; pointer-events: auto; /* habilita clics al mostrar */ } /* Solo visible en la página de inicio, para evitar toques accidentales mientras se lee un artículo u otras páginas. */ #btnWhatsApp { position: fixed; bottom: 24px; left: 24px; z-index: 99; width: 50px; height: 50px; display: none; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff !important; background-color: #25d366 !important; border-color: #25d366 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } body.pagina-inici #btnWhatsApp { display: flex; } #btnWhatsApp:hover { background-color: #1ebc59 !important; border-color: #1ebc59 !important; } /* Carrusel: alto fijo para que no varíe según el tamaño de cada imagen */ .carousel-item img { object-fit: cover; object-position: center; /* Centrado */ width: 100%; height: 220px; } /* Dar más presencia a las felcha del carrusel */ .carousel-control-prev-icon, .carousel-control-next-icon { width: 40px; height: 40px; background-size: 24px; background-color: rgba(0, 0, 0, 0.55); border-radius: 50%; transition: transform 0.2s ease; } .carousel-control-prev-icon:hover, .carousel-control-next-icon:hover { transform: scale(1.1); } /* Noticia clicable */ .noticia-clickable { transition: transform 0.2s ease; cursor: pointer; } .noticia-clickable:hover { transform: scale(1.01); box-shadow: 0 0 12px rgba(0, 0, 0, 0.15); } /* Efecto al tocar la tarjeta en móviles */ .noticia-clickable:active { background-color: rgba(0, 0, 0, 0.03); transform: scale(0.98); box-shadow: none; } /* cards noticia */ .card.noticia { transition: transform 0.2s ease, box-shadow 0.2s ease; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .card.noticia:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } .card.noticia .card-img-top { height: 200px; object-fit: cover; } .card.noticia .card-body { padding: 1rem; } .card.noticia .card-title { font-size: 1.25rem; font-weight: bold; color: var(--bs-primary); } .card.noticia .card-subtitle { font-size: 1rem; color: var(--noticia-subtitle-color); margin-bottom: 0.5rem; } .card.noticia .btn { margin-top: 1rem; } /* tamaño imagen en detalle_noticia.html */ .detalle-imagen { max-height: 400px; /* Ajusta según prefieras */ object-fit: contain; /* Imagen completa. Con cover recorta el alto */ width: 100%; } /* Estilos para la card fijada */ .card.fixed-card { position: relative; /* Necesario para posicionar la cinta */ overflow: hidden; /* Para que la cinta no se salga del borde de la card */ border: 2px solid var(--bs-primary); /* Opcional: añade un borde más grueso para destacar */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Opcional: para darle un poco de profundidad */ } .fixed-ribbon { position: absolute; top: 22px; right: -24px; width: 64px; height: 32px; display: flex; align-items: center; justify-content: center; color: white; background-color: var(--bs-primary); transform: rotate(45deg); transform-origin: 100% 0; } .fixed-ribbon .bi { transform: rotate(-45deg); } /* Selectores de móvil - incluir todos aquí */ @media (max-width: 576px) { .carousel-caption { font-size: 0.9rem; background-color: rgba(0, 0, 0, 0.5); /* fondo semitransparente */ padding: 0.5rem; bottom: 10px; left: 5%; right: 5%; border-radius: 0.5rem; } } /* Selectores de desktop - incluir todos aquí */ @media (min-width: 577px) { .carousel { border-radius: 12px; margin: calc(var(--bs-gutter-x) * 0.5); } .carousel-item img { height: 300px; } }