/* Colores de la Admin Bar */
#wp-admin-bar-sa-analyze.sa-ok .ab-icon:before { color: #46b450 !important; }
#wp-admin-bar-sa-analyze.sa-warning .ab-icon:before { color: #ffb900 !important; }
#wp-admin-bar-sa-analyze.sa-critical .ab-icon:before { color: #f44336 !important; }

/* Cajas de CLS */
.sa-cls-box {
    position: absolute;
    border: 2px dashed #f44336;
    background: rgba(244, 67, 54, 0.1);
    z-index: 2147483647;
    pointer-events: none;
    box-sizing: border-box;
}

.sa-cls-label {
    position: absolute;
    top: -24px;
    left: -2px;
    background: #c62828 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    white-space: nowrap;
    font-family: 'Courier New', Courier, monospace !important;
    pointer-events: auto;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    border-radius: 2px 0 0 2px;
}

.sa-cls-close {
    position: absolute;
    top: -24px;
    right: -2px;
    background: #000 !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer;
    pointer-events: auto;
    border-radius: 0 2px 2px 0;
    display: block !important;
}

.sa-cls-close::before {
    content: "×" !important;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff !important; font-size: 18px; font-weight: bold;
    font-family: Arial, sans-serif;
}

/* ESTADO ACTIVO DEL BOTÓN EN ADMIN BAR */
#wp-admin-bar-sa-cls-visualizer.sa-visualizer-on > .ab-item {
    background-color: #00a32a !important; /* Verde Esmeralda */
    color: #ffffff !important; /* Texto en blanco */
    font-weight: bold !important;
}

/* Forzamos el icono del ojo en blanco */
#wp-admin-bar-sa-cls-visualizer.sa-visualizer-on > .ab-item::before {
    content: "\f177" !important; /* Icono Ojo */
    font-family: dashicons !important;
    margin-right: 6px;
    vertical-align: middle;
    color: #ffffff !important; /* Icono en blanco para máximo contraste */
    opacity: 1 !important;
}