/* Dock flotante de nbweb.es */

.nbweb-dock {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9990;
	display: flex;
	flex-direction: row;
	gap: 10px;
	transition: transform .3s ease, opacity .3s ease;
}

.nbweb-dock__btn {
	width: 48px;
	height: 48px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 4px;
	background: #333333;
	color: #ffffff;
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
}

.nbweb-dock__btn:hover,
.nbweb-dock__btn:focus-visible {
	background: #c93832;
}

/* Doble anillo: blanco sobre el boton, rojo alrededor. El dock flota sobre
   contenido arbitrario y un solo color se pierde sobre algun fondo. */
.nbweb-dock__btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #c93832;
}

.nbweb-dock__btn svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	pointer-events: none;
}

/* El de subir arriba no desaparece: se atenua, para que el dock no cambie de ancho. */
.nbweb-dock__top.is-inactivo {
	opacity: .45;
	cursor: default;
}

.nbweb-dock__top.is-inactivo:hover {
	background: #333333;
}

/* Mientras el banner de cookies esta en pantalla, el dock se aparta.
   El selector va sobre el estado real del banner (.cmplz-show) y no sobre
   body.cmplz-banner-active: Complianz solo anade esa clase si soft_cookiewall
   esta activo, y aqui esta a 0. Se oculta en vez de desplazarse porque el alto
   del banner cambia entre escritorio y movil: cualquier translateY fijo miente
   en alguna pantalla. */
body:has(.cmplz-cookiebanner.cmplz-show) .nbweb-dock {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Panel del chat */
.nbweb-chat[hidden] {
	display: none !important;
}

.nbweb-chat {
	position: fixed;
	right: 20px;
	bottom: 80px;
	z-index: 9990;
	width: 392px;
	max-width: calc(100vw - 40px);
	height: 560px;
	max-height: calc(100vh - 120px);
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 20px 48px rgba(0, 0, 0, .20), 0 2px 8px rgba(0, 0, 0, .08);
	overflow: hidden;
	font-family: inherit;
}

.nbweb-chat__cabecera {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: #c93832;
	color: #ffffff;
	flex: 0 0 auto;
}

.nbweb-chat__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ffffff;
	object-fit: cover;
	flex: 0 0 auto;
}

.nbweb-chat__titulos {
	flex: 1;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.nbweb-chat__nombre {
	font-weight: 600;
	font-size: 15px;
}

.nbweb-chat__estado {
	font-size: 12px;
	opacity: .85;
	display: flex;
	align-items: center;
	gap: 5px;
}

/* El punto verde de "en linea" */
.nbweb-chat__estado::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #7bd88f;
	flex: 0 0 auto;
}

.nbweb-chat__cerrar {
	border: 0;
	background: none;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 6px;
	flex: 0 0 auto;
}

.nbweb-chat__cerrar:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.nbweb-chat__cuerpo {
	flex: 1;
	min-height: 0;
	background: #fafafa;
}

/* Mientras carga la libreria (962 KB): que no parezca que no pasa nada */
.nbweb-chat__cuerpo.is-cargando::after {
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	margin: 40px auto;
	border: 3px solid #ececee;
	border-top-color: #c93832;
	border-radius: 50%;
	animation: nbweb-girar .8s linear infinite;
}

@keyframes nbweb-girar {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.nbweb-chat__cuerpo.is-cargando::after {
		animation: none;
	}
}

.nbweb-chat__error {
	padding: 24px;
	text-align: center;
	color: #4a4e57;
	font-size: 15px;
	line-height: 1.4;
}

.nbweb-chat__reintentar {
	margin-top: 14px;
	border: 0;
	border-radius: 4px;
	background: #c93832;
	color: #ffffff;
	cursor: pointer;
	padding: 10px 18px;
	font-size: 14px;
	font-family: inherit;
}

.nbweb-chat__reintentar:hover,
.nbweb-chat__reintentar:focus-visible {
	background: #a92e29;
}

.nbweb-chat__reintentar:focus-visible {
	outline: 2px solid #4a4e57;
	outline-offset: 2px;
}

@media (max-width: 400px) {
	.nbweb-dock {
		right: 12px;
		bottom: 12px;
		gap: 8px;
	}

	.nbweb-dock__btn {
		width: 44px;
		height: 44px;
	}

	.nbweb-chat {
		right: 12px;
	}
}

/* Estados del boton de notificaciones */
.nbweb-dock__news-on {
	display: none;
}

.nbweb-dock__news.is-suscrito .nbweb-dock__news-off {
	display: none;
}

.nbweb-dock__news.is-suscrito .nbweb-dock__news-on {
	display: inline-block;
}

/* Panel de aviso (baja y permiso bloqueado) */
.nbweb-aviso[hidden] {
	display: none !important;
}

.nbweb-aviso {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99998;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.nbweb-aviso__caja {
	pointer-events: auto;
	max-width: 500px;
	width: calc(100% - 24px);
	margin: 0 12px;
	padding: 18px 20px;
	background: #ffffff;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 14px;
	align-items: center;
	font-family: inherit;
}

.nbweb-aviso__icono {
	width: 34px;
	height: 34px;
	fill: #c93832;
	grid-row: span 2;
}

.nbweb-aviso__texto {
	margin: 0;
	color: #4a4e57;
	font-size: 15px;
	line-height: 1.4;
}

.nbweb-aviso__acciones {
	grid-column: 2;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	align-items: center;
	margin-top: 12px;
}

.nbweb-aviso__secundario[hidden] {
	display: none !important;
}

.nbweb-aviso__secundario {
	border: 0;
	background: none;
	color: #4a4e57;
	cursor: pointer;
	padding: 10px 6px;
	font-size: 14px;
	font-family: inherit;
}

.nbweb-aviso__primario {
	border: 0;
	border-radius: 4px;
	background: #c93832;
	color: #ffffff;
	cursor: pointer;
	padding: 10px 18px;
	font-size: 14px;
	font-family: inherit;
}

.nbweb-aviso__primario:hover,
.nbweb-aviso__primario:focus-visible {
	background: #a92e29;
}

.nbweb-aviso__secundario:focus-visible,
.nbweb-aviso__primario:focus-visible {
	outline: 2px solid #4a4e57;
	outline-offset: 2px;
}

/*
 * El slidedown de OneSignal, con los colores de la web.
 * Se puede estilar porque NO es un iframe: OneSignal lo inyecta en nuestra
 * propia pagina. De fabrica viene con su azul #0078D1 y la tipografia del
 * sistema, que canta al lado del resto del sitio.
 *
 * DESCUBIERTO AL VERIFICAR (Paso 6): los selectores propuestos en el brief
 * (`#onesignal-slidedown-container .slidedown-button.primary`, etc.) no
 * ganaban por especificidad. El CSS propio de OneSignal
 * (onesignal.com/sdks/web/v16/OneSignalSDK.page.styles.css) envuelve sus
 * reglas en selectores del tipo
 * `:is(#onesignal-slidedown-container,#onesignal-popover-container)
 * #onesignal-slidedown-dialog ...`, que valen DOS ID (el contenedor Y el
 * dialogo, que tiene id="onesignal-slidedown-dialog" ademas de la clase
 * .onesignal-slidedown-dialog) mas dos clases. Nuestra regla original solo
 * sumaba un ID. Se soluciona subiendo la especificidad con el ID real del
 * dialogo y la ruta real del DOM (footer/body), tal y como pide el brief:
 * "sube la especificidad del selector antes que recurrir a !important".
 *
 * Dos excepciones si necesitan !important, documentadas aqui porque el
 * brief pide explicarlo: el `color` de `.secondary` y el `color` de
 * `.slidedown-body-message` estan declarados con !important en el CSS de
 * OneSignal. Ninguna especificidad gana a un !important ajeno; hace falta
 * responder con otro !important (y con especificidad igual o mayor, para
 * ganar el empate entre reglas importantes: la suya carga despues que la
 * nuestra en el <head>, asi que un empate exacto lo gana ella).
 */
#onesignal-slidedown-container #onesignal-slidedown-dialog.onesignal-slidedown-dialog {
	font-family: inherit;
}

#onesignal-slidedown-container #onesignal-slidedown-dialog .slidedown-body .slidedown-body-message {
	color: #4a4e57 !important;
}

#onesignal-slidedown-container #onesignal-slidedown-dialog .slidedown-footer .slidedown-button.primary {
	background: #c93832;
	border-radius: 4px;
}

#onesignal-slidedown-container #onesignal-slidedown-dialog .slidedown-footer .slidedown-button.primary:hover {
	background: #a92e29;
}

#onesignal-slidedown-container #onesignal-slidedown-dialog .slidedown-footer .slidedown-button.secondary {
	color: #4a4e57 !important;
	border-radius: 4px;
}

/*
 * El icono, con fill: OneSignal lo pinta como <img src="data:image/svg+xml,...">
 * con el color grabado DENTRO del propio SVG codificado en la URI, no como
 * <svg> inline. La propiedad CSS fill no tiene ningun efecto sobre un <img>,
 * suba la especificidad que suba: no es un problema de cascada, es que el
 * elemento no es pintable por fill desde fuera. Se deja la regla declarada
 * por si OneSignal cambia el icono a SVG inline en una version futura, pero
 * hoy no tiene efecto. Documentado en el informe de la Tarea 12.
 */
#onesignal-slidedown-container #onesignal-slidedown-dialog .slidedown-body-icon .default-icon {
	fill: #c93832;
}

@media (max-width: 400px) {
	.nbweb-aviso__caja {
		padding: 14px;
	}

	.nbweb-aviso__acciones {
		margin-top: 10px;
	}
}