:root {
    --bg-main: #030712; 
    --bg-tree: #090d1a;      
    --bg-history: #ffffff;   
    --bg-command: #0b1124;   
    --bg-card: #f8fafc;      
    
    --color-maquina: #ffffff;
    --color-ot: #00ffff;       
    --color-tarea: #10b981;    
    --color-borrar: #ef4444;   
    
    --text-neon: #f3f4f6; 
    --text-dim: #4b5563;
    --glow-cyan: rgba(0, 243, 255, 0.25);
}

* { 
    box-sizing: border-box; 
    margin: 0; padding: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-main); color: var(--text-neon);
    display: flex; flex-direction: column; min-height: 100vh;
    overflow-x: hidden;
}

header {
    background: #01040a; border-bottom: 2px solid var(--color-ot);
    padding: 12px 20px; display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 4px 30px var(--glow-cyan); z-index: 1010; position: sticky; top: 0;
}
.header-left { display: flex; align-items: center; gap: 14px; }
.hud-title { font-weight: 900; font-size: 15px; letter-spacing: 2px; color: var(--color-ot); text-transform: uppercase; }

.btn-hud { background: #111827; border: 1px solid var(--color-ot); color: var(--color-ot); padding: 6px 12px; border-radius: 20px; cursor: pointer; font-size: 14px; }
.btn-undo-global { display: none; background: #111827; border: 1px solid var(--color-borrar); color: var(--color-borrar); padding: 6px 12px; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: bold; }

.voice-status { font-family: monospace; font-size: 11px; font-weight: bold; color: var(--color-ot); border: 1px solid var(--color-ot); padding: 6px 14px; border-radius: 30px; }
.voice-status.command-mode { border-color: var(--color-tarea); color: var(--color-tarea); background: rgba(16, 185, 129, 0.1); }

/* NAVEGACIÓN ENTRE HOJAS DE TRABAJO */
.hud-tab-bar { display: flex; background: #020613; border-bottom: 1px solid rgba(0, 243, 255, 0.15); padding: 4px 10px; gap: 6px; position: sticky; top: 55px; z-index: 1000; }
.tab-btn { flex: 1; background: transparent; border: none; color: #4b5563; padding: 10px 6px; font-size: 11px; font-weight: 800; letter-spacing: 1px; cursor: pointer; border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all 0.2s; }
.tab-btn span { font-size: 14px; opacity: 0.5; }
.tab-btn.active { color: #00f3ff; background: rgba(0, 243, 255, 0.05); }
.tab-btn.active span { opacity: 1; filter: drop-shadow(0 0 4px #00f3ff); }

/* CONTENEDOR DESLIZABLE MASTER DE LAS HOJAS */
.sheets-viewport { display: flex; width: 400%; flex: 1; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; }
.sheet-page { width: 25%; overflow-y: auto; background: #030712; display: flex; flex-direction: column; }

/* HOJA 0: ESTRUCTURA PLANTA Y CHAT */
.main-layout { display: flex; flex-direction: row; flex: 1; width: 100%; }
.sidebar-tree { background-color: var(--bg-tree); padding: 20px; width: 30%; display: flex; flex-direction: column; border-right: 1px solid rgba(0, 243, 255, 0.08); }
.panel-heading { font-size: 11px; text-transform: uppercase; color: #6b7280; letter-spacing: 1.5px; font-weight: 800; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 6px; }
.tree-scroll-area { flex: 1; overflow-y: auto; }

.tree-node { margin-left: 16px; margin-top: 4px; border-left: 1px dashed rgba(0, 243, 255, 0.1); padding-left: 10px; }
.tree-item { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-radius: 8px; cursor: pointer; margin-bottom: 4px; background: rgba(255,255,255,0.01); border: 1px solid rgba(255,255,255,0.03); }
.tree-item.selected { background: rgba(0, 243, 255, 0.04) !important; border-left: 3px solid #00f3ff !important; }
.node-label { font-size: 13px; font-weight: 600; }
.type-maquina { color: var(--color-maquina); }
.type-ot { color: var(--color-ot); }
.type-tarea { color: var(--color-tarea); }
.node-actions button { background: transparent; border: none; color: var(--color-borrar); cursor: pointer; }

.structure-buttons { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; justify-content: center; }
.btn-struct { width: 42px; height: 42px; border-radius: 50%; border: 1px solid transparent; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.02); }
#add-machine-btn { border-color: var(--color-maquina); }
#add-ot-btn { border-color: var(--color-ot); }
#add-task-btn { border-color: var(--color-tarea); }

.content-pane { display: flex; flex-direction: column; flex: 1; }
.history-wrapper { flex: 1; background-color: var(--bg-history); display: flex; flex-direction: column; }
.history-sticky-header { background: #0b1124; padding: 12px 20px; border-bottom: 2px solid var(--color-ot); display: flex; justify-content: space-between; align-items: center; }
#chat-target-info { font-family: monospace; font-size: 11px; font-weight: 800; color: var(--color-ot); }
.btn-hud-action { background: #10b981; border: none; color: #030712; padding: 6px 14px; border-radius: 20px; font-size: 11px; font-weight: 900; cursor: pointer; }
.history-container { padding: 20px; overflow-y: auto; flex: 1; min-height: 300px; }
.log-list { list-style: none; }
.log-item { background: var(--bg-card); padding: 16px; border-radius: 12px; margin-bottom: 12px; border-left: 5px solid var(--color-tarea); position: relative; box-shadow: 0 4px 6px rgba(0,0,0,0.02); cursor: pointer; }
.log-meta { font-family: monospace; font-size: 11px; color: #6b7280; display: flex; justify-content: space-between; margin-bottom: 6px; }
.text-result { font-size: 14px; color: #1f2937; line-height: 1.5; }
.btn-delete-log { position: absolute; top: 12px; right: 12px; background: transparent; border: none; color: #9ca3af; cursor: pointer; }

/* HOJA 1: CALENDARIO Y AGENDA ELEGANTE */
.agenda-layout { display: flex; flex: 1; height: 100%; }
.agenda-sidebar { width: 30%; background: #070c1a; padding: 16px; border-right: 1px solid rgba(255,255,255,0.05); }
.agenda-item { padding: 10px; border-radius: 6px; margin-bottom: 8px; font-size: 12px; }
.agenda-item.urgent { border-left: 4px solid var(--color-borrar); background: rgba(239, 68, 68, 0.02); }
.agenda-item.routine { border-left: 4px solid var(--color-tarea); background: rgba(16, 185, 129, 0.02); }
.agenda-time { font-family: monospace; color: var(--color-ot); font-weight: bold; display: block; }
.calendar-main { flex: 1; padding: 20px; display: flex; flex-direction: column; }
.calendar-header-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-weight: 900; color: #00f3ff; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; flex: 1; }
.calendar-day-box { background: #090e1e; border: 1px solid rgba(255,255,255,0.02); border-radius: 8px; min-height: 50px; padding: 6px; font-size: 11px; font-weight: bold; color: #6b7280; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.calendar-day-box.active-day { border-color: rgba(0,243,255,0.4); color: white; background: rgba(0,243,255,0.02); }
.calendar-indicator-dot { position: absolute; bottom: 4px; width: 5px; height: 5px; background: #00f3ff; border-radius: 50%; box-shadow: 0 0 6px #00f3ff; }

/* HOJA 2: CRONOGRAMA GANTT CRÍTICO */
.gantt-wrapper { padding: 20px; flex: 1; }
.gantt-container { background: #070c1a; border: 1px solid rgba(0,243,255,0.1); border-radius: 12px; overflow: hidden; }
.gantt-timeline-header { display: flex; background: #030712; border-bottom: 1px solid rgba(255,255,255,0.05); }
.gantt-task-col { width: 180px; padding: 12px; font-size: 11px; font-weight: 800; color: #6b7280; text-transform: uppercase; }
.gantt-time-slots { flex: 1; display: flex; }
.gantt-time-slots span { flex: 1; text-align: center; padding: 12px; font-size: 11px; color: #4b5563; border-left: 1px solid rgba(255,255,255,0.03); }
.gantt-row { display: flex; border-bottom: 1px solid rgba(255,255,255,0.03); align-items: center; }
.gantt-task-meta { width: 180px; padding: 14px; font-size: 13px; }
.gantt-task-meta small { display: block; color: #10b981; margin-top: 2px; }
.gantt-bars-area { flex: 1; position: relative; height: 50px; background: rgba(0,0,0,0.15); }
.gantt-bar { position: absolute; top: 12px; height: 26px; border-radius: 6px; font-size: 10px; font-weight: bold; display: flex; align-items: center; padding-left: 8px; color: #030712; cursor: pointer; }
.phase-1 { background: #00f3ff; box-shadow: 0 0 10px rgba(0,243,255,0.2); }
.phase-2 { background: #10b981; box-shadow: 0 0 10px rgba(16,185,129,0.2); }
.phase-3 { background: #f59e0b; box-shadow: 0 0 10px rgba(245,158,11,0.2); }

/* HOJA 3: TABLERO KANBAN DE PRODUCCIÓN */
.kanban-wrapper { display: flex; flex: 1; padding: 16px; gap: 12px; height: 100%; overflow-x: auto; }
.kanban-column { flex: 1; min-width: 230px; background: #070c1a; border-radius: 12px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.02); }
.column-header { padding: 14px; font-size: 11px; font-weight: 900; letter-spacing: 1px; text-align: center; background: rgba(0,0,0,0.2); border-radius: 12px 12px 0 0; }
.color-ideas { color: #f59e0b; border-bottom: 2px solid #f59e0b; }
.color-todo { color: #3b82f6; border-bottom: 2px solid #3b82f6; }
.color-progress { color: #00f3ff; border-bottom: 2px solid #00f3ff; }
.color-done { color: #10b981; border-bottom: 2px solid #10b981; }
.kanban-cards-area { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 200px; }
.kanban-card { background: #0d1527; border: 1px solid rgba(255,255,255,0.05); padding: 12px; border-radius: 8px; cursor: grab; }
.card-tag { font-size: 9px; font-weight: 900; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-bottom: 6px; }
.tag-low { background: rgba(245,158,11,0.15); color: #f59e0b; }
.tag-medium { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.tag-high { background: rgba(0, 243, 255, 0.15); color: #00f3ff; }
.tag-done { background: rgba(16, 185, 129, 0.15); color: #10b981; }

/* INGESTA MASTER Y BARRA CYBER-HUD FLOTANTE */
.ingest-panel { background: var(--bg-command); border-top: 1px solid rgba(0, 243, 255, 0.15); padding: 16px; display: flex; flex-direction: column; gap: 12px; z-index: 1005; }
.terminal-input { width: 100%; min-height: 70px; background-color: #02050c; border: 1px solid rgba(0, 243, 255, 0.15); border-radius: 12px; padding: 12px; color: var(--color-tarea); font-family: monospace; font-size: 15px; outline: none; resize: none; }

.huds-floating-bar { display: flex !important; align-items: center; justify-content: space-between; width: 96%; max-width: 500px; background: rgba(6, 15, 30, 0.8) !important; backdrop-filter: blur(16px); border: 2px solid #00f3ff !important; border-radius: 30px !important; padding: 8px 16px !important; box-shadow: 0 0 25px rgba(0, 243, 255, 0.25); margin: 6px auto !important; }
.btn-hud-orb { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hud-icon { font-size: 16px; }

.btn-cam-cyan { background: rgba(30, 58, 138, 0.3); border-color: rgba(59, 130, 246, 0.5); }
.btn-trash-red { background: rgba(127, 29, 29, 0.3); border-color: rgba(239, 68, 68, 0.5); }
.btn-save-green { background: rgba(6, 78, 59, 0.3); border-color: rgba(16, 185, 129, 0.5); }
.btn-status-shadow { background: rgba(31, 41, 55, 0.4); border-color: rgba(156, 163, 175, 0.2); color: #6b7280; }

.mic-orb-wrapper { position: relative; width: 70px; height: 70px; margin-top: -14px; display: flex; align-items: center; justify-content: center; }
.btn-mic-core { width: 56px; height: 56px; background: radial-gradient(circle, #091a36 0%, #020714 100%); border: 3px solid #00f3ff; color: #00f3ff; font-size: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: 0 0 15px rgba(0, 243, 255, 0.3); }
.btn-mic-core.recording { border-color: #ef4444; color: #fff; background: radial-gradient(circle, #7f1d1d 0%, #450a0a 100%); }
.mic-pulse-wave { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #00f3ff; opacity: 0; transform: scale(0.9); pointer-events: none; }
.btn-mic-core.recording + .mic-pulse-wave { animation: cyber-ripple 1.6s infinite cubic-bezier(0.1, 0.8, 0.3, 1); border-color: #ef4444; }

@keyframes cyber-ripple { 0% { transform: scale(0.85); opacity: 0.8; } 100% { transform: scale(1.45); opacity: 0; } }

/* RESUMEN DE COMANDOS */
.commands-summary-container { background: #060b18; border-top: 2px solid var(--color-tarea); padding: 20px; }
.summary-title { font-size: 13px; font-weight: 900; color: var(--color-tarea); letter-spacing: 1.5px; margin-bottom: 8px; }
.summary-note { font-size: 13px; color: #9ca3af; margin-bottom: 14px; }
.highlight-phrase { color: #fff; background: rgba(16, 185, 129, 0.2); padding: 2px 6px; border-radius: 4px; font-family: monospace; border: 1px dashed var(--color-tarea); }
.summary-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; color: #f3f4f6; }
.summary-table th { color: #6b7280; font-size: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.summary-table td { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.02); }

/* MODALES Y FLOTANTES */
.hud-tooltip { position: fixed; background: #01040a; border: 1px solid var(--color-ot); color: var(--color-ot); font-family: monospace; font-size: 11px; padding: 8px 12px; border-radius: 6px; pointer-events: none; opacity: 0; z-index: 3000; transition: opacity 0.15s; }
.custom-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(1, 2, 5, 0.9); z-index: 2000; justify-content: center; align-items: center; backdrop-filter: blur(8px); }
.text-viewer-box { background: #0b1124; border: 2px solid var(--color-ot); padding: 24px; border-radius: 16px; width: 90%; max-width: 450px; }
.text-viewer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; border-bottom: 1px dashed rgba(0, 255, 255, 0.2); padding-bottom: 10px; }
.text-viewer-content { max-height: 200px; overflow-y: auto; color: white; font-size: 14px; background: #030712; padding: 12px; border-radius: 8px; }
.btn-speak { background: var(--color-tarea); border: none; color: #030712; padding: 10px 18px; border-radius: 20px; font-weight: bold; cursor: pointer; }
.btn-close-viewer { background: transparent; border: 1px solid var(--color-borrar); color: var(--color-borrar); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }

/* OPTIMIZACIÓN MÓVIL ESTRICTA */
@media (max-width: 800px) {
    .main-layout { flex-direction: column; }
    .sidebar-tree { width: 100%; height: 220px; border-right: none; border-bottom: 1px solid rgba(0, 255, 255, 0.15); }
    .agenda-layout { flex-direction: column; }
    .agenda-sidebar { width: 100%; height: 150px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
    
    .ingest-panel { position: fixed !important; bottom: 0; left: 0; right: 0; background: transparent; pointer-events: none; padding: 8px; }
    .terminal-input, .huds-floating-bar { pointer-events: auto; }
    .terminal-input { background: rgba(2, 5, 12, 0.95); box-shadow: 0 -5px 20px rgba(0,0,0,0.6); }
    
    body { padding-bottom: 170px; }
    .commands-summary-container { margin-bottom: 160px; }
}