/* =========================================
   VARIABLES & RESET
   ========================================= */
:root {
    --bg-dark: #1a1a1a;
    --bg-panel: #1a1a1a;
    --bg-element: #222222;
    
    /* Colores Principales */
    --neon-green: #25d279;
    --neon-green-dim: #1a5c32;
    --neon-green-glow: rgba(46, 255, 117, 0.2);
    
    /* Acentos */
    --accent-pink: #ff5555;
    --accent-orange: #d48842;
    --accent-blue: #4287f5;
    
    /* Texto */
    --text-main: #ccc;
    --text-dim: #888888;
    
    /* Tipografías */
    --font-headers: 'Oswald', sans-serif;
    --font-tech: 'Share Tech Mono', monospace;
    --font-menu: 'Archivo', sans-serif;
    --font-texts: 'IBM Plex Mono', monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-headers);
    padding: 0px 20px 20px 20px;
    height: 100vh;
    display: flex;
    flex-direction: column;
}


/* =========================================
   COMPONENTES COMUNES (UTILITIES)
   ========================================= */
.framed-section {
    border: 1px solid var(--neon-green);
    padding: 15px;
    position: relative;
    margin-bottom: 20px;
    background: transparent;
}

.frame-title {
    position: absolute;
    top: -14px;
    left: 15px;
    background-color: var(--bg-dark);
    padding: 0 10px;
    color: var(--neon-green);
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 10;
}

/* =========================================
   0. CONTENEDOR PAGINA
   ========================================= */
.page {
    max-width: 1440px;
    margin: auto;
    width: 100%;
}

/* =========================================
   1. HEADER
   ========================================= */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 15px;
    margin-bottom: 25px;
    padding: 10px;
    background-color: #000;
}

.logo {
     font-family:  'Oswald', sans-serif;
    font-size: 32px;
    letter-spacing: 2px;
    line-height: 1;
    font-weight: 700;
    font-weight: bold;
}

.subtitle {
    font-family: var(--font-tech);
    font-size: 15px;
    color: var(--text-dim);
    letter-spacing: 1px;
    margin-left: 5px;
}

.main-nav a {
    color: var(--text-dim);
    text-decoration: none;
    margin: 0 1rem;
    font-size: 1rem;
    transition: color 0.3s;
    font-family: var(--font-menu);
    font-weight: 900;
}

.main-nav a:hover, .main-nav a.active {
    color: var(--neon-green);
}

/* =========================================
   2. LOADED CARTRIDGE
   ========================================= */
.cartridge-content {
    display: flex;
    gap: 40px;
    height: 112px;
    align-items: center;
}

.active-cartridge-display {
    border: 1px solid;
    border-color: var(--neon-green);
    width: 250px; /* v6: igual al ancho útil del panel CARTRIDGE LIBRARY (280px de columna - 15px*2 de padding) */
    flex-shrink: 0; /* nunca se achica: si falta espacio, es la tira de thumbnails la que cede */
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center; /* Centrar imagen */
    padding-right: 10px;
    font-family: var(--font-tech);
    margin-left: -6px;
    overflow: hidden; /* Cortar sobrante */
}

.active-cartridge-display img {
    margin-left: 6px;
    max-height: 100%; /* Ajuste imagen */
    max-width: 100%;
    object-fit: contain;
}

.thumbnail-strip {
    flex-grow: 1;
    display: flex;
    gap: 5px;
    overflow: hidden;
    /* CENTRADO DE THUMBNAILS SOLICITADO */
    justify-content: center; 
}

.thumb {
    /* Medidas fijas para el contenedor */
    width: 90px;
    height: 112px;
    flex-shrink: 0; /* Evita que se aplasten */
    background-color: var(--bg-element);
    opacity: 0.7;
    overflow: hidden; /* Importante para el recorte */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* AJUSTE DE IMAGEN DENTRO DE THUMBNAIL */
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto hace la magia: recorta la imagen grande */
    display: block;
}

/* =========================================
   3. SIDEBAR (LIBRARY)
   ========================================= */
.cartridge-rack {
    flex-grow: 1;
    display: flex;
    gap: 2px;
    flex-direction: column;
}

.cartridge {
    width: 244px;
/*    height: 49px;*/
    opacity: 0.7;
    padding-top: 5px;
    transition: opacity 0.3s ease; /* Transición suave */
    overflow: hidden;
    display: flex;
    align-items: center;
}

.cartridge img {
    max-width: 100%;
    height: auto;
}

/* HOVER EFFECT SOLICITADO */
.cartridge:hover {
    opacity: 1;
    cursor: pointer;
}

/* =========================================
   LAYOUT GRID PRINCIPAL
   ========================================= */
.main-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    flex-grow: 1;
}

/* =========================================
   SIDEBAR (ANALYTICS)
   ========================================= */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.metric-group {
    margin-bottom: 15px;
}

.metric-label {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-tech);
    font-size: 15px;
    margin-bottom: 4px;
    color: #ccc;
}

.progress-track {
    height: 20px;
    border: 1px solid var(--neon-green-dim);
    padding: 2px;
}

.progress-fill {
    height: 100%;
    background-color: var(--neon-green);
    box-shadow: 0 0 5px var(--neon-green-glow);
}

/* =========================================
   ANALYTICS PANEL v6.0 — bloques APPLIED INTENSITY / MEASURED EFFECT
   ========================================= */

/* Subtítulo de bloque dentro del Analytics Panel (distinto de .frame-title,
   que es el título del panel entero) */
.metric-block-subtitle {
    font-family: var(--font-tech);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin: 4px 0 10px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--neon-green-dim);
}

.metric-block + .metric-block {
    margin-top: 18px;
}

/* Estado PENDING (measured_effect sin medir, o steganography.coordinates
   sin procesar): barra vacía con borde punteado, texto atenuado.
   Distinto del caso GPS null, que directamente omite la fila entera. */
.metric-val.pending,
.overlay-value.pending {
    color: var(--text-dim);
    font-style: italic;
}

.progress-track.pending .progress-fill {
    background-color: transparent;
    box-shadow: none;
}

.progress-track.pending {
    border-style: dashed;
}

/* =========================================
   MODO KIOSKO v6.0 — oculta el nav del sitio para
   liberar espacio vertical en instalación física.
   No cambia el contenido de la obra, solo la navegación.
   ========================================= */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.header-right-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Switch EN|ES -- solo la UI por ahora; el contenido bilingüe real
   se conecta cuando integremos el Cambio 5 al template definitivo. */
.lang-switch {
    font-family: var(--font-tech);
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
}

.lang-sep {
    margin: 0 4px;
    color: var(--text-dim);
}

.lang-option {
    color: var(--text-dim);
}

.lang-option.active {
    color: var(--neon-green);
    font-weight: bold;
}

.lang-option:hover {
    color: var(--neon-green);
}

/* =========================================
   4. MAIN CONTENT AREA
   ========================================= */
.main-stage {
    display: grid;
    grid-template-columns: 1fr 200px; /* imágenes | columna de controles */
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "stage controls"
        "info   info";
    height: 100%;
    padding: 0;
    border: 1px solid var(--neon-green);
}

/* A. Stage View (Imágenes) */
.stage-view {
    grid-area: stage;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 30px 10px 0px 10px;
    min-height: 300px;
    justify-items: center; /* Centrar imágenes en sus columnas si sobra espacio */
}

.image-wrapper {
    position: relative;
    border: 1px solid var(--neon-green-dim);
    /* v6: 83% del tamaño original (540x675 -> 448x560), a pedido de Gustavo */
    height: 560px;
    width: 448px;
    background-color: #2a3b45;
}

.img-label {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-dark);
    color: var(--neon-green);
    padding: 0 8px;
    font-size: 18px;
    white-space: nowrap;
}

.viewport {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* AJUSTE IMAGEN PRINCIPAL */
.viewport img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Se asegura de llenar 540x675 usando imágenes grandes */
    display: block;
}

/* Glitch Effect */
.glitch-overlay {
    position: absolute;
    top: 30%;
    left: 30%;
    width: 40%;
    height: 40%;
    border: 1px dashed var(--neon-green);
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.05) 2px,
        rgba(46, 255, 117, 0.1) 2px,
        rgba(46, 255, 117, 0.1) 4px
    );
    box-shadow: 0 0 15px var(--neon-green-glow);
    pointer-events: none;
}

/* B. Controls */
.controls-container {
    grid-area: controls;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 20px 15px;
    width: 100%;
}

.control-module {
    position: relative;
    border: 1px solid var(--neon-green);
    width: 100%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.module-title {
    position: absolute;
    top: -10px;
    background: var(--bg-dark);
    color: var(--neon-green);
    padding: 0 5px;
    font-size: 18px;
}

/* Dial Styling */
.dial-wrapper {
    position: relative;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dial-knob {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid var(--neon-green);
    position: relative;
    transform: rotate(-55deg);
}

.dial-indicator {
    width: 8px;
    height: 25px;
    background: var(--neon-green);
    border: 2px solid var(--bg-panel);
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
}

.dial-label {
    position: absolute;
    font-family: var(--font-tech);
    font-size: 16px;
}
.dial-label.cero { left: 15px; bottom: 0px; }
.dial-label.cincuenta { left: 15px; bottom: 45px; }
.dial-label.cien { right: 5px; bottom: 45px; }
.dial-label.CLIP { right: 0px; bottom: 0px; }

/* Toggle Switch Styling */
.switch-wrapper {
    margin-bottom: 5px;
    margin-top: 20px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    border: 1px solid #555;
    transition: .4s;
    border-radius: 4px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 2px;
}

input:checked + .slider {
    background-color: var(--neon-green-dim);
    border-color: var(--neon-green);
}

input:checked + .slider:before {
    transform: translateX(24px);
    background-color: var(--neon-green);
}

.state-text {
    font-family: var(--font-tech);
    font-size: 16px;
    color: #666;
}
.state-text.on { color: var(--neon-green); }

/* C. Info Log */
.info-log-box {
    grid-area: info;
    margin: 0 20px 20px 20px;
    padding: 15px;
    background-color: #000;
    border: 1px solid #333;
    font-family: var(--font-texts);
    font-size: 0.9rem;
    color: #aaa;
    line-height: 1.4;
}

/* =========================================
   5. FOOTER
   ========================================= */
.main-footer {
    margin-top: 15px;
    border: 1px solid #333;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-tech);
    font-size: 14px;
    color: #ccc;
    background: #151515;
    text-transform: uppercase;
}

.main-footer a {
    color: var(--neon-green);
    text-decoration: none;
}

.main-footer a:hover, .main-footer a.active {
    color: var(--neon-green);
    background-color: #000000;
    text-decoration: underline;
}

/* =========================================
   BILINGÜE v6.0 (Cambio 5) — mecanismo general.
   Cada texto traducible se renderiza DOS VECES (una .lang-en, una .lang-es)
   y esta regla muestra solo la que coincide con [data-lang] en <html>.
   Nada de reemplazo de texto por JS: más robusto, y mismo patrón para
   contenido curatorial del JSON (Cambio 5) y texto fijo de interfaz.
   ========================================= */
html[data-lang="en"] .lang-es { display: none !important; }
html[data-lang="es"] .lang-en { display: none !important; }

/* Subtítulo del cartucho junto al título (Cambio v6.0) */
.cartridge-subtitle {
    font-size: 15px;
    font-weight: normal;
    text-transform: none;
    color: var(--neon-green);
    margin-left: 10px;
}

/* =========================================
   DEMO MODE v6.2 — indicador de inactividad
   ========================================= */
.demo-indicator {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    white-space: nowrap;
    margin-right: 4px;
}

.demo-label {
    font-family: var(--font-tech);
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--accent-pink);
    animation: demo-blink 1s steps(1) infinite;
}

@keyframes demo-blink {
    50% { opacity: 0.15; }
}

.demo-sublabel {
    font-family: var(--font-tech);
    font-size: 19px;
    letter-spacing: 1px;
    color: var(--text-dim);
}

/* =========================================
   RESPONSIVE — LAPTOP / TABLET GRANDE (v6.0, Cambio 4 del handoff)
   Un solo breakpoint por ahora (no hay target de móvil/phablet).
   Orden de achique acordado con Gustavo: 1) imágenes principales,
   2) columna de controles, 3) ancho del sidebar.
   La tira de thumbnails y el header NO se tocan acá: ya se auto-ajustan
   al ancho disponible (flex-grow + ventana deslizante existente).
   ========================================= */
@media (max-width: 1366px) {

    /* --- Anchos (ya probados) --- */
    .main-grid {
        grid-template-columns: 220px 1fr;
        gap: 12px;
    }

    .main-stage {
        grid-template-columns: 1fr 160px;
    }

    /* --- Imágenes principales: más chicas que en escritorio para ganar alto --- */
    .image-wrapper {
        width: 320px;
        height: 400px;
    }

    /* --- Cartucho activo + items de la Library ---
       El !important ya no hace falta: la regla width:300px!important que
       lo obligaba vivía en un <style> embebido en el HTML (no en este
       archivo) y ya la eliminamos ahí. */
    .active-cartridge-display {
        width: 220px;
        height: 60px;
    }

    .cartridge {
        width: 155px;
        padding-top: 2px;
    }

    .cartridge-rack {
        gap: 1px;
    }

    .sidebar {
        gap: 10px;
    }

    /* --- Encabezado más compacto --- */
    .logo {
        font-size: 17px;
    }

    .subtitle {
        font-size: 10px;
    }

    .main-header {
        padding: 0px 15px 5px 10px;
        margin-bottom: 8px;
    }

    .main-nav a {
        font-size: 0.7rem;
    }

    /* --- Paneles (framed-section) --- */
    .framed-section {
        padding: 10px;
        margin-bottom: 10px;
    }

    /* --- Títulos --- */
    .frame-title {
        font-size: 14px;
        position: absolute;
        top: -10px;
        left: 15px;
    }

    .module-title {
        font-size: 15px;
    }

    .img-label {
        font-size: 14px;
        top: -35px;
    }

    /* --- stage-view: menos padding arriba/costados, cero abajo --- */
    .stage-view {
        padding: 15px 0px 0px 10px;
    }

    /* --- Analytics Panel: texto y espaciado más chicos --- */
    .metric-label {
        font-size: 12px;
    }

    .metric-group {
        margin-bottom: 8px;
    }

    /* --- Controles: menos padding, texto más chico --- */
    .control-module {
        padding: 8px;
    }

    .dial-label {
        font-size: 12px;
    }

    .state-text {
        font-size: 12px;
    }

    .switch-wrapper {
        margin-top: 10px;
    }

    /* --- Info log e info del pie, más chicos --- */
    .info-log-box {
        font-size: 0.75rem;
        padding: 10px;
        line-height: 1.3;
        margin: 0 20px 0px 20px;
    }

    .main-footer {
        font-size: 10px;
        padding: 6px 10px;
        margin-top: 4px;
    }

    /* --- Fila LOADED CARTRIDGE + thumbnails: también más compacta --- */
    .cartridge-content {
        gap: 15px;
        height: 80px;
    }

    .thumb {
        width: 64px;
        height: 80px;
    }
}