/* NXP - CAMERA CONTROLS: iconos rojos sin fondo dentro de la barra superior */
#camera-controls { display: flex; align-items: center; }
.camera-controls-group {
    display: flex; align-items: center; gap: 4px;
    padding: 0 18px; min-height: 40px;
    border-left: 1px solid rgba(165, 0, 30, .35);
}
.camera-controls-title { margin-right: 10px; font: 12px sans-serif; color: rgba(165, 0, 30, .85); }
.camera-button, .camera-view-button {
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: transparent; color: #a5001e; font: 400 22px/1 sans-serif;
    cursor: pointer; touch-action: none;
}

.camera-button:hover, .camera-view-button:hover { background: rgba(165, 0, 30, .15); }
.camera-button:active, .camera-view-button:active { background: rgba(165, 0, 30, .28); }

#camera-controls, #camera-controls * {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
canvas { touch-action: none; }


/* NXP - RESPONSIVE de la barra superior: opciones, controles, casillas y logo se reordenan según el ancho.
   Más de 1250 px: una sola fila, con las casillas a la derecha de los controles y el logo al final */
#nxpbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#nxpopc {
    order: 1;
    display: flex;
}
#nxpbar #camera-controls {
    order: 2;
    margin-left: 12px;
    display: flex;
    align-items: center;
}
#nxpbar > .camera-controls-group[aria-label="Show"] {
    order: 2;
    margin-left: 12px;
}
#nxplogo {
    order: 3;
    margin-left: auto;
    padding-left: 16px;
    white-space: nowrap;
}
#nxplogo img { display: block; height: 26px; width: auto; }

/* Casillas Chairs y Tables */
.camera-filter {
    display: flex; align-items: center; gap: 6px; margin-right: 10px;
    font-size: 14px; color: #a5001e; white-space: nowrap; cursor: pointer;
}
.camera-filter input {
    -webkit-appearance: none; appearance: none;
    box-sizing: border-box; width: 20px; height: 20px; margin: 0;
    border: 2px solid #a5001e; border-radius: 4px; background: transparent; cursor: pointer;
}
.camera-filter input:checked {
    background: #a5001e url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 80% no-repeat;
}

/* Casilla Issue History: se separa de las demás con una raya vertical, como la de los grupos */
.camera-filter-history {
    align-self: stretch;
    margin-left: 8px;
    padding-left: 18px;
    border-left: 1px solid rgba(165, 0, 30, .35);
}

@media (pointer: coarse) { .camera-filter input { width: 22px; height: 22px; } }

/* Hasta 1460 px: se ocultan los rótulos de los grupos para que todo siga cabiendo en una fila */
@media (max-width: 1588px) {
    #nxpbar .camera-controls-title {
        display: none;
    }
}

/* Hasta 1250 px: dos filas. Arriba opciones y logo; debajo, juntos y centrados, los controles y las casillas.
   El elemento vacío ::before (ancho completo) separa las dos filas y hace de línea fina */
@media (max-width: 1455px) {
    #nxpbar {
        justify-content: center;
    }
    #nxpbar::before {
        content: '';
        order: 3;
        flex-basis: 100%;
        height: 0;
        border-top: 1px solid rgba(165, 0, 30, .35);
    }
    #nxplogo {
        order: 2;
    }
    #nxpbar #camera-controls {
        order: 4;
        margin-left: 0;
        padding: 4px 0;
    }
    #nxpbar > .camera-controls-group[aria-label="Show"] {
        order: 4;
        margin-left: 0;
        padding: 4px 18px;
    }
    #nxpbar .camera-controls-group:first-child {
        border-left: 0;
    }
}

/* De 721 a 940 px: las casillas no caben junto a los controles y pasan a una fila propia, centrada y sin la raya separadora */
@media (min-width: 721px) and (max-width: 1025px) {
    #nxpbar > .camera-controls-group[aria-label="Show"] {
        flex-basis: 100%;
        justify-content: center;
        border-left: 0;
    }
}

/* Hasta 720 px (móvil): arriba las casillas, después el logo centrado, las opciones en una línea y los controles,
   que pasan a otra línea si no caben */
@media (max-width: 720px) {
    #nxpbar {
        padding: 0 12px;
    }
    #nxpbar::before {
        display: none;
    }
    #nxpbar > .camera-controls-group[aria-label="Show"] {
        order: -1;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-left: 0;
        flex-wrap: wrap;
        row-gap: 4px;
        padding: 6px 0 0;
        border-top: 0;
        border-left: 0;
    }
    #nxpbar .camera-filter-history {
        margin-left: 4px;
        padding-left: 12px;
    }
    #nxplogo {
        order: 0;
        width: 100%;
        margin: 8px 0 4px;
        padding-left: 0;
        display: flex;
        justify-content: center;
    }
    #nxplogo img {
        height: 22px;
    }
    #nxpopc {
        order: 1;
        width: 100%;
    }
    #nxpopc button {
        flex: 1;
        min-height: 42px;
        padding: 10px 4px 5px 4px;
        font-size: 11px;
        white-space: nowrap;
        text-align: center;
    }
    #nxpbar #camera-controls {
        order: 2;
        flex: 0 1 auto;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        row-gap: 0;
        padding: 4px 0;
        border-top: 0;
    }
    #nxpbar .camera-controls-group {
        padding: 0 4px;
        border-left: 0;
    }
    #nxpbar .camera-button,
    #nxpbar .camera-view-button {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }
    #nxpbar .camera-filter-history {
        border: none;
        margin-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    .camera-controls-group:last-child {
        border: none;
        padding: 0 12px;
    }
}

@media (pointer: coarse) {
    .camera-button { width: 44px; height: 44px; }
}