﻿/* ============================================================
   WRAPPER GENERAL
   ============================================================ */
.pfa-wrapper {
    width: 100%;
    position: relative;
    
}

    /* CLEAN MODE: recortes activos */
    .pfa-wrapper.clean {
        overflow: hidden;
        
    }

    /* FULL MODE: sin recortes verticales */
    .pfa-wrapper.full {
        overflow: visible; /* permite ver el canvas completo */
    }

/* Contenedor del canvas */
.pfa-canvas-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* CLEAN MODE: recortes */
.pfa-wrapper.clean #pfa-canvas {
    width: calc(100% + 120px);
    height: calc(100% + 120px);
    margin-left: -60px;
    margin-right: -60px;
    margin-top: -40px;
}

/* ============================================================
   FULL MODE: aplicar recorte izquierdo para ocultar UI interna
   ============================================================ */
.pfa-wrapper.full .pfa-canvas-container {
    position: relative;
    overflow: hidden; /* recorta lo que sobresale */
}

.pfa-wrapper.full #pfa-canvas {
    position: relative;
    left: -220px; /* mueve el canvas hacia la izquierda */
    width: calc(100% + 220px); /* evita huecos a la derecha */
    height: 100%;
    margin: 0;
}

/* Spinner */
.pfa-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Botón Home */
.pfa-home-btn {
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 14px;
    cursor: pointer;
}

/* Reducir tamaño de los botones de zoom */
.pfa-wrapper.full .pf-zoom-container,
.pfa-wrapper.clean .pf-zoom-container {
    transform: scale(0.75);
    transform-origin: center;
}

/* Botón Home */
.pfa-home-btn {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 50;
    padding: 4px 8px;
    font-size: 18px;
}

/* Botón Play/Stop */
.pfa-rotate-btn {
    position: absolute;
    bottom: 10px;
    left: 60px;
    z-index: 50;
    padding: 4px 8px;
    font-size: 18px;
}

/* Ocultar todos los botones de zoom de PeakFinder */
.pf-zoom-container,
.pf-zoom,
.pf-zoom-in,
.pf-zoom-out,
.pf-controls,
.pf-controls-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.pf-ui,
.pf-ui-bottom,
.pf-ui-left,
.pf-ui-right {
    display: none !important;
}
