/* Albero Genealogico — the tree's frame: a scrollable/zoomable box with small zoom buttons in a corner. */
.albero { --albero-h: 620px; position: relative; width: 100%; height: var(--albero-h); border: 1px solid #e3e6ea; border-radius: 12px; background: #fbfcfd; overflow: hidden; box-sizing: border-box; }
.albero-view { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; outline: none; }
.albero-view.albero-drag { cursor: grabbing; }
.albero-view:focus-visible { box-shadow: inset 0 0 0 2px #2f6fa5; }
.albero-view svg { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; -webkit-user-select: none; }
.albero-p text { pointer-events: none; }
.albero-tools { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; }
.albero-tools button { width: 32px; height: 32px; border: 1px solid #d5dae0; border-radius: 8px; background: #fff; color: #1f2a37; font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); padding: 0; }
.albero-tools button:hover { background: #eef3f8; }
.albero-msg { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; color: #5b6572; font-size: 14px; pointer-events: none; }
@media (max-width: 560px) {
	.albero { --albero-h: 70vh; border-radius: 8px; }
}