:root {
    --primary: #1e3a8a; --secondary: #2563eb; --bg-light: #f8fafc; 
    --success: #10b981; --warning: #f59e0b; --danger: #ef4444; 
    --border: #cbd5e1; --text-dark: #0f172a;
    --night-bg: #eef4ff; --night-header: #e0ebff;
    --multi-ot: #8b5cf6; 
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, sans-serif; }
body { background-color: var(--bg-light); color: var(--text-dark); padding-bottom: 40px; }
.header { background-color: var(--primary); color: white; padding: 15px 20px; }
.header-container { display: flex; justify-content: space-between; align-items: center; max-width: 1700px; margin: 0 auto; }
.version-badge { background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: bold;}

.dashboard-grid { display: flex; gap: 20px; padding: 20px; max-width: 1700px; margin: 0 auto; flex-wrap: wrap;}
.panel { background: white; padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.form-panel { flex: 1; min-width: 320px; }
.list-panel { flex: 2.8; min-width: 650px; }
.table-scroll-container { max-height: 280px; overflow-y: auto; margin-top: 8px; border: 1px solid #e2e8f0; border-radius: 4px; }

h2 { color: var(--primary); font-size: 1.1rem; margin-bottom: 10px; border-bottom: 2px solid #f1f5f9; padding-bottom: 6px; }
.form-group { margin-bottom: 12px; }
label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.85rem; color: #475569; }
input[type="text"], input[type="number"], input[type="time"], select { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 0.85rem; }
input[type="checkbox"] { cursor: pointer; transform: scale(1.2); }

.btn-primary { background-color: var(--primary); color: white; border: none; padding: 10px; width: 100%; border-radius: 4px; font-weight: bold; cursor: pointer; }
.btn-primary:hover { background-color: #111827; }
.btn-secondary { background-color: #64748b; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; font-weight: bold; }
.btn-action-prog { background-color: var(--warning); color: black; border: none; padding: 6px 10px; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 0.75rem; margin: 0 2px;}
.btn-action-sec { background-color: var(--secondary); color: white; border: none; padding: 8px 12px; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 0.8rem; }
.btn-modal-save { background-color: var(--success); color: white; border: none; padding: 10px 20px; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 0.9rem; }
.btn-icon { background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: 2px 4px; border-radius: 4px; transition: 0.2s; margin: 0 2px; }
.btn-icon:hover { background-color: #e2e8f0; }
.tree-toggle { background: none; border: none; cursor: pointer; font-weight: bold; color: var(--primary); width: 22px; font-size: 0.85rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { padding: 8px; text-align: left; border-bottom: 1px solid #e2e8f0; vertical-align: middle;}
th { background-color: #f8fafc; color: #64748b; position: sticky; top: 0; z-index: 2; }
.ot-table tbody tr { transition: background 0.2s; }
.ot-table tbody tr:hover { background-color: #f8fafc; }
.sub-ot-row { background-color: #fcfcfc; }
.sub-ot-row td:nth-child(2) { padding-left: 28px; border-left: 3px solid var(--secondary); font-style: italic;}

.badge { padding: 4px 8px; border-radius: 12px; color: white; font-size: 0.7rem; font-weight: bold; display: inline-block;}
.badge.success { background-color: var(--success); }
.badge.danger { background-color: var(--danger); }
.badge.info { background-color: var(--secondary); }
.badge.warning { background-color: var(--warning); color: black; }
.badge.multi { background-color: var(--multi-ot); }

.text-danger { color: var(--danger); font-weight: bold; }
.text-ok { color: #475569; font-weight: 500; }

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(2px);}
.modal-content { background-color: #fff; margin: 5% auto; padding: 25px; border-radius: 8px; width: 85%; max-width: 900px; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.2); animation: slideDown 0.3s ease-out;}
@keyframes slideDown { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.close-btn { position: absolute; right: 20px; top: 15px; font-size: 26px; font-weight: bold; color: #94a3b8; cursor: pointer; }
.config-ribbon { display: flex; justify-content: space-between; align-items: center; background: #f1f5f9; padding: 12px; border-radius: 6px; margin-bottom: 15px; }
.checkbox-label { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; }
.panel-actions-footer { margin-top: 20px; display: flex; justify-content: flex-end; align-items: center; border-top: 1px solid #e2e8f0; padding-top: 15px;}
.table-input { width: 60px; padding: 6px; text-align: center; border: 1px solid var(--border); border-radius: 4px;}
.table-select { width: 120px; padding: 6px; border: 1px solid var(--border); border-radius: 4px;}

/* Estilos para Alert Modal */
.alert-modal-content { max-width: 420px !important; padding: 30px 25px !important; border-top: 5px solid var(--primary); }
.alert-icon { font-size: 3.5rem; text-align: center; margin-bottom: 10px; }
.alert-icon.error { color: var(--danger); }
.alert-icon.warning { color: var(--warning); }
.alert-icon.info { color: var(--secondary); }

/* GANTT Drag and Drop */
.gantt-panel { margin: 0 20px 20px 20px; max-width: 1700px; margin-left: auto; margin-right: auto; }
.gantt-title-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.subtitle-info { font-size: 0.85rem; color: #475569; }
.gantt-view-scroll { overflow-x: auto; width: 100%; border: 1px solid var(--border); border-radius: 6px; background: #fff; min-height: 300px; }
.gantt-container-grid { display: grid; min-width: max-content; }

.gantt-header { 
    font-weight: 600; text-align: center; padding: 8px 2px; border-right: 1px solid #e2e8f0; 
    border-bottom: 2px solid #cbd5e1; font-size: 0.75rem; color: #475569; cursor: pointer; 
    user-select: none; background: #f8fafc; z-index: 5;
}
.gantt-header:hover { background-color: #cbd5e1; color: black; }
.gantt-header.title-col { background-color: #cbd5e1; color: var(--primary); cursor: default; position: sticky; left: 0; z-index: 10;}
.gantt-header.zoom-active { background-color: #fef08a; color: #854d0e; border-bottom-color: var(--warning); }
.gantt-header.night-header { background-color: var(--night-header) !important; }
.gantt-slot.night-slot { background-color: var(--night-bg) !important; }

.gantt-slot { border-right: 1px dotted #e2e8f0; border-bottom: 1px solid #f1f5f9; background: #fff; height: 42px; }
.gantt-slot.zoom-slot { background-color: #fffde6; border-right-style: dashed; }
.gantt-slot.zoom-slot.night-slot { background-color: #e3ecfc !important; }
.gantt-slot.drag-over { background-color: #d1fae5; border: 2px dashed var(--success); }

.gantt-station-name { 
    font-weight: 600; font-size: 0.75rem; padding: 0 10px; display: flex; align-items: center; 
    background: #f8fafc; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #f1f5f9; 
    position: sticky; left: 0; z-index: 10;
}

.ot-task {
    background-color: var(--primary); color: white; font-size: 0.7rem; font-weight: bold;
    display: flex; align-items: center; justify-content: center; border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); white-space: nowrap; overflow: hidden;
    cursor: grab; border-left: 4px solid rgba(255,255,255,0.5); 
    margin: 6px 1px; z-index: 15; transition: filter 0.2s;
}
.ot-task:active { cursor: grabbing; }
.ot-task.multi-task { background-color: var(--multi-ot); }
.ot-task:hover { filter: brightness(1.2); z-index: 20; }
.gantt-container-grid.focus-mode .ot-task { opacity: 0.15; }
.gantt-container-grid.focus-mode .ot-task.highlighted { opacity: 1; border: 2px solid var(--warning); box-shadow: 0 0 10px var(--warning); z-index: 25; }