/* Botón flotante de teléfonos de interés y emergencias (SiteKit Benita). */
#tbqp {
	--tbqp-paper: #ffffff;
	--tbqp-ink: #1d1c19;
	--tbqp-ink-soft: #5c5850;
	--tbqp-line: #e2dfd8;
	--tbqp-gold: #c39001;
	--tbqp-gold-text: #7a5800;
	--tbqp-gold-tint: #f6eed6;
	--tbqp-sos: #b42318;
	--tbqp-sos-tint: #fdecea;
	--tbqp-focus: #1e6fa8;
	--tbqp-shadow: 0 10px 30px -10px rgba(29, 28, 25, .45);
	font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: var(--tbqp-ink);
}
#tbqp *, #tbqp *::before, #tbqp *::after { box-sizing: border-box; }
#tbqp [hidden] { display: none !important; }
#tbqp :focus-visible { outline: 3px solid var(--tbqp-focus); outline-offset: 2px; }
#tbqp svg { flex: none; }

/* Botón: círculo dorado liso con el icono propio del Ajuntament en tinta (5,9:1), borde blanco exterior, sin texto */
#tbqp .tbqp-button {
	position: fixed; z-index: 9990;
	right: max(20px, env(safe-area-inset-right, 0px));
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	display: grid; place-items: center;
	width: 58px; height: 58px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 50%;
	background: var(--tbqp-gold); color: var(--tbqp-ink);
	font: inherit; line-height: 1; letter-spacing: 0; text-transform: none;
	cursor: pointer; box-shadow: var(--tbqp-shadow), 0 0 0 3px #ffffff;
	transition: transform .15s ease, background-color .15s ease;
}
#tbqp .tbqp-button:hover, #tbqp .tbqp-button:focus { background: #d29c0a; color: var(--tbqp-ink); }
#tbqp .tbqp-ic-open { width: 30px; height: 32px; }
#tbqp .tbqp-ic-close { width: 22px; height: 22px; }

/* Ficha */
#tbqp .tbqp-sheet {
	position: fixed; z-index: 9989;
	right: max(20px, env(safe-area-inset-right, 0px));
	bottom: calc(96px + env(safe-area-inset-bottom, 0px));
	width: 380px; max-width: calc(100vw - 40px); max-height: calc(100vh - 120px);
	display: flex; flex-direction: column;
	background: var(--tbqp-paper); border: 1px solid var(--tbqp-line); border-radius: 14px;
	box-shadow: var(--tbqp-shadow); overflow: hidden;
}
#tbqp .tbqp-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px 18px; border-bottom: 1px solid var(--tbqp-line); }
#tbqp .tbqp-title { margin: 0; font: inherit; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--tbqp-ink); text-transform: none; letter-spacing: 0; }
#tbqp .tbqp-hint { margin: 2px 0 0; font-size: 13px; color: var(--tbqp-ink-soft); }
#tbqp .tbqp-close {
	margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
	font: inherit; font-size: 14px; font-weight: 600; color: var(--tbqp-ink-soft);
	background: var(--tbqp-paper); border: 1px solid var(--tbqp-line); border-radius: 8px; cursor: pointer;
}
#tbqp .tbqp-close:hover, #tbqp .tbqp-close:focus { color: var(--tbqp-ink); background: var(--tbqp-paper); border-color: #cfcac0; }
#tbqp .tbqp-body { overflow-y: auto; padding: 10px 10px 6px; overscroll-behavior: contain; }
#tbqp .tbqp-group {
	margin: 12px 8px 6px; font: inherit; font-size: 13px; font-weight: 700; color: var(--tbqp-ink-soft);
	text-transform: none; letter-spacing: 0;
}
#tbqp .tbqp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#tbqp .tbqp-item {
	display: flex; align-items: center; gap: 12px; margin: 0;
	padding: 10px 10px 10px 14px; border: 1px solid var(--tbqp-line); border-radius: 10px; background: var(--tbqp-paper);
}
#tbqp .tbqp-who { min-width: 0; flex: 1; display: grid; }
#tbqp .tbqp-name { font-weight: 700; font-size: 15px; line-height: 1.25; }
#tbqp .tbqp-note { font-size: 13px; color: var(--tbqp-ink-soft); line-height: 1.3; }
#tbqp .tbqp-num { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; user-select: all; }
#tbqp .tbqp-call {
	display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 10px;
	background: var(--tbqp-gold); color: var(--tbqp-ink) !important; font-weight: 700; font-size: 15px;
	text-decoration: none !important; white-space: nowrap;
}
#tbqp .tbqp-call:hover, #tbqp .tbqp-call:focus { background: #d29c0a; }
#tbqp .tbqp-item.is-urgent { border-color: #e9a59e; background: var(--tbqp-sos-tint); }
#tbqp .tbqp-item.is-urgent .tbqp-num { color: var(--tbqp-sos); font-size: 24px; }
#tbqp .tbqp-item.is-urgent .tbqp-call { background: var(--tbqp-sos); color: #ffffff !important; }
#tbqp .tbqp-item.is-urgent .tbqp-call:hover, #tbqp .tbqp-item.is-urgent .tbqp-call:focus { background: #8f1c13; }
#tbqp .tbqp-more { display: grid; padding: 10px 8px 8px; }
#tbqp .tbqp-more a {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0;
	border-top: 1px solid var(--tbqp-line); color: var(--tbqp-gold-text) !important; font-weight: 600; text-decoration: none !important;
}
#tbqp .tbqp-more a:hover span, #tbqp .tbqp-more a:focus span { text-decoration: underline; text-underline-offset: 3px; }
#tbqp .tbqp-scrim { display: none; }

/* Móvil: hoja inferior a todo lo ancho */
@media (max-width: 600px) {
	#tbqp .tbqp-button { right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; }
	#tbqp .tbqp-sheet {
		left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 85vh;
		border-radius: 16px 16px 0 0; border-bottom: 0;
		padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}
	#tbqp .tbqp-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 9988; background: rgba(17, 17, 16, .45); }
	#tbqp .tbqp-item { flex-wrap: wrap; }
	#tbqp .tbqp-call { flex: 1 1 100%; justify-content: center; height: 48px; }
}

/* Aparición de derecha a izquierda. Solo se desplaza (sin tocar la opacidad), para que
   la ficha nunca quede transparente. En escritorio entra 48 px; en móvil, desde el borde derecho. */
@keyframes tbqp-slide-in { from { transform: translateX(48px); } to { transform: translateX(0); } }
#tbqp .tbqp-sheet:not([hidden]) { animation: tbqp-slide-in .24s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 600px) {
	@keyframes tbqp-slide-in-mobile { from { transform: translateX(100%); } to { transform: translateX(0); } }
	#tbqp .tbqp-sheet:not([hidden]) { animation-name: tbqp-slide-in-mobile; animation-duration: .28s; }
}
/* Entrada del botón al cargar la página: llega desde fuera de la pantalla, por la derecha.
   «backwards» lo mantiene fuera durante la espera y, al terminar, deja libre el transform
   para que siga funcionando el aumento al pasar el ratón. */
@keyframes tbqp-button-in { from { transform: translateX(calc(100% + 40px)); } to { transform: translateX(0); } }
#tbqp .tbqp-button { animation: tbqp-button-in .6s cubic-bezier(.2, .8, .2, 1) .5s backwards; }

/* Móvil: al bajar leyendo, el botón se aparta a la derecha para no tapar el texto; vuelve al subir,
   al pararse, al final de la página o al recibir el foco (quick-phones.js). */
@media (max-width: 600px) {
	#tbqp .tbqp-button { transition: transform .25s ease; }
	#tbqp.tbqp-tucked .tbqp-button { transform: translateX(calc(100% + 24px)); }
}

@media (prefers-reduced-motion: reduce) {
	#tbqp .tbqp-button { animation: none; }
	#tbqp .tbqp-sheet:not([hidden]) { animation: none; }
	#tbqp .tbqp-button { transition: none; }
	#tbqp .tbqp-button:hover, #tbqp .tbqp-button:focus { transform: none; }
}

@media print { .tbqp { display: none !important; } }