/* =========================================
   ESTILOS GENERALES Y WEB
   ========================================= */
:root { 
    --primary-blue: #0056b3; 
    --text-dark: #333333; 
    --bg-light: #f4f6f9; 
}

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

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg-light); 
    color: var(--text-dark); 
    line-height: 1.6; 
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.text-center { text-align: center; }

/* Nav & Header */
#navbar { background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 1rem 0; position: sticky; top: 0; z-index: 100; }
.nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.logo { font-weight: 600; font-size: 1.2rem; color: var(--primary-blue); }
.btn-outline { border: 2px solid var(--primary-blue); color: var(--primary-blue); padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; font-weight: 500; transition: all 0.2s; }
.btn-outline:hover { background: var(--primary-blue); color: white; }

.page-header { padding: 4rem 0 2rem; }
.page-header h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.highlight { color: var(--primary-blue); }
.page-header p { max-width: 800px; margin: 0 auto; font-size: 1.1rem; color: #666; }
.simulator-wrapper { padding: 2rem 0 5rem; position: relative; }

/* Panel Instrucciones */
.instruction-panel { background: #e3f2fd; border-left: 5px solid #2196f3; padding: 1.5rem; border-radius: 4px; margin-bottom: 2rem; transition: all 0.3s ease; }
.instruction-panel h3 { color: #0d47a1; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 10px; }
.instruction-panel p { color: #1565c0; font-size: 1rem; }
.v-btn-simple { cursor: pointer; transition: all 0.2s; border-radius: 4px; border: 1px solid transparent; }
.v-btn-simple:hover { filter: brightness(0.95); }

.site-footer { background: #333; color: white; text-align: center; padding: 2rem; margin-top: 4rem; }

/* =========================================
   CLON EXACTO DE INTERFAZ VEYON (ESCRITORIO)
   ========================================= */
.veyon-app { 
    width: 100%; 
    max-width: 1100px; 
    margin: 0 auto; 
    background: #f0f0f0; 
    border: 1px solid #999; 
    border-radius: 6px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    position: relative; 
}

/* Título y Herramientas */
.v-titlebar { background: linear-gradient(to bottom, #d5e5f5, #a3c1e4); border-bottom: 1px solid #8e9cb1; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; height: 30px; user-select: none; }
.v-title-left { font-size: 12px; color: #000; display: flex; align-items: center; gap: 8px; font-weight: 500;}
.v-title-right { display: flex; height: 100%; }
.win-btn { background: transparent; border: none; width: 35px; height: 100%; cursor: pointer; color: #333; font-size: 10px; }
.win-btn:hover { background: rgba(255,255,255,0.4); }
.win-btn.close:hover { background: #e81123; color: white; }

.v-toolbar { background: #404040; display: flex; padding: 5px 10px; gap: 2px; border-bottom: 1px solid #333; flex-wrap: wrap; }
.v-tool-btn { background: transparent; border: 1px solid transparent; border-radius: 4px; color: white; padding: 8px; min-width: 80px; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; font-size: 11px; font-family: 'Segoe UI', Tahoma, sans-serif; }
.v-tool-btn:hover { background: #555; border: 1px solid #777; }
.v-tool-btn.active { background: #2a2a2a; border: 1px solid #111; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); }
.icon-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.v-divider { width: 1px; background: #222; border-right: 1px solid #555; margin: 0 5px; }

/* Workspace & Sidebar */
.v-workspace { display: flex; height: 500px; background: #e0e0e0; position: relative; }
.v-sidebar { width: 220px; background: white; border-right: 1px solid #a0a0a0; display: flex; flex-direction: column; }
.v-sidebar-header { display: flex; border-bottom: 1px solid #d9d9d9; background: #f5f5f5; font-size: 11px; color: #333; }
.v-sidebar-header span { padding: 4px 8px; border-right: 1px solid #d9d9d9; }
.col-name { flex: 2; }
.col-user { flex: 1; border-right: none !important; }
.v-tree-list { flex: 1; padding: 5px; overflow-y: auto; font-size: 12px; }
.tree-item { padding: 4px; display: flex; align-items: center; gap: 5px; color: #000; cursor: pointer; }
.tree-item:hover { background: #e5f3ff; }
.tree-item.active { background: #cce8ff; border: 1px dotted #99d1ff; }
.v-sidebar-bottom { padding: 10px; border-top: 1px solid #d9d9d9; background: #f0f0f0; display: flex; flex-direction: column; gap: 8px; }
.v-sidebar-bottom input { width: 100%; padding: 4px; border: 1px solid #abadb3; font-size: 11px; outline: none; }
.v-sidebar-bottom input:focus { border-color: #0078d7; }
.v-btn-simple { padding: 4px; font-size: 11px; background: linear-gradient(to bottom, #f0f0f0, #e0e0e0); border: 1px solid #abadb3; border-radius: 2px; cursor: pointer; }

/* Grilla de PCs */
.v-grid-area { flex: 1; background: white; padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows: min-content; gap: 25px 15px; overflow-y: auto; }
.v-pc { display: flex; flex-direction: column; align-items: center; transition: all 0.2s ease; cursor: pointer; padding: 5px; border-radius: 4px; border: 1px solid transparent; position: relative; }
.v-pc:hover { background: #f0f8ff; border-color: #d0e3f5; }
.v-pc.selected { background: #cce8ff; border: 1px solid #99d1ff; }
.v-pc.selected .monitor-frame { box-shadow: 0 0 0 2px #0078d7; }

.monitor-frame { width: 70px; height: 50px; background: #2a2a2a; border-radius: 3px; padding: 3px; position: relative; box-shadow: 0 3px 6px rgba(0,0,0,0.2); transition: all 0.2s ease; }
.monitor-screen { width: 100%; height: 100%; background: #888; transition: background 0.3s; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }

/* =========================================
   ESTADOS DE LA PANTALLA
   ========================================= */
.v-pc.status-locked .monitor-screen { background: #C82333; } 
.v-pc.status-demo .monitor-screen { background: #0056b3; } 
.v-pc.status-off .monitor-screen { background: #111; } 
.v-pc.status-normal .monitor-screen { background-image: linear-gradient(135deg, #4caf50 0%, #4caf50 20%, #ffffff 20%, #ffffff 100%); }

/* Animación de Encendido (Booting) */
.v-pc.status-booting .monitor-screen { background: #000; animation: bootUp 2s forwards; }
@keyframes bootUp {
    0% { background: #000; }
    30% { background: #222; }
    60% { background: #0078d7; } /* Pantalla azul simulando Windows */
    100% { background-image: linear-gradient(135deg, #4caf50 0%, #4caf50 20%, #ffffff 20%, #ffffff 100%); }
}

/* Modo Gamificación (Alumno Distraído / Pide Ayuda) */
.v-pc.status-distracted .monitor-screen { background: #ff9800; animation: flashWarning 1s infinite alternate; }
.v-pc.status-distracted .icon-overlay.gamepad { display: block; color: #fff; font-size: 24px; }
.v-pc.status-help .monitor-screen { background: #ffeb3b; }
.v-pc.status-help .icon-overlay.hand { display: block; color: #333; font-size: 24px; animation: waveHand 2s infinite; }

@keyframes flashWarning { 0% { background: #ff9800; } 100% { background: #f57c00; } }
@keyframes waveHand { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } }

/* Íconos superpuestos */
.icon-overlay { font-size: 20px; color: white; display: none; }
.v-pc.status-locked .icon-overlay.lock { display: block; }
.v-pc.status-demo .icon-overlay.demo { display: block; }

/* Burbuja de Mensaje */
.msg-bubble { position: absolute; top: -15px; right: -5px; background: #ffeb3b; color: #000; font-size: 14px; padding: 4px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.4); display: none; z-index: 5; animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.v-pc.has-message .msg-bubble { display: block; }
@keyframes popUp { 0% { transform: scale(0); } 100% { transform: scale(1); } }

.monitor-stand { width: 24px; height: 10px; background: #b0b0b0; position: relative; }
.monitor-base { width: 40px; height: 4px; background: #888; border-radius: 2px 2px 0 0; margin: 0 auto;}
.pc-label { margin-top: 5px; font-size: 11px; color: #000; user-select: none; }

/* =========================================
   ÁREA DE CAPTURAS DE PANTALLA (Pestaña 2)
   ========================================= */
.v-screenshots-area { flex: 1; background: white; padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: min-content; gap: 20px; overflow-y: auto; }
.screenshot-item { background: #f5f5f5; border: 1px solid #ccc; padding: 5px; text-align: center; }
.screenshot-img { width: 100%; aspect-ratio: 16/9; background: #ddd url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>') no-repeat center center; border: 1px solid #aaa; margin-bottom: 5px; cursor: zoom-in; }
.screenshot-name { font-size: 10px; color: #333; }

/* Status Bar */
.v-statusbar { background: #f0f0f0; border-top: 1px solid #d9d9d9; height: 25px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.status-tabs { display: flex; height: 100%; }
.tab { padding: 0 15px; display: flex; align-items: center; gap: 5px; border-right: 1px solid #d9d9d9; cursor: pointer; }
.tab.active { background: white; border-top: 2px solid #0078d7; margin-top: -1px; }
.tab i { color: #0078d7; }
.status-search { color: #888; padding: 0 10px; flex: 1; border-left: 1px solid white; }
.status-icons { display: flex; align-items: center; gap: 10px; padding: 0 10px; color: #666; }
.status-icons input[type="range"] { width: 60px; }

/* =========================================
   TOOLTIP ESTILO WINDOWS
   ========================================= */
.v-tooltip { position: fixed; background: #ffffe1; border: 1px solid #000; padding: 8px; font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 11px; color: #000; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; width: max-content; }
.v-tooltip.show { opacity: 1; }
.tt-header { font-weight: 600; margin-bottom: 4px; border-bottom: 1px solid #ccc; padding-bottom: 2px; }

/* =========================================
   MENÚ CONTEXTUAL (Clic Derecho)
   ========================================= */
.v-context-menu { position: absolute; background: #f2f2f2; border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); width: 220px; font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 12px; z-index: 9000; display: none; border-radius: 2px; }
.v-context-menu.active { display: block; }
.ctx-header { background: #e0e0e0; padding: 5px 10px; font-weight: bold; border-bottom: 1px solid #ccc; color: #333; }
.v-context-menu ul { list-style: none; padding: 5px 0; }
.v-context-menu li { padding: 8px 15px; cursor: pointer; display: flex; align-items: center; gap: 10px; color: #000; }
.v-context-menu li:hover { background: #91c9f7; color: #000; }
.ctx-divider { height: 1px; background: #ccc; margin: 4px 0; }

/* =========================================
   MODALES (Control Remoto y Mensajes)
   ========================================= */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; backdrop-filter: blur(5px); }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-window { background: #f0f0f0; width: 90%; max-width: 900px; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); display: flex; flex-direction: column; transform: scale(0.95); transition: transform 0.3s ease; border: 1px solid #777;}
.modal-overlay.active .modal-window { transform: scale(1); }
.modal-titlebar { background: #333; color: white; display: flex; justify-content: space-between; align-items: center; padding: 8px 15px; font-size: 14px; }
.modal-close { background: none; border: none; color: white; font-size: 16px; cursor: pointer; }
.modal-close:hover { color: #ff4c4c; }
.modal-content { padding: 20px; display: flex; flex-direction: column; align-items: center; background: #222; }
.remote-screen-sim { width: 100%; aspect-ratio: 16/9; background: url('https://images.unsplash.com/photo-1614624532983-4ce03382d63d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80') center/cover; position: relative; border: 2px solid #555; cursor: crosshair; }
.remote-cursor { position: absolute; top: 50%; left: 50%; color: white; font-size: 24px; text-shadow: 0 2px 5px rgba(0,0,0,0.5); animation: moveCursor 4s infinite; }
.remote-taskbar { position: absolute; bottom: 0; width: 100%; height: 35px; background: rgba(30,30,30,0.9); display: flex; align-items: center; gap: 15px; padding: 0 15px; color: white; }
.modal-instructions { margin-top: 15px; color: #aaa; font-size: 13px; text-align: center; }

@keyframes moveCursor { 
    0%, 100% { transform: translate(0,0); } 
    25% { transform: translate(100px, -50px); } 
    50% { transform: translate(150px, 80px); } 
    75% { transform: translate(-50px, 20px); }
}

/* =========================================
   RESPONSIVE DESIGN
   ========================================= */
@media (max-width: 900px) { 
    .v-sidebar { display: none; } 
    .v-toolbar { overflow-x: auto; flex-wrap: nowrap; } 
    .v-grid-area { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}