/* ============================================================
   visor-comun.css — Marco compartido de los visores 3D
   (herramientas VISTAS y SOMBRAS).

   Provee, una sola vez y con el mismo look, los controles que se
   superponen sobre cualquier viewport 3D:
     · barra de botones de cámara (abajo, centrada)
     · botón de ayuda (?) + botón de pantalla completa (arriba derecha)
     · leyenda de controles del mouse (popover)
     · modo pantalla completa

   El JS que lo monta vive en js/visor-comun.js. Cada herramienta
   conserva su propia lógica de cámara/render — esto es solo el marco.
   ============================================================ */

/* ── Controles arriba a la derecha: ayuda + pantalla completa ── */
.visor-controles {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 6;
    display: flex;
    gap: 6px;
}

.visor-btn {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-main);
    background-color: rgba(244, 244, 240, 0.95);
    border: 1.5px solid var(--text-main);
    box-shadow: 3px 3px 0 0 var(--text-main);
    padding: 0.4rem 0.55rem;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease,
                background-color 0.08s ease, color 0.08s ease;
}

.visor-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--text-main);
    background-color: var(--accent-brand);
    color: var(--bg-light);
}

.visor-btn:active {
    transform: translate(0, 0);
    box-shadow: 1px 1px 0 0 var(--text-main);
}

/* ── Leyenda de controles del mouse: fija abajo a la derecha ──
   Expandida por defecto; un clic la colapsa a una solapa "cómo moverse"
   y otro clic la vuelve a abrir. */
.visor-leyenda {
    position: absolute;
    bottom: 0.5rem;
    right: 0.6rem;
    z-index: 6;
    cursor: pointer;
    width: max-content;
    max-width: 230px;
}

/* Solapa colapsada (oculta mientras está expandida) */
.visor-leyenda__chip {
    display: none;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--bg-light);
    background-color: rgba(26, 28, 30, 0.85);
    border: 1.5px solid var(--text-main);
    padding: 0.32rem 0.55rem;
    cursor: pointer;
}

.visor-leyenda.colapsada .visor-leyenda__chip { display: block; }
.visor-leyenda.colapsada .visor-leyenda__cuerpo { display: none; }

.visor-leyenda__cuerpo {
    background-color: rgba(26, 28, 30, 0.92);
    border: 1.5px solid var(--text-main);
    box-shadow: 4px 4px 0 0 rgba(26, 28, 30, 1);
    padding: 0.5rem 0.65rem;
}

.visor-leyenda__fila {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    line-height: 1.3;
    color: var(--bg-light);
    padding: 0.18rem 0;
}

.visor-leyenda__icono {
    font-size: 0.95rem;
    flex-shrink: 0;
    width: 1.1rem;
    text-align: center;
}

.visor-leyenda__cerrar {
    margin-top: 0.35rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(244, 244, 240, 0.22);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-align: center;
    color: rgba(244, 244, 240, 0.6);
}

/* ── ViewCube (cubito de orientación, arriba a la derecha) ──
   Va debajo del botón de pantalla completa. El canvas lo dibuja
   js/visor-comun.js; acá solo el encuadre y el botón "casa". */
.visor-cubo {
    position: absolute;
    top: 48px;
    right: 12px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.visor-cubo__canvas {
    width: 92px;
    height: 92px;
    cursor: default;
}

.visor-cubo__home {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-main);
    background-color: rgba(244, 244, 240, 0.95);
    border: 1.5px solid var(--text-main);
    box-shadow: 2px 2px 0 0 var(--text-main);
    padding: 0.25rem 0.45rem;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.visor-cubo__home:hover {
    background-color: var(--accent-brand);
    color: var(--bg-light);
}

/* ── Barra de recorte (abajo a la izquierda): activar + restablecer ── */
.gizmo-barra {
    position: absolute;
    bottom: 0.5rem;
    left: 0.6rem;
    z-index: 6;
    display: flex;
    gap: 6px;
}

.gizmo-btn {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-main);
    background-color: rgba(244, 244, 240, 0.95);
    border: 1.5px solid var(--text-main);
    box-shadow: 2px 2px 0 0 var(--text-main);
    padding: 0.35rem 0.55rem;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease,
                background-color 0.08s ease, color 0.08s ease;
}

.gizmo-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 var(--text-main);
    background-color: var(--accent-brand);
    color: var(--bg-light);
}

.gizmo-btn:active {
    transform: translate(0, 0);
    box-shadow: 1px 1px 0 0 var(--text-main);
}

/* Estado activo del toggle: relleno acento para que se note que está ON */
.gizmo-btn--activo {
    background-color: var(--accent-brand);
    color: var(--bg-light);
}

/* ── Panel de herramientas (arriba al centro): chips por operación ──
   Una fila de chips (toggles) con su cuerpo plegable debajo. Cada chip
   lleva su color en --chip-color (recorte naranja, corte rojo, planta
   verde) como franja inferior, y al activarse se rellena con ese color. */
.visor-panel {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 230px);   /* no pisar el cubito ni el botón de fullscreen */
}

.visor-panel__chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.visor-panel__cuerpos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.visor-panel__chip {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-main);
    background-color: rgba(244, 244, 240, 0.95);
    border: 1.5px solid var(--text-main);
    border-bottom: 3px solid var(--chip-color, var(--text-main));
    box-shadow: 2px 2px 0 0 var(--text-main);
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease,
                background-color 0.08s ease, color 0.08s ease;
}

.visor-panel__chip:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 var(--text-main);
}

.visor-panel__chip:active {
    transform: translate(0, 0);
    box-shadow: 1px 1px 0 0 var(--text-main);
}

/* Estado activo: relleno con el color de la operación */
.visor-panel__chip--activo {
    background-color: var(--chip-color, var(--accent-brand));
    color: var(--bg-light);
}

/* Wrapper del cuerpo: transparente. El contenido que cada herramienta
   reubica adentro (controles de la banda 3) ya trae su propio card claro;
   acá solo apilamos cabecera + tarjeta y damos un ancho acotado. */
.visor-panel__cuerpo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(300px, 82vw);
}

/* Cabecera de la tarjeta: título de la operación + "✕ quitar". Lleva el
   color de la operación de fondo. */
.visor-panel__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background-color: var(--chip-color, var(--text-main));
    color: var(--bg-light);
    border: 1.5px solid var(--text-main);
    border-bottom: none;
    padding: 0.3rem 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.visor-panel__cerrar {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--bg-light);
    background: transparent;
    border: 1.5px solid var(--bg-light);
    padding: 0.12rem 0.4rem;
    cursor: pointer;
    line-height: 1;
}

.visor-panel__cerrar:hover {
    background-color: var(--bg-light);
    color: var(--text-main);
}

/* Chip con su tarjeta abierta: realce sutil para indicar cuál está desplegada */
.visor-panel__chip--abierto {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 0 var(--text-main);
}

.visor-panel__btn {
    margin-top: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-main);
    background-color: rgba(244, 244, 240, 0.95);
    border: 1.5px solid var(--text-main);
    box-shadow: 2px 2px 0 0 var(--text-main);
    padding: 0.3rem 0.5rem;
    cursor: pointer;
}

.visor-panel__btn:hover {
    background-color: var(--accent-brand);
    color: var(--bg-light);
}

/* ── Modo pantalla completa ─────────────────────────────────────
   Despega el viewport a toda la pantalla. El canvas se fuerza a
   llenar el 100%; cada herramienta reajusta su renderer al recibir
   el aviso de redimensión (adaptador.alRedimensionar). */
.visor-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 9000 !important;
    background-color: #ffffff;
}

.visor-fullscreen canvas {
    width: 100% !important;
    height: 100% !important;
}

/* En pantalla completa agrandamos un poco el cubito... */
.visor-fullscreen .visor-cubo__canvas {
    width: 112px;
    height: 112px;
}

/* ...y separamos todos los controles del borde de la pantalla, que pegados
   al filo quedan raros. (En el tamaño chico los offsets normales ya están
   bien.) Incluye la brújula de sombras (.sombras-visor-overlay). El
   !important es defensivo: gana sí o sí sobre los offsets base. */
.visor-fullscreen .visor-panel            { top: 2rem !important; }
.visor-fullscreen .visor-controles        { top: 2rem !important;    right: 2.2rem !important; }
.visor-fullscreen .visor-cubo             { top: 5rem !important;     right: 2.2rem !important; }
.visor-fullscreen .visor-leyenda          { bottom: 2rem !important;  right: 2.2rem !important; }
.visor-fullscreen .sombras-visor-overlay  { top: 2rem !important;     left: 2.2rem !important; }
.visor-fullscreen .gizmo-barra            { bottom: 2rem !important;  left: 2.2rem !important; }